第十章 Odoo 12開發之后台視圖 - 設計用戶界面

本文將學習如何為用戶創建圖形化界面來與圖書應用交互。我們將了解不同視圖類型和小組件(widgets)之間的差別，以及如何使用它們來提供更優的用戶體驗。

本文主要內容有：

• 菜單項
• 窗口操作(Window Actions)
• 表單視圖結構
• 字段
• 按鈕和智能按鈕
• 動態視圖元素
• 列表視圖
• 搜索視圖
• 其它視圖類型

 

開發准備

我們將繼續使用library_checkout插件模塊，它已經有了模型層，現在需要視圖層來實現用戶界面。本文中的代碼基於第八章 Odoo 12開發之業務邏輯 – 業務流程的支持，相關代碼請參見 GitHub 倉庫，本章完成后代碼也請參見 GitHub倉庫。

菜單項

用戶界面的入口是菜單項，菜單項形成一個層級結構，最頂級項為應用，其下一級為每個應用的主菜單。還可以添加更深的子菜單。可操作菜單與窗口操作關聯，它告訴客戶端在點擊了菜單項后應執行什么操作。

菜單項存儲在ir.ui.menu模型中，可通過Settings > Technical > User Interface > Menu Items菜單進行查看。

library_app模塊為圖書創建了一個頂級菜單，library_checkout插件模塊添加了借閱和借閱階段的菜單項。在library_checkout/views/library_menu.xml文件中，借閱的菜單項 XML 代碼如下：

 

1 2 3 4

<menuitem id="menu_library_checkout"         name="Checkout"         action="action_library_checkout"         parent="library_app.menu_library" />

這里有一個<menuitem>快捷元素，提供了一種定義菜單項的簡寫方式，比原生的<record model=”ir.ui.view”>元素要更為便捷。以上使用的屬性有：

• name是展示在用戶界面中的菜單項標題
• action是點擊菜單項時運行的窗口操作的XML ID
• parent是父級菜單項的XML ID。本例中父級項由其它模塊創建，因此們使用了完整的XML ID, <module>.<XML ID>進行引用。

還有以下可用屬性：

• sequence設置一個數字來在展示菜單項時進行排序，如sequence=”10″
• groups是一個逗號分隔的可訪問菜單項安全組的XML ID列表，如groups=”library_app.library_group_user, library_app.library_group_manager”
• web_icon是菜單項的圖標，僅用於企業版的頂級菜單項，如web_icon=”library_app,static/description/icon.png”

窗口操作(Window Actions)

窗口操作給 GUI（圖形化用戶界面）客戶端操作指令，通常用於菜單項或視圖中的按鈕。它告訴 GUI 所作用的模型以及要顯示的視圖。這些操作可以通過域過濾器過濾出可用記錄，設置默認值以及從上下文屬性中過濾。窗口操作存儲在ir.actions.act_window模型中，可通過Settings > Technical > Actions > Window Actions菜單進行查看。

在library_checkout/views/library_menu.xml文件中，我們可以找到借閱菜單項中使用的窗口操作，我們需要對其進行修改來啟用本文中將添加的視圖類型：

 

1 2 3 4

<act_window id="action_library_checkout"         name="Checkouts"         res_model="library.checkout"         view_mode="tree,form,activity,calendar,graph,pivot" />

窗口操作通常像以上這樣使用<act_window>快捷標簽創建。這里修改”tree, form”為更大的列表”tree, form, activity, calendar, graph, pivot”。以上使用的窗口操作屬性有：

• name是通過操作打開的視圖中顯示的標題
• res_model是目標模型的標識符
• view_mode是一個逗號分隔的可用視圖類型列表。第一項為默認打開時的視圖。

窗口操作還有一些其它屬性：

• target：如果設置為 new,會在彈出的對話框窗口中打開視圖，例如target=”new”。默認值是current，在主內容區行內打開視圖。
• context：為目標視圖設置上下文信息，可設置默認值或啟用過濾器等，例如context=”{‘default_user_id’: uid}”。
• domain：是對可在打開視圖中瀏覽的記錄強制過濾的域表達式，例如domain=”[(‘user_id’, ‘=’, uid)]”。
• limit：列表視圖中每頁顯示的記錄數，例如limit=”80″。

做了這些修改后，在選擇Checkouts菜單項並瀏覽相應的列表視圖時，右上角在列表和表單按鈕后會增加一些按鈕。但在我們創建對應視圖前並不能使用，本文將一一學習。窗口操作還可在列表和表單視圖的上方的 Action 菜單按鈕中使用，它在 Fitlers 按鈕旁。要使用這個，我們需要在元素中添加以下兩個屬性：

• src_model設置Action所作用的模型，例如src_model=”library.checkout”
• multi=”true”也啟用列表視圖中的Action，這樣它可以作用於多個已選記錄。否則僅在表單視圖中可用，並且一次只能應用於一條記錄。

補充：此時打開借閱表單會提示Insufficient fields for Calendar View!，在編寫日歷視圖前最好選視圖模式里刪除 calendar 來進行效果查看

表單視圖結構

表單視圖要么按照簡單布局，要么按與紙質文檔相似的業務文檔布局。我們將學習如何設計這些業務文檔布局以及使用可用的元素和組件。要進行這一學習，我們重新查看並擴展第八章 Odoo 12開發之業務邏輯 – 業務流程的支持中創建的圖書借閱表單。

