odoo 開發入門教程系列-QWeb簡史

授客發表於2023-04-21
OdooWeb

QWeb簡史

到目前為止，我們的房地產模組的介面設計相當有限。構建列表檢視很簡單，因為只需要欄位列表。表單檢視也是如此：儘管使用了一些標記，如<group>或<page>，但在設計方面幾乎沒有什麼可做的。

然而，如果我們想給我們的應用程式一個獨特的外觀，就必須更進一步，能夠設計新的檢視。此外，PDF報告或網站頁面等其他功能需要另一個更靈活的工具：模板引擎。

您可能已經熟悉現有的引擎，如Jinja(Python)、ERB(Ruby) 或Twig（PHP）。Odoo自帶內建引擎：QWeb模板。QWeb是Odoo使用的主要模板引擎。它是一個XML模板引擎，主要用於生成HTML片段和頁面。

你可能已經在Odoo見過 看板，其中的記錄以卡片狀結構顯示。我們將為我們的房地產模組構建這樣的檢視。

一個具體的示例: 一個看板檢視

參考: 本主題關聯文件可以檢視Kanban.

目標: 本節結束時建立一個房產的看板檢視

在我們的地產應用程式中，我們希望新增一個看板檢視來顯示我們的房產。看板檢視是標準的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欄位。

練習--製作一個最小的看版檢視

根據上述提供的簡單例子，為房產建立一個最小化的看板檢視。唯一展示的欄位為name.

提示: 必須在ir.actions.act_window對應的view_mode中新增 kanban

修改odoo14\custom\estate\views\estate_property_views.xml（注意：以下未展示檔案中的所有內容，其它內容保持不變）

    <record id="link_estate_property_action" model="ir.actions.act_window">
        <field name="name">Properties</field>
        <field name="res_model">estate.property</field>
        <field name="view_mode">kanban,tree,form</field><--本次改動新增kanban-->
        <field name="context">{'search_default_state': True}</field>
    </record>
   
    <!-- 本次新增 -->
    <record id="estate_property_kanban" model="ir.ui.view">
        <field name="model">estate.property</field>
        <field name="arch" type="xml">
            <kanban>
                <templates>
                    <t t-name="kanban-box">
                        <div class="oe_kanban_global_click">
                            <field name="name"/>
                        </div>
                    </t>
                </templates>
            </kanban>
        </field>
    </record>

重啟服務驗證

一旦看板檢視起作用， 我們可以開始改進它。如果我們想有條件的展示元素，可以使用 t-if指令(檢視 Conditionals).

<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>元素之外。

練習--改善看板檢視

新增以下欄位到看板檢視：expected price, best price, selling price 和tags。注意：best price僅在收到報價時展示，而selling price僅在接受報價時展示

修改odoo14\custom\estate\views\estate_property_views.xml estate_property_kanban

    <record id="estate_property_kanban" model="ir.ui.view">
        <field name="model">estate.property</field>
        <field name="arch" type="xml">
            <kanban>
                <field name="state"/>
                <templates>
                    <t t-name="kanban-box">
                        <div class="oe_kanban_global_click">
                            <field name="name"/>
                            <field name="expected_price"/>
                            <!-- <field name="best_price" t-if="record.state.value == 'Offer Received'"/>-->
                            <div t-if="record.state.value == 'Offer Received'">
                                <field name="best_price"/>
                            </div>
                            <div t-if="record.state.value == 'Offer Accepted'">
                                <field name="selling_price" />
                            </div>
                            <field name="tag_ids"/>
                        </div>
                    </t>
                </templates>
            </kanban>
        </field>
    </record>

注意：這裡必須新增<field name="state"/>，否則介面會報類似以下錯誤：

odoo TypeError: Cannot read properties of undefined (reading 'value')

驗證效果

讓我們對檢視做最後的修改：預設情況下，財產必須按型別分組。您可能想看看Kanban中描述的各種選項。

練習--新增預設分組

使用合適的屬性對房產分組，預設按型別分組。你必須阻止拖拽和刪除。

修改odoo14\custom\estate\views\estate_property_views.xml estate_property_kanban，給<kanban>增加屬性

            <kanban default_group_by="state" records_draggable="false">

驗證效果

看板檢視是一個典型的例子，說明從現有檢視開始並對其進行微調而不是從頭開始總是一個好主意。

參考連結

https://www.odoo.com/documentation/14.0/zh_CN/developer/howtos/rdtraining.html

https://fontawesome.dashgame.com/

相關文章