odoo中的QWeb模板引擎

* 概述
    QWeb是odoo主要模板引擎，採用xml表述，最後生成HTML文件
    
* 通常用法

    #條件表達式

<t t-if="record.effort_estimate.raw_value > 0">
        <li>Estimate <field name="effort_estimate"/></li>
</t>

     比較符號：
       lt(<)    lte(<=)   gt(>)   gte(>=)
       注 < <= 不能用在表達式中，只能用字母代替
     
    # 輸出值 t-esc 和 t-raw
       <t t-esc="record.message_follower_ids.raw_value" />
       <t t-raw="record.message_follower_ids.raw_value" />
       t-esc  過濾安全值，像html元素
       t-raw  數據庫中的原始數據
    
    # 循環

        <t t-foreach="record.message_follower_ids.raw_value" t-as="rec">
           <t t-esc="rec" />;
        </t>

        t-foreach="record.message_follower_ids.raw_value.slice(0, 3)" 還能夠切片
        還有一些變量
        rec_index 從0開始循環索引
        rec_size  要循環的記錄集大小
        rec_first  第一個元素
        rec_last   最後一個元素
        rec_even   index爲偶數時爲真
        rec_odd    index爲奇數時爲真
        rec_parity  是偶數和奇數
        rec_all  表示循環結束的標識
        rec_value 循環一個字典時，的鍵的值
        
    # 動態屬性

        <div>
            <t t-foreach="record.message_follower_ids.raw_value.slice(0, 3)"
            t-as="rec">
              <img t-att-src="kanban_image(
              'res.partner', 'image_small', rec)"
               class="oe_kanban_image oe_kanban_avatar_smallbox"/>
            </t>
        </div

        t-att- prefixed 如 <img>的src  就能夠 t-att-src="..."
        
     # 屬性的字符替換    

        <span t-attf-class="oe_kanban_text{{
            record.date_deadline.raw_value and
            !(record.date_deadline.raw_value > (new Date()))
            ? '_red' : '_black' }}">
            <field name="date_deadline"/>
        </span>

        t-attf-prefixed  取代內容，上面的就是動態類
        
    # 變量設置    
        #設置變量 t-set t-value
        <t t-set="new_variable" t-value="True" />
        設置了變量 new_variable 的值 爲 True
        t-value 也能夠是表達
         <t t-set="foo" t-value="2+1" >
        設置了變量foo值爲3
        t-value能夠是一段html
        <t t-set="foo">
            <li>ok</li>
        </t>
        設置了變量foo 爲 <li>ok</li>
        
    #設置屬性
        t-att-$name
        $name 是屬性名
        <div t-att-a="66" />
        結果：
          <div a="66"></div>
          
        t-attf-$name 用於混合,有字符串也有變量，變量用{{}}

        <t t-foreach="[1, 2, 3]" t-as="item">
            <li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
        </t>

        t-att=mapping 鍵值對組成屬性，主要用多對
        <div t-at="{'a':1,'b':2}" />
        結果：
         <div a="1" b="2"></div>
         
        t-att=pair 一對，這個對一個是鍵，後一個是值
         <div t-att="['a','b']" />  <=>    <div t-att="('a','b')" />    
        結果：
          <div a="b"></div>
        
    # 包含其它模板

        <t t-name="follower_avatars">
            <div>
            <t t-foreach="record.message_follower_ids.raw_value.slice(0, 3)"
            t-as="rec">
                <img t-att-src="kanban_image(
                    'res.partner', 'image_small', rec)"
                    class="oe_kanban_image oe_kanban_avatar_smallbox"/>
            </t>
            </div>
        </t>    
        。。。
        <t t-call='follower_avatars' />

        t-call 調用其它模板
        
        複用靈活一些

        <t t-name="follower_avatars">
            <div>
            <t t-foreach="record.message_follower_ids.raw_value.slice(0, arg_max)"
            t-as="rec">
                <img t-att-src="kanban_image(
                    'res.partner', 'image_small', rec)"
                    class="oe_kanban_image oe_kanban_avatar_smallbox"/>
            </t>
            </div>
        </t>    
        。。。
        <t t-call='follower_avatars'>
           <t t-set="arg_max" t-value='3' />

        <t/>   

    # QWeb 其它指令
        
        <p t-att="{'class': 'oe_bold', 'name': 'test1'}" />
        結果顯示
        <p class="oe_bold" name="test1" />
        t-att 接受字典
        <p t-att="['class','oe_bold']"
        結果顯示
        <p class="oe_bold">
        
    # card類式加菜單        

        <div class="oe_dropdown_kanban oe_dropdown_toggle">
            <span class="oe_e">í</span>
            <ul class="oe_dropdown_menu">
                <t t-if="widget.view.is_action_enabled('edit')">
                    <li>
                        <a type="edit">Edit...</a>
                    </li>
                </t>
                <t t-if="widget.view.is_action_enabled('delete')">
                    <li>
                        <a type="delete">Delete</a>
                    </li>
                </t>
                <!-- Color picker option: -->
                <li>
                    <ul class="oe_kanban_colorpicker"
                        data-field="color"/>
                </li>
            </ul>
        </div>

      
    # card類式加顏色     
        <field name="color" />    
        <div class="oe_kanban_card">
        <div t-attf-class="oe_kanban_card
              #{kanban_color(record.color.raw_value)}">
              
    # 爲長文本加省略號
          <t t-esc="kanban_text_ellipsis(record.name.value, 32)" />
        過超32個字符就加... 不顯示內容了
        
        
    # 自定義css    和javascript的資源

    
       <?xml version="1.0" encoding="utf-8"?>
        <openerp>
        <data>
            <template id="assets_backend"
                      inherit_id="web.assets_backend"
                      name="Todo Kanban Assets">
                <xpath expr="." position="inside">
                    <link rel="stylesheet"
                          href="/todo_kanban/static/src/css/todo_kanban.css"
                    />
                    <script type="text/javascript"
                            src="/todo_kanban/static/src/js/todo_kanban.js">
                    </script>
                </xpath>
            </template>
        </data>
        </openerp>

     # 調用其它模板
           採用t-call

           <template id="sub">
            <t t-esc="identifier" />
           </template>
           <template id="hello">
            <p>
                hello,
                <t t-call="module.sub">
                    <t t-set="identifier" t-value="name" />
                </t>
            </p>
           </template>

     #字段渲染

           @http.route('hello/<model("res.users"):user')  # 給用戶的id便可
           def hello(self,user,**kw)
                return http.request.render('module.hello',{'user':user})
            -------
            <template id="hello">
                <p t-field="user.display_name" />
            </template>

       ---------
     #可用字段選擇修飾

           <template id="hello">
                <p t-field="user.creat_date" />
                <p t-field="user.creat_date"  t-filed-options='{"format":"long"}'/>
                <p t-field="user.creat_date"  t-filed-options='{"format":"EEE"}'/>
            </template>
            -------------
            <template id="hello">
                <p t-field="user.wealth" />
                <p t-field="user.wealth"  t-filed-options='{
                     "widget":"monetary"
                     "display_currency":"user.company_id.currency_id"
                     }'/>
            </template>
            ------------
            <template id="hello">
                <p t-field="user.create_date" t-field-options='{"widget":relative}}' />
            </template>

     #模板繼承

            <template id="hello">
                <p> Base template </p>
            </template>
            <template id="hello2" inherit_id="hello" name="Extender">
                <xpath expr="//p" position="before">
                    <h1>Extended!</h1>
                </xpath>    
            </template>

             獲得的結果：
               <h1>Extended!</h1>
               <p>Base template</p>
            --------------
            <template id="hello">
                <p class="a">A</p>
                <p class="b">B</p>            
            </template>
            <template id="hello2" inherit_id="hello" name="Extender">
                <xpath expr="//p[hasclass('b')]" position="before">
                    <h1>Extended!</h1>
                </xpath>    
            </template>    
              獲得的結果：
               <p class="a">A</p>
               <h1>Extended!</h1>
               <p class="b">B</p>
            ----------
            調用系統的基礎模板：

              <template id="hello">
               <t t-call="website.layout">
                    <p class="a">A</p>
                    <p class="b">B</p>    
               </t>                
            </template>
            <template id="hello2" inherit_id="hello" name="Extender">
                <xpath expr="//p[hasclass('b')]" position="before">
                    <h1>Extended!</h1>
                </xpath>    
            </template>   

     #調試
       t-debug
        <t t-debug="pdb" />
        <=>
        importlib.import_module("pdb").set_trace()
        
     #python的請求模板
        response = http.request.render('my-template',{'context_value':99})
        用得是 http.request.render()方法
        
*代碼分析    
     #掃描槍的操做界面

     <openerp>
       <data>
        <template id="assets_backend" name="stock assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/stock/static/src/css/stock.css"/>
                <script type="text/javascript" src="/stock/static/src/js/widgets.js"></script>
            </xpath>
        </template>     
        .....
     </data>
    <openerp>