odoo14引入了名為OWL(Odoo Web Library)的JavaScript框架。OWL是以組件為基礎的UI框架，通過QWeb模板作為架構。OWL與傳統的組件系統相比更快，並引入了一些新的特性，包括hooks、reactivity、the autoinstantiation of subcomponents等。在這章中，我們將學習如何使用OWL創建可交互的UI元素。我們將從最小的OWL組件開始，然后學習組件的生命周期。最后，我們將創建一個新的form視圖下的字段控件。本章將包含如下內容：
- 創建OWL組件
- 在OWL組件中管理用戶動作
- TODO: Making OWL components reactive
- 理解OWL的生命周期
- 向form視圖中添加OWL字段
注意
為什么odoo不使用一些比較知名的JavaScript框架，比如React.js、Vue.js呢？你可以在https://github.com/odoo/owl了解到OWL的更多知識。
技術要求
OWL組件是以ES6定義的。在這章中，我們將使用ES6語法。但是一些ES6語法在一些老的瀏覽器中有問題。請確保使用最新的Chrome或者Firefox瀏覽器。
創建OWL組件
本節的目標是學習OWL組件的基礎知識。我們將創建最小的OWL組件並把它添加到Odoo的Web客戶端中。
本節，我們會創建一個小的帶有文字的水平條。
准備
本節，我們將使用my_library模塊。
步驟
我們將添加一個小的組件，用於展示水平文字的長條。
- 添加/my_library/static/src/js/component.js的JavaScript文件並定義新的命名空間:
odoo.define('my.component', function (require) {
"use strict";
// Place steps 3, 4, 5 here
});
- 添加/my_library/views/tempaltes.xml的項目xml文件並載入js文件：
<template id="assets_end" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script src="/my_library/static/src/js/component.js" type="text/javascript" />
</xpath>
</template>
- 在步驟1中創建js文件中新增OWL實用程序
const { Component } = owl;
const { xml } = owl.tags;
- 在步驟1中創建的js文件中添加OWL組件及基礎的模板：
class MyComponent extends Component {
static template = xml`
<div class="bg-info text-center p-2">
<b> Welcome to Odoo </b>
</div>`
}
- 初始化組件並添加到網頁客戶端：
owl.utils.whenReady().then(() => {
const app = new MyComponent();
app.mount(document.body);
});
安裝/更新my_library模塊應用更改。當我們的模塊完成安裝后，我們可以看到水平條。
這只是一個簡單的組件。它不能響應用戶事件，你也不能移除他。
原理
步驟1、步驟2，我們添加了js文件並將其添加到后台資源(assets)中。如果想學習assets的內容，可參考14章、CMS網站開發、靜態資源管理。
步驟3，我們通過OWL初始化了一個變量。所有通過OWL實例化的變量在全局變量owl中都是可見的。在我們的例子中，我們使用了OWL實例。首先，我們定義了Component，然后通過owl.tags定義了xml。對於OWL組件而言，Component是核心類，通過擴展它，我們可以創建我們自己的組件。
步驟4，我們創建了組件，MyComponent。簡單起見，我們僅添加了QWeb的模板。如果你觀察的比較仔細，可以看到我們使用xml...定義了模板。這就是內聯模板(inline template)。然后，你也可以載入QWeb模板。
小貼士
內聯QWeb模板並不支持翻譯及通過繼承進行修改。因此，盡量使用單獨的QWeb文件。
步驟5，我們實例化了MyComponent並把它追加到body中。OWL組件是ES6的類，所以你能夠通過new創建實體。然后通過mount()函數添加到頁面中。我們把我們的代碼寫在了whenReady()的回調函數中。這可以確保在使用OWL組件前，所有的OWL功能都被加載完成。
更多
OWL在odoo中是單獨加載的庫，就像其他的JS庫一樣。你能夠使用OWL構建其他的項目。
在OWL組件中管理用戶行為
為了確保用戶接口具有可交互性，組件需要響應用戶的點擊、懸停及表格的提交。
在本節中，我們將添加一個按鈕並處理點擊事件。
准備
步驟
本節，我們將添加刪除按鈕。通過點擊刪除按鈕，可以移除組件。如下：
- 更新QWeb模板並添加icon圖標。
static template = xml`
<div class="bg-info text-center p-2">
<b> Welcome to Odoo </b>
<i class="fa fa-close p-1 float-right" style="cursor: pointer;" t-on-click="onRemove"> </i>
</div>`
- 添加onRemove處理函數
class MyComponent extends Component {
static template = xml`
<div class="bg-info text-center p-2">
<b> Welcome to Odoo </b>
<i class="fa fa-close p-1 float-right"
style="cursor: pointer;"
t-on-click="onRemove"> </i>
</div>`
onRemove(ev) {
this.destroy();
}
}
更新模塊后，視圖如下：
點擊移除的圖標后，組件將被刪除。當刷新頁面后，水平條將再次出現。
原理
步驟1，我們添加了移除的圖標，並且添加了t-on-click屬性。這將綁定點擊事件。屬性的值就是響應方法的名稱。在我們的例子中，onRemove是我們的響應函數。組件的事件語法如下
t-on-<name of event>="<method name in component>"
比如，當我們想當鼠標移至組件上時進行響應，則可以
t-on-mouseover="onMouseover"
在添加響應代碼后，當我們的鼠標懸停在組件上時，OWL將會調用onMouseover方法。
步驟2，我們添加了onRemove方法。當我們點擊移除圖標時調用。在這個方法中，我們調用了destory()方法，這將會移除組件。在destory()函數中，我們接收JavaScript事件對象。destory()是OWL組件的默認方法之一。
更多
事件並不局限於DOM事件。你可以添加自己的事件。比如，你觸發了名為my-custom-event的方法，你可以使用t-on-my-custom-event捕獲事件。
Making OWL 組件reactive
OWL是一個強有力的框架，可根據鈎子自動更新UI。有了更新鈎子，當組件的內部狀態發生變化后，組件的UI可自動更新。在本節中，我們將更新展示在組件UI中的內容。
准備
步驟
本節中，我們在文本兩邊添加了箭頭的圖標。通過點擊箭頭，我們可以改變文本內容。如下：
- 更新XML的模板。添加兩個綁定事件的按鈕。可以從列表中動態檢索文本。
static template = xml`
<div class="bg-info text-center p-2">
<i class="fa fa-arrow-left p-1"
style="cursor: pointer;"
t-on-click="onPrevious"> </i>
<b t-esc="messageList[Math.abs(
state.currentIndex%4)]"/>
<i class="fa fa-arrow-right p-1"
style="cursor: pointer;"
t-on-click="onNext"> </i>
<i class="fa fa-close p-1 float-right"
style="cursor: pointer;"
t-on-click="onRemove"> </i>
</div>`
- 在JavaScript文件中引入userState鈎子:
const { Component, useState } = owl;
- 添加constructor方法並初始化一些變量
constructor() {
super(...arguments);
this.messageList = [
'Hello World',
'Welcome to Odoo',
'Odoo is awesome',
'You are awesome too'
];
this.state = useState({ currentIndex: 0 });
}
- 在組件類中，添加用戶點擊事件
onNext(ev) {
this.state.currentIndex++;
}
onPrevious(ev) {
this.state.currentIndex--;
}
更新模塊，展示如下:
原理
步驟1，我們更新了XML模板。我們做了兩個改動。我們通過消息的列表渲染文本消息，我們基於在state變量中的currentIndex的值選擇消息。我們在文本框兩邊添加了兩個箭頭。並通過t-on-click屬性綁定了點擊事件。
步驟2，我們引入了useState鈎子。將用於處理組件的狀態。
步驟3，我們添加了構造函數(constructor)。當我們創建對象實體時，構造函數將會被調用。在構造函數中，我們添加了消息的列表。然后通過useState鈎子新增了state的變量。當state變化的時候，UI也將更新。在我們的例子中，我們在useState鈎子中使用了currentIndex。當currentIndex變化了，UI也將隨之變化。
重要信息
在定義鈎子的時候只有一條規則，只有在構造函數中定義了鈎子，鈎子才會生效。幾個其他鈎子可以在https://github.com/odoo/owl/ blob/master/doc/reference/hooks.md詳細了解。
步驟4，我們添加了箭頭的點擊事件。通過點擊箭頭，我們可以改變組件的狀態。因為我們再state上使用了鈎子，UI也將隨之變化。
理解OWL的生命周期
OWL組件有幾個方法幫助開發人員創建強有力的組件。本節，我們將了解組件重要的方法及組件的生命周期。本節，我們添加了幾個方法，我們將在console中輸出日志以了解組件的生命周期。
准備
步驟
- 在構造函數(constructor)中添加日志
constructor() {
console.log('CALLED:> constructor');
...
- 添加willStart方法
async willStart() {
console.log('CALLED:> willStart');
}
- 添加mounted方法
mounted() {
console.log('CALLED:> mounted');
}
- 添加willPatch方法
willPatch() {
console.log('CALLED:> willPatch');
}
- 添加patched方法
patched() {
console.log('CALLED:> patched');
}
- 添加willUnmount()方法
willUnmount() {
console.log('CALLED:> willUnmount');
}
更新模塊后如下圖：
原理
constructor(): 構造函數，最先被調用。將在這里設置組件的初始狀態。
willStart(): 在構造函數之后，渲染元素之前。這是異步函數，可以進行諸如RPC的異步操作。
mounted(): 在元素渲染、DOM添加之后調用。
willPatch(): 在組將的狀態發生變化之后調用。這個方法將在元素被根據新的狀態重新渲染前調用。例如，當我們點擊箭頭的時候，該函數被調用。但是這時dom依舊是老的值。
patched(): 與willPatched()類似。在組件的狀態發生變化的時候調用。不同點是，函數在元素基於新的狀態渲染后調用。
willUnmount(): 在元素被移除前調用。
以上是組件的生命周期，你可以根據實際需要編寫相應函數。比如，mounted和willUnmount方法可以用來綁定和解綁事件監聽。
更多
還有一個重要的方法，他在你使用子組件的使用調用。OWL傳遞通過props參數傳遞父組件的狀態給子組件，當props變化的時候，willUpdateProps方法將被調用。這是一個異步方法，意味着你可以進行諸如RPC的異步操作。
為form視圖添加OWL字段
至此，我們學習了OWL的基礎知識。現在我們創建一個form視圖下的字段展示組件。我們將創建一個顏色部件，通過選擇顏色保存數值。
為了讓例子更豐富，我們使用了OWL的先進理念。我們將創建復雜的組件，用戶事件，擴展的QWeb模板等。
准備
步驟
- 在library.book模型中添加顏色的整數型字段
color = fields.Integer()
- 在form視圖中添加相同的字段
<field name="color" widget="int_color"/>
- 在static/src/xml/qweb_tempalte.xml中添加字段的QWeb模板
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-name="OWLColorPill" owl="1">
<span t-attf-class="o_color_pill o_color_{{props.pill_no}} {{props.active and'active' or ''}}" t-att-data-val="props.pill_no" t-on-click="pillClicked"t-attf-title="This color is used in {{props.book_count or 0 }} books." />
</t>
<span t-name="OWLFieldColorPills" owl="1" class="o_int_colorpicker" t-on-color-updated="colorUpdated">
<t t-foreach="totalColors" t-as='pill_no'>
<ColorPill t-if="mode === 'edit' or value == pill_no" pill_no='pill_no' active='value == pill_no' book_count="colorGroupData[pill_no]"/>
</t>
</span>
</templates>
- 在manifest文件中添加QWeb文件
"qweb": [
'static/src/xml/qweb_template.xml',
],
- 現在我們在static/src/scss/field_widget.scss中添加一些SCSS。文件太長了，可直接在https://github.com/ PacktPublishing/Odoo-13-Development-Cookbook-Fourth- Edition/blob/master/Chapter16/05_owl_field/my_library/ static/src/scss/field_widget.scss中查看。
- 添加static/src/js/field_widget.js
odoo.define('my_field_widget', function (require) {
"use strict";
const { Component } = owl;
const AbstractField = require(
'web.AbstractFieldOwl');
const fieldRegistry = require(
'web.field_registry_owl');
// Place steps 7 and 8 here
});
步驟7，添加顏色選擇組件
class ColorPill extends Component {
static template = 'OWLColorPill';
pillClicked() {
this.trigger('color-updated', {val:
this.props.pill_no});
}
}
步驟8，擴展AbstractField
class FieldColor extends AbstractField {
static supportedFieldTypes = ['integer'];
static template = 'OWLFieldColorPills';
static components = { ColorPill };
// Add methods from step 9 here
}
fieldRegistry.add('int_color', FieldColor);
步驟9，添加方法
constructor(...args) {
super(...args);
this.totalColors = Array.from({ length: 10 },
(_, i) => (i + 1).toString());
}
async willStart() {
this.colorGroupData = {};
var colorData = await this.rpc({
model: this.model, method: 'read_group',
domain: [], fields: ['color'],
groupBy: ['color'],
});
colorData.forEach(res => {
this.colorGroupData[res.color] =
res.color_count;
});
}
colorUpdated(ev) {
this._setValue(ev.detail.val);
}
步驟10，將js、scss文件添加到后台資源。
<template id="assets_backend" inherit_id="web.assets_ backend">
<xpath expr="." position="inside">
<script src="/my_library/static/src/js
/component.js" type="text/javascript" />
<script src="/my_library/static/src/js
/field_widget.js" type="text/javascript" />
<link href="/my_library/static/src/scss
/field_widget.scss" rel="stylesheet" type="text/scss" />
</xpath>
</template>
更新模塊，如下圖
這個字段看起來就像上一章中的color小部件，但實際的區別在於它的底層。這個新字段是用OWL構建的，而前一個字段是用小部件構建的。
原理
步驟1，我們創建了整型字段。
步驟2，我們添加到form視圖。
步驟3，我們添加了QWeb模板。我們添加了兩個模板，一個是顏色的選擇，另一個是字段本身。我們使用兩個模板是為了更好的理解子組件的概念。仔細查看模板，可以發現我們使用了
重要信息
odoo14使用widget系統和OWL框架。兩個都使用QWeb模板。為了將OWL QWeb模板與傳統的QWeb 模板區分，我們需使用owl="1"來標識
步驟4，添加文件到manifest中。
步驟5，添加SCSS的樣式。
步驟6，添加JS。我們引入OWL實用程序，並導入AbstractField和fieldRegistry。AbstractField是抽象的OWL組件。他包含所有基礎元素。fieldRegistry被用來展示OWL組件。
步驟7，我們創建了ColorPill組件。組件中template變量是從外部XML 文件中加載的模板的名稱。ColorPill組件有pillClicked方法，用於用戶在顏色上的點擊。在方法內部，當我們在FieldColor組件上使用t-on-color-updated的觸發的color-updated事件將會被父組件FieldColor組件捕獲。
步驟8、9，我們創建了FieldColor組件，它是AbstractField的拓展。我們之所以使用AbstractField組件，是因為它具備創建字段小部件的所有要素。我們再一開始使用了components靜態變量。當你在模板中使用子組件的時候，你需要通過components靜態變量列出所有的組件。我們添加了willStart方法。willStart方法是異步方法，我們可以調用RPC實現獲取特定顏色組圖書的數量。然后，我們添加了colorUpdated方法，在我們點擊是調用。所以，當我們變化了字段的值時。setValue方法將會設置字段的值。注意，由子組件觸發的數據，在event參數下的detail屬性中是可以訪問到的。最后，我們在fieldRegistry中注冊了小部件，這意味着今后我們將能夠通過表單視圖中的小部件屬性使用字段。
在步驟10中，我們將JavaScript和SCSS文件加載到后端資產中。