業務文檔視圖

業務應用中記錄的很多數據可以按紙質文檔那樣展示。表單視圖可模仿這些紙質文檔來提供更直觀的用戶界面。例如，在我們的應用中，可以把一次借閱看作填寫一張紙，我們將編寫一個遵循這一設計的表單視圖。編輯library_checkout/views/chceckout_view.xml文件並修改表單視圖記錄來帶有業務文檔視圖的基本框架：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<record id="view_form_checkout" model="ir.ui.view">         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <form>                 <header>                     <!--以下僅供查看效果使用-->                     <field name="state" widget="statusbar" clickable="True" />                 </header>                 <sheet> ...                 </sheet>                 <div class="oe_chatter">                     <field name="message_follower_ids" widget="mail_followers" />                     <field name="activity_ids" widget="mail_activity" />                     <field name="message_ids" widget="mail_thread" />                 </div>             </form>         </field>     </record>

視圖名稱是可選的，在不寫時會自動生成。為簡便以上利用了這一點，在視圖記錄中省略了<field name=”name”>元素。可以看到業務文件視圖通常使用三大區域：

• header狀態欄
• sheet主內容
• 底部交流區，也稱作chatter

底部的交流區使用了 mail 插件模塊中提供的社交網絡組件。可使用這些，我們的模型需要繼承mail.thread和mail.activity.mixin，可參見第八章 Odoo 12開發之業務邏輯 – 業務流程的支持。

頭部 Header

頭部header 通常用於文檔所走過的生命周期或步驟，還包含相關的操作按鈕。這些按鈕是普通表單按鈕，最重要的下一步可以高亮顯示。

頭部按鈕

編輯表單視圖中的<header>版塊，我們添加一個按鈕來更易於設置歸還的借閱為完成(done)：

 

1 2 3 4 5 6 7 8

<header>                     <field name="state" invisible="True" />                     <button name="button_done"                         string="Return Books"                         attrs="{'invisible':                             [('state', 'in', ['new', 'done'])]}"                         class="oe_highlight" />                 </header>

這里我們在頭部添加了一個Return Books 按鈕，在點擊時調用button_done模型方法。注意可使用class=”oe_highlight”來對用戶高亮顯示操作。例如，在有幾個可選按鈕時，我們可以高亮顯示主操作或下一步要執行的“更多”操作。attrs用於在 New 和 Done 狀態時隱藏該按鈕。實現這點的條件使用了不會在表單顯示的 state 字段。要使條件生效，我們需要將使用的所有值在網頁客戶端中加載。我們不打算向終端用戶顯示 state 字段，因此使用 invisible 將其添加為不可見字段。

 

ℹ️domain 或 attrs 表達式中使用的字段必須在視圖中加載，作用於它們的<field>元素。如果字段不對用戶可見，則必須以不可見字段元素對其進行加載。

本例中我們使用的是 state 字段，相同的效果可通過 states 字段屬性實現。雖然沒有 attrs 屬性靈活，但它更為精簡。可將 attrs 一段替換為如下代碼：

 

1 2 3 4 5

<button name="button_done"     type="object"     string="Returned"     states="open,cancel"     class="oe_highlight" />

attrs和states元素可見功能也可用於其它視圖元素，如 field。本文后續會深入討論。要讓按鈕可以運作，我們還需要實現調用的方法。在library_checkout/models/library_checkout.py file文件的借閱類里添加以下方法：

 

1 2 3 4 5 6 7 8

def button_done(self):         Stage = self.env['library.checkout.stage']         done_stage = State.search(             [('state', '=', 'done')],             limit=1)         for checkout in self:             checkout.stage_id = done_stage         return True

該方法首先查找 done 階段的記錄來使用，然后對 self 記錄集中的每條記錄，設置其 stage_id 值為完成階段。

階段管道

下面我們為頭部添加狀態條組件，顯示文檔所在階段。從代碼層面說，是使用statusbar組件的stage_id字段的<field>元素:

 

1 2 3 4 5 6 7

<header> ...                     <field name="stage_id"                         widget="statusbar"                         clickable="True"                         options="{'fold_field': 'fold'}" />                 </header>

這會在頭部添加一個階段管道組件，它在表示文檔當前所在生命周期點的字段上使用了statusbar組件。通常是一個狀態選項字段或階段many-to-one字段。這兩類字段在 Odoo 核心模塊中多次出現。clickable屬性讓用戶可通過點擊狀態條來修改文檔階段。一般需要開啟它，但有時又不需要，比如需要對工作進行更強的控制，並且要求用戶僅使用可用的操作按鈕來進入下一步。這種方法允許在切換階段時進行指定驗證。

對階段使用狀態條組件時，我們可將很少使用的階段隱藏(折疊)在 More 階段組中。對應的階段模型必須要有一個標記來配置需隱藏的階段，通常命名為 fold。然后statusbar組件使用 options 屬性來將這一字段名提供給fold_field選項，如以上代碼所示。

使用狀態代替階段

階段是一個使用了模型來設置進度步驟的many-to-one字段。因此終端用戶可對其動態配置來符合他們具體的業務流程以及支持看板的完美展示。我們將在圖書借閱中使用到state。

