第15章：QWeb簡史?

到目前為止，我們的房地產模塊的界面設計相當有限。構建列表視圖很簡單，因為只需要列表字段。對于表單視圖也是如此：盡管使用了一些標簽，如 <group> 或 <page> ，但在設計方面要做的事情很少。

然而，如果我們想要為我們的應用程序提供獨特的外觀，那么需要更進一步，能夠設計新的視圖。此外，其他功能，如PDF報告或網站頁面，需要使用更靈活的工具來創建：模板引擎。

你可能已經熟悉了像Jinja（Python）、ERB（Ruby）或Twig（PHP）這樣的現有引擎。Odoo自帶了自己的內置引擎： QWeb模板。QWeb是Odoo主要使用的模板引擎。它是一個XML模板引擎，主要用于生成HTML片段和頁面。

您可能已經在Odoo中遇到過看板，其中記錄以類似卡片的結構顯示。我們將為我們的房地產模塊構建這樣的視圖。

具體示例：看板視圖?

參考 : 有關此主題的文檔可以在看板中找到。

注解

目標 : 完成本節后，應該創建一個屬性的看板視圖：

在我們的房地產應用程序中，我們想要添加一個看板視圖來顯示我們的房產?？窗逡晥D是標準的Odoo視圖（就像表單和列表視圖一樣），但它們的結構更加靈活。實際上，每個卡片的結構是表單元素（包括基本的HTML）和QWeb的混合?？窗逡晥D的定義類似于列表和表單視圖的定義，只是它們的根元素是 <kanban> 。在其最簡單的形式中，看板視圖如下所示：

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

讓我們分解這個例子：

<templates> : 定義了 QWeb模板模板的列表?？窗逡晥D 必須定義至少一個名為 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

創建一個最小化看板視圖。

使用提供的簡單示例，為屬性創建一個最小的看板視圖。唯一要顯示的字段是“名稱”。

提示：您必須在相應的“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>
            <div t-if="record.state.raw_value == 'new'">
                This is new!
            </div>
        </t>
    </templates>
</kanban>

我們添加了一些內容：

t-if : 如果條件為真，則呈現 <div> 元素。
record : 一個對象，它具有所有請求字段作為其屬性。每個字段都有兩個屬性 value 和 raw_value 。前者根據當前用戶參數進行格式化，而后者是來自 read() 的直接值。

在上面的例子中，字段 name 被添加在 <templates> 元素中，但是 state 在其外部。當我們需要一個字段的值，但不想在視圖中顯示它時，可以將其添加到 <templates> 元素之外。

Exercise

改進看板視圖。

將以下字段添加到看板視圖中：期望價格、最佳價格、銷售價格和標簽。請注意：只有在收到報價時才會顯示最佳價格，而只有在接受報價時才會顯示銷售價格。

請參考本節的目標以獲取視覺示例。

讓我們為我們的視圖添加最后的修飾：默認情況下，屬性必須按類型分組。您可能需要查看看板中描述的各種選項。

Exercise

添加默認分組。

使用適當的屬性默認按類型分組屬性。您還必須防止拖放。

請參考本節的目標以獲取視覺示例。

看板視圖是一個典型的例子，說明從現有視圖開始微調而不是從頭開始總是一個好主意。有許多選項和類可用，所以…閱讀并學習！

現在是時候為我們的應用程序添加最后的修飾并將其提交到 GitHub 上了 <tutorials/getting_started/16_guidelines_pr>!

Edit on GitHub