Odoo 创建特定布局的页面
来源:互联网 发布:互联网运营工资 知乎 编辑:程序博客网 时间:2024/06/07 17:35
创建特定布局的页面
想象一下,我们要为特殊功能的页面创建一个特定的布局。在这些页面上,我们需要在顶部添加一个功能列表,并使用代码片段(snippets)让客户可以尽可能地设置其他的页面布局。
在你的view文件夹中,创建一个pages.xml文件并添加默认Odoo标记。在“data”创建一个“template”标签,将page属性设置为true,并将代码添加里面去。
<?xml version="1.0" encoding="utf-8" ?><openerp> <data> <!-- === Services Page === --> <template name="Services page" id="website.services" page="True"> <h1>Our Services</h1> <ul class="services"> <li>Cloud Hosting</li> <li>Support</li> <li>Unlimited space</li> </ul> </template> </data> </openerp>
网页标题将是模板的ID。在我们使用Services(从website.services)
我们成功地创建了一个新的页面布局,但我们还没有告诉系统如何使用它。要做到这一点,我们可以用QWeb。把HTML代码到<T>标签里,如下:
<!-- === Services Page === --><template name="Services page" id="website.services" page="True"> <t t-call="website.layout"> <div id="wrap"> <div class="container"> <h1>Our Services</h1> <ul class="services"> <li>Cloud Hosting</li> <li>Support</li> <li>Unlimited space</li> </ul> </div> </div> </t></template>
使用<t t-call="website.layout">我们将使用自己的代码扩展Odoo的默认页面布局。
我们使用了两段<DIV>代码,一个的ID为wrap,另一个是用了container类。这就提供了一个最小的布局。
下一步是添加一个空的区域来让用户可以填写。只需在div#wrap元素之前添加一个oe_structure类的DIV。
<?xml version="1.0" encoding="utf-8" ?><openerp><data> <!-- === Services Page === --><template name="Services page" id="website.services" page="True"> <t t-call="website.layout"> <div id="wrap"> <div class="container"> <h1>Our Services</h1> <ul class="services"> <li>Cloud Hosting</li> <li>Support</li> <li>Unlimited space</li> </ul> <!-- === Snippets' area === --> <div class="oe_structure" /> </div> </div> </t></template> </data></openerp>
提示
你可以创建任意多的代码片断区域并放到你愿意放的页面中。
我们的页面就快好了。现在我们要做的是在我们的__openerp__.py添加pages.xml文件。
'data': [ 'views/layout.xml', 'views/pages.xml'],
更新你的主题。
好了,我们的服务页面已经准备好,你可以通过浏览网站/网页/服务/访问它。
你会注意到代码片段(snippets)可以在服务列表中拖放。
再回到pages.xml文件中,在页面模板后,复制/粘贴以下代码。
<record id="services_page_link" model="website.menu"> <field name="name">Services</field> <field name="url">/page/services</field> <field name="parent_id" ref="website.main_menu" /> <field name="sequence" type="int">99</field></record>
此代码将在主菜单中添加一个链接。
sequence属性定义了在顶部菜单中的链接的位置。在我们的示例中,我们将值设置为99,以便将其放置到最后一个。如果你想把它放在一个特定的位置,你必须根据实际需要来更改它的值。
你可以看到检查website模块data.xml文件,Home 链接设置为10和Contact us是60。例如,如果你想把你的链接放在中间,那么序列值可以设置为40。
添加Style
Odoo默认使用了Bootstrap。这意味着,你可以使用所有Bootstrap的引导样式和布局功能。
当然了,如果你想采用独特的设计,Bootstrap是不够的。以下步骤将指导您如何将自定义的样式(Style)添加到主题中。最终的效果不会很漂亮,但会让你了解完整的过程。
我们先创建一个空文件,名为style.less,放在一个名为less的静态文件夹下。下面的规则将影响服务页面的样式。复制并粘贴它,然后保存文件。
.services { background: #EAEAEA; padding: 1em; margin: 2em 0 3em; li { display: block; position: relative; background-color: #16a085; color: #FFF; padding: 2em; text-align: center; margin-bottom: 1em; font-size: 1.5em; }}
样式文件已经准备好了,但是主题里还没有包含它。
回到view文件夹中并创建一个assets.xml文件。添加Odoo默认的XML标记并复制粘贴以下代码。记得要把theme文件夹替换成自己的主题名称。
<template id="mystyle" name="My style" inherit_id="website.assets_frontend"> <xpath expr="link[last()]" position="after"> <link href="/theme folder/static/less/style.less" rel="stylesheet" type="text/less"/> </xpath></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文件现在包含在我们的主题中,它将自动编译,压缩和合并Odoo的assets中。
- Odoo 创建特定布局的页面
- Odoo开发教程(二):如何创建一个空的Odoo模块
- Odoo 创建主题
- odoo创建GraphView
- Sahrepoint2013 创建HTML布局页面
- 创建特定用户的进程
- 用CSS创建一个布局居中的页面
- 用magento布局给特定CMS页面添加静态块
- odoo教程---在odoo8中创建自定义的reports
- odoo教程---在odoo8中创建自定义的reports
- 15.odoo入门——工作遇到的odoo的一些细节和javascript实现数据库操作后跳转页面
- C#自动登录一个特定的页面
- 弹出特定大小的html页面
- odoo 9.0创建自定义模块
- MVC的Controller-Action布局:单独的创建/编辑页面还是创建/编辑/查看一体的页面?
- 页面的布局
- web页面的布局
- 页面布局的总结
- Android系统下安装openVPN流程
- 图形的变换
- 求一颗二叉树的镜像
- Spark 2.1 -- spark SQL , Dataframe 和DataSet 指南
- 初次使用git遇到的问题
- Odoo 创建特定布局的页面
- 万能头文件&&clock
- 字符流
- 爬虫之旅(四)
- 第5章 调优案例分析与实践
- Python作为PHP扩展
- [bzoj4373]算术天才⑨与等差数列
- GPS定位基本原理
- java复制数组的四种方法