如何在 odoo10 中创建一个简单的小部件

Question

如何在 odoo10 中创建一个简单的小部件？odoo10中的以下相应代码？我如何将此代码转换为 odoo10？

    local.HomePage = instance.Widget.extend({
        start: function() {
        this.$el.append("<div>Hello dear Odoo user!</div>");
        var greeting = new local.GreetingsWidget(this);
       return greeting.appendTo(this.$el);
    },
   });

Answer 1

在 Odoo-10 中创建小部件和模板

\n

小部件：

\n

\n
• 小部件是在 odoo 中显示屏幕、字段和属性的不同或替代表示形式。
\n
• 小部件允许使用不同的渲染模板更改视图，还允许根据需要进行设计。
\n

\n

例子：

\n

widget_name.js

\n

odoo.define('module.model_name', function(require) {\n    "use strict";\n    var Widget = require('web.Widget');\n    var core = require('web.core');\n    var Model = require('web.Model');\n  \n    var QWeb = core.qweb;\n    var _t = core._t;\n  \n    // here we are getting the value in an array.\n    var widget_name = Widget.extend({\n        //render your template\n        "template" : "template_name",\n    \n        //initialize\n        init : function () {\n            var self = this;\n            this._super(parent);\n            //initialize values to variables\n        }\n\n        //Binding Events\n        events : {\n            'click .class_ex': 'method1',\n            'click .class_ex1': 'method2',\n        },\n  \n        start : function() {\n            var self = this;\n            this._super(parent); \n            //your functionality code and logic\n        },\n\n        //creating functions\n        method1:function(){\n            //do something when click event fire on class_ex\n        },\n        method2:function(){\n            //do something when click event fire on class_ex\n        },\n    });\n\n    return widget_name;\n});\n

\n

您需要像这样在 odoo 中添加这个 .js 和 .css 文件。

\n

资产后端.xml

\n

<odoo>\n    <data>\n        <template id="assets_backend" inherit_id="web.assets_backend">\n            <xpath expr="script[last()]" position="after">\n            <script type="text/javascript" src="/module/static/src/js/widget_name.js"></script>\n            <link href="/module/static/src/css/home.css" rel="stylesheet"></link>\n            </xpath>\n        </template>\n    </data>\n</odoo>\n

\n

设计小部件模板：

\n

\n
• 创建 XML 并添加 xml:space="preserve" 作为模板标记中的参数。
\n
• t-name 是在 .js 文件中定义的模板的名称，并且在您使用它时，该名称将用作 XML 中的小部件名称。
\n

\n

tmpl.xml

\n

<?xml version="1.0"?>\n<templates id="template" xml:space="preserve">\n     <t t-name="template_name">\n        <div class=\xe2\x80\x9dmyclass\xe2\x80\x9d>\n            //design your template here \n            <div class=\xe2\x80\x9dclass_ex\xe2\x80\x9d>\n                //body\n            </div>\n            <div class=\xe2\x80\x9dclass_ex1\xe2\x80\x9d>\n                //body\n            </div>\n        </div>\n    </t>\n</templates> \n

\n

注意：无需在 tmpl.xml 文件中写入 odoo 标记。

\n

\n
• 模板名称必须与 .js (widget_name.js) 文件中给出的相同，这一点很重要。
\n

\n

如何使用小部件

\n

\n

• 通过操作或对象按钮使用小部件。

  \n
\n

• 如下所示，我们将 template_name 添加到 action_registry，因此现在我们可以使用该名称来使用 XML 执行。

  \n
\n

\n

例子：

\n

<record id="template_id" model="ir.actions.client">\n    <field name="name">template name</field>\n    <field name="tag">template_name</field>\n    <field name="target">new</field>\n</record>  \n

\n

\n
• 在此处设置您的“模板名称”
\n
• 您还可以在按钮、字段上编写一些事件，然后创建一个处理事件的函数并执行呈现模板的函数。单击对象按钮时返回此 id (template_id) 作为结果。
\n

\n

您也可以像这样使用您的小部件。

\n

<field name="mobile" widget="template_name" />               \n

\n