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");
        }
    },
});