狀態是一個包含了流程中相當穩定步驟的選擇列表，如新建、處理中和完成。終端用戶無法對其進行配置，因為它是靜態的，更易於在業務邏輯中使用。視圖字段對狀態甚至還有特別的支持：狀態字段屬性僅在記錄處理特定狀態才對用戶開放。

ℹ️階段引入的時間要晚於狀態。兩者現在共存，在 Odoo 內核的趨勢是使用階段來替代狀態。但如前所述，狀態仍提供一些階段所不具備的功能。

可通過將階段映射到狀態中來同時獲得兩者的優勢。在借閱模型中我們通過向借閱階段中添加一個狀態字段來實現，借閱文檔通過一個關聯字段來使用狀態。使用狀態代替階段的模型中，我們也可以使用進度條管道。這種情況下要在進度條中列出狀態，需要使用statusbar_visible屬性來替換fold_field選項。具體代碼如下：

 

1 2 3 4

<field name="state"                         widget="statusbar"                         clickable="True"                         statusbar_visible="draft,open,done" />

注意在我們實際的圖書借閱項目中並不能這么使用，因為它是階段驅動的，而非狀態驅動。

文檔表單

表單畫布是表單的主區域，這里放置實際的數據元素，設計上類似一張真實的紙質文檔，通常 Odoo 中的這些記錄也會被稱為文檔。通常文檔表單結構包含如下區域：

• 左上角文檔標題和副標題
• 右上角按鈕區
• 其它文檔頭部字段
• 底部筆記區，將附加字段組織成選項卡或頁面

文檔各行通常在筆記區的第一頁，在表單之后，通常有一個 chatter 組件，帶有文檔訂閱者、討論消息和活動規划。下面逐一了解這些區域。

補充：關於sheet的翻譯Alan的理解sheet 僅為單(據)，但出於行文習慣一律使用表單

標題和副標題

一個元素之外的字段不會自動帶有渲染它們的標簽。對於標題元素就是如此，因此該元素應用來對其進行渲染。雖然要花費額外的工作量，但這樣的好處是對標簽顯示控制有更好的靈活性。常規 HTML，包括 CSS 樣式元素，可用於美化標題。一般標題放在oe_title類中。以下為擴展后的<sheet>元素，它包含標題以及一些額外字段如副標題：

 

1 2 3 4 5 6 7 8 9 10 11 12 13

<sheet>                     <field name="member_image" widget="image" class="oe_avatar" />                     <div class="oe_title">                         <label for="member_id" class="oe_edit_only" />                         <h1><field name="member_id" /></h1>                         <h3>                             <span class="oe_read_only">By </span>                             <label for="user_id" class="oe_edit_only" />                             <field name="user_id" class="oe_inline" />                         </h3>                     </div>                     <!-- More elements will be added from here... -->                 </sheet>

此處可以看到我們使用了div, span, h1和h3這些常規 HTML 元素。<label>元素讓我們可以控制字段標簽在何時何處顯示。for 屬性標識了獲取標簽文件的字段。也可以使用 string 屬性來為標簽提供具體的文本。本例中還使用了class=”oe_edit_only”屬性讓其僅在編輯模式下可用。

我們還可在表單左上角標題旁包含展示圖像。它用在 parnter 或產品這類模型的表單視圖中。作為示例，我們在標題區前添加了一個member_image字段，它使用圖像組件widget=”image”，以及特定的 CSS 類class=”oe_avatar”。該字段尚未添加至模型中，下面我們就來添加，我們使用關聯字段來將會員的圖片顯示在借閱文檔中。編輯library_checkout/models/library_checkout.py文件並在借閱類中添加如下字段：

 

1	member_image = fields.Binary(related='member_id.partner_id.image')

表單內容分組

表單主內容區應通過<group>標簽來進行組織。<group>標簽在畫布中插入了兩列。默認在這些列中標簽會在字段旁顯示，因此又占據兩列。字段加標簽會占據 一行，下一個字段和標簽又會另起一行，垂直排列。Odoo表單的常見布局是帶標簽的字段並排成兩列。達到這一效果，我們只需要添加兩個嵌入頂部的<group>標簽。

繼續修改表單視圖，在主內容區標題<div>后添加如下代碼：

 

1 2 3 4 5 6 7 8 9 10

<group name="group_top">                         <group name="group_col1">                             <field name="user_id" />                             <field name="checkout_date" />                         </group>                         <group name="group_col2">                             <field name="state" />                             <field name="closed_date" />                         </group>                     </group>

為 group 標簽分配name是一個好的編碼實踐，這樣在其它模塊中繼承時會更易於對它們進行引用。還可設置 string 屬性，一旦設置將作為該部分的標題來顯示。

 

ℹ️Odoo 11中的修改
string 屬性不能作為繼承的錨點，因為在應用繼承前會對其進行翻譯。這時應使用 name 屬性來代替它。

在 group 內，<newline>元素會強制在新的一行，下一個元素會渲染到組的第一列。附加的版塊標題可通過組內<separator>元素添加，如果帶有 string 屬性也會顯示標題標簽。要更好地控制元素布局，我們可以使用col和colspan屬性。

col 屬性可用於<group>元素中來自定義包含的列數。如前所述，默認為兩列，但可修改為任意其它數字。雙數效果更佳，因為默認每個添加的字段會占據兩列：字段標簽和字段值。按照以下代碼我們通過colspan=”2″ 來在一個組內將4個字段放在兩列中顯示：

 

