zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Android application context/activity context与内存泄露(转)
    Android Slide Menu相关
    android 实现自定义卫星菜单
    关于引用Theme.AppCompat theme的报错问题
    java中volatile关键字的含义
    自定义控件其实很简单1/3
    Android 修改应用程序字体
    Android字体工作原理
    颜色渐变的算法
    Android系统下载管理DownloadManager功能介绍及使用示例
  • 原文地址:https://www.cnblogs.com/dancesir/p/6702432.html
Copyright © 2011-2022 走看看