Odoo的网页模块QWEB简述Word文档下载推荐.docx
《Odoo的网页模块QWEB简述Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《Odoo的网页模块QWEB简述Word文档下载推荐.docx（13页珍藏版）》请在冰豆网上搜索。
行调试开发了。
在前面的章节中，我们解释了JavaScript缺少命名空间机制，来分割在不同的JavaScript文件中声明的变量。
并且我们提出了模块模式这个简单方法。
模块模式（如app.js文件）：
（function（）{
app={};
function
main（）{
console.log（"
launchapplication"
）;
};
app.main=main;
}）（）;
在OpenERP的web框架内，有个类似于模块模式的等价物，集成了该框架的其余部分。
请注意，OpenERP的Web模块与其他OpenERP的addon模块概念上是不同的，一个addon模块是一个包含很多文件的文件夹，web模块仅仅是一个有命名空间概念的JavaScript。
1）模块
oepetstore/static/js/petstore.js声明了这样的模块:
openerp.oepetstore=function（instance）{
instance.oepetstore={};
instance.oepetstore.XXX=......;
}
在OpenERP的Web框架内，通过声明一个函数来声明一个JavaScript模块，并把这个函数放在全局变量openerp的属性内.这个属性名称必须和OpenERPaddon模块名称一致（这addon模块名为oepetstore，我应把函数赋值给openerp.oepetstore属性。
如果换成openerp.petstore属性，则无法正常运行）。
当Web客户端转载这个addon模块时，该函数将被调用。
将传入一个名为instance的参数，这个参数代表当前OpenERP的Web客户端实例，包含了所有相关当前会话数据，以及所有Web模块的变量。
在instance对象内创建与addon模块名称一致的新命名空间是个惯例。
这就是为什么我们在instance.oepetstore设置一个空dictionary。
这个dictionary就是命名空间，用来声明我们模块内自己使用的所有类和变量。
2）类
JavaScript不像其他面向对象编程语言那样有类机制。
更确切地说，它提供了面向对象编程语言元素，但你必须自己定义，自己选择如何做。
OpenERP
Web框架提供工具来简化这个过程，让程序员以类似其他编程语言，如Java的方式编码。
定义一个新类，你需要从instance.web.Class类继承。
语法如下：
instance.oepetstore.MyClass=instance.web.Class.extend（{
say_hello:
function（）{
hello"
},
}）;
类的实例化：
varmy_object=newinstance.oepetstore.MyClass（）;
my_object.say_hello（）;
类可以有一个构造函数，它方法名为init（）。
你可以像大多数开发语言那样，传递参数给构造器：
init:
function（name）{
this.name=name;
this.name）;
类的继承
类可以被继承
instance.oepetstore.MySpanishClass=instance.oepetstore.MyClass.extend（{
this._super（）;
hola"
var
my_object=new
instance.oepetstore.MySpanishClass（"
Nicolas"
this._super（）不是常用的类方法
3）WidgetsBasics（基础部件）
OpenERP中Widget部件，是一个通用组件，专门用来向用户显示内容。
oepetstore实例中的petstore.js内容：
var_t=instance.web._t,
_lt=instance.web._lt;
QWeb=instance.web.qweb;
<
!
--部件-->
instance.oepetstore.HomePage=instance.web.Widget.extend（{
start:
petstorehomepageloaded"
instance.web.client_actions.add（'
petstore.homepage'
'
instance.oepetstore.HomePage'
最后一行代码，把这个部件注册为客户端的action。
当我们点击‣PetStore‣PetStore‣Home
Page菜单项时，客户端action让部件显示出来。
HomePage部件有一个start（）方法。
在部件初始化后，这方法被自动调用。
它已接接受指令去显示其内容。
我们将用它向用户显示一些内容。
要做到这一点，我们使用所有部件都有的$el属性。
该属性是一个jQuery对象，表示部件对应的HTML标签的根标签。
部件包含了多个HTML标签，这些HTM标签有一个统一的根标签。
默认情况下，部件都有一个空的根标签：
一个<
div>
。
HTML标签在没有具体内容的时候，是不可见的。
这也解释了为什么显示instance.oepetstore.HomePage时，是个空白区域，它根本没有任何内容。
要想显示些内容，我们用jQuery该对象上的一些简单方法，在根标签中添加一些HTML标签：
this.$el.append（"
HellodearOpenERPuser!
/div>
"
常用方法：
appendTo（）方法
pettoys=new
instance.oepetstore.PetToysList（this）;
//实例化PetToysList（）部件
pettoys.appendTo（this.$（"
.oe_petstore_homepage_left"
））;
//把pettoys添加到当前部件的class=.oe_petstore_homepage_left的标签中
注意：
new
instance.oepetstore.PetToysList（this），其中参数this，代表调用此部件的实例，表示部件的隶属关系。
addClass（）方法
this.$el.addClass（"
oe_petstore_homepage"
//添加样式
getParent（）方法
用于获取父部件
getChildren（）方法
用来获取子部件列表:
this.getChildren（）[0].$el
当你在部件中重载init（）时，必须以父部件作为第一参数传入，并调用传入给this._super（）,例如：
instance.oepetstore.GreetingsWidget=instance.web.Widget.extend（{
function（parent,name）{
this._super（parent）;
最后，如果一个部件没有父部件（即：
在你的应用实例化时是第一个部件），传入null参数：
newinstance.oepetstore.GreetingsWidget（null）;
销毁部件：
destroy（）方法：
当一个部件被销毁，它会先调用所有子部件的destroy（）。
然后，它在DOM中清楚自己。
通过部件隶属关系的递归调用，避免了内存泄漏，这对容易产生内
存泄露的大型JavaScript应用程序来说是非常有用的。
2.Qweb
在OpenERP中，使用Qweb模板引擎，专门用于Web客户端开发。
Qweb是一种基于XML的模板语言，类似Genshi，Thymeleaf或Facelets。
有如下几个特点：
①在浏览器中完全用JavaScript执行。
②每个模板文件（XML文件）包含了多个模板，而其他模板引擎通常做法是，模板文件和模板之间1:
1的关系。
③在OpenERP的Web的instance.web.Widget特别支持了QWeb。
虽然QWeb可以用于OpenERP的Web客户端以外的地方（同时instance.web.Widget也可以不依赖于Qweb）。
之所以没用用其他JavaScript模板引擎，而是选择了QWeb，是因为QWeb的扩展机制与OpenERP的视图继承机制很相似。
就像OpenERP的视图一样，QWeb模版也是个XML树结构，因此很容易在模版执行XPath或DOM操作。
在部件内使用QWeb
首先，在文件oepetstore/static/src/xml/petstore.xml里我们定义一个简单的QWeb模板。
?
xml
version="
1.0"
encoding="
UTF-8"
>
templates
xml:
space="
preserve"
t
t-name="
HomePageTemplate"
div
style="
background-color:
red;
ThisissomesimpleHTML<
/t>
/templates>
现在，修改HomePage类：
我们建议在所有的OpenERPweb模块复制粘贴这行代码。
这个对象提供访问被Web客户端加载的所有模版文件中的模版的功能。
下面是我们使用XML模板文件定义的模版的例子：
this.$el.append（QWeb.render（"
解释：
QWeb.render（）方法用来渲染指定标识名称的具体模版，第一个参数就是模版标识名称。
另外一个常用地方是，在部件内集成Qweb：
template:
...
当你在部件内设置类属性template时，部件就知道它需要调用QWeb.render（）来呈现该模板。
请注意这两个语法是有区别的。
当在部件内集成Qweb时，QWeb.render（）调用在部件调用start（）之前发生，并用模版的根标签替换了部件的默认根标签。
这会导致不同的结果，所以你应该记住它。
Qweb上下文（Context）
像所有的模板引擎一样，Qweb模板可以包含操纵传递给模板的数据的代码。
1）使用QWeb.render（）的第二个参数传递数据给模版：
Hello<
t-esc="
name"
/>
QWeb.render（"
{name:
输出结果：
HelloNicolas<
2）当部件整合QWeb时，就不能直接传入数据了。
替换办法是，模板有一个唯一变量widget，这个变量引用了当前部件：
function（parent）{
this.name="
;
模版声明
Qweb的语法：
Qweb指令使用前缀t-的XML属性来声明新模板，我们在XML文件的根元素<
template>
内添加一个<
tt-name="
..."
元素：
templates>
Escaping————转义
用t-esc:
在HTML中放置文本
这将输出变量name，并转义变量的上下文，这上下文也许是类似HTML的字符串。
请注意，该属性t-esc可包含各种JavaScript表达式：
3+5"
输出HTML
如果你明确知道变量会包含一些HTML标签，使用t-raw代替的t-esc：
t-raw="
some_html"
条件
QWeb的条件关键字是t-if：
t-if="
true==true"
trueistrue
true==false"
trueisnottrue
Qweb条件分支没有“else”这个分支结构。
循环
遍历列表，使用t-foreach和t-as
t-foreach="
names"
t-as="
设置任意XML属性值
Qweb有一个特定语法设置属性值。
您必须使用t-att-xxx并用属性名替换xxx：
Inputyourname:
input
type="
text"
t-att-value="
defaultName"
3.部件事件和属性
1）事件
部件类似现有大部分图形用户界面库（Qt,GTK,Swing,...）那样，触发事件，
处理事件。
例如：
instance.oepetstore.ConfirmWidget=instance.web.Widget.extend（{
self=this;
Areyousureyouwanttoperformthisaction?
+
buttonclass='
ok_button'
Ok<
/button>
cancel_button'
Cancel<
this.$el.find（"
button.ok_button"
）.click（function（）{
self.trigger（"
user_choose"
true）;
button.cancel_button"
false）;
widget=new
instance.oepetstore.ConfirmWidget（this）;
widget.on（"
this,this.user_choose）;
widget.appendTo（this.$el）;
user_choose:
function（confirm）{
if（confirm）{
Theuseragreedtocontinue"
}else{
Theuserrefusedtocontinue"
请记住，在JavaScript中，变量this会隐含传递给所有函数。
如果函数像对象引用方法那么用，通过this我们知道当前的对象是什么。
每个已声明的函数都有自己的this。
所以，当我们在一个函数内声明了另一个函数，这个新功能将有自己的this，这和父函数this含义不同。
如果我们要用原来的对象this，最简单的方法是把引用存储在一个本地变量。
在OpenERP内，按照Python的习惯，通常该变量命名为self。
由于这个部件应该是通用的，它本身不应执行任何具体action。
所以，我们用trigger（）方法设置了名字叫"
的触发器和事件。
Widget.trigger（event_name[,...]）方法的第一个参数是待触发的事件名，也接受任何数量的其他参数。
这些参数将被传递到所有的事件侦听器。
然后，我们修改部件HomePage去实例化一个部件ConfirmWidget，通过on（）方法监听"
事件。
Widget.on（event_name,object,func）允许绑定一个事件event_name触发时调用的函数func。
如果func是个方法，则object是func函数的引用关联对象。
当func被调用时，trigger（）的其他参数会传递给它。
widget=...
my_event"
this,this.my_event_triggered）;
widget.trigger（"
1,2,3）;
my_event_triggered:
function（a,b,c）{
console.log（a,b,c）;
//willprint"
123"
2）属性
属性类似与普通对象的属性。
可以在对象上设置数据，但有个额外的功能：
属性值改变时将触发事件。
this.widget=...
this.widget.on（"
change:
this,this.name_changed）;
this.widget.set（"
"
name_changed:
Thenewvalueoftheproperty'
name'
is"
this.widget.get（"
Widget.set（name,value）方法设置某个属性的值。
如果该值改变（或以前没有值），对象将触发一个事件change:
xxx。
xxx是属性名称。
4.部件辅助工具
1）部件的jQeruy选择器
find（）方法
input.my_input"
）
$（）方法
this.$（"
说明：
我们强烈建议你也不要使用，全局jQuery函数$（）。
这种全局选择器满足简单应用，但在真正的大型web应用程序中不好。
原因很简单：
当你创建一个新部件，你永远不知道它会实例化多少次。
由于$（）全局函数是操作浏览器中的全部HTML，如果你实例化一个部件两次，该函数会搞混两个部件的个内容。
这就是为什么，大部分时间里，你在定位部件里的HTML时，必须限制jQuery选择器的选择范围。
出于同样的逻辑，你也可以猜测到，不能够在部件里使用HTMLid。
如果widget被实例化的两次，在应用程序里将有两个相同id，但却是不同的HTML元素的情况。
而这本身就是一个错误。
所以，在所有的情况下，你应该坚持使用用CSS类去标记HTML标签。
2）简易DOM事件绑定
在前面的一部分，我们必须用click（）或change（）等事件绑定HTML元素。
现在，我们用$（）来简化代码，让我们看看如何做：
instance.oepetstore.MyWidget=instance.web.Widget.extend（
升级会员 