1 2 3 4 5 6 7 8 9 10 11 12

<group name="group_top">                         <group name="group_col1"                             col="4"                             colspan="2"                             string="Group 1">                             <field name="user_id" />                             <field name="state" />                             <field name="checkout_date" />                             <field name="closed_date" />                         </group>                         <group name="group_col2" string="Group2" />                     </group>

以上我們使用 string 屬性為組添加了標題，來更清楚地看組所在位置。注意字段的順序不同，它們先是從左到右，然后從上到下。<group>元素可以使用 colspan 屬性來設置它所占用的具體列數。默認和帶標簽的字段一樣為兩列。可以修改以上代碼中 col 和 colspan 的值來在表單中查看不同的效果。比如 col=”6″ colspan=”4″的效果是什么樣的？可以試一試(見下圖)。

選項卡筆記本(Tabbed notebooks)

另一種組織內容的方式是 notebook 元素，一個包含多個稱為頁面(page)的選項卡分區的容器。它們可以讓不常用的內容在不使用時隱藏起來，或者用於按話題組織大量字段。

我們將在借閱表單中添加一個帶有已借圖書列表的notebook 元素。在前面的<group name=”group_top”>元素后可添加如下代碼：

 

1 2 3 4 5

<notebook>                         <page string="Borrowed Books" name="page_lines">                             <field name="line_ids" />                         </page>                     </notebook>

本例中筆記本僅有一個頁面。添加更多，我們需在<section>元素內添加更多的<page>版塊。頁面畫布默認不會渲染字段標簽，如需顯示，需像表單主畫布那樣將字段放在<group>版塊內。本例中我們在頁面中添加了one-to-many字段line_ids，我們已經有了頁面標題，因此不需要標簽。page支持以下屬性：

• string：選項卡的標題（必填）
• attrs：不可見屬性與表達式映射的字典
• accesskey：HTML訪問密鑰

字段

視圖字段有一些可用屬性。大部分從模型定義中獲取值，但可在視圖中覆蓋。以下來快速查看字段的可用屬性：

• name標識字段數據庫中名稱
• string用於想要覆蓋模型中標簽文本的標簽文本
• help是鼠標懸停在字段上顯示的提示文本，它允許我們覆蓋模型定義中提供的幫助文本
• placeholder是在字段中顯示的提示文本
• widget讓我們可以覆蓋字段的默認組件，一會兒我們就會講到可用的組件
• options是一個帶有組件附加數據的JSON數據結構，值隨各組件的不同支持而不同
• class是用於字段 HTML 渲染的CSS類
• nolabel=”True”阻止自動字段標簽的展示。僅對<group>元素內的字段有作用，通常與<label for=”…”>元素一起使用。
• invisible=”True”讓字段不可見，但仍會從服務端獲取數據並可在表單中使用
• readonly=”True”讓表單中該字段不可編輯
• required=”True”讓表單中該字段為必填

一些特定字段的屬性如下：

• password=”True”用於文本字段。顯示為密碼項，隱藏所輸入文字
• filename用於二進制字段，它是用於存儲上傳文件名的模型字段的名稱

字段標簽

<label>元素可用於更好地控制字段標簽的展示。一個使用示例是僅在表單為編輯模式時展示標簽：

 

1	<label for="name" class="oe_edit_only" />

這么做時，如果字段在<group>元素內部，我們通常還要對其設置nolabel=”True”。class=”oe_edit_only”可用於應用 CSS 樣式，讓標簽僅在編輯模式下可見。

字段組件

每個字段類型都會使用相應的默認組件在表單中顯示。但還有一些替代組件可以使用。對於文本字段，有如下組件：

• email用於讓 email 文本成為可操作的”mail-to”地址
• url用於將文本格式化為可點擊的URL
• html用於將文本渲染為HTML內容；在編輯模式下，它顯示為一個WYSIWYG(所見即所得)編輯器，可在不使用 HTML 代碼的情況下格式化內容。

對於數字字段，有以下組件：

• handle在列表視圖中作為一個排序字段，顯示一個句柄來讓我們可以拖放進行自定義排序
• float_time將一個浮點型字段格式化為帶有小時和分鍾的值
• monetary將一個浮點型字段顯示為貨幣金額。它與currency_id字段一起使用，還可以通過options=”{‘currency_field’: ‘currency_id’}”來使用另一個字段名
• progressbar將一個浮點值顯示為進度條百分比，有助於將字段展示為完成率
• percentage和percentpie組件可用於浮點型字段

對於關聯和選擇項字段，有以下附加組件：

• many2many_tags將值顯示為按鈕標簽列表
• many2many_checkboxes將選項值顯示為一個復選框列表
• selection對many-to-one字段使用選擇字段組件
• radio以單選按鈕顯示選擇字段選項
• priority將選項字段顯示為一個可點擊星形列表。選擇項目通常是數值。
• state_selection將看板狀態選擇列表顯示為信號燈。普通狀態顯示為灰色，完成顯示為綠色，其它狀態顯示為紅色。
• pdf_viewer是一個二進制字段(在 Odoo 12中引入)。

ℹ️Odoo 11中的修改
state_selection在 Odoo11中引入來替換掉kanban_state_selection。后者被淘汰，但為保持向后兼容性，還支持使用。

關聯字段

