Chapter 10: Backend Views - Designing the User Interface

<div name="button_box" class="oe_button_box">
    <!-- Smart buttons will go here... -->
</div>

按钮的容器是一个带有oe_button_box类的 div 元素。在 Odoo 11.0以前，可能需要添加一个oe_right类来确保按钮框在表单中右对齐。在我们的应用中，我们将在按钮中显示图书会员待归还的其它借阅的总数，点击按钮会进入这些项的列表中。

所以我们需要该会员处于 open 状态的借阅记录，排除掉当前借阅。对于按钮统计，我们应创建一个计算字段来在library_checkout/models/library_checkout.py文件的借阅类中进行计数：

    num_other_checkouts = fields.Integer(
        compute='_compute_num_other_checkouts')

    def _compute_num_other_checkouts(self):
        for rec in self:
            domain = [
                ('member_id', '=', rec.member_id.id),
                ('state', 'in', ['open']),
                ('id', '!=', rec.id)]
            rec.num_other_checkouts = self.search_count(domain)

下一步我们可以添加按钮框并在其中添加按钮。在版块的上方，替换上面的按钮框占位符为以下代码：

                    <div name="button_box" class="oe_button_box">
                        <button class="oe_stat_button"
                            icon="fa-tasks"
                            help="Other checkouts pending return."
                            type="action"
                            name="%(action_other_checkouts_button)d"
                            context="{'default_member_id': member_id}">
                            <field string="To Return"
                                name="num_other_checkouts"
                                widget="statinfo" />
                        </button>
                    </div>

按钮元素本身是一个带有显示数据字段的容器。这些数据是使用statinfo特定组件的普通字段。该字段通常是作用于模型中定义的计算字段。除字段外，在按钮中还可以使用静态文本，如

智能按钮必须带有class=“oe_stat_button” CSS样式，并应使用 icon 属性来带有一个图标。它有一个type=“action”，表示点击按钮时将运行通过 name 属性标识的窗口操作。%(action_other_checkouts_button)d表达式返回要运行的操作的数据库 ID。

在点击按钮时，我们要查看当前会员的其它借阅列表。这可通过action_other_checkouts_button窗口操作来实现。该操作会使用合适的域过滤器打开一个图书借阅列表。操作和相应的域过滤器在表单上下文之外处理，无法访问表单数据。因此按钮必须在上下文中设置当前member_id 来供窗口操作随后使用。使用的窗口操作必须在表单之前定义，因此我们应在 XML 文件根元素中的最上方添加以下代码：

    <act_window id="action_other_checkouts_button"
        name="Open Other Checkouts"
        res_model="library.checkout"
        view_mode="tree,form"
        domain="[('member_id', '=', default_member_id),
            ('state', 'in', ['open']),
            ('id', '!=', active_id)]"/>

注意我们在域过滤器中如何使用default_member_id上下文键。该键还会点击按钮链接创建新任务时为member_id字段设置默认值。域过滤器也需要当前 ID。这无需在上下文中明确设置，因为网页客户端会在active_id上下文键中自动进行设置。

以下是可在智能按钮中添加的属性，供您参考：

• class=“oe_stat_button”渲染的不是普通按钮而是一个矩形
• icon从Font Awesome图标集中选择图标来使用。访问Font Awesome查看有哪些图标。
• type和name是按钮类型以及触发的操作名。对于智能按钮，类型通常是 action，指定窗口操作，名称为所要执行操作的 ID。应传入真实数据库 ID，因此我们要使用方程式来将XML ID转换为数据库 ID：”%(actionxmlid)d”。这一操作应该会打开带有关联记录的视图。
• string为按钮添加标签文本，这里没有使用因为所包含的字段中已经提供了文本。
• context应用于为目标视图设置默认值，用于点击按钮后视图上新建的记录。
• help在鼠标悬停在按钮上显示帮助提示信息

动态视图元素

视图元素还支持一些允许视图按字段值动态变更外观或行为的属性。我们可以有onchange 事件来在编辑表单数据时修改其它字段值，或在满足特定条件时让字段为必填或显示。

onchange 事件

onchange机制允许我在某一特定字段变更时修改其它表单字段。例如一个商品字段的 onchange可以在商品被修改时设置价格字段为默认值。在老版本中，onchange 事件在视图级别定义，但8.0之后直接在模型层中定义，无需在视图上做任何特定标记。这通过使用@api.onchange(‘field1’, ‘field2’, …) 装饰器创建模型，来对一些字段绑定 onchange 逻辑。onchange 模型方法在第八章 Odoo 12开发之业务逻辑 - 业务流程的支持中详细讨论过，其中还有相关示例。

onchange 机制还可以在用户输入时即时反馈进行计算字段的自动重算。继续使用商品来举例，如果在修改商品时价格字段变化了，它还会根据新的价格自动更新计算后的总金额字段。

动态属性

一些属性允许我们根据记录的值来动态变更视图元素的显示。指定用户界面元素的可见性可通过如下属性很方便地控制：

• groups可根据当前用户所属安全组来让元素可见。仅指定组的成员可看到该元素。它的值应为一个逗号分隔的XML ID列表
• states可根据记录的状态字段来让元素可见。它的值为一个逗号分隔的状态列表，仅对带有state 字段的模型生效。

除这些以外，我们有一些灵活的方法来根据客户端动态生成的表达式设置元素可见性。它是一个特别属性 attrs，它的值为一个映射invisible属性值与表达式结果的字典。例如，要让closed_date字段在new和open状态时不可见，可使用如下代码：

<field name="closed_date"
     attrs="{'invisible':[('state', 'in', ['new', 'open'])]}"/>

invisible不只在字段中可用，在任意元素中均可用。例如，它可用于 notebook 页面和group元素中。attrs属性也可为其它两个属性设置值：readonly和required。它们仅对数据字段有意义，通过二者来让字段可编辑或为必填。这让我们可以实现一些基础客户端逻辑，如根据其它字段值(如 state)来让字段设为必填。

列表视图

学到这里可能不太需要介绍列表视图了，但它还一些有趣的额外属性可以讨论。下面我们修改library_checkout/views/checkout_view.xml文件来改进第八章 Odoo 12开发之业务逻辑 - 业务流程的支持中的版本：

    <record id="view_tree_checkout" model="ir.ui.view">
        <field name="name">Checkout Tree</field>
        <field name="model">library.checkout</field>
        <field name="arch" type="xml">
            <tree
                decoration-muted="state in ['done', 'cancel']"
                decoration-bf="state=='open'">
                <field name="state" invisible="True" />
                <field name="request_date" />
                <field name="member_id" />
                <field name="checkout_date" />
                <field name="stage_id" />
                <field name="num_books" sum="# Books" />
            </tree>
        </field>
    </record>

行文本颜色和字体可根据 Python 表达式计算结果来动态变化。这通过decoration–NAME属性带上计算字段属性的表达式来实现。NAME可以是bf或it，分别表示粗体和斜体，也可以是其它Bootstrap文本上下文颜色：danger, info, muted, primary, success或warning。Bootstrap文档中有相关显示示例。

ℹ️Odoo 9中的修改 decoration-NAME 属性在 Odoo 9中引入。在 Odoo 8中使用是 colors 和 fonts 属性。

记住表达式中使用的字段必须要在字段中声明，这样网页客户端才知道要从服务端获取该列。如果不想对用户显示，应对其使用invisible=“1”属性。其它 tree 元素的相关属性有：

• default_order让我们可以覆盖模型中的默认排序，它的值和模型中定义的排序格式相同。
• create, delete和edit，如果设为 false（字母小写），会禁用列表视图中的相应操作。
• editable让记录在列表视图中可直接被编辑。可用值有 top 和 bottom，表示新记录添加的位置。

列表视图可包含字段和按钮，表单中的大部分属性对它们也有效。在列表视图中，数值字段可显示为对应列的汇总值。为字段添加一个累加属性(sum, avg, min或max)会为其分配汇总值的标签文本。我们在 num_books 字段中添加了一个示例：

<field name="num_books" sum="# Books" /

num_books字段计算每个借阅中的图书数量，它是一个计算字段，我们需要在模型进行添加：

    num_books = fields.Integer(compute='_compute_num_books')

    @api.depends('line_ids')
    def _compute_num_books(self):
        for book in self:
            book.num_books = len(book.line_ids)

搜索视图

可用的搜索选项通过

    <record id="view_filter_checkout" model="ir.ui.view">
        <field name="model">library.checkout</field>
        <field name="arch" type="xml">
            <search>
                <field name="member_id" />
                <field name="user_id" />
                <filter name="filter_not_done"
                    string="To Return"
                    domain="[('state','=','open')]" />
                <filter name="filter_my_checkouts"
                    string="My Checkouts"
                    domain="['user_id', '=', uid]" />
                <filter name="group_user"
                    string="By Member"
                    context="{'group_by': 'member_id'}" />
            </search>
        </field>
    </record>

<activity string="Activities"/>

    <record id="view_calendar_checkout" model="ir.ui.view">
        <field name="model">library.checkout</field>
        <field name="arch" type="xml">
            <calendar date_start="request_date"
                color="user_id">
                <field name="member_id" />
                <field name="stage_id" />
            </calendar>
        </field>
    </record>

    num_books = fields.Integer(
        compute='_compute_num_books',
        store=True)

    <record id="view_pivot_checkout" model="ir.ui.view">
        <field name="model">library.checkout</field>
        <field name="arch" type="xml">
            <pivot>
                <field name="stage_id" type="col" />
                <field name="member_id" />
                <field name="request_date" interval="week" />
                <field name="num_books" type="measure" />
            </pivot>
        </field>
    </record>

    <record id="view_graph_checkout" model="ir.ui.view">
        <field name="model">library.checkout</field>
        <field name="arch" type="xml">
            <graph type="bar">
                <field name="stage_id" />
                <field name="num_books" type="measure" />
            </graph>
        </field>
    </record>