OpenERP Server Developers Documentation之Form Views Guidelines（表单视图参考）



1. Form Views Guidelines

这个文档介绍了OpenERP7.0版本中创建/组织表单视图的功能和技术上的参考。对于每一项，都会在功能和技术两方面进行讲解。新表单类型的目的是为了使得OpenERP更容易使用，并贯穿整个系统指导用户使用。

Business View （业务视图）

业务视图主要针对普通用户，不是高级用户。例子如下：Opportunities，Products，Partners，Tasks，Projects等等

一般地，一个业务视图由以下组成：

1. 顶部的状态条（按照技术或者业务分布）
2. 中间的表单（表单自身）
3. 底部的历史和评论

技术上，新的表单视图在XML按照以下构建

<form version=”7.0”>
    <header> ... content of the status bar  ... </header>
    <sheet>  ... content of the sheet       ... </sheet>
    <div class=”oe_chatter”> ... content of the bottom part ... </div>
</form>

the Status Bar（状态条）

状态条的目的显示记录的状态和动作按钮，其以前是在表单视图的底部。

the button（按钮）

按钮顺序按照业务排列。例如，在一个销售订单中，逻辑步骤如下：

1. 发送报价单
2. 确认报价单
3. 创建最终的发票
4. 发货

红色的高亮部分显示了下一逻辑步骤，有利于用户操作。其一般是第一个激发按钮。另一方面，取消按钮必须保持灰色（一般地）。例如，Refund按钮从来不是红色。

技术上，高亮部分的按钮添加了类oe_highlight

<button class=”oe_highlight” name=”...” type=”...” states=”...”/>

the Status（状态）

我们使用了小部件“statusbar”，并且状态的当前值显示为红色。应该在整个流程中状态都是可见的。（例如，一个销售订单以一个报价开始，之后发送报价，变成了一个完整的销售订单，并最后完成整个流程）取决特殊流程的异常或者状态仅仅是可见的，如果它们是当前状态。

显示的状态按照其在字段中使用的顺序显示（选择字段的列表等等）。总是可见的状态通过属性statusbar_visible指定。其使用statusbar_colors以一种指定颜色显示一些状态。

<field name="state" widget="statusbar"
    statusbar_visible="draft,sent,progress,invoiced,done"
    statusbar_colors="{‘shipping_except’:’red’,’waiting_date’:’blue’}"/>

The Sheet（表单）

所有的业务视图应该看起来像一个打印表单。

技术上，7.0版本表单排列与前面的表单版本不同。不再有默认的grid分布了，而是根据HTML和CSS分布。现在都是按照如下约定分布：、

1. <form>和<page>元素不再定义分组；里面的元素分布在行内。开发者应该使用<div>或者<group>来创建块。
2. 默认地，元素<group>现在默认在内部定义了两列，除非了属性col=“n”指定了。列有相同的宽度（group宽度的几分之一）。使用<group>元素创建一列字段。
3. 在goup顶部的<separator string=”XXX”/>元素可以在<group>元素内部用string=“XXX”替换
4. 元素<field name=”XXX”/>不创建一个标签，除了它们直接在元素<group>下面。使用<label for=”XXX”/>创建这个字段的标签。

Sheet Headers（表单头部）

一些表单的头部有一个或者几个字段，并且这些字段的标签仅在编辑模式下显示。

视图模式                                                                                                  编辑模式          

使用 HTML 文本, <div>, <h1>, <h2>… 可以创建跑漂亮的头部，和使用CSS类oe_edit_only的<label>来在编辑模式下创建字段标签。使用CSS类“oe_inline”来创建内联字段（而不是块）。上述的表单按照如下XML创建。

<label for="name" class="oe_edit_only"/>
<h1><field name="name"/></h1>

<label for="planned_revenue" class="oe_edit_only"/>
<h2>
    <field name="planned_revenue" class="oe_inline"/>
    <field name="company_currency" class="oe_inline oe_edit_only"/> at
    <field name="probability" class="oe_inline"/> % success rate
