QWeb簡史 到目前為止，我們的房地產模塊的界面設計相當有限。構建列表視圖很簡單，因為只需要欄位列表。表單視圖也是如此：儘管使用了一些標記，如<group>或<page>，但在設計方面幾乎沒有什麼可做的。 然而，如果我們想給我們的應用程式一個獨特的外觀，就必須更進一步，能夠設計新的視圖。此外，PDF ...
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/
作者：授客
微信/QQ：1033553122
全國軟體測試QQ交流群：7156436
Git地址：https://gitee.com/ishouke
友情提示：限於時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額隨意，您的支持將是我繼續創作的源動力，打賞後如有任何疑問，請聯繫我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群
