Odoo Widget 开发教程(三)
来源:互联网 发布:神虎数据论坛 编辑:程序博客网 时间:2024/06/02 01:20
控件(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>
0 0
- Odoo Widget 开发教程(三)
- Odoo Widget 开发教程(一)
- Odoo Widget 开发教程(二)
- Odoo 8.0深入浅出开发教程(三) Odoo安装与配置
- Odoo开发教程(三):如何定义一个ORM对象
- Odoo 8.0深入浅出开发教程
- Odoo 8.0深入浅出开发教程
- [精]Odoo 8.0深入浅出开发教程(五) Odoo开发模块
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Odoo 8.0深入浅出开发教程(二) Odoo简介
- Odoo 8.0深入浅出开发教程(四) Odoo入门
- Odoo 8.0深入浅出开发教程(九) Odoo模型层详解
- Android开发之App Widget(三)
- odoo 常用widget
- Odoo 8.0深入浅出开发教程(十) 附录
- Odoo开发教程-只读、唯一性验证
- spring实现AOP的两种方式以及实现动态代理方式
- 第13章 PE文件格式 13.1~13.2.2
- 各种音视频编解码学习详解 h264 ,mpeg4 ,aac 等所有音视频格式
- sublime Text3 3083的安装及常用配置
- [leetcode] 8.String to Integer (atoi)
- Odoo Widget 开发教程(三)
- Another app is currently holding the yum lock; waiting for it to exit...
- 《JAVA 核心技术 基础知识》第六章 笔记
- hdoj 3987 Harry Potter and the Forbidden Forest 【求所有最小割里面 最少的边数】
- android扫描带有广告应用原理
- 【最短路+最小费用】hdu 3790 最短路径问题
- imageData 使用方式
- HDU2112-HDU Today-最短路(dijkstra+字符转换)
- 写给想当程序员的朋友