</h2>

Button Box （按钮盒子）

许多相关的action或者链接可以直接在表单中显示。例如，在Opportunity 表单中，Schedule a Call和Schedule a Meeting action大量使用了CRM。与其将它们放置于工具栏中的more菜单中，而是直接以按钮放在表单的上（顶端右边）。

技术上，按钮放在表单的右手边，其放置在<div>内部以一个块来分组。

<div class="oe_button_box oe_right">
    <button string="Schedule/Log Call" name="..." type="action"/>
    <button string="Schedule Meeting" name="action_makeMeeting" type="object"/>
</div>

Groups and Titles（分组和标题）

一列字段现在使用一个<group>元素创建，带有一个可选的标题。这个title与放在group内部的<separator>元素中效果一样。

<group string="Payment Options">
    <field name="writeoff_amount"/>
    <field name="payment_option"/>
</group>

推荐在表单中使用两列字段。简而言之，放到<put>元素内，<group>元素内部含有了字段。

为减少视图继承，推荐奖name=“。。。”放在元素<group>中。在这样的一个分组中添加字段是很琐碎的。

Special Case: Subtotals（特殊情况：汇总）

定义一些CSS类渲染汇总，就像在发票表单一样：

<group class="oe_subtotal_footer">
    <field name="amount_untaxed"/>
    <field name="amount_tax"/>
    <field name="amount_total" class="oe_subtotal_footer_separator"/>
    <field name="residual" style="margin-top: 10px"/>
</group>

Placeholders and Inline Fields（占位符和内联字段）

有时候字段标签使得表单很负责。开发者可能漏掉字段标签，因此可以在字段内部放一个占位符。仅当字段是空的时候，占位符是可见的。占位符应该告诉字段内部应该放置什么，而不是一个例子（静态数据）

使用者也可以将字段分组在一起，通过在<div>元素中渲染成内联。允许分组成几个元素代替一个字段（不是其标签）

下面的例子，来自引导表单，显示了占位符和内联字段（zip和城市）

编辑模式                                                                                                                                              视图模式

<group>
    <label for="street" string="Address"/>
    <div>
        <field name="street" placeholder="Street..."/>
        <field name="street2"/>
        <div>
            <field name="zip" class="oe_inline" placeholder="ZIP"/>
            <field name="city" class="oe_inline" placeholder="City"/>
        </div>
        <field name="state_id" placeholder="State"/>
        <field name="country_id" placeholder="Country"/>
    </div>
</group>

图片

图片应该显示在表单的右边。产片表单如下：

上述表单包含了一个<sheet>元素，

<field name="product_image" widget="image" class="oe_avatar oe_right"/>

标签

Many2many字段，像分类一样，很好的渲染成一列标签。使用小部件“many2many_tags”。

<field name="category_id"
    widget="many2many_tags"/>

配置表单和Wizards

配置表单

配置表单的例子：阶段，请假类型，等等。这里关注每个应用程序配置下的所有菜单项（像销售/配置）

从这个视图中，参考是：

1. 没有头部（因为没有状态，没有工作流，没有按钮）
2. 没有表单

一般的Wiards（弹入弹出）

例子，来自opportunity的““Schedule a Call”

引导如下：

1.              避免分隔符（标题已经在弹入弹出标题栏中，所以了另一个分隔符是不相关联的）
2.              避免取消按钮（用户通常关闭弹入弹出框以达到相同的效果）
3.              动作按钮必须是红色高亮的。
4.              当有一个文本区域时，使用占位符代替标签或者一个分隔符
5.              像一般的表单视图，将按钮放在<header>元素下

配置wizard

例子：路径Settings / Configuration / Sales，引导如下：

1. 总是一致的（没有弹出弹入）
2. 没有表单
3. 保持取消按钮（用户不能关闭窗口）
4. “Apply“按钮必须是红色的