首页 > 代码库 > OpenERP Web开发
OpenERP Web开发
转自:http://blog.csdn.net/mackz/article/details/22581517
在7和8下测试均可。
1.相关库/框架
主要：jQuery（使用1.8.3，如果使用新版本，其他jQuery插件也要升级或修改）、Underscore、QWeb
其他：都在addons\web\static\lib路径下。
2.示例框架
下载（需要先安装bzr）：bzr branch lp:~niv-openerp/+junk/oepetstore -r 1
下载后将路径加到OpenERP服务器的addons_path参数中，重启服务器、更新模块列表再安装。
在__openerp__.py中通过：
‘js‘: [‘static/src/js/*.js‘],‘css‘: [‘static/src/css/*.css‘],‘qweb‘: [‘static/src/xml/*.xml‘],
将所有js/css/xml（QWeb模板）文件包含进来。
oepetstore/static/js/petstore.js注释说明：
openerp.oepetstore = function(instance) { // OpenERP模型，必须和模块名称相同。instance参数是OpenERP Web Client自动加载模块时传入的实例。 var _t = instance.web._t, _lt = instance.web._lt; // 翻译函数 var QWeb = instance.web.qweb; // QWeb实例 instance.oepetstore = {}; // instance实例里面的模块命名空间（namespace），比如和模块名称相同。 instance.oepetstore.HomePage = instance.web.Widget.extend({ // 自定义首页部件 start: function() { // 部件创建时自动调用的方法 console.log("pet store home page loaded"); }, }); instance.web.client_actions.add(‘petstore.homepage‘, ‘instance.oepetstore.HomePage‘); // 将自定义首页部件与菜单动作绑定}可以在网址后面加“?debug”参数使脚本不压缩以便于调试，例如：
http://localhost:8069/?debug
3.类的定义
从instance.web.Class基类扩展：
instance.oepetstore.MyClass = instance.web.Class.extend({ say_hello: function() { console.log("hello"); },});var my_object = new instance.oepetstore.MyClass();my_object.say_hello();构造函数名为init()；使用this访问对象实例的属性或方法：
instance.oepetstore.MyClass = instance.web.Class.extend({ init: function(name) { this.name = name; }, say_hello: function() { console.log("hello", this.name); },});var my_object = new instance.oepetstore.MyClass("Nicolas");my_object.say_hello();类可以通过extend()方法继承；使用this._super()调用基类被覆盖的方法。
instance.oepetstore.MySpanishClass = instance.oepetstore.MyClass.extend({ say_hello: function() { this._super(); console.log("translation in Spanish: hola", this.name); },});var my_object = new instance.oepetstore.MySpanishClass("Nicolas");my_object.say_hello(); 4.部件（Widget）
从instance.web.Widget扩展自定义部件。HomePage首页部件见petstore.js。
在自定义部件中，this.$el表示部件实例的jQuery对象，可以调用jQuery方法，例如：
this.$el.append("<div>Hello dear OpenERP user!</div>"); 往部件中添加一个<div>块及内容。
部件中可以插入其他部件进行组合：
instance.oepetstore.GreetingsWidget = instance.web.Widget.extend({ start: function() { this.$el.addClass("oe_petstore_greetings"); this.$el.append("<div>We are so happy to see you again in this menu!</div>"); },});instance.oepetstore.HomePage = instance.web.Widget.extend({ start: function() { this.$el.addClass("oe_petstore_homepage"); this.$el.append("<div>Hello dear OpenERP user!</div>"); var greeting = new instance.oepetstore.GreetingsWidget(this); // 创建部件的时候传入父部件的实例作为构造参数。 greeting.appendTo(this.$el); },});父子部件可以通过getChildren()、getParent()进行互相访问。如果重载部件的构造函数，第一个参数必须是父部件，并且必须传递给基类。
instance.oepetstore.GreetingsWidget = instance.web.Widget.extend({ init: function(parent, name) { this._super(parent); this.name = name; },}); 如果作为顶层部件创建，parent参数应该是null。
部件实例可以调用destroy()方法销毁。
5.QWeb模板引擎
QWeb模板在XML属性上加前缀“t-”表示：
t-name：模板名称;
t-esc：引用实例参数，可以使用任意JavaScript表达式;
t-raw：引用原始实例参数，如果有html标记则保留。
QWeb模板下面的根元素最好只有一个。
oepetstore/static/src/xml/petstore.xml：
<?xml version="1.0" encoding="UTF-8"?><templates xml:space="preserve"> <t t-name="HomePageTemplate"> <div style="background-color: red;"> <div>Hello <t t-esc="name"/></div> <div><t t-esc="3+5"/></div> <div><t t-raw="some_html"/></div> </div> </t></templates>
定义一个名为“HomePageTemplate”的模板。
使用方法1：
instance.oepetstore.HomePage = instance.web.Widget.extend({ start: function() { this.$el.append(QWeb.render("HomePageTemplate")); },});使用方法2：
instance.oepetstore.HomePage = instance.web.Widget.extend({ template: "HomePageTemplate", start: function() { ... },});模板里面的条件控制t-if：
<t t-if="true == true"> true is true </t> <t t-if="true == false"> true is not true </t>
枚举t-foreach和t-as：
<t t-foreach="names" t-as="name"> <div> Hello <t t-esc="name"/> </div> </t>
属性赋值，在属性名前加前缀“t-att-”：
<input type="text" t-att-value="http://www.mamicode.com/defaultName"/>
将input控件的value属性赋值为“defaultName”。
部件开发示例，显示产品列表。
JavaScript脚本：
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() { var products = new instance.oepetstore.ProductsWidget(this, ["cpu", "mouse", "keyboard", "graphic card", "screen"], "#00FF00"); products.appendTo(this.$el); }, }); instance.oepetstore.ProductsWidget = instance.web.Widget.extend({ template: "ProductsWidget", init: function(parent, products, color) { this._super(parent); this.products = products; this.color = color; }, }); instance.web.client_actions.add(‘petstore.homepage‘, ‘instance.oepetstore.HomePage‘);}QWeb模板：
<?xml version="1.0" encoding="UTF-8"?><templates xml:space="preserve"> <t t-name="ProductsWidget"> <div> <t t-foreach="widget.products" t-as="product"> <span class="oe_products_item" t-att-style="‘background-color: ‘ + widget.color + ‘;‘"><t t-esc="product"/></span><br/> </t> </div> </t></templates>
CSS样式：
.oe_products_item { display: inline-block; padding: 3px; margin: 5px; border: 1px solid black; border-radius: 3px;}6.部件事件与特性
instance.oepetstore.ConfirmWidget = instance.web.Widget.extend({ start: function() { var self = this; this.$el.append("<div>Are you sure you want to perform this action?</div>" + "<button class=‘ok_button‘>Ok</button>" + "<button class=‘cancel_button‘>Cancel</button>"); this.$el.find("button.ok_button").click(function() { // 在按钮上绑定click事件 self.trigger("user_choose", true); // 触发自定义user_choose事件，传递事件参数true/false }); this.$el.find("button.cancel_button").click(function() { self.trigger("user_choose", false); }); },});instance.oepetstore.HomePage = instance.web.Widget.extend({ start: function() { var widget = new instance.oepetstore.ConfirmWidget(this); widget.on("user_choose", this, this.user_choose); // 在部件上绑定user_choose事件到响应函数user_choose widget.appendTo(this.$el); }, user_choose: function(confirm) { if (confirm) { console.log("The user agreed to continue"); } else { console.log("The user refused to continue"); } },});部件特性（Properties）的使用：
this.widget.on("change:name", this, this.name_changed); //绑定name特性的change事件 this.widget.set("name", "Nicolas"); // 设置特性值 var getedname = this.widget.get("name"); // 读取特性值7.部件访问 简化jQuery选择器：
this.$el.find("input.my_input")等于
this.$("input.my_input")因此事件的绑定：
this.$el.find("input").change(function() { self.input_changed(); });可以简化为：
this.$(".my_button").click(function() { self.button_clicked(); });进一步，可以通过部件提供的events字典属性简化为：
instance.oepetstore.MyWidget = instance.web.Widget.extend({ events: { "click .my_button": "button_clicked", }, button_clicked: function() { .. }}); 注意：这种方法只是绑定jQuery提供的DOM事件机制，不能用于部件的on语法绑定部件自身的事件。 event属性的键名由两部分组成：事件名称和jQuery选择器，用空格分开。属性值是响应事件的函数（方法）。
事件使用示例：
JavaScript脚本：
openerp.oepetstore = function(instance) { var _t = instance.web._t, _lt = instance.web._lt; var QWeb = instance.web.qweb; instance.oepetstore = {}; instance.oepetstore.ColorInputWidget = instance.web.Widget.extend({ template: "ColorInputWidget", start: function() { var self = this; this.$el.find("input").change(function() { self.input_changed(); }); self.input_changed(); }, input_changed: function() { var color = "#"; color += this.$el.find(".oe_color_red").val(); color += this.$el.find(".oe_color_green").val(); color += this.$el.find(".oe_color_blue").val(); this.set("color", color); }, }); instance.oepetstore.HomePage = instance.web.Widget.extend({ template: "HomePage", start: function() { this.colorInput = new instance.oepetstore.ColorInputWidget(this); this.colorInput.on("change:color", this, this.color_changed); this.colorInput.appendTo(this.$el); }, color_changed: function() { this.$el.find(".oe_color_div").css("background-color", this.colorInput.get("color")); }, }); instance.web.client_actions.add(‘petstore.homepage‘, ‘instance.oepetstore.HomePage‘);}QWeb模板：
<?xml version="1.0" encoding="UTF-8"?><templates xml:space="preserve"> <t t-name="ColorInputWidget"> <div> Red: <input type="text" class="oe_color_red" value="http://www.mamicode.com/00"></input><br /> Green: <input type="text" class="oe_color_green" value="http://www.mamicode.com/00"></input><br /> Blue: <input type="text" class="oe_color_blue" value="http://www.mamicode.com/00"></input><br /> </div> </t> <t t-name="HomePage"> <div> <div class="oe_color_div"></div> </div> </t></templates>
CSS样式：
.oe_color_div { width: 100px; height: 100px; margin: 10px;}
8.修改已有的部件和类
可以用include()方法重载已有的部件和类，这个和继承机制类似，是一种插入的方法：
var TestClass = instance.web.Class.extend({ testMethod: function() { return "hello"; },});TestClass.include({ testMethod: function() { return this._super() + " world"; },});console.log(new TestClass().testMethod());// will print "hello world" 应尽量避免使用这种机制导致的复杂性。
9.与服务器的交互-读取数据模型
客户端使用Ajax与服务器交互，不过OpenERP框架提供了简化的方法，通过数据模型进行访问。
OpenERP自动将服务端的数据模型转化为客户端端模型，直接调用即可。服务器上petstore.py里面的模型：
class message_of_the_day(osv.osv): _name = "message_of_the_day" def my_method(self, cr, uid, context=None): return {"hello": "world"} _columns = { ‘message‘: fields.text(string="Message"), ‘color‘: fields.char(string="Color", size=20), }客户端调用例子：
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: new instance.web.CompoundContext()}).then(function(result) { self.$el.append("<div>Hello " + result["hello"] + "</div>"); // will show "Hello world" to the user }); },}); 模型的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是一个特殊参数，表示调用者的上下文，一般就使用客户端Web Client实例提供的instance.web.CompoundContext()类新建一个对象实例即可。
CompoundContext类提供用户的语言和时区信息。也可以在构造函数中添加另外的数据：
model.call("my_method", [], {context: new instance.web.CompoundContext({‘new_key‘: ‘key_value‘})})def display_context(self, cr, uid, context=None): print context // will print: {‘lang‘: ‘en_US‘, ‘new_key‘: ‘key_value‘, ‘tz‘: ‘Europe/Brussels‘, ‘uid‘: 1} （OpenERP服务器端数据模型的方法必须提供4个参数：self, cr, uid, context=None，分别表示模型实例、数据库指针(Cursor)、用户id和用户上下文）
10.与服务器的交互-查询
客户端数据模型提供了search()、read()等方法，组合为query()方法，使用例子：
model.query([‘name‘, ‘login‘, ‘user_email‘, ‘signature‘]) .filter([[‘active‘, ‘=‘, true], [‘company_id‘, ‘=‘, main_company]]) .limit(15) .all().then(function (users) { // do work with users records}); 数据模型的query()方法的参数是需要读取的模型字段名称列表；该方法返回的是一个instance.web.Query()类型的查询对象实例，包括一些进一步定义查询结果的方法，这些方法返回的是同一个查询对象自身，因此可以链接：
filter()：指定OpenERP 域（domain），也即过滤查询结果；
limit()：限制返回的记录数量。
最后调用查询对象的all()方法执行查询。
查询异步执行，all()返回的是一个deferred，因此要用then()提供回调函数来处理结果。
数据模型的查询是通过rpc调用实现的。
示例1：显示每日提示
JavaScript脚本：
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({ template: "HomePage", start: function() { var motd = new instance.oepetstore.MessageOfTheDay(this); motd.appendTo(this.$el); }, }); instance.web.client_actions.add(‘petstore.homepage‘, ‘instance.oepetstore.HomePage‘); instance.oepetstore.MessageOfTheDay = instance.web.Widget.extend({ template: "MessageofTheDay", init: function() { this._super.apply(this, arguments); }, start: function() { var self = this; new instance.web.Model("message_of_the_day").query(["message"]).first().then(function(result) { self.$(".oe_mywidget_message_of_the_day").text(result.message); }); }, });}QWeb模板：
<?xml version="1.0" encoding="UTF-8"?><templates xml:space="preserve"> <t t-name="HomePage"> <div class="oe_petstore_homepage"> </div> </t> <t t-name="MessageofTheDay"> <div class="oe_petstore_motd"> <p class="oe_mywidget_message_of_the_day"></p> </div> </t></templates>
CSS样式：
.oe_petstore_motd { margin: 5px; padding: 5px; border-radius: 3px; background-color: #F0EEEE;} 示例2：组合显示每日提示和产品列表
服务器端从OpenERP的产品表继承一个类（模型）：
class product(osv.osv): _inherit = "product.product" _columns = { ‘max_quantity‘: fields.float(string="Max Quantity"), } 因此数据是保存在product.product表中的，只是扩充了一个“max_quantity”字段；这个例子结合前面的每日提示信息，显示二列，左面一列显示产品列表，右面显示提示信息。
JavaScript脚本：
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({ template: "HomePage", start: function() { var pettoys = new instance.oepetstore.PetToysList(this); pettoys.appendTo(this.$(".oe_petstore_homepage_left")); var motd = new instance.oepetstore.MessageOfTheDay(this); motd.appendTo(this.$(".oe_petstore_homepage_right")); }, }); instance.web.client_actions.add(‘petstore.homepage‘, ‘instance.oepetstore.HomePage‘); instance.oepetstore.MessageOfTheDay = instance.web.Widget.extend({ template: "MessageofTheDay", init: function() { this._super.apply(this, arguments); }, start: function() { var self = this; new instance.web.Model("message_of_the_day").query(["message"]).first().then(function(result) { self.$(".oe_mywidget_message_of_the_day").text(result.message); }); }, }); instance.oepetstore.PetToysList = instance.web.Widget.extend({ template: "PetToysList", start: function() { var self = this; new instance.web.Model("product.product").query(["name", "image"]) .filter([["categ_id.name", "=", "Pet Toys"]]).limit(5).all().then(function(result) { _.each(result, function(item) { var $item = $(QWeb.render("PetToy", {item: item})); self.$el.append($item); }); }); }, });}QWeb模板：
<?xml version="1.0" encoding="UTF-8"?><templates xml:space="preserve"> <t t-name="HomePage"> <div class="oe_petstore_homepage"> <div class="oe_petstore_homepage_left"></div> <div class="oe_petstore_homepage_right"></div> </div> </t> <t t-name="MessageofTheDay"> <div class="oe_petstore_motd"> <p class="oe_mywidget_message_of_the_day"></p> </div> </t> <t t-name="PetToysList"> <div class="oe_petstore_pettoyslist"> </div> </t> <t t-name="PetToy"> <div class="oe_petstore_pettoy"> <p><t t-esc="item.name"/></p> <p><img t-att-src="‘data:image/jpg;base64,‘+item.image"/></p> </div> </t></templates>
CSS样式：
.oe_petstore_homepage { display: table;}.oe_petstore_homepage_left { display: table-cell; width : 300px;}.oe_petstore_homepage_right { display: table-cell; width : 300px;}.oe_petstore_motd { margin: 5px; padding: 5px; border-radius: 3px; background-color: #F0EEEE;}.oe_petstore_pettoyslist { padding: 5px;}.oe_petstore_pettoy { margin: 5px; padding: 5px; border-radius: 3px; background-color: #F0EEEE;}
OpenERP Web开发
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。