在關聯字段中，我們可讓用戶操作做一些額外控制。默認用戶從這些字段中創建新記錄（也稱作“快速創建”）並打開關聯記錄表單。可通過options字段屬性來關閉：

 

1	options="{'no_open': True, 'no_create': True}"

context和domain也是字段屬性並對於關聯字段特別有用。context可定義關聯字記錄默認值，domain 可限制可選記錄。常見的示例為讓一個字段依賴其它字段值來產生選擇項。domain可在模型中直接定義，但也可在視圖中進行覆蓋。

在to-many字段中，我們還可使用 mode 屬性來更改用於顯示記錄的視圖類型。默認為 tree，但還有其它選項：form, kanban或graph。關聯字段可定義行內指定視圖來使用。這些視圖在元素中的嵌套視圖定義中聲明。例如，在line_ids借閱中，我們可以為這些線路定義特定的列表和表單視圖：

 

1 2 3 4 5 6 7 8 9 10 11 12

<notebook>                         <page string="Borrowed Books" name="page_lines">                             <field name="line_ids">                                 <tree>                                     <field name="book_id" />                                 </tree>                                 <!--form>                                     <field name="book_id" />                                 </form-->                             </field>                         </page>                     </notebook>

線路列表將帶有給定的<tree>定義。當我們與線路交互時，彈出一個表單對話框，在<form>定義中包含該結構。

小貼士：如果想要在列表視圖的表單彈出窗口中直接編輯one-to-many路線，應使用<tree editable=”top”>或<tree editable=”bottom”>

按鈕

按鈕支持這些屬性：

• string是按鈕文本標簽或使用圖標時的 HTML alt 文本
• type是執行操作的類型，有以下值：
  • object用於調用 Python 方法
  • action用於運行窗口操作
• name標識按所選類型要操作的具體的操作，要么是模型方法名，要么是要運行的窗口操作的數據庫 ID。可使用%(xmlid)d方程式來將XML ID轉換成加載視圖時所需的數據庫 ID。
• args在類型為 object 時用於向方法傳遞額外的參數，須是在形成方法調用參數的記錄 ID 之后所添加的純靜態 JSON 參數。
• context在上下文中添加值，可在窗口操作或 Python 代碼方法調用之后產生效果。
• confirm在運行相關操作之前顯示確認消息框，顯示的內容是屬性中分配的文本。special=”cancel”用於向導表單。
• icon是按鈕所顯示的圖標。可用的按鈕來自Font Awesome圖標集，版本為4.7.0，應通過對應的 CSS 類來指定，如icon=”fa-question”。更多信息可訪問Font Awesome。

ℹ️Odoo 11中的修改
在 Odoo 11之前，按鈕圖標是來自GTK客戶端庫的圖片，並且僅限於addons/web/static/src/img/icons中所保存圖片。

ℹ️Odoo 11中的修改
在 Odoo 11中工作流引擎被淘汰並刪除。此前的版本中，在支持工作流的地方，按鈕可通過type=”workflow”來觸發工作流引擎信號。這時name屬性用於工作流的信號名。

智能按鈕

在右上角版塊中帶有智能按鈕(smart button)也很常見。智能按鈕顯示為帶有數據指示的矩形，在點擊時可進入。

Odoo 中使用的 UI樣式是在放置智能按鈕的地方帶有一個隱藏框，按鈕框通常是<sheet>的第一個元素，在<div class=”oe_title”>元素前(以及頭像)，類似這樣：

 

1 2 3

<div name="button_box" class="oe_button_box">     <!-- Smart buttons will go here... --> </div>

按鈕的容器是一個帶有oe_button_box類的 div 元素。在 Odoo 11.0以前，可能需要添加一個oe_right類來確保按鈕框在表單中右對齊。在我們的應用中，我們將在按鈕中顯示圖書會員待歸還的其它借閱的總數，點擊按鈕會進入這些項的列表中。

所以我們需要該會員處於 open 狀態的借閱記錄，排除掉當前借閱。對於按鈕統計，我們應創建一個計算字段來在library_checkout/models/library_checkout.py文件的借閱類中進行計數：

 

1 2 3 4 5 6 7 8 9 10

num_other_checkouts = fields.Integer(         compute='_compute_num_other_checkouts')       def _compute_num_other_checkouts(self):         for rec in self:             domain = [                 ('member_id', '=', rec.member_id.id),                 ('state', 'in', ['open']),                 ('id', '!=', rec.id)]             rec.num_other_checkouts = self.search_count(domain)

下一步我們可以添加按鈕框並在其中添加按鈕。在<sheet>版塊的上方，替換上面的按鈕框占位符為以下代碼：

 

1 2 3 4 5 6 7 8 9 10 11 12

<div name="button_box" class="oe_button_box">                         <button class="oe_stat_button"                             icon="fa-tasks"                             help="Other checkouts pending return."                             type="action"                             name="%(action_other_checkouts_button)d"                             context="{'default_member_id': member_id}">                             <field string="To Return"                                 name="num_other_checkouts"                                 widget="statinfo" />                         </button>                     </div>

按鈕元素本身是一個帶有顯示數據字段的容器。這些數據是使用statinfo特定組件的普通字段。該字段通常是作用於模型中定義的計算字段。除字段外，在按鈕中還可以使用靜態文本，如<div>Other Checkouts</div>。其它待借閱的數量展示在按鈕定義中的num_other借閱字段中。

