Odoo 自定义Widgets 基础教程

Odoo 是一个强大的开源企业资源计划（ERP）系统，它提供了许多内置的小部件（Widgets）用于在应用程序中构建用户界面。但是，有时候这些内置小部件不能完全满足我们的需求，我们需要自定义小部件以实现更加个性化的功能。

在本教程中，我将向您展示如何创建自定义小部件。我们将创建一个简单的小部件，该小部件将显示一个按钮，当用户单击它时，会将其文本转换为大写字母。

步骤1：创建模块

首先，我们需要创建一个新的Odoo模块。您可以使用Odoo Studio或手动创建一个新模块，方法是在Odoo中创建一个新的文件夹，并在其中创建一个__init__.py文件以及一个名为__manifest__.py的文件。

__manifest__.py文件应包含以下内容：

{
    'name': 'Custom Widget Demo',
    'version': '1.0',
    'category': 'Tools',
    'summary': 'Demo module for custom widget development',
    'depends': ['base'],
    'data': [
        'views/assets.xml',
    ],
    'auto_install': True,
}

在上面的代码中，我们定义了模块的名称，版本，类别，摘要和依赖项。我们还定义了一个视图文件assets.xml，稍后我们将在其中定义我们的小部件。

步骤2：创建小部件

现在我们需要创建我们的自定义小部件。我们将创建一个名为CustomButton的小部件。在模块中创建一个新的文件夹，名为widgets，并在其中创建一个新的Python文件，名为custom_button.py。该文件将包含以下代码：

from odoo import fields, models


class CustomButton(models.AbstractModel):
    _name = 'custom.button'
    _description = 'Custom Button Widget'

    text = fields.Char()

    def button_action(self):
        self.text = self.text.upper()

在上面的代码中，我们定义了一个名为CustomButton的抽象模型。我们还定义了一个名为text的字段，该字段将用于存储用户输入的文本。我们还定义了一个名为button_action的方法，该方法将在用户单击按钮时调用，并将文本转换为大写字母。

步骤3：定义小部件视图

现在我们需要定义小部件的视图。在模块中创建一个新的文件夹，名为views，并在其中创建一个名为assets.xml的新文件。文件应包含以下代码：

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_backend" name="Custom Button Widget" inherit_id="web.assets_backend">
        <xpath expr="//script[last()]" position="before">
            <script type="text/javascript" src="/custom_widget_demo/static/src/js/custom_button.js"></script>
        </xpath>
        <xpath expr="//div[@class='o_form_sheet_bg']" position="inside">
            <div class="o_custom_button">
                <button t-attf-class="btn btn-primary o_form_button o_custom_button_button" t-attf-data-id="widget_{{widget_id}}">{{widget.text}}</button>
            </div>
        </xpath>
    </template>
</odoo>

在上面的代码中，我们定义了一个名为assets_backend的模板，该模板继承自web.assets_backend。我们还在模板中定义了一个包含一个按钮的div元素。按钮的文本将从小部件的text字段中获取，并且在单击按钮时将调用我们在CustomButton类中定义的button_action方法。

步骤4：定义JavaScript文件

最后，我们需要定义一个JavaScript文件，该文件将响应按钮的单击事件并调用Odoo RPC方法来更新小部件的text字段。在模块的static/src/js文件夹中创建一个新文件，名为custom_button.js，并将以下代码添加到文件中：

odoo.define('custom_widget_demo.custom_button', function (require) {
    'use strict';

    var core = require('web.core');
    var Widget = require('web.Widget');

    var QWeb = core.qweb;

    var CustomButton = Widget.extend({
        template: 'CustomButton',

        events: {
            'click .o_custom_button_button': '_onClick',
        },

        init: function (parent, options) {
            this._super.apply(this, arguments);
            this.text = options.text || '';
        },

        _onClick: function () {
            var self = this;
            this._rpc({
                model: 'custom.button',
                method: 'button_action',
                args: [[this.id]],
            }).then(function (result) {
                self.text = result;
                self.$('.o_custom_button_button').text(self.text);
            });
        },
    });

    core.action_registry.add('custom_button', CustomButton);

    return {
        CustomButton: CustomButton,
    };
});

在上面的代码中，我们定义了一个名为CustomButton的JavaScript对象，并在其中定义了一个模板，该模板对应于我们在assets.xml文件中定义的按钮元素。我们还定义了一个名为_onClick的方法，该方法将在按钮单击事件发生时调用。该方法通过RPC调用我们在CustomButton类中定义的button_action方法，并将返回值更新小部件的text字段。

步骤5：注册小部件

最后，我们需要在模块__manifest__.py文件中注册我们的小部件。我们将在data部分中添加以下代码：

'qweb': [
    'static/src/xml/custom_button.xml',
],

现在，我们已经成功地创建了一个自定义小部件。要使用它，请在Odoo中创建一个新的表单视图，并将小部件添加到该视图中。在视图中，您可以看到一个具有文本输入框和一个转换文本为大写字母的按钮的小部件。

总结

在本教程中，我向您展示了如何使用Odoo开发自定义小部件。通过创建自己的小部件，您可以为Odoo应用程序添加更加个性化的功能，并满足特定业务需求。