Odoo中Qweb使用入门

参考

可参考官网例子https://doc.odoo.com/trunk/web/qweb/

http://thierry-godin.developpez.com/openerp/tutorial-module-creation-pos-modification-english-version/

1 Qweb官方定义

Qweb被用作OpenERP的Web客户端模板引擎。它是一种基于XML的模板语言,同Genshi, Thymeleaf、Facelets模板具有相似并且具有以下特性:

完全在客户端浏览器中完成渲染;

一个模板文件中可以包含多个模板,通常一个模板文件中包含一个模板;

对OpenERP的web组件有很好的支持,也可以用于除开OpenERP web外的其他框架。

2 OpenERP中使用Qweb

 

2.1 获取Odoo中由Bazaar管理的Qweb例子源代码

bzr branch lp:~niv-openerp/+junk/oepetstore -r 1-Ossl.cert_reqs=none

从python安装路劲下的Script目录中复制项目oepetstore到OpenERP的插件(addons)目录下,启动OpenERP,更新并安装oepetstore模块:

完成后在Chrome浏览器下访问http://localhost:8069/ 依次点击菜单:Pet Store àHome Page

点击无效,系统会提示。

这是由于定义在__openerp__.py文件中定义模块需要加载的petstore.js没被引用到系统。

暂时没找到原因,我用的是odoo_8.0rc1-latest版本,不知道是不是版本从7升级到8后的变化,解决方法:

在模块目录下建立xml文件(名称可随便取如link.xml),通过指定路劲引入js和css,

然后修改模块定义中data内容增加link.xml引用。(至于js和css此处没有生效,可去掉里面的引用)。

link.xml 内容:

<?xml version="1.0"encoding="utf-8"?>

<!-- vim:fdn=3:

-->

<openerp>

<data>

<template id="assets_backend" name="petstore" inherit_id="web.assets_backend">

<xpath expr="."position="inside">

<link rel="stylesheet" href="/oepetstore/static/src/css/petstore.css"/>

<script type="text/javascript"src="/oepetstore/static/src/js/petstore.js"></script>

</xpath>

</template>

</data>

</openerp>

完成后重启系统,升级模块,再次点击菜单:Pet Store àHomePage ,在控制台下出现“petstore home page loaded”则表示模块已经运行成功:

到此Qweb还没开始使用,这仅仅是通过odoo的简单的应用了Widget组件。

官方对Widget定义,参考:https://doc.odoo.com/trunk/web/widget/

class  openerp.web.Widget()

这是odoo中所有的可视化组件的基类。它对应于一个MVC视图。它处理部分的网页提供一系列的服务:

通过Qweb进行渲染;

继承关系;

生命周期管理(包括当父对象被删除子类的摧毁);

DOM文档插入操作,通过jQuery插入方法。插入对象可以是任何相应的jQuery方法(一般选择器,DOM节点和jQuery对象)。

2.2 通过Qweb结合Widget组件运用

目标:

点击左侧菜单,查询模块例子中表message_of_the_day的数据,通过Qweb以列表形式呈现。

(通过例子中自带的菜单添加一些假数据)

2.2.1 编写js代码

在static/src/js/petstore.js中添加

// MessageListPage部件扩展自Widget基类

instance.oepetstore.MessageListPage = instance.web.Widget.extend({

template: "message",//模板根节点(同xml模板文件中对应)

init: function() {

this._super.apply(this, arguments);

},

start: function() {

var self = this;

//message_of_the_day 表对应的模块名称

//query加上字段查询指定列,不加可以查询所有列

// query().all()查询所有数据

//query().first()查询第一条

new instance.web.Model("message_of_the_day").query(["message","create_date"]).all().then(function(result) {

var ss= result.message + result.create_date

//messageList 把得到的result josn数组,通过Qweb标签解析到名称为messageList(同xml模板文件中对应)的模板,模板标签对msgList进行遍历

self.$el.append($(QWeb.render("messageList",{msgList: result})));

$(".button-view").click(function(e){

alert("view..");

});

$(".button-edit").click(function(e){

alert("edit..");

});

$(".button-cancel").click(function(e){

alert("cancel..");

});

});

},

});

instance.web.client_actions.add(‘petstore.messagemenu‘,‘instance.oepetstore.MessageListPage‘);

2.2.2编写xml模板文件

static/src/xml/message.xml

<?xml version="1.0"encoding="UTF-8"?>

<templates xml:space="preserve">

<t t-name="message">

<div class="oe_petstore_pettoyslist">

</div>

</t>

<t t-name="messageList">

<table class="oe_list_content">

<thead>

<tr>

<th class="oe_list_header_textoe_sortable">消息</th>

<th class="oe_list_header_textoe_sortable">创建时间</th>

<th>操作</th>