智能按鈕必須帶有class=”oe_stat_button” CSS樣式，並應使用 icon 屬性來帶有一個圖標。它有一個type=”action”，表示點擊按鈕時將運行通過 name 屬性標識的窗口操作。%(action_other_checkouts_button)d表達式返回要運行的操作的數據庫 ID。

在點擊按鈕時，我們要查看當前會員的其它借閱列表。這可通過action_other_checkouts_button窗口操作來實現。該操作會使用合適的域過濾器打開一個圖書借閱列表。操作和相應的域過濾器在表單上下文之外處理，無法訪問表單數據。因此按鈕必須在上下文中設置當前member_id 來供窗口操作隨后使用。使用的窗口操作必須在表單之前定義，因此我們應在 XML 文件根元素<odoo>中的最上方添加以下代碼：

 

1 2 3 4 5 6 7

<act_window id="action_other_checkouts_button"         name="Open Other Checkouts"         res_model="library.checkout"         view_mode="tree,form"         domain="[('member_id', '=', default_member_id),             ('state', 'in', ['open']),             ('id', '!=', active_id)]"/>

注意我們在域過濾器中如何使用default_member_id上下文鍵。該鍵還會點擊按鈕鏈接創建新任務時為member_id字段設置默認值。域過濾器也需要當前 ID。這無需在上下文中明確設置，因為網頁客戶端會在active_id上下文鍵中自動進行設置。

以下是可在智能按鈕中添加的屬性，供您參考：

• class=”oe_stat_button”渲染的不是普通按鈕而是一個矩形
• icon從Font Awesome圖標集中選擇圖標來使用。訪問Font Awesome查看有哪些圖標。
• type和name是按鈕類型以及觸發的操作名。對於智能按鈕，類型通常是 action，指定窗口操作，名稱為所要執行操作的 ID。應傳入真實數據庫 ID，因此我們要使用方程式來將XML ID轉換為數據庫 ID：”%(actionxmlid)d”。這一操作應該會打開帶有關聯記錄的視圖。
• string為按鈕添加標簽文本，這里沒有使用因為所包含的字段中已經提供了文本。
• context應用於為目標視圖設置默認值，用於點擊按鈕后視圖上新建的記錄。
• help在鼠標懸停在按鈕上顯示幫助提示信息

動態視圖元素

視圖元素還支持一些允許視圖按字段值動態變更外觀或行為的屬性。我們可以有onchange 事件來在編輯表單數據時修改其它字段值，或在滿足特定條件時讓字段為必填或顯示。

onchange 事件

onchange機制允許我在某一特定字段變更時修改其它表單字段。例如一個商品字段的 onchange可以在商品被修改時設置價格字段為默認值。在老版本中，onchange 事件在視圖級別定義，但8.0之后直接在模型層中定義，無需在視圖上做任何特定標記。這通過使用@api.onchange(‘field1’, ‘field2’, …) 裝飾器創建模型，來對一些字段綁定 onchange 邏輯。onchange 模型方法在第八章 Odoo 12開發之業務邏輯 – 業務流程的支持中詳細討論過，其中還有相關示例。

onchange 機制還可以在用戶輸入時即時反饋進行計算字段的自動重算。繼續使用商品來舉例，如果在修改商品時價格字段變化了，它還會根據新的價格自動更新計算后的總金額字段。

動態屬性

一些屬性允許我們根據記錄的值來動態變更視圖元素的顯示。指定用戶界面元素的可見性可通過如下屬性很方便地控制：

• groups可根據當前用戶所屬安全組來讓元素可見。僅指定組的成員可看到該元素。它的值應為一個逗號分隔的XML ID列表
• states可根據記錄的狀態字段來讓元素可見。它的值為一個逗號分隔的狀態列表，僅對帶有state 字段的模型生效。

除這些以外，我們有一些靈活的方法來根據客戶端動態生成的表達式設置元素可見性。它是一個特別屬性 attrs，它的值為一個映射invisible屬性值與表達式結果的字典。例如，要讓closed_date字段在new和open狀態時不可見，可使用如下代碼：

 

1 2	<field name="closed_date"      attrs="{'invisible':[('state', 'in', ['new', 'open'])]}"/>

invisible不只在字段中可用，在任意元素中均可用。例如，它可用於 notebook 頁面和group元素中。attrs屬性也可為其它兩個屬性設置值：readonly和required。它們僅對數據字段有意義，通過二者來讓字段可編輯或為必填。這讓我們可以實現一些基礎客戶端邏輯，如根據其它字段值(如 state)來讓字段設為必填。

列表視圖

學到這里可能不太需要介紹列表視圖了，但它還一些有趣的額外屬性可以討論。下面我們修改library_checkout/views/checkout_view.xml文件來改進第八章 Odoo 12開發之業務邏輯 – 業務流程的支持中的版本：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<record id="view_tree_checkout" model="ir.ui.view">         <field name="name">Checkout Tree</field>         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <tree                 decoration-muted="state in ['done', 'cancel']"                 decoration-bf="state=='open'">                 <field name="state" invisible="True" />                 <field name="request_date" />                 <field name="member_id" />                 <field name="checkout_date" />                 <field name="stage_id" />                 <field name="num_books" sum="# Books" />             </tree>         </field>     </record>

