Qweb的一些介绍

  • Post author:
  • Post category:其他




定义:

  • Qweb被用作OpenERP的web客户端模板引擎。它是一种基于XML的模板语言。
  • 特征:

    • 完全在客户端浏览器中完成渲染
    • 一个模板文件中可以包含多个模板,通常一个模板文件中包含一个模板
    • 对OpenERP的web组件有很好的支持,也可以用于除开OpenERP web外的其他框架



OpenERP中的Qweb



关键点说明

  • Qweb模板在XML属性上加前缀“t-”表示

      t-name:模板名称,如:
      <t t-name="message"></t>
      t-foreach=iterable:循环遍历标签
      <tt-foreach="msgList" t-as="bo"> </t>
      t-esc:引用实例参数,可以使用任意JavaScript表达式;如
      <tt-esc="bo.message"/>
      t-att-attName:对象属性设置,如对input输入控件设置value:
      <inputtype="text"  t-att-value="order.buyer_memo"/>
    



一般用法

  • 条件表达式

      <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 如 的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>
      
    *  <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">
    
  • 包含其他模板

      <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 调用其它模板
      <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>
    
    • 复用灵活
      <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/> 
    
  • 为文本加省略号

      <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>
    
  • 字段渲染

     @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
    
      调用调试器使用PDB的set_trace API. 这个参数应该是一个模块的名称,在这个模块上set_trace 方法被调用:
      
      <t t-debug="pdb"/>
      相当于importlib.import_module("pdb").set_trace()
    



版权声明:本文为weixin_44490858原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。