OpenERP Web Components （OpenERP Web 组件）

最新推荐文章于 2018-02-26 17:20:53 发布

luccs

最新推荐文章于 2018-02-26 17:20:53 发布

阅读量2.3k

点赞数

分类专栏： openerp

openerp 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

OpenERP Web Components

在前面部分，我们介绍了OpenERP的web框架，创建了一个开发框架和图形化结构的js应用。现有部分专注于OpenERP Web客户端的现有组件并且尤其是大多数已经有了创建新的小部件（这样能够插入到已经存在的视图或者组件中）的切入点

The Action Manager（Action管理器）

为显示一个视图或者一个弹入弹出，例如当你点击一个菜单按钮时，OpenERP使用了actions概念。Action是一些解释了web客户端应该做什么的信息。它们能够从数据库中加载或者动态创建。在web客户端中处理actions的组件叫做Acrion Manager（动作管理器）。

Using the Action Manager（使用Action管理器）

启动Action的一种方式是使用指向一个Action，并且在数据库中注册的菜单元素。提醒一下，下面是如何定义了一个典型的Action和其关联菜单项。

<record model="ir.actions.act_window" id="message_of_the_day_action">
    <field name="name">Message of the day</field>
    <field name="res_model">message_of_the_day</field>
    <field name="view_type">form</field>
    <field name="view_mode">tree,form</field>
</record>

<menuitem id="message_day" name="Message of the day" parent="petstore_menu"
    action="message_of_the_day_action"/>

也可能请求OpenERP客户端加载一个来自JS代码的请求。为了这样，你得创建一个解释这个Action的字典并且重新请求action管理器重新分发web客户端一个新的action。为发送一个消息到action 管理器，Widget类可以自动发现当前的action管理器并执行这个action。下面是一个调用这个方法的例子。

instance.web.TestWidget = instance.web.Widget.extend({
    dispatch_to_new_action: function() {
        this.do_action({
            type: 'ir.actions.act_window',
            res_model: "product.product",
            res_id: 1,
            views: [[false, 'form']],
            target: 'current',
            context: {},
        });
    },
});

联系 -跳到Product

修改前面章节的PetToysList组件，使其跳到一个表单视图，当点击列表的条目时显示一些条目

场景：

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);
                $item.click(function() {
                    self.item_clicked(item);
                });
            });
        });
    },
    item_clicked: function(item) {
        this.do_action({
            type: 'ir.actions.act_window',
            res_model: "product.product",
            res_id: item.id,
            views: [[false, 'form']],
            target: 'current',
            context: {},
        });
    },
});

Client Actions（客户端Actions）

在前面我们安装的模块中，定义了一个简单的部件，当我们点击一个菜单元素时显示。这是因为小部件以一个client action注册。客户端action是一类action，完成由js代码定义。下面是定义客户端action的方式

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');

instance.web.client_actions是一个Register类实例。注册与简单的字典没有什么不同，除非其指定了字符串类名。为注册添加petstore.homepage 关键字简单地告诉web客户端”如果有人请求你打开有关键字”petstore.homepage “的客户端action“，就实例化instance.oepetstore.HomePage类并且显示给用户。

这里菜单元素如何显示定义的客户端action

<record id="action_home_page" model="ir.actions.client">
    <field name="tag">petstore.homepage</field>
</record>

<menuitem id="home_page_petstore_menu" name="Home Page" parent="petstore_menu"
    action="action_home_page"/>

客户端action不需要大量信息除了它们的类型，其保存在tag字段内。

当web客户端想显示一个客户端action时，其将仅仅在web客户端的主要内容块中显示。这完全足够小部件显示任何东西并且这样为一个web客户端创建一个完全的新功能。

Architecture of the Views（视图结构）

web客户端的复杂性主要集中在视图中。它们是显示数据库中数据的基本工具。这一块将解释视图并且如何在web客户端中显示。

The View Manager（视图管理器）

前面我们已经解释了Action Manager的用途。其是一个组件，类为ActionManager，处理OpenERP的action（尤其是关联了菜单按钮的actions）

当一个ActionManager接受到一个ir.actions.act_window类型的action时，它知道它得显示一个或者多个视图（其与特定模型关联）。为完成这些，将创建一个或者多个视图。看下面的图：