行文本顏色和字體可根據 Python 表達式計算結果來動態變化。這通過decoration–NAME屬性帶上計算字段屬性的表達式來實現。NAME可以是bf或it，分別表示粗體和斜體，也可以是其它Bootstrap文本上下文顏色：danger, info, muted, primary, success或warning。Bootstrap文檔中有相關顯示示例。

ℹ️Odoo 9中的修改
decoration-NAME 屬性在 Odoo 9中引入。在 Odoo 8中使用是 colors 和 fonts 屬性。

記住表達式中使用的字段必須要在<field>字段中聲明，這樣網頁客戶端才知道要從服務端獲取該列。如果不想對用戶顯示，應對其使用invisible=”1″屬性。其它 tree 元素的相關屬性有：

• default_order讓我們可以覆蓋模型中的默認排序，它的值和模型中定義的排序格式相同。
• create, delete和edit，如果設為 false（字母小寫），會禁用列表視圖中的相應操作。
• editable讓記錄在列表視圖中可直接被編輯。可用值有 top 和 bottom，表示新記錄添加的位置。

列表視圖可包含字段和按鈕，表單中的大部分屬性對它們也有效。在列表視圖中，數值字段可顯示為對應列的匯總值。為字段添加一個累加屬性(sum, avg, min或max)會為其分配匯總值的標簽文本。我們在 num_books 字段中添加了一個示例：

 

1	<field name="num_books" sum="# Books" /

num_books字段計算每個借閱中的圖書數量，它是一個計算字段，我們需要在模型進行添加：

 

1 2 3 4 5 6

num_books = fields.Integer(compute='_compute_num_books')       @api.depends('line_ids')     def _compute_num_books(self):         for book in self:             book.num_books = len(book.line_ids)

搜索視圖

可用的搜索選項通過<search>視圖類型來定義。我們可以選擇在搜索框中輸入時自動搜索的字段。還可以預置過濾器，通過點擊啟用，以及在列表視圖中的預置分組選項。圖書借閱的搜索視圖可設置如下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<record id="view_filter_checkout" model="ir.ui.view">         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <search>                 <field name="member_id" />                 <field name="user_id" />                 <filter name="filter_not_done"                     string="To Return"                     domain="[('state','=','open')]" />                 <filter name="filter_my_checkouts"                     string="My Checkouts"                     domain="['user_id', '=', uid]" />                 <filter name="group_user"                     string="By Member"                     context="{'group_by': 'member_id'}" />             </search>         </field>     </record>

在<search>視圖定義中，可以看到兩個member_id和user_id的簡單元素，當用戶在搜索框中輸入時，推薦下拉框中會顯示對這些字段的匹配。然后有兩個使用域過濾器的預置過濾器。可在搜索框下方的 Filter 按鈕下選擇。第一個過濾器是 To Return 圖書，也就還處於 open 狀態的圖書。第二個過濾器是當前圖書管理員處理的圖書，通過當前用戶的 user_id （可在上下文的 uid 鍵中獲取）過濾。

這兩個過濾器可以分別被啟用並以 OR運算符連接。以<separator />元素分隔的整塊過濾器以 AND 運算符連接。

第三個過濾器僅設置 group by 上下文鍵，它讓視圖按照字段來對記錄分組，本例中為 member_id 字段。

字段元素可使用如下屬性：

• name標識要使用的字段
• string用作標簽文本，它會替換默認值
• operator用於修改默認的運算符(默認值：數值字段=，其它字段類型ilike)
• filter_domain設置搜索使用的特定域表達式，為 operator 屬性提供一種靈活的替代方式。搜索文本在表達式中通過 self 引用。一個簡單示例：filter_domain=”[(‘name’, ‘ilike’, self)]”
• groups讓對該字段的搜索僅向安全組內成員開發，它的值是一個逗號分隔的XML ID列表

過濾元素有以下可用屬性：

• name用作后續繼承/擴展或通過窗口操作啟用的標識符。這不是必填項，但包含該屬性是一個不錯的編碼習慣。
• string是過濾器顯示的標簽文本，必填
• domain是加入當前域的域表達式
• context是加入當前上下文的上下文字典。通常使用group_id作為鍵，用於對記錄分組的字段名作為值
• groups讓該字段的搜索僅對安全組列表(XML IDs)成員開放

其它視圖類型

表單、列表和搜索視圖是最常用的視圖類型。但還有一些其它的視圖類型可用於設計用戶界面。對於前述三種基本視圖類型我們已經很熟悉了，在第十一章 Odoo 12開發之看板視圖和用戶端 QWeb中將詳細介紹看板視圖，它會將記錄可視化為卡片形式，甚至會按列組織為看板。下面我們將學習一些其它視圖類型：

• activity將計划活動顯示為有組織的匯總
• calendar基於所選日期字段以日歷格式展示數據
• diagram展示記錄間的關系，當前不在 Odoo 中使用

以下兩種視圖類型用於顯示累加數據：

• graph用於圖表展示
• pivot用於交互的數據透視表

還有更多的視圖類型，但僅在 Odoo 企業版中可用。因為我們整個系列的文章是基於社區版的，所以無法為這些視圖提供示例：

• dashboard使用透視表和圖表這類子視圖展示累加數據
• cohort用於顯示在不同時期數據如何變化
• gantt以甘特圖顯示日期計划信息，常用於項目管理
• grid通過行和列網格組織數據進行展示

