第四章 基本的视图

前面一章介绍了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 。

results matching ""

    No results matching ""