</tr>

</thead>

<t t-foreach="msgList"t-as="bo">

<tr class="oe_list_header_columns">

<td class="oe_list_field_celloe_list_field_text" ><t t-esc="bo.message"/></td>

<td class="oe_list_field_celloe_list_field_text" ><t t-esc="bo.create_date"/></td>

<td>

<a class="button-view" t-att-data="bo.id" name="detailBtn"href="#" ><i class="icon-zoom-in"></i>详情</a>

<a class="button-edit"  t-att-data="bo.id"  name="traceOrderBtn"   href="javascript:void(0);"><iclass="fa fa-pencil"></i>编辑</a>

<a class="button-cancel" t-att-data="bo.id" class="red"name="cancelOrderBtn" href="javascript:void(0);"><i class="glyphicon glyphicon-remove"></i>取消</a>

</td>

</tr>

</t>

</table>

</t>

</templates>

此处我添加了一些odoo自带的css样式,在每列数据后面添加了几个可以操作的按钮(此处按钮功能未实现,仅提供样式)

2.2.3 在模块跟路径下petstore.xml中添加菜单链接和动作

<record id="message_day_action"model="ir.actions.client">

<field name="name">信息列表</field>

<field name="tag">petstore.messagemenu</field>

</record>

<menuitem id="message_day_action_menu"name="QwebMessageList" parent="petstore_menu"            action="message_day_action"/>

通过Qweb对数据简单列表查询已经完成,重启Odoo,升级模块,依次点击菜单Pet Store àQwebMessageList,结果如下:

小提示:

1、一个模块中

openerp.oepetstore = function(instance) {

}该函数实例只能定义一个,并且为openerp.模块名称(必须跟模块名称一样,否则该js不能正确的被引入)

2、static目录下定义的js、css和xml模板改变了模块不需升级。

2.3关键点说明

2.3.1 QWeb模板引擎

QWeb模板在XML属性上加前缀“t-”表示:

t-name:模板名称,如:

<t t-name="message"></t>

t-foreach=iterable:循环遍历标签

<tt-foreach="msgList" t-as="bo"> </t>

t-esc:引用实例参数,可以使用任意JavaScript表达式;如

<tt-esc="bo.message"/>

t-att-attName:对象属性设置,如对input输入控件设置value:

<inputtype="text"  t-att-value="order.buyer_memo"/>

其他更多标签可以参考https://doc.odoo.com/trunk/web/qweb/下 Defining Templates 节点

2.3.2 与服务器的交互-读取数据 (call 和query)

客户端使用Ajax与服务器交互,不过OpenERP框架提供了简化的方法,通过数据模型进行访问。OpenERP自动将服务端的数据模型转化为客户端端模型,直接调用即可。服务器上petstore.py里面的模型

call()方法应用:

客户端调用:

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

start: function() {

var self = this;

var model = new instance.web.Model("message_of_the_day");

model.call("my_method",[],{context:newinstance.web.CompoundContext()}).then(function(result) {

self.$el.append("<div>Hello " +result["hello"] + "</div>");

});//通过读取到服务端数据展示在页面。

},

});

模型的call()方法参数:
第一个参数name是方法的名称;
第二个参数args是按照顺序排列的参数数组。OpenERP定义的模型方法前三个参数(self, cr, uid)是固定的,由框架产生,也就是说传递的参数数组从第四个开始插入。而context又是特殊的。

例子:方法定义:

def my_method2(self, cr, uid, a, b, c,context=None):

调用:

model.call("my_method", [1, 2,3], ...// with this a=1, b=2 and c=3

第三个参数kwargs为命名参数,按照名称传递给Python的方法参数。例如:

model.call("my_method",[], {a: 1, b: 2, c: 3}, ...// with this a=1, b=2 and c=3

OpenERP模型中的context是一个特殊参数,表示调用者的上下文,一般就使用客户端WebClient实例提供的instance.web.CompoundContext()类新建一个对象实例即可。CompoundContext类提供用户的语言和时区信息。也可以在构造函数中添加另外的数据:

model.call("my_method",[], {context: new instance.web.CompoundContext({‘new_key‘: ‘key_value‘})})defdisplay_context(self, cr, uid, context=None):   print context    // will print:{‘lang‘: ‘en_US‘, ‘new_key‘: ‘key_value‘, ‘tz‘: ‘Europe/Brussels‘, ‘uid‘: 1}

query()方法应用

本例中使用的mode的query方法

var model = new instance.web.Model("message_of_the_day");

model.query(["message","create_date"]).

filter([[id,‘=‘,1], [‘company_id‘, ‘=‘, main_company]])

.limit(15).all().then(function(result) {

self.$el.append($(QWeb.render("messageList", {msgList:result})));

});

model: 数据模型的query()方法的参数是需要读取的模型字段名称列表;该方法返回的是一个instance.web.Query()类型的查询对象实例,包括一些进一步定义查询结果的方法,这些方法返回的是同一个查询对象自身,因此可以链接:

filter():指定OpenERP 域(domain),也即过滤查询结果;limit():限制返回的记录数量。最后调用查询对象的all()方法执行查询。查询异步执行,all()返回的是一个deferred,因此要用then()提供回调函数来处理结果。数据模型的查询是通过rpc调用实现的。

self.$el得到模板中定义的message的根节点(div),append()方法将处理完成的页面内容赋值到根节点下。

$(QWeb.render("messageList",{msgList: result}))则是把result数组传递到模板为messageList中的msgList对象(此处是传递到该对象并进行遍历),返回完整的页面内容html代码。

时间: 2024-10-17 17:51:14

Odoo中Qweb使用入门的相关文章

Spring中IoC的入门实例

Spring中IoC的入门实例 Spring的模块化是很强的,各个功能模块都是独立的,我们可以选择的使用.这一章先从Spring的IoC开始.所谓IoC就是一个用XML来定义生成对象的模式,我们看看如果来使用的. 数据模型 1.如下图所示有三个类,Human(人类)是接口,Chinese(中国人)是一个子类,American(美国人)是另外一个子类. 源代码如下: package cn.com.chengang.spring;public interface Human {void eat();

js中的正则表达式入门

js中的正则表达式入门 什么是正则表达式呢? 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等. 说白了正则表达式就是处理字符串的,我们可以用它来处理一些复杂的字符串. 为什么要学习正则表达式 我们直接用一个例子来说明 //找出这个字符串中的所有数字 var str = 'abc123de45fgh6789qqq111'; //方法1 function findNum

odoo中def init(self):

# -*- coding: utf-8 -*- # Part of Odoo. See LICENSE file for full copyright and licensing details. from odoo import api, fields, models, tools class test_report(models.Model): _name = 'test.report' _auto = False _description = 'Test Report' test = fi

PHP中使用curl入门教程

curl和libcurl的区别简介 https://www.jb51.net/article/68750.htm curl官网 https://curl.haxx.se/ PHP中使用curl入门教程 https://www.jb51.net/article/68763.htm PHP中使用curl的步骤 在PHP中,可以使用curl完成各种各样的功能,如抓取网页,文件的上传/下载.模拟登录等.但是这些功能的实现都是基于四个步骤完成的,所以curl的使用并不复杂. 使用curl时,主要分为以下四

odoo中self的使用

odoo中self的使用 介绍 对象self.env提供对请求参数和其他有用的访问: self.env.cr or self._cr 是数据库的游标对象,可用于对数据库的操作 self.env.user是当前用户的记录 self.env.context或self._context是上下文字典 self.env.ref(xml_id)返回对应于XML id的记录 self.env[model_name]返回给定模型的实例 原文地址:https://www.cnblogs.com/itelephan

(21)odoo中的QWeb模板引擎

* 概述    QWeb是odoo主要模板引擎,采用xml表述,最后生成HTML文件    * 一般用法    <t t-if="condition">        <p>Test</p>    </t>    结果:         <p>Test</p>    可以看到采用t标签语句采用t-开头    也可和hmtl标签混着用    <div t-if="condition">

Odoo 中的 Controller

来自  Odoo处理HTTP请求的接口用的Contoller类,封装于web模块中. --------------------------------------------------------------- RequestHandler: 1. replace_request_password(args):用*替换掉request中的密码字符. 2. dispatch_rpc(service_name, method, params):处理RPC请求.service_name的值可取com

Odoo中的Javascript单元测试

前端页面利用QUnit进行单元测试,本文参考官方文档:https://www.odoo.com/documentation/8.0/reference/javascript.html 访问/web/tests页面可以看到当前所有包含测试模块的单元测试列表. 自定义单元测试方法如下: 1. __openerp__文件中添加对js文件的引用: (非官方文档中将js文件写到'test'中,而是引用view文件,在view文件中添加对js的引用,8.0以后有效) <template id="ass

PHP5中PDO的入门教程

PDO(PHP Data Object) 是PHP 5新出来的东西,在PHP 5.5中,更是强烈推荐使用PDO来处理数据库,将把所有的数据库扩展移到了PECL,那么默认就是没有了我们喜爱的php_mysql.dll之类的了,那怎么办捏,我们只有与时俱进了,我就小试了一把PDO.(本文只是入门级的,高手可以略过,呵呵) [PDO是啥] PDO是PHP5新加入的一个重大功能,因为在PHP5以前的PHP4/PHP3都是一堆的数据库扩展来跟各个数据库的连接和处理,什么 php_mysql.dll.php