Odoo的网页模块QWEB简述.docx

Odoo的网页模块QWEB简述.docx

《Odoo的网页模块QWEB简述.docx》由会员分享，可在线阅读，更多相关《Odoo的网页模块QWEB简述.docx（17页珍藏版）》请在冰点文库上搜索。

Odoo的网页模块QWEB简述

Odoo/OpenERP的网页模块QWEB简述

1.web模块

注意，OpenERP模块中web部分用到的所有文件必须被放置在模块内的static文件夹里。

这是强制性的，出于安全考虑。

事实上，我们创建的文件夹CSS，JS和XML，仅仅是一个习惯。

static文件夹

oepetstore/static/css/petstore.css是我们的CSS文件。

oepetstore/static/xml/petstore.xml是一个XML文件，将包含我们QWeb的模板。

oepetstore/static/js/petstore.js包含应用程序的JavaScript代码。

像OpenERP的XML文件包含了视图或数据一样，必须在__openerp__.py文件内标明这些文件。

下面是我们增加的行，它告诉webclient必须记载这些文件：

'js':

['static/src/js/*.js'],

'css':

['static/src/css/*.css'],

'qweb':

['static/src/xml/*.xml'],

OpenERP内，默认会把所有的JavaScript文件连接为一个文件。

然后，我们执行一个叫minification的操作。

minification将移除文件中的所有的注释、空格和换行符。

最后，发送这个文件给用户浏览器。

但这么做的缺点，是无法调试应用程序。

为了避免这种副作用，仍然能够调试的解决办法是：

在OpenERP的URL后面添加一个参数?

debug.

添加后的URL：

http:

//localhost:

8069/?

debug

当您使用带debug参数的URL，应用程序将不会执行串联所有minification的JavaScript文件这个过程。

应用程序也将需要更多的时间来加载，但你能进

行调试开发了。

在前面的章节中，我们解释了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（）{

console.log（"hello"）;

},

}）;

类的实例化：

varmy_object=newinstance.oepetstore.MyClass（）;

my_object.say_hello（）;

类可以有一个构造函数，它方法名为init（）。

你可以像大多数开发语言那样，传递参数给构造器：

instance.oepetstore.MyClass=instance.web.Class.extend（{

init:

function（name）{

this.name=name;

},

say_hello:

function（）{

console.log（"hello",this.name）;

},

}）;

类的继承

类可以被继承

instance.oepetstore.MySpanishClass=instance.oepetstore.MyClass.extend（{

say_hello:

function（）{

this._super（）;

console.log（"hola",this.name）;

},

}）;

var my_object=new instance.oepetstore.MySpanishClass（"Nicolas"）;

my_object.say_hello（）;

this._super（）不是常用的类方法

3）WidgetsBasics（基础部件）

OpenERP中Widget部件，是一个通用组件，专门用来向用户显示内容。

oepetstore实例中的petstore.js内容：

openerp.oepetstore=function（instance）{

var_t=instance.web._t,

_lt=instance.web._lt;

var QWeb=instance.web.qweb;

instance.oepetstore={};

--部件-->

instance.oepetstore.HomePage=instance.web.Widget.extend（{

start:

function（）{

console.log（"petstorehomepageloaded"）;

},

}）;

instance.web.client_actions.add（'petstore.homepage','instance.oepetstore.HomePage'）;

}

最后一行代码，把这个部件注册为客户端的action。

当我们点击‣PetStore‣PetStore‣Home Page菜单项时，客户端action让部件显示出来。

HomePage部件有一个start（）方法。

在部件初始化后，这方法被自动调用。

它已接接受指令去显示其内容。

我们将用它向用户显示一些内容。

要做到这一点，我们使用所有部件都有的$el属性。

该属性是一个jQuery对象，表示部件对应的HTML标签的根标签。

部件包含了多个HTML标签，这些HTM标签有一个统一的根标签。

默认情况下，部件都有一个空的根标签：

一个