QWeb簡史

到目前為止，我們的房地產(chǎn)模塊的界面設(shè)計相當(dāng)有限。構(gòu)建列表視圖很簡單，因為只需要字段列表。表單視圖也是如此：盡管使用了一些標(biāo)記，如<group>或<page>，但在設(shè)計方面幾乎沒有什么可做的。

然而，如果我們想給我們的應(yīng)用程序一個獨特的外觀，就必須更進(jìn)一步，能夠設(shè)計新的視圖。此外，PDF報告或網(wǎng)站頁面等其他功能需要另一個更靈活的工具：模板引擎。

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

你可能已經(jīng)在Odoo見過 看板，其中的記錄以卡片狀結(jié)構(gòu)顯示。我們將為我們的房地產(chǎn)模塊構(gòu)建這樣的視圖。

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

參考: 本主題關(guān)聯(lián)文檔可以查看Kanban.

目標(biāo): 本節(jié)結(jié)束時創(chuàng)建一個房產(chǎn)的看板視圖

在我們的地產(chǎn)應(yīng)用程序中，我們希望添加一個看板視圖來顯示我們的房產(chǎn)。看板視圖是標(biāo)準(zhǔn)的Odoo視圖（如表單和列表視圖），但其結(jié)構(gòu)更靈活。事實上，每張卡片的結(jié)構(gòu)是表單元素（包括基本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，每個記錄將呈現(xiàn)一次。
• <t t-name="kanban-box">：<t>是QWeb指令的占位符元素。在本例中，它用于將模板的name設(shè)置為kanban-box
• <div class="oe_kanban_global_click">：oe_kanban_global_click讓<div>可點擊，以打開記錄
• <field name="name"/>：這向視圖中添加name字段。

練習(xí)--制作一個最小的看版視圖

根據(jù)上述提供的簡單例子，為房產(chǎn)創(chuàng)建一個最小化的看板視圖。唯一展示的字段為name.

提示: 必須在ir.actions.act_window對應(yīng)的view_mode中添加 kanban

修改odoo14\custom\estate\views\estate_property_views.xml（注意：以下未展示文件中的所有內(nèi)容，其它內(nèi)容保持不變）

    <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>

重啟服務(wù)驗證

一旦看板視圖起作用， 我們可以開始改進(jìn)它。如果我們想有條件的展示元素，可以使用 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。前者是根據(jù)當(dāng)前用戶參數(shù)格式化的，后者則是直接通過read()讀取的。

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

練習(xí)--改善看板視圖

添加以下字段到看板視圖：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')

驗證效果

讓我們對視圖做最后的修改：默認(rèn)情況下，財產(chǎn)必須按類型分組。您可能想看看Kanban中描述的各種選項。

練習(xí)--添加默認(rèn)分組

使用合適的屬性對房產(chǎn)分組，默認(rèn)按類型分組。你必須阻止拖拽和刪除。

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

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

驗證效果

看板視圖是一個典型的例子，說明從現(xiàn)有視圖開始并對其進(jìn)行微調(diào)而不是從頭開始總是一個好主意。

參考鏈接

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

https://fontawesome.dashgame.com/文章來源地址http://www.zghlxwxcb.cn/news/detail-420660.html

到了這里，關(guān)于odoo 開發(fā)入門教程系列-QWeb簡史的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！