Odoo Widget 开发教程(二)

本文介绍了Odoo框架中JavaScript模块的定义方式,包括如何避免命名冲突及规范加载顺序。此外,还详细解释了如何利用openerp.web.Class()定义类,并展示了如何创建子类和重写方法。

Odoo JavaScript 模块

在Odoo框架中,是在组件(addons)中定义Javascript模块,以此避免名字空间的冲突和规范加载顺序。
oepetstore/static/js/petstore.js 包含了一个模块定义:

openerp.oepetstore = function(instance, local) {
local.xxx = ...;
}

在Odoo中,模块以全局变量openerp 的形式定义。函数名必须和模块名一致。 (在示例中为 oepetstore),框架才能找到并自动初始化。
当Odoo加载模块时,将传递两个变量:

  • 第一个变量是当前的Web Client实例。通过它可以访问Odoo定义的很多变量,如翻译、网络服务和其它模块定义的对象。
  • 第二个参数是由web client自动生成的本地名字空间。需要供其它模块访问的对象和变量定义在此名字空间中。

Javascript的类通过调用openerp.web.Class()的excend()方法定义。

var MyClass = instance.web.Class.extend({
say_hello: function() {
console.log("hello");
},
});

Extend()方法使用字典来描述类的方法和静态属性。在这个示例中,它有一个无参数的say_hello 方法。
类的实体通过new操作符生成。

var my_object = new MyClass();
my_object.say_hello();
// print "hello" in the console

可以通过this来访问实体的属性。

var MyClass = instance.web.Class.extend({
say_hello: function() {
console.log("hello", this.name);
},
});

var my_object = new MyClass();
my_object.name = "Bob";
my_object.say_hello();
// print "hello Bob" in the console

类可以通过定义init方法来对实体进行初始化。

var MyClass = instance.web.Class.extend({
init: function(name) {
this.name = name;
},
say_hello: function() {
console.log("hello", this.name);
},
});

var my_object = new MyClass("Bob");
my_object.say_hello();
// print "hello Bob" in the console

可以通过 extend()定义子类

var MySpanishClass = MyClass.extend({
say_hello: function() {
console.log("hola", this.name);
},
});

var my_object = new MySpanishClass("Bob");
my_object.say_hello();
// print "hola Bob" in the console

当重载父类方法时,可以通过 this._super() 来调用父类的方法。

var MySpanishClass = MyClass.extend({
say_hello: function() {
this._super();
console.log("translation in Spanish: hola", this.name);
},
});

var my_object = new MySpanishClass("Bob");
my_object.say_hello();
// print "hello Bob \n translation in Spanish: hola Bob" in the console
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应用程序添加更加个性化的功能,并满足特定业务需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值