中菁- odoo  ERP 实施 杭州

示例图片三
首页 > Odoo资讯 > odoo知识库

odoo创建特定布局的页面

2018-01-14 22:21:10 中菁- odoo ERP 实施 杭州 阅读

想象一下,我们要为特殊功能的页面创建一个特定的布局。在这些页面上,我们需要在顶部添加一个功能列表,并使用代码片段(snippets)让客户可以尽可能地设置其他的页面布局。

 

在你的view文件夹中,创建一个pages.xml文件并添加默认Odoo标记。在“data”创建一个“template”标签,将page属性设置为true,并将代码添加里面去。

 

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8" ?>  

  2.   

  3. <openerp>  

  4.   

  5.   <data>  

  6.   

  7.     <!-- === Services Page === -->  

  8.   

  9.     <template name="Services page" id="website.services" page="True">  

  10.   

  11.       <h1>Our Services</h1>  

  12.   

  13.         <ul class="services">  

  14.   

  15.           <li>Cloud Hosting</li>  

  16.   

  17.           <li>Support</li>  

  18.   

  19.           <li>Unlimited space</li>  

  20.   

  21.         </ul>  

  22.   

  23.       </template>  

  24.   

  25.     </data>  

  26.   

  27.   </openerp>  


网页标题将是模板的ID。在我们使用Services(从website.services

 

我们成功地创建了一个新的页面布局,但我们还没有告诉系统如何使用它。要做到这一点,我们可以用QWeb。把HTML代码到<T>标签里,如下:

 

[html] view plain copy
  1. <!-- === Services Page === -->  

  2.   

  3. <template name="Services page" id="website.services" page="True">  

  4.   

  5.   <t-call="website.layout">  

  6.   

  7.     <div id="wrap">  

  8.   

  9.       <div class="container">  

  10.   

  11.         <h1>Our Services</h1>  

  12.   

  13.         <ul class="services">  

  14.   

  15.           <li>Cloud Hosting</li>  

  16.   

  17.           <li>Support</li>  

  18.   

  19.           <li>Unlimited space</li>  

  20.   

  21.         </ul>  

  22.   

  23.       </div>  

  24.   

  25.     </div>  

  26.   

  27.   </t>  

  28.   

  29. </template>  



 

使用<t t-call="website.layout">我们将使用自己的代码扩展Odoo的默认页面布局。

 

我们使用了两段<DIV>代码,一个的IDwrap,另一个是用了container类。这就提供了一个最小的布局。

 

下一步是添加一个空的区域来让用户可以填写。只需在div#wrap元素之前添加一个oe_structure类的DIV

 

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8" ?>  

  2.   

  3. <openerp>  

  4.   

  5. <data>  

  6.   

  7.    

  8.   

  9. <!-- === Services Page === -->  

  10.   

  11. <template name="Services page" id="website.services" page="True">  

  12.   

  13.   <t-call="website.layout">  

  14.   

  15.    <div id="wrap">  

  16.   

  17.      <div class="container">  

  18.   

  19.        <h1>Our Services</h1>  

  20.   

  21.        <ul class="services">  

  22.   

  23.          <li>Cloud Hosting</li>  

  24.   

  25.          <li>Support</li>  

  26.   

  27.          <li>Unlimited space</li>  

  28.   

  29.        </ul>  

  30.   

  31.        <!-- === Snippets' area === -->  

  32.   

  33.        <div class="oe_structure" />  

  34.   

  35.      </div>  

  36.   

  37.    </div>  

  38.   

  39.   </t>  

  40.   

  41. </template>  

  42.   

  43.    

  44.   

  45. </data>  

  46.   

  47. </openerp>  



 

提示

你可以创建任意多的代码片断区域并放到你愿意放的页面中。

 

我们的页面就快好了。现在我们要做的是在我们的__openerp__.py添加pages.xml文件。

 

[html] view plain copy
  1. 'data': [  

  2.   

  3.   'views/layout.xml',  

  4.   

  5.   'views/pages.xml'  

  6.   

  7. ],  


更新你的主题。

 

好了,我们的服务页面已经准备好,你可以通过浏览网站/网页/服务/访问它。

 

你会注意到代码片段(snippets)可以在服务列表中拖放。

 

再回到pages.xml文件中,在页面模板后,复制/粘贴以下代码。

[html] view plain copy
  1. <record id="services_page_link" model="website.menu">  

  2.   

  3.   <field name="name">Services</field>  

  4.   

  5.   <field name="url">/page/services</field>  

  6.   

  7.   <field name="parent_id" ref="website.main_menu" />  

  8.   

  9.   <field name="sequence" type="int">99</field>  

  10.   

  11. </record>  

 

此代码将在主菜单中添加一个链接。

sequence属性定义了在顶部菜单中的链接的位置。在我们的示例中,我们将值设置为99,以便将其放置到最后一个。如果你想把它放在一个特定的位置,你必须根据实际需要来更改它的值。

 

你可以看到检查website模块data.xml文件,Home 链接设置为10Contact us60。例如,如果你想把你的链接放在中间,那么序列值可以设置为40

 

添加Style

Odoo默认使用了Bootstrap。这意味着,你可以使用所有Bootstrap的引导样式和布局功能。

 

当然了,如果你想采用独特的设计,Bootstrap是不够的。以下步骤将指导您如何将自定义的样式(Style)添加到主题中。最终的效果不会很漂亮,但会让你了解完整的过程。

 

我们先创建一个空文件,名为style.less,放在一个名为less的静态文件夹下。下面的规则将影响服务页面的样式。复制并粘贴它,然后保存文件。

 

[html] view plain copy
  1. .services {  

  2.   

  3.     background: #EAEAEA;  

  4.   

  5.     padding: 1em;  

  6.   

  7.     margin: 2em 0 3em;  

  8.   

  9.     li {  

  10.   

  11.         display: block;  

  12.   

  13.         position: relative;  

  14.   

  15.         background-color: #16a085;  

  16.   

  17.         color: #FFF;  

  18.   

  19.         padding: 2em;  

  20.   

  21.         text-align: center;  

  22.   

  23.         margin-bottom: 1em;  

  24.   

  25.         font-size: 1.5em;  

  26.   

  27.     }  

  28.   

  29. }  



 

样式文件已经准备好了,但是主题里还没有包含它。

 

回到view文件夹中并创建一个assets.xml文件。添加Odoo默认的XML标记并复制粘贴以下代码。记得要把theme文件夹替换成自己的主题名称。

 

[html] view plain copy
  1. <template id="mystyle" name="My style" inherit_id="website.assets_frontend">  

  2.   

  3.     <xpath expr="link[last()]" position="after">  

  4.   

  5.         <link href="/theme folder/static/less/style.less" rel="stylesheet" type="text/less"/>  

  6.   

  7.     </xpath>  

  8.   

  9. </template>  



 

我们刚刚创建了一个模板,less文件。你可以看到,模板有一个特殊的属性称为inherit_id。这个属性告诉Odoo我们的模板会使用自己的样式。

 

在这种情况下,我们指的是assets_frontend模板,位于website模块。assets_frontend指定了website builder要使用的assets位置列表,我们的目标是先把它加进去。

 

这可以通过使用XPath表达式expr="link[last()]"position="after"来实现,意思是“把我的style的文件放在包含assets清单的的最后”。

 

把它放在最后一个,我们确保我们的文件将被加载在最后,并采取优先权。

 

最后添加assets.xml__openerp__.py文件。

 

更新你的主题。

 

我们的less文件现在包含在我们的主题中,它将自动编译,压缩和合并Odooassets


标签:   odoo erp openerp
Powered by MetInfo 5.3.15 ©2008-2018 www.metinfo.cn