odoo——Building Interface Extensions

原教程地址：https://www.odoo.com/documentation/10.0/howtos/web.html#a-simple-module。

从github下载petstore项目，得到如下目录

oepetstore|-- images|   |-- alligator.jpg|   |-- ball.jpg|   |-- crazy_circle.jpg|   |-- fish.jpg|   `-- mice.jpg|-- __init__.py|-- oepetstore.message_of_the_day.csv|-- __manifest__.py|-- petstore_data.xml|-- petstore.py|-- petstore.xml`-- static    `-- src        |-- css        |   `-- petstore.css        |-- js        |   `-- petstore.js        `-- xml            `-- petstore.xml

我们主要操作static目录下的src/css,js,xml文件。

原始的petstore.js文件为：

odoo.oepetstore = function(instance, local) {    var _t = instance.web._t,        _lt = instance.web._lt;    var QWeb = instance.web.qweb;    local.HomePage = instance.Widget.extend({        start: function() {            console.log("pet store home page loaded");        },    });    instance.web.client_actions.add(        'petstore.homepage', 'instance.oepetstore.HomePage');}

我们可以更新应用，点击petstore下的homepage，打开调试工具能看到控制台console.log了 “pet store home page loaded”.

我们可以在上面的start:function函数里写 

this.$el.append("<div>Hello dear Odoo user!</div>");

刷新页面，能看到petstore下的homepage页面有 "Hello dear odoo user!"的字样。这就是通过js往页面插入div的第一个简单尝试！

我们可以再建一个：

local.GreetingsWidget = instance.Widget.extend({    start: function() {        this.$el.append("<div>We are so happy to see you again in this menu!</div>");    },});

，但是要想在页面看到这个div，我们要把它加入到local.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);    },});

当然，我们也可以给这些div添加类名：

local.HomePage = instance.Widget.extend({    className: 'oe_petstore_homepage',    ...});local.GreetingsWidget = instance.Widget.extend({    className: 'oe_petstore_greetings',    ...});

刷新页面我们系能看到相应的div多了类名。

Qweb被用作OpenERP的Web客户端模板引擎。它是一种基于XML的模板语言

我们可以在petstore.xml文件中写入：

<?xml version="1.0" encoding="UTF-8"?><templates xml:space="preserve">    <t t-name="HomePageTemplate">        <div style="background-color: red;">This is some simple HTML</div>    </t></templates>

当然，需要告诉js 以让其识别xml，所以在js中写入：

local.HomePage = instance.Widget.extend({    start: function() {        this.$el.append(QWeb.render("HomePageTemplate"));    },});

，或者用一种更简单的写法：

local.HomePage = instance.Widget.extend({    template: "HomePageTemplate",    start: function() {        ...    },});

小部件的事件

可以在页面中添加两个按钮，一个为ok,一个位cancel,我们要实现的功能是点击ok，控制台打印一串英文m，点击cancel，打印另一段话，首先，我们添加这个小部件：

local.ConfirmWidget = instance.Widget.extend({    events: {        'click button.ok_button': function () {            this.trigger('user_chose', true);        },        'click button.cancel_button': function () {            this.trigger('user_chose', false);        }    },    start: function() {        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>");    },});

跟上面一样，我们要在local.Homepage中加入这个部件，然后，就要写这个打印的函数：

local.HomePage = instance.Widget.extend({    start: function() {        var widget = new local.ConfirmWidget(this);        widget.on("user_chose", this, this.user_chose);        widget.appendTo(this.$el);    },    user_chose: function(confirm) {        if (confirm) {            console.log("The user agreed to continue");        } else {            console.log("The user refused to continue");        }    },});