转载:http://book.odoomommy.com/chapter1/README12.html
第四章 基本的视图
前面一章介绍了Odoo中的常见的几种字段, 我们学会了如何创建一个模型,并定义他们的字段, 本章我们将介绍如何定义模型的视图, 以及介绍几种常见的视图及其用法.
视图的组成
Odoo的布局是通过视图文件(xml)来组织的,并不需要我们自己写HTML代码,只要我们按照它要求的格式写完xml,前端页面就自然而然地的生成了。因为视图是前端展示用的,所以视图的种类多种多样,odoo也可以支持自定义视图,这就给了开发人员很大的灵活拓展性。
常见的视图有如下几种:
- form视图
- tree视图
- kanban视图
- graph视图
- gatt视图 ...
每种视图的结构不一样,下面我们将简单介绍一下常见的几种视图的使用方法.
form视图
我们先来看一下上一节中,我们写的form视图代码:
<record id="book_store.book_form" model="ir.ui.view">
<field name="name">图书</field>
<field name="model">book_store.book</field>
<field name="arch" type="xml">
<form string="图书详情">
<header>
<button name="button_create" type="object" string="随机添加一个作者" class="oe_highlight"/>
<button name="button_update" type="object" string="给作者们加颗❤️" class="oe_highlight"/>
<button name="button_delete" type="object" string="删除一个作者" class="oe_highlight"/>
<button name="button_clear" type="object" string="删除所有作者" class="oe_highlight"/>
</header>
<sheet>
<div class="oe_title">
<h1>
<label for="name" string="名称" class="oe_edit_only"/>
<field name="name"/>
</h1>
</div>
<group>
<field name="authors" widget="many2many_tags"/>
<field name="date"/>
<field name="price"/>
</group>
</sheet>
</form>
</field>
</record>
首选, 在odoo中,所有的预定义的数据结构都放在record节点中,id是这些数据的唯一标识,叫做xml_id,xml_id在模块内部要保持唯一, 当模块安装以后, xml_id在系统中的唯一标识是模块名.xml_id。xml_id在开发过程中是一个很重要的概念, 这个等后面使用的时候会详细讲到。
model指明本记录所属的对象模型名称,odoo中的视图模型是ir.ui.view,因此这里的值也就是ir.ui.view。
record的子节点,由若干个field节点组成。
- name: 代表的是模型的字段,值根据字段类型的不同,设置方式也不同。本例中,我们给视图命名"图书"。
- model: 视图所属的模型名称,这里我们用到的是自己定义的图书模型,因此写的是book_store.book。
- arch: 视图的布局结构,属性type为固定值xml
每种视图的arch结构都不一样, 对于form视图来说:
- header: 表头,通常放置按钮和状态栏
- footer:底部,可以放置按钮,也可以放置一些需要的小部件。
- sheet:页面主体。
以原生的销售单部分来说,1 部分即是header 2 是sheet 3是footer。
sheet内编写具体的页面布局,像很多HTML标签都可以在这里使用。使用group标签,可以将多个field分组排列。group标签是会自动生成label的。
除了group,最常用的一种布局元素是page,page可以在页面上生成多个Tab页,方便信息的分组布局。
tree视图
把form视图代码中的form替换成tree就成了我们的列表视图,这里称之为列表视图是因为tree视图并不是真正的"树视图",真正的树视图是可以展开的。
<record model="ir.ui.view" id="book_store.list">
<field name="name">图书列表</field>
<field name="model">book_store.book</field>
<field name="arch" type="xml">
<tree>
<field name="name"/>
<field name="author"/>
<field name="date"/>
<field name="price"/>
</tree>
</field>
</record>
tree视图相对比较简单,一般就是对本对象要显示的属性的罗列。
列表视图的可编辑属性
默认情况下,列表视图是不可以被编辑的,只能单击进入form视图进行编辑。这种行为可以通过tree的editable属性进行改变。
<record model="ir.ui.view" id="book_store.list">
<field name="name">图书列表</field>
<field name="model">book_store.book</field>
<field name="arch" type="xml">
<tree editable="bottom">
<field name="name"/>
<field name="author"/>
<field name="date"/>
<field name="price"/>
</tree>
</field>
</record>
editable的可选值有两个:top和bottom。top是默认值,即不可编辑模式。bottom即可以编辑模式。
使用bottom的效果如下图:
kanban视图
看板视图是一种可以在面板上显示诸多信息的一种视图结构,是odoo最常见的几种视图结构之一。
看板视图的要求在kanban节点内将用到的字段列出来, 看板的布局使用QWEB技术在templates标签内完成。
我们来给图书(book_store.book)添加看板视图:
<record id="book_kanban" model="ir.ui.view">
<field name="name">图书看板视图</field>
<field name="model">book_store.book</field>
<field name="arch" type="xml">
<kanban>
<field name="name"/>
<field name="authors"/>
<templates>
<t t-name="kanban-box">
<div t-attf-class="oe_kanban_card oe_kanban_global_click">
<div class="o_kanban_record_top mb16">
<strong class="o_kanban_record_title">
<span>
<t t-esc="record.name.value"/>
</span>
</strong>
</div>
<div class="o_kanban_record_bottom">
<div class="oe_kanban_bottom_left text-muted">
<field name="authors" widget="many2many_tags"/>
</div>
</div>
</div>
</t>
</templates>
</kanban>
</field>
</record>
其效果如下:
总结
视图是odoo开发中的重要部分,是与用户直接交互的UI层, 视图的编写其实是一个挺庞大的内容体系, 涉及到前端QWEB技术和后端的ir.ui.view模型, 关于视图更多的内容,我们将在第二部分中深入介绍, 鉴于读者的学习进程,本章的内容就简要地介绍的到这里。下一章, 我们将介绍Odoo的API 。