Odoo Widget 开发教程（三）

控件(widget)基础

在Odoo中，控件（widget）是显示页面内容的基本组件。

第一个控件

上述验证性模块已经包含了一个组件:

local.HomePage = instance.Widget.extend({
start: function() {
console.log("pet store home page loaded");
},
});

它继承了widget类，并重载了start()方法
文件尾部通过如下代码

instance.web.client_actions.add(
'petstore.homepage', 'instance.oepetstore.HomePage');

将控件注册为client_action。client_action将在后面介绍。在这里，client_action只是允许我们的控件在选择PetStore->PetStore->HomePage菜单时被调用并显示。

显示内容

控件的基础包含以下内容

• 创建控件
• 格式化控件数据
• 显示控件

HomePage 控件同样包含一个start()方法。该方法是控件正常生命周期的一部分，在控制加载的时候会被自动调用。我们能够通过它来显示内容。

所有的控件都有一个$el的jQuery对象，用来表示它们负责的页面部分。控件内容将插入在那个位置。$el默认为空的<div>模块。

<div>模块在没有内容时对用户是不可见的，下面通过jQuery来给控件添加一些内容。

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

当你打开PetStore->PetStore->HomePage时将显示消息。

HomePage 控件被Odoo Web使用和管理 我们定义一个新的控件。

local.GreetingsWidget = instance.Widget.extend({
start: function() {
this.$el.append("<div>We are so happy to see you again in this menu!</div>");
},
});

可以使用GreetingWidget的appendTo方法，来把GreetingsWidget添加到HomePage控件中。

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);
},
});

• HomePage 首先将自己的内容添加的DOM树中
• HomePage 然后实例化 GreetingsWidget
• 最后它告诉 GreetingsWidget 在何处插入自身，传递部分 $el 给GreetingsWidget.
  当appendto()方法被调用时，它要求控件将自己插入到合适的位置并显示内容。Start()方法将在调用appendto()时被调用。
  为了便于通过通过浏览器的DOM查看器进行调试，我们可以在类中添加className.

local.HomePage = instance.Widget.extend({
className: 'oe_petstore_homepage',
...
});
local.GreetingsWidget = instance.Widget.extend({
className: 'oe_petstore_greetings',
...
});

打开浏览器的DOM查看功能，上述代码将显示如下。

<div class="oe_petstore_homepage">
<div>Hello dear Odoo user!</div>
<div class="oe_petstore_greetings">
<div>We are so happy to see you again in this menu!</div>
</div>
</div>