官方文檔中提供了對所有視圖和可用屬性很好的參考，這里就不再重復。我們集中於提供一些基礎使用示例，這樣可以對這些視圖入門。這樣應該可以提供一個很好的基礎，然后可進一步探索每個視圖的所有功能。

小貼士：可通過社區插件模塊查看其它視圖類型。OCA 管理的網頁客戶端插件請見 GitHub 倉庫。例如，web_timeline模塊提供了一個時間線視圖類型，也可像甘特圖那樣展示計划信息，它是社區版的 gantt 視圖類型。

活動視圖

活動視圖類型是內置的計划活動匯總板，幫助用於可視化活動任務。由 mail 模塊提供，因此需要先安裝該模塊才能使用這一視圖類型。要使用這一類型，只需在窗口操作的 view_code 屬性的視圖列表中添加活動視圖類型即可。實際的視圖定義會自動生成，我們也可以手動進行添加，唯一的選項是修改 string 屬性，但在UI 中並不使用。

作為參考，活動視圖的定義類似這樣：

 

1	<activity string="Activities"/>

 

日歷視圖

從名稱可以看出，該視圖類型在日歷中展示記錄，可通過不同時間區間瀏覽：按月、按周或按日。以下是我們圖書借閱的日歷視圖，根據請求日期在日歷上顯示各項：

 

1 2 3 4 5 6 7 8 9 10

<record id="view_calendar_checkout" model="ir.ui.view">         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <calendar date_start="request_date"                 color="user_id">                 <field name="member_id" />                 <field name="stage_id" />             </calendar>         </field>     </record>

補充：請記得在菜單xml文件中加回前文刪除的 calendar 類型

基礎的日歷屬性有：

• date_start是開始日期字段（必填）
• date_end是結束日期字段（可選）
• date_delay是天數字段，用於代替date_end
• all_day傳入一個布爾字段名，用於標識全天活動。這類活動會忽略時長。
• color用於為一組日歷項添加顏色。每個不同值都會被分配一種顏色，它的所有項都會顯示為相同顏色。
• mode是日歷視圖的默認顯示模塊，可以是天、周或月。

ℹ️Odoo 11中的修改
dipsplay 日歷屬性在 Odoo 11中刪除。此前的版本中，它用於自定義日歷項標題文本的格式，例如display=”[name], Stage [stage_id]”。

透視表視圖

還可通過透視表查看數據，它是一個動態分析矩陣。為此我們可使用透視表視圖。

ℹ️Odoo 9中的修改
透視表在 Odoo 8中就已存在，作為一個圖表視圖功能。在 Odoo 9中，它成為一個獨立的視圖類型。同時也增強了透視表功能、優化了透視表數據的獲取。

數據累加僅對數據庫中存儲的字段可用。我們將使用num_books字段來展示一些借書數量的統計。它是一個計算字段，還沒有存儲在數據庫中。要在這些視圖中使用，需要通過添加store=True屬性先將其存儲在數據庫中：

 

1 2 3

num_books = fields.Integer(         compute='_compute_num_books',         store=True)

使用如下代碼來為圖書借閱添加數據透視表：

 

1 2 3 4 5 6 7 8 9 10 11

<record id="view_pivot_checkout" model="ir.ui.view">         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <pivot>                 <field name="stage_id" type="col" />                 <field name="member_id" />                 <field name="request_date" interval="week" />                 <field name="num_books" type="measure" />             </pivot>         </field>     </record>

圖表和透視表視圖應包含描述軸和度量的字段元素，兩者的屬性大多數都通用：

• name像其它視圖一樣標識圖表中使用的字段
• type是指如何使用字段，行分組(默認)、度量(measure)或列（僅針對透視表，用於列分組）
• interval用於日期字段，是對時間數據的分組間隔：按天、按周、按月、按季度或按年

圖表視圖

圖表視圖將數據累加展示為圖表，可以使用柱狀圖、線狀圖和餅圖。下面來為圖書借閱添加圖表視圖：

 

1 2 3 4 5 6 7 8 9

<record id="view_graph_checkout" model="ir.ui.view">         <field name="model">library.checkout</field>         <field name="arch" type="xml">             <graph type="bar">                 <field name="stage_id" />                 <field name="num_books" type="measure" />             </graph>         </field>     </record>

圖表視圖元素可帶有一個type屬性，值可為 bar(默認), pie或line。對於 bar，可使用額外的stacked=”True”屬性來讓柱狀圖疊放起來。圖表使用兩種類型字段：

• type=”row”是默認值，設置累加值的條件
• type=”measure”用於作為實際累加值的度量字段

圖表和透視表視圖應包含描述需使用的軸和度量的字段元素。大多數圖表視圖中的屬性同樣可在透視表視圖中使用。

總結

本文中我們學習了更多創建用戶界面的 Odoo 視圖。我們深入講解了表單視圖，然后一起概覽了其它視圖類型，包括列表視圖和搜索視圖。我們還學習了如何向視圖元素添加動態行為。

下一篇文章中，我們將學習本文中未涉及到的視圖：看板視圖以及它使用的模板語言 QWeb。

 

☞☞☞第十一章 Odoo 12開發之看板視圖和用戶端 QWeb

 

擴展閱讀

以下本文中所討論的話題的附加參考和補充材料：

• Odoo 官方文檔
  • 有關actions
  • 有關視圖
• Font Awesome圖標索引