老韓頭的開發日常 ☞ 【好書學習】系列
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元件并把它添加到Odoo的Web用戶端中。
本節，我們會建立一個小的帶有文字的水準條。
本節，我們将使用my_library子產品。
我們将添加一個小的元件，用于展示水準文字的長條。
添加/my_library/static/src/js/component.js的JavaScript檔案并定義新的命名空間:
添加/my_library/views/tempaltes.xml的項目xml檔案并載入js檔案：
在步驟1中建立js檔案中新增OWL實用程式
在步驟1中建立的js檔案中添加OWL元件及基礎的模闆：
初始化元件并添加到網頁用戶端：
安裝/更新my_library子產品應用更改。當我們的子產品完成安裝後，我們可以看到水準條。
這隻是一個簡單的元件。它不能響應使用者事件，你也不能移除他。
步驟1、步驟2，我們添加了js檔案并将其添加到背景資源(assets)中。如果想學習assets的内容，可參考14章、CMS網站開發、靜态資源管理。
步驟3，我們通過OWL初始化了一個變量。所有通過OWL執行個體化的變量在全局變量owl中都是可見的。在我們的例子中，我們使用了OWL執行個體。首先，我們定義了Component，然後通過owl.tags定義了xml。對于OWL元件而言，Component是核心類，通過擴充它，我們可以建立我們自己的元件。
步驟4，我們建立了元件，MyComponent。簡單起見，我們僅添加了QWeb的模闆。如果你觀察的比較仔細，可以看到我們使用xml<code>...</code>定義了模闆。這就是内聯模闆(inline template)。然後，你也可以載入QWeb模闆。
小貼士 内聯QWeb模闆并不支援翻譯及通過繼承進行修改。是以，盡量使用單獨的QWeb檔案。
步驟5，我們執行個體化了MyComponent并把它追加到body中。OWL元件是ES6的類，是以你能夠通過new建立實體。然後通過mount()函數添加到頁面中。我們把我們的代碼寫在了whenReady()的回調函數中。這可以確定在使用OWL元件前，所有的OWL功能都被加載完成。
OWL在odoo中是單獨加載的庫，就像其他的JS庫一樣。你能夠使用OWL建構其他的項目。
為了確定使用者接口具有可互動性，元件需要響應使用者的點選、懸停及表格的送出。
在本節中，我們将添加一個按鈕并處理點選事件。
本節，我們将添加删除按鈕。通過點選删除按鈕，可以移除元件。如下：
更新QWeb模闆并添加icon圖示。
添加onRemove處理函數
更新子產品後，視圖如下：
點選移除的圖示後，元件将被删除。當重新整理頁面後，水準條将再次出現。
步驟1，我們添加了移除的圖示，并且添加了t-on-click屬性。這将綁定點選事件。屬性的值就是響應方法的名稱。在我們的例子中，onRemove是我們的響應函數。元件的事件文法如下
比如，當我們想當滑鼠移至元件上時進行響應，則可以
在添加響應代碼後，當我們的滑鼠懸停在元件上時，OWL将會調用onMouseover方法。
步驟2，我們添加了onRemove方法。當我們點選移除圖示時調用。在這個方法中，我們調用了destory()方法，這将會移除元件。在destory()函數中，我們接收JavaScript事件對象。destory()是OWL元件的預設方法之一。
事件并不局限于DOM事件。你可以添加自己的事件。比如，你觸發了名為my-custom-event的方法，你可以使用t-on-my-custom-event捕獲事件。
OWL是一個強有力的架構，可根據鈎子自動更新UI。有了更新鈎子，當元件的内部狀态發生變化後，元件的UI可自動更新。在本節中，我們将更新展示在元件UI中的内容。
本節中，我們在文本兩邊添加了箭頭的圖示。通過點選箭頭，我們可以改變文本内容。如下：
更新XML的模闆。添加兩個綁定事件的按鈕。可以從清單中動态檢索文本。
在JavaScript檔案中引入userState鈎子:
添加constructor方法并初始化一些變量
在元件類中，添加使用者點選事件
更新子產品，展示如下:
步驟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元件有幾個方法幫助開發人員建立強有力的元件。本節，我們将了解元件重要的方法及元件的生命周期。本節，我們添加了幾個方法，我們将在console中輸出日志以了解元件的生命周期。
在構造函數(constructor)中添加日志
添加willStart方法
添加mounted方法
添加willPatch方法
添加patched方法
添加willUnmount()方法
更新子產品後如下圖：
constructor(): 構造函數，最先被調用。将在這裡設定元件的初始狀态。
willStart(): 在構造函數之後，渲染元素之前。這是異步函數，可以進行諸如RPC的異步操作。
mounted(): 在元素渲染、DOM添加之後調用。
willPatch(): 在組将的狀态發生變化之後調用。這個方法将在元素被根據新的狀态重新渲染前調用。例如，當我們點選箭頭的時候，該函數被調用。但是這時dom依舊是老的值。
patched(): 與willPatched()類似。在元件的狀态發生變化的時候調用。不同點是，函數在元素基于新的狀态渲染後調用。
willUnmount(): 在元素被移除前調用。
以上是元件的生命周期，你可以根據實際需要編寫相應函數。比如，mounted和willUnmount方法可以用來綁定和解綁事件監聽。
還有一個重要的方法，他在你使用子元件的使用調用。OWL傳遞通過props參數傳遞父元件的狀态給子元件，當props變化的時候，willUpdateProps方法将被調用。這是一個異步方法，意味着你可以進行諸如RPC的異步操作。
至此，我們學習了OWL的基礎知識。現在我們建立一個form視圖下的字段展示元件。我們将建立一個顔色部件，通過選擇顔色儲存數值。
為了讓例子更豐富，我們使用了OWL的先進理念。我們将建立複雜的元件，使用者事件，擴充的QWeb模闆等。
在library.book模型中添加顔色的整數型字段
在form視圖中添加相同的字段
在static/src/xml/qweb_tempalte.xml中添加字段的QWeb模闆
在manifest檔案中添加QWeb檔案
現在我們在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
步驟7，添加顔色選擇元件
步驟8，擴充AbstractField
步驟9，添加方法
步驟10，将js、scss檔案添加到背景資源。
更新子產品，如下圖
這個字段看起來就像上一章中的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元件捕獲。
步驟8、9，我們建立了FieldColor元件，它是AbstractField的拓展。我們之是以使用AbstractField元件，是因為它具備建立字段小部件的所有要素。我們再一開始使用了components靜态變量。當你在模闆中使用子元件的時候，你需要通過components靜态變量列出所有的元件。我們添加了willStart方法。willStart方法是異步方法，我們可以調用RPC實作擷取特定顔色組圖書的數量。然後，我們添加了colorUpdated方法，在我們點選是調用。是以，當我們變化了字段的值時。setValue方法将會設定字段的值。注意，由子元件觸發的資料，在event參數下的detail屬性中是可以通路到的。最後，我們在fieldRegistry中注冊了小部件，這意味着今後我們将能夠通過表單視圖中的小部件屬性使用字段。
在步驟10中，我們将JavaScript和SCSS檔案加載到後端資産中。
本文來自部落格園，作者：老韓頭的開發日常，轉載請注明原文連結：https://www.cnblogs.com/xushuotec/p/14466633.html