Odoo 12開發(fā)之看板視圖和用戶端 QWeb

前言:

Qweb是odoo使用的模板引擎,基于xml來生成HTML片段和頁面.
通過Qweb可生成豐富的看板視圖,報(bào)表和cmx

一·了解看板

# 兩種布局	
	# 1. 卡片列表
	# 2. 組織成不同的卡片	

二·設(shè)計(jì)看板視圖

優(yōu)先級(jí)、看板狀態(tài)和顏色

# 看版中其他字段:
	priority  #   讓用戶組織他們的工作項(xiàng)，標(biāo)記什么應(yīng)優(yōu)先處理
	kanban_state  #   標(biāo)記是否應(yīng)移向下一階段或因某種原因原地不動(dòng)。在模型定義層中兩者都是選擇項(xiàng)字段。在視圖層，對(duì)它們有特別的組件用于表單和看板視圖。
    color   # 用于存儲(chǔ)看板卡片顯示的顏色，并可通過看板視圖中的顏色拾取器菜單設(shè)置
	# 如下例:
    class Checkout(models.Model):
        ...
        priority = fields.Selection(
            [('0', 'Low'),
             ('1', 'Normal'),
             ('2', 'High')],
            'Priority',
            default='1')
        kanban_state = fields.Selection(
            [('normal', 'In Progress'),
             ('blocked', 'Blocked'),
             ('done', 'Ready for next stage')],
            'Kanban State',
            default='normal')   
    

看板卡片元素

# 看板視圖框架包含了一個(gè)<kanban>外層元素和一下基礎(chǔ)結(jié)構(gòu)
# 看板支持屬性:
	default_group_by  #  設(shè)置默認(rèn)列分組使用的字段
	default_order  #  設(shè)置看板項(xiàng)默認(rèn)使用的排序
 	quick_create=”false”  #  禁用了每列頂部的快速創(chuàng)建選項(xiàng)（大的加號(hào)符號(hào)），快速創(chuàng)建只需提供標(biāo)題描述即可創(chuàng)建新項(xiàng)。false是 JavaScript 的語法，必須是小寫字母。
	class  #  為渲染看板視圖的根元素添加 CSS 類。相關(guān)類是_kanban_small_column，讓列比默認(rèn)的更加緊湊。其它類可由我們模塊的 CSS 文件來進(jìn)行提供。
 	group_create, group_edit, group_delete和quick_create_view   #  可設(shè)置為 false 來禁用看板列上對(duì)應(yīng)的操作。如group_create=”false”刪除右側(cè)添加新列的按鈕。
	on_create  #  用于創(chuàng)建用戶點(diǎn)擊左上角 Create 按鈕時(shí)彈出的自定義簡單表單視圖窗口。應(yīng)為相應(yīng)的表單視圖添加<module>.<xml_id>值。
    
    
    
    
### <progressbar> 如下屬性:
	field	#  是對(duì)列中各項(xiàng)進(jìn)行顏色分組的字段名
	colors	#  是一個(gè)字典，將分組字段值與以下三種顏色分別進(jìn)行映射：danger (紅色), warning (黃色)或success (綠色)。
	sum_field	#  是一個(gè)可選項(xiàng)，用于選取整列匯總的字段名。如未設(shè)置，會(huì)使用各項(xiàng)的計(jì)數(shù)值。

<kanban default_group_by="stage_id" class="o_kanban_small_column">
    <!-- Fields -->
    <field name="stage_id" />
    <field name="id" />
    <field name="color" />
    <field name="kanban_state" />
    <field name="priority" />
    <field name="message_partner_ids" />

    <!-- Optional progress bar -->
    <progressbar
                 field="kanban_state"
                 colors='{"done": "success", "blocked": "danger"}' />
    <!-- Templates with HTML snippets to use -->
    <templates>
        <t t-name="kanban-box">
            <!-- HTML Qweb template -->
        </t>
        </template>
</kanban>

三·Qweb模板語言

# QWeb 會(huì)查找模板種的特殊指令,并動(dòng)態(tài)的替換掉生成的HTML.
# 對(duì)于使用帶有QWeb指令的(t-if t-foreach)的特殊元素.該元祖不會(huì)在最終產(chǎn)生的xml/html有任何輸出
# QWeb指令常使用運(yùn)算的表達(dá)式生成不同結(jié)果:
    # 報(bào)表和網(wǎng)頁使用服務(wù)端QWeb的python實(shí)現(xiàn)
    # 看板使用客戶端js實(shí)現(xiàn),即看板視圖種的QWeb表達(dá)式應(yīng)使用js編寫
    
    
