Odoo Widget 开发教程(三)
2015-08-30 11:30
387 查看
控件(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>
相关文章推荐
- Path Sum
- POJ_2229 Sumsets(greedy)
- web容器的会话机制
- NotificationListenerService 监听应用程序消息
- OpenGl Mip贴图
- android 一个apk调用另一个apk
- web容器的会话机制
- 动态规划的思想来求解字符串分割问题
- Implement strStr()
- 初学hibernate之缓存
- 软链接和硬链接
- J2SE之面向对象
- jquery datatable 参数
- stm32定时器时钟问题
- Remove Element
- 剑指offer之O(1)算法删除指针所指向的节点
- (3)使用Highcharts开发JVM监控内存
- windows mobile 6.5 百度输入法 如何集成到系统中去
- MQTT协议简记
- 编辑距离及其回溯路径