第14章：QWeb简史¶

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

然而，如果我们想要为我们的应用程序提供独特的外观，那么需要更进一步，能够设计新的视图。此外，其他功能，如PDF报告或网站页面，需要使用更灵活的工具来创建：模板引擎。

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

你可能已经在Odoo中遇到过 看板 _，其中记录以类似卡片的结构显示。我们将为我们的房地产模块构建这样的视图。

具体示例：看板视图¶

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

注解

目标：在本节结束时，应该创建一个属性的看板视图：

在我们的房地产应用中，我们想要添加一个看板视图来显示我们的属性。看板视图是标准的Odoo视图（就像表单和列表视图一样），但它们的结构更加灵活。实际上，每个卡片的结构是表单元素（包括基本的HTML）和QWeb的混合。看板视图的定义类似于列表和表单视图的定义，只是它们的根元素是 <kanban> 。在最简单的形式下，看板视图如下所示：

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

让我们分解这个例子：

<templates>：定义了一个 QWeb模板模板列表。看板视图必须定义至少一个根模板 kanban-box，每个记录将渲染一次。
<t t-name="kanban-box">: <t> 是 QWeb 指令的占位符元素。在这个例子中，它用于将模板的 name 设置为 kanban-box
<field name="name"/>：这将会把 name 字段添加到视图中。

Exercise

创建一个最小化看板视图。

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

提示：您必须在相应的 ir.actions.act_window 的 view_mode 中添加 kanban 。

一旦看板视图正常工作，我们可以开始改进它。如果我们想要有条件地显示一个元素，我们可以使用 t-if 指令（参见条件语句）。

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

我们添加了一些内容：

t-if：如果条件为真，则渲染 <div> 元素。
record：一个对象，其属性包含所有请求的字段。每个字段有两个属性 value 和 raw_value。前者根据当前用户参数进行格式化，后者是来自 read() 的直接值。

在上面的例子中，字段 name 被添加在 <templates> 元素中，但是 state 在其外部。当我们需要一个字段的值，但不想在视图中显示它时，可以将其添加到 <templates> 元素之外。

Exercise

改进看板视图。

将以下字段添加到看板视图中：期望价格、最佳价格、销售价格和标签。请注意：只有在收到报价时才会显示最佳价格，而只有在接受报价时才会显示销售价格。

请参考本节的目标以获取视觉示例。

让我们为视图做最后的润色：默认情况下，属性必须按类型分组。您可能想看看看板中描述的各种选项。

Exercise

添加默认分组。

使用适当的属性默认按类型分组属性。您还必须防止拖放。

请参考本节的目标以获取视觉示例。

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

Edit on GitHub