### 看板視圖 , 內(nèi)部的步驟流程
	# 1. 獲取模板的XML進(jìn)行渲染
	# 2. 調(diào)用服務(wù)端read()方法來獲取模板中所涉及的字段數(shù)據(jù)
	# 3. 定位kanban-boxs模板并使用QWeb解析它來輸出最終的HTML片斷
	# 4. 在瀏覽器顯示(DOM)中注入 HTML

QWeb JavaScript 運(yùn)行上下文

# QWeb指令使用表達(dá)式的運(yùn)行來生成結(jié)果
	raw_value  # 是由服務(wù)端read()方法返回的值
	value  # 根據(jù)用戶設(shè)置來格式化
	widget  # 是當(dāng)前KanbanRecord()組件對(duì)象的引用,用于在看板種渲染當(dāng)前記錄
	record # 是 widget.record的簡寫形式,使用點(diǎn)號(hào)標(biāo)記來提供對(duì)可用字段的訪問
	read_only_mode # 標(biāo)識(shí)當(dāng)前視圖是否為讀模式(非編輯模式)是widget.view.options.read_only_mode的簡寫形式。
    instance # 是對(duì)全部網(wǎng)頁客戶端實(shí)例的一個(gè)引用
    
### XML 標(biāo)準(zhǔn)中，這些字符具有特殊含義
    lt是小于
    lte是小于等于
    gt是大于
    gte是大于等于

字符串替換動(dòng)態(tài)屬性– t-attf

# t-attf 來作為頂級(jí)<div>元素設(shè)置一個(gè)類,根據(jù)卡片的color字段值來顯示顏色
# t-attf 指令查找代碼塊運(yùn)行并替換結(jié)果,通過{{}} 和#{{}} 來進(jìn)行分隔. 代碼塊的內(nèi)容是任意js表達(dá)式,QWeb表達(dá)式中的任意可用變量.

# 例子:
	t-attf-class="oe_kanban_text_red" # 顯示為紅色
	t-attf-class="oe_kanban_text_{{
                  record.priority.raw_value lt '2'
                  ? 'black' : 'red'}}"  # 記錄的星星小于2是黑色,否則是紅色

<li t-attf-class="oe_kanban_text_{{
                  record.priority.raw_value lt '2'
                  ? 'black' : 'red'}}">
    <field name="user_id" />
</li>

表達(dá)式動(dòng)態(tài)屬性 t–att–

# t-att- 是QWeb指令通過表達(dá)式動(dòng)態(tài)生成的屬性值.
# .value字段返回在屏幕上顯示的值,鼠標(biāo)懸停在圖像上時(shí)就會(huì)顯示相對(duì)于的用戶名.
t-att-title="record.member_id.value" 

循環(huán) – t-foreach

# t-foreach 指令接受一個(gè)js表達(dá)式. 
    t-as  指令設(shè)置別名,

### rec 變量
    rec_index是迭代索引，從0開始
    rec_size是集合中的元素?cái)?shù)量
    rec_first在迭代的第一個(gè)元素中為真
    rec_last在迭代的最后一個(gè)元素中為真
    rec_even在索引為偶數(shù)時(shí)為真
    rec_odd在索引為奇數(shù)時(shí)為真
    rec_parity根據(jù)當(dāng)前索引為odd或even
    rec_all表示進(jìn)行迭代的對(duì)象
    rec_value在迭代{key:value} 字典時(shí)，存儲(chǔ)value (rec存儲(chǔ)鍵名)
    
### t-foreach="record.message_partner_ids.raw_value.slice(0, 3)"
	是對(duì)取到內(nèi)容進(jìn)行了切片

<t t-foreach="record.message_partner_ids.raw_value.slice(0,3)" t-as="rec">
    <img t-att-src="kanban_image('res.partner',%20'image_small',%20rec)"
        class="oe_avatar" width="24" height="24" alt="" />
</t>

條件判斷 – t-if

<t t-if="record.num_books.raw_value == 0">
    <li>No books.</li>
</t>
<t t-elif="record.num_books.raw_value gt 9">
    <li>A lot of books!</li>
