【odoo14】odoo web庫（OWL）

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模塊。

步驟

咱們將添加一個小的組件，用於展現水平文字的長條。

1. 添加/my_library/static/src/js/component.js的JavaScript文件並定義新的命名空間:

odoo.define('my.component', function (require) {
	"use strict";
	// Place steps 3, 4, 5 here
});

2. 添加/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>

3. 在步驟1中建立js文件中新增OWL實用程序

const { Component } = owl;
const { xml } = owl.tags;

4. 在步驟1中建立的js文件中添加OWL組件及基礎的模板：

class MyComponent extends Component {
	static template = xml`
		<div class="bg-info text-center p-2">
		<b> Welcome to Odoo </b>
		</div>`
}

5. 初始化組件並添加到網頁客戶端：

owl.utils.whenReady().then(() => {
	const app = new MyComponent();
	app.mount(document.body);
});

安裝/更新my_library模塊應用更改。當咱們的模塊完成安裝後，咱們能夠看到水平條。

這只是一個簡單的組件。它不能響應用戶事件，你也不能移除他。

原理

步驟一、步驟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組件中管理用戶行爲

爲了確保用戶接口具備可交互性，組件須要響應用戶的點擊、懸停及表格的提交。
在本節中，咱們將添加一個按鈕並處理點擊事件。

準備

步驟

本節，咱們將添加刪除按鈕。經過點擊刪除按鈕，能夠移除組件。以下：

1. 更新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>`

2. 添加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中的內容。

準備

步驟

本節中，咱們在文本兩邊添加了箭頭的圖標。經過點擊箭頭，咱們能夠改變文本內容。以下：

1. 更新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>`

2. 在JavaScript文件中引入userState鉤子:

const { Component, useState } = owl;

3. 添加constructor方法並初始化一些變量

constructor() {
	super(...arguments);
	this.messageList = [
		'Hello World',
		'Welcome to Odoo',
		'Odoo is awesome',
		'You are awesome too'
	];
	this.state = useState({ currentIndex: 0 });
}

4. 在組件類中，添加用戶點擊事件

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中輸出日誌以瞭解組件的生命週期。

準備

步驟

1. 在構造函數(constructor)中添加日誌

constructor() {
	console.log('CALLED:> constructor');
...

2. 添加willStart方法

async willStart() {
	console.log('CALLED:> willStart');
}

3. 添加mounted方法

mounted() {
	console.log('CALLED:> mounted');
}

4. 添加willPatch方法

willPatch() {
	console.log('CALLED:> willPatch');
}

5. 添加patched方法

patched() {
	console.log('CALLED:> patched');
}

6. 添加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模板等。

準備

步驟

1. 在library.book模型中添加顏色的整數型字段

color = fields.Integer()

2. 在form視圖中添加相同的字段

<field name="color" widget="int_color"/>

3. 在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>

4. 在manifest文件中添加QWeb文件

"qweb": [
	'static/src/xml/qweb_template.xml',
],

5. 如今咱們在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中查看。
6. 添加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模板。咱們添加了兩個模板，一個是顏色的選擇，另外一個是字段自己。咱們使用兩個模板是爲了更好的理解子組件的概念。仔細查看模板，能夠發現咱們使用了 標籤。浙江實例化子組件。在 標籤中，咱們傳遞active和pill_no屬性。這些屬性的值將經過子組件參數props獲取。同時，t-on-color-updated屬性被用來監聽子組件的自定義事件。

重要信息
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組件捕獲。 步驟八、9，咱們建立了FieldColor組件，它是AbstractField的拓展。咱們之因此使用AbstractField組件，是由於它具有建立字段小部件的全部要素。咱們再一開始使用了components靜態變量。當你在模板中使用子組件的時候，你須要經過components靜態變量列出全部的組件。咱們添加了willStart方法。willStart方法是異步方法，咱們能夠調用RPC實現獲取特定顏色組圖書的數量。而後，咱們添加了colorUpdated方法，在咱們點擊是調用。因此，當咱們變化了字段的值時。setValue方法將會設置字段的值。注意，由子組件觸發的數據，在event參數下的detail屬性中是能夠訪問到的。最後，咱們在fieldRegistry中註冊了小部件，這意味着從此咱們將可以經過表單視圖中的小部件屬性使用字段。 在步驟10中，咱們將JavaScript和SCSS文件加載到後端資產中。