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="https://www.cnblogs.com/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 >
<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 >
<b> Welcome to Odoo </b>
<i style="cursor: pointer;" t-on-click="onRemove"> </i>
</div>`
- 添加onRemove處理函式
class MyComponent extends Component {
static template = xml`
<div >
<b> Welcome to Odoo </b>
<i
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 >
<i
style="cursor: pointer;"
t-on-click="onPrevious"> </i>
<b t-esc="messageList[Math.abs(
state.currentIndex%4)]"/>
<i
style="cursor: pointer;"
t-on-click="onNext"> </i>
<i
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- 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" t-on-color-updated="colorUpdated">
<t t-foreach="totalColors" t-as='pill_no'>
<ColorPill t-if="mode === 'edit' or value =https://www.cnblogs.com/xushuotec/p/= pill_no" pill_no='pill_no' active='value =https://www.cnblogs.com/xushuotec/p/= 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 = https://www.cnblogs.com/xushuotec/p/{};
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="https://www.cnblogs.com/my_library/static/src/js
/component.js" type="text/javascript" />
<script src="https://www.cnblogs.com/my_library/static/src/js
/field_widget.js" type="text/javascript" />
<link href="https://www.cnblogs.com/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檔案加載到后端資產中，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/265065.html
標籤：SAP