</t>
<t t-else="">
    <li><field name="num_books" /> books.</li>
</t>

渲染值 t-esc和t-raw

### <field/>元素可以渲染值 t-esc 也可以渲染值, t-raw是確定數(shù)據(jù)是否安全的渲染值(避免使用)

# t-esc 指令運(yùn)行表達(dá)式并將其渲染為轉(zhuǎn)義后的 HTML 值
	<t t-esc="record.message_partner_ids.raw_value" />
# t-raw 確定源數(shù)據(jù)是安全的，可以無需轉(zhuǎn)義使用t-raw 來渲染原始值
	<t t-raw="record.message_partner_ids.raw_value" />

為變量設(shè)置值 – t-set

# 對(duì)于更復(fù)雜的邏輯，可以將表達(dá)式結(jié)果存儲(chǔ)在變量中
# t-set指令來實(shí)現(xiàn),設(shè)置變量名
# t-value指令來添加表達(dá)式計(jì)算分配的值

<t t-set="red_or_black"
   t-value="record.priority.raw_value gte '2' ? 'oe_kanban_text_red' :''" />
<li t-att-class="red_or_black">
    <field name="user_id" />
</li>

調(diào)用和復(fù)用其它模板 – t-call

# 重復(fù)調(diào)用  , 一句 t-name設(shè)置的名字.可重復(fù)調(diào)用

<t t-name="follower_avatars">
    <div>
        <t t-foreach="record.message_partner_ids.raw_value.slice(0,3)"
           t-as="rec">
            <img t-att-src="kanban_image('res.partner',%20'image_small',%20rec)"
                 class="oe_avatar" width="24" height="24" alt="" />
        </t>
    </div>
</t>

### 重復(fù)調(diào)用
<t t-call="follower_avatars" />

### 更優(yōu)雅的方式實(shí)現(xiàn) 調(diào)用模板傳遞參數(shù)
# slice(0,arg_max)
<t t-name="follower_avatars">
    <div>
        <t t-foreach="record.message_partner_ids.raw_value.slice(0, arg_max)"
           t-as="rec">
            <img t-att-src="kanban_image('res.partner',%20'image_small',%20rec)"
                 class="oe_avatar" width="24" height="24" alt="" />
        </t>
    </div>
</t>

### 子模板調(diào)用時(shí)定義arg_max變量
<t t-call="follower_avatars">
    <t t-set="arg_max" t-value="3" />
</t>

字典和列表動(dòng)態(tài)屬性

### 映射
# 定義:<p t-att="{'class': 'oe_bold', 'name': 'Hello'}" />
# 輸出:<p class="oe_bold" name="Hello" />

### pair
# 定義:<p t-att="['class', 'oe_bold']" />
# 輸出:<p class="oe_bold" />

四·看板視圖的繼承

# 與普通視圖的繼承一樣

# XPath 查找<t t-name=”kanban-box”>元素內(nèi)的<field name=”display_name”>
<record id="res_partner_kanban_inherit" model="ir.ui.view">
    <field name="name">Contact Kanban modification</field>
    <field name="model">res.partner</field>
    <field name="inherit_id" ref="base.res_partner_kanban_view" />
    <field name="arch" type="xml">
        <xpath expr="http://t[@t-name='kanban-box']//field[@name='display_name']"
               position="before">
            <span>Name:</span>
        </xpath>
    </field>
</record>

五·自定義 CSS 和 JavaScript

# 自定義css和js文件

# 步驟 
	# 1. 在views目錄下新建checkout_kanban_assets.xml數(shù)據(jù)文件加載樣式
	# 2. 在static/src/css編寫css  src/js編寫js
	# 3. 將數(shù)據(jù)文件加載到__manifest__.py的data種
	

# library_checkout/views/checkout_kanban_assets.xml：
<odoo>
    <template id="assets_backend" inherit_id="web.assets_backend"
        name="Library Checkout Kanban Assets">
        <xpath expr="." position="inside">
            <link rel="stylesheet"
                href="/library_checkout/static/src/css/checkout_kanban.css" />
            <script type="text/javascript"
                src="/library_checkout/static/src/js/checkout_kanban.js">
            </script>
        </xpath>
    </template>
</odoo>

總結(jié)

以上是生活随笔為你收集整理的Odoo 12开发之看板视图和用户端 QWeb的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。