第 14 章：QWeb 简史¶

到目前为止，我们的房地产模块的界面设计还相当有限。构建列表视图非常简单，因为只需要字段列表。表单视图也是如此：尽管使用了一些标签，例如“<group>` or ``<page>`”，但在设计方面几乎没有什么可做的。

但是，如果我们想为我们的应用程序提供独特的外观，则有必要更进一步并能够设计新的视图。此外，其他功能（例如 PDF 报告或网站页面）需要另一个更灵活的工具来创建：templateting 引擎。

您可能已经熟悉现有的引擎，例如 Jinja (Python)、ERB (Ruby) 或 Twig (PHP)。 Odoo 带有自己的内置引擎：QWeb 模板。 QWeb 是 Odoo 使用的主要模板引擎。它是一个 XML 模板引擎，主要用于生成 HTML 片段和页面。

您可能已经在 Odoo 中遇到过 kanban board，其中记录以卡片状结构显示。我们将为我们的房地产模块构建这样一个视图。

具体示例：看板视图¶

参考：与此主题相关的文档可以在看板中找到。

注解

目标：在本节末尾，应创建属性的看板视图：

在我们的房地产应用程序中，我们希望添加看板视图来显示我们的房产。看板视图是标准的 Odoo 视图（如表单和列表视图），但它们的结构更加灵活。事实上，每张卡片的结构都是表单元素（包括基本 HTML）和 QWeb 的混合。看板视图的定义与列表视图和表单视图的定义类似，只是它们的根元素是“<kanban>”。 In its simplest form, a Kanban view looks like:

<kanban>
    <templates>
        <t t-name="card">
            <div>
                <field name="name"/>
            </div>
        </t>
    </templates>
</kanban>

让我们分解一下这个例子：

<templates>: defines a list of QWeb 模板 templates. Kanban views must define at least one root template card，将为每条记录渲染一次。
<t t-name="card">: <t> is a placeholder element for QWeb directives. In this case, it is used to set the name of the template to card
视图中的“<field name="name"/>`: this will add the ``name`”字段。

Exercise

制作最小的看板视图。

使用提供的简单示例，为属性创建最小的看板视图。唯一要显示的字段是“name”。

提示：您必须添加 kanban in the view_mode of the corresponding ir.actions.act_window。

一旦看板视图发挥作用，我们就可以开始改进它。如果我们想有条件地显示一个元素，我们可以使用``t-if``指令（参见:ref:reference/qweb/conditionals）。

<kanban>
    <field name="state"/>
    <templates>
        <t t-name="card">
            <div>
                <field name="name"/>
                <div t-if="record.state.raw_value == 'new'">
                    This is new!
                </div>
            </div>
        </t>
    </templates>
</kanban>

我们添加了一些内容：

如果条件为真，则渲染``t-if``: the ``<div>``元素。
record: an object with all the requested fields as its attributes. Each field has two attributes value and raw_value。前者根据当前用户参数进行格式化，后者是来自 read() 的直接值。

在上面的示例中，字段 name was added in the <templates> element, but state is outside of it. When we need the value of a field but don’t want to display it in the view, it is possible to add it outside of the <templates> 元素。

Exercise

改进看板视图。

将以下字段添加到看板视图：预期价格、最佳价格、销售价格和标签。注意：最优惠价格仅在收到报价时显示，而售价仅在接受报价时显示。

请参阅本节的目标以获取直观示例。

让我们对视图进行最后的修改：默认情况下，属性必须按类型分组。您可能想查看看板中描述的各种选项。

Exercise

添加默认分组。

默认情况下，使用适当的属性按类型对属性进行分组。您还必须防止拖放。

请参阅本节的目标以获取直观示例。

看板视图是一个典型的例子，说明从现有视图开始并对其进行微调而不是从头开始总是一个好主意。有许多选项和课程可供选择，所以…阅读和学习！