第 15 章:QWeb 简史¶
到目前为止,我们房地产模块的界面设计还相当有限。构建列表视图非常简单,因为只需要字段的列表。表单视图也是如此:尽管使用了 <group> 或 <page> 等少量标签,但在设计方面几乎没有什么要做的。
然而,如果我们想赋予我们的应用程序独特的外观,就有必要更进一步,能够设计新的视图。此外,PDF 报表或网站页面等其他功能需要另一种工具才能以更大的灵活性创建:一个 templating 引擎。
您可能已经熟悉现有的引擎,例如 Jinja(Python)、ERB(Ruby)或 Twig(PHP)。Odoo 自带内置引擎:QWeb 模板。QWeb 是 Odoo 使用的主要模板引擎。它是一个 XML 模板引擎,主要用于生成 HTML 片段和页面。
您可能已经在 Odoo 中遇到过 kanban board ,其中记录以卡片状结构显示。我们将为我们的房地产模块构建这样一个视图。
具体示例:看板视图¶
参考:与本节主题相关的文档可以在 看板 中找到。
Note
目标:在本节结束时,应创建好一个房源的看板视图:
在我们的 estate 应用中,我们希望添加一个看板视图来显示我们的房源。看板视图是标准的 Odoo 视图(类似于表单视图和列表视图),但其结构要灵活得多。实际上,每张卡片的结构是表单元素(包括基本 HTML)与 QWeb 的混合。看板视图的定义类似于列表视图和表单视图的定义,只是其根元素为 <kanban>。在最简单的形式下,看板视图如下所示:
<kanban>
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_global_click">
<field name="name"/>
</div>
</t>
</templates>
</kanban>
让我们来拆解这个示例:
<templates>:定义 QWeb 模板 模板的列表。看板视图 必须 定义至少一个根模板kanban-box,它将为每条记录渲染一次。<t t-name="kanban-box">:<t>是 QWeb 指令的占位元素。在这里,它用于将模板的name设置为kanban-box<div class="oe_kanban_global_click">:oe_kanban_global_click使<div>可点击,从而打开记录。<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 class="oe_kanban_global_click">
<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
添加默认分组。
使用合适的属性让房产默认按类型分组。您还必须禁止拖放操作。
如需可视化示例,请参见本节的 目标 。
看板视图是一个典型示例,说明从现有视图出发进行微调而不是从零开始,往往是个好主意。有许多可用的选项和类,所以……多阅读、多学习吧!