第四章：雜項

在上一個任務中，我們學習了如何創建字段和視圖。Odoo Web框架還有很多功能值得探索，所以讓我們深入了解并在本章中探索更多內容！

這是我們在 第三章：字段和視圖 結束時發現 JavaScript web 框架的進展。

目標

Solutions

本章節中每個練習的解決方案都托管在 官方Odoo教程存儲庫 中。

1. 與通知系統交互

注解

這個任務依賴于 之前的練習 。

在完成一些T恤任務后，使用 Print Label 按鈕后，顯然應該有一些反饋，表明 print_label 操作已完成（或失敗，例如，打印機未連接或用完紙）。

Exercise

1. 當操作成功完成時，顯示 notification 消息，如果失敗則顯示警告。

2. 如果失敗了，通知應該是永久的。

另請參閱

示例: 使用通知服務的代碼

2. 添加系統托盤項

我們敬愛的領導希望密切關注新訂單。他希望隨時看到未處理的新訂單數量。讓我們使用系統托盤項來實現這一點。

一個 系統托盤 項是出現在系統托盤中的元素，系統托盤是位于導航欄右側的小區域。系統托盤用于顯示通知并提供對某些功能的訪問。

Exercise

1. 創建一個系統托盤組件，連接到我們之前創建的統計服務。

2. 使用它來顯示新訂單的數量。

3. 點擊它應該打開一個包含所有訂單的列表視圖。

4. 獎勵點：通過將信息添加到會話信息中，避免進行初始RPC。服務器在初始響應中向Web客戶端提供會話信息。

另請參閱

• 示例: 系統托盤項

• 示例: 向“會話信息”添加一些信息

• 示例: 讀取會話信息

3. 實際更新

到目前為止，上面的系統托盤項目不會更新，除非用戶刷新瀏覽器。讓我們通過定期調用服務器重新加載信息（例如，每分鐘一次）來解決這個問題。

Exercise

1. 修改系統托盤項代碼，從 tshirt 服務獲取數據。

2. “tshirt”服務應定期重新加載其數據。

現在，問題來了：系統托盤項目如何被通知需要重新渲染自己？有多種方法可以實現，但是在本次培訓中，我們選擇使用最 聲明式 的方法：

Exercise

1. 修改 tshirt 服務，使其返回一個 `reactive <https://github.com/odoo/owl/blob/master/doc/reference/reactivity.md#reactive>`_對象。重新加載數據應該直接更新這個reactive對象。

2. 然后，系統托盤項目可以對服務返回值執行 useState 。

3. 這并不是必須的，但是您也可以將對 useService 和 useState 的調用 封裝 在自定義鉤子 useStatistics 中。

另請參閱

• 響應性文檔

• 示例: 在服務中使用響應式

4. 將命令添加到命令面板

現在，讓我們看看如何與命令面板交互。命令面板是一個功能，允許用戶快速訪問應用程序中的各種命令和功能。它通過在Odoo界面中按下 CTRL+K 來訪問。

Exercise

讓我們修改圖片預覽字段（來自之前的練習），添加一個命令到命令面板，以在新的瀏覽器選項卡（或窗口）中打開該圖片。

請確保該命令僅在屏幕上顯示字段預覽時才處于活動狀態。

另請參閱

• 示例: 使用 useCommand 鉤子

• 代碼: 命令服務

5. 猴子補丁一個組件

通常情況下，我們可以使用現有的擴展點來實現我們想要的功能，例如在注冊表中注冊某些內容。但是有時候我們想要修改一些沒有這種機制的東西。在這種情況下，我們必須退回到一種不太安全的自定義形式：monkey patching。在Odoo中幾乎所有的東西都可以被monkey patching。

Bafien，我們敬愛的領袖，聽說員工在不斷被監視的情況下表現更好。由于他無法親自到場監視每一位員工，他委托你完成以下任務：更新用戶界面，在控制面板中添加一個閃爍的紅色眼睛。單擊該眼睛應該打開一個對話框，其中包含以下消息：“Bafien正在觀察你。此交互已記錄，如果必要，可能會在法律訴訟中使用。你同意這些條款嗎？”

Exercise

1. 創建 control_panel_patch.js 文件，以及相應的 CSS 和 XML 文件。

2. 在 ControlPanel 模板中 打補丁 ，在面包屑旁邊添加一個圖標。你可能想使用 fa-eye 或 fa-eyes 圖標。確保在所有視圖中都可見！

   小技巧

   使用XPath繼承模板有兩種方法：通過指定 t-inherit-mode="primary" ，創建一個新的、獨立的模板，具有所需的修改；或者使用 t-inherit-mode="extension" ，直接修改原始模板。

   .blink {
     animation: blink-animation 1s steps(5, start) infinite;
     -webkit-animation: blink-animation 1s steps(5, start) infinite;
   }
   @keyframes blink-animation {
     to {
       visibility: hidden;
     }
   }
   @-webkit-keyframes blink-animation {
     to {
         visibility: hidden;
     }
   }
   

3. 導入 ControlPanel 組件和 patch 函數。

4. 更新代碼，通過使用對話框服務在單擊時顯示消息。您可以使用 ConfirmationDialog 。

另請參閱

• 代碼: patch 函數

• 代碼: ControlPanel組件

• Font Awesome 網站

• 代碼: 對話框服務

• 代碼: 確認對話框

• 示例: 使用對話框服務

• 示例: 使用 t-inherit-mode=”primary” 的 XPath

• 示例: 使用 t-inherit-mode=”extension” 的 XPath

6. 從客戶獲取訂單

讓我們看看如何使用一些標準組件來構建一個強大的功能，結合自動完成、獲取數據和模糊查找。我們將在我們的儀表板中添加一個輸入框，以便輕松搜索給定客戶的所有訂單。

Exercise

1. 更新 tshirt_service.js 文件，添加 loadCustomers 方法，該方法返回一個 promise，該promise返回所有客戶的列表（僅執行一次調用）。

2. 從 @web/core/autocomplete/autocomplete 導入 AutoComplete 組件。

3. 將其添加到儀表板中，在控制面板中的按鈕旁邊。

4. 更新代碼以使用tshirt服務獲取客戶列表，并在自動完成組件中顯示，使用 fuzzyLookup 方法進行過濾。

另請參閱

• 代碼: 自動完成

• 代碼: 模糊查詢

7. 重新引入小貓模式

讓我們為Odoo添加一個特殊模式：每當URL包含 kitten=1 時，我們將在Odoo的背景中顯示一只小貓，因為我們喜歡小貓。

Exercise

1. 創建一個 kitten_mode.js 文件。

2. 創建一個 kitten 服務，應該使用 router service 的幫助來檢查活動 URL 哈希的內容。

3. 如果 kitten 被設置了，那么我們就處于小貓模式。這應該在文檔主體上添加一個類 .o-kitten-mode 。

4. 在 kitten_mode.scss 中添加以下CSS：

   .o-kitten-mode {
     background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/58/Mellow_kitten_%28Unsplash%29.jpg);
     background-size: cover;
     background-attachment: fixed;
   }
   
   .o-kitten-mode > * {
     opacity: 0.9;
   }
   

5. 在命令面板中添加一個命令，用于切換小貓模式。切換小貓模式應該切換 .o-kitten-mode 類，并相應地更新當前 URL。

8. 延遲加載我們的儀表盤

這并不是必須的，但這個練習很有趣。想象一下，我們的令人驚嘆的儀表板是一個大型應用程序，可能有多個外部庫，大量的代碼/樣式/模板。此外，假設儀表板只被某些用戶在某些業務流程中使用，因此我們希望懶加載它，以加快大多數情況下Web客戶端的加載速度。

那么，讓我們來做吧！

Exercise

1. 修改清單以創建新的 bundle awesome_tshirt.dashboard 。

2. 將這個令人驚嘆的儀表盤代碼添加到此捆綁包中。如果需要，您可以創建文件夾并移動文件。

3. 從 web.assets_backend bundle 中移除代碼，以避免重復加載。

到目前為止，我們已經將儀表板從主包中移除，但現在應該懶加載。目前，在操作注冊表中沒有注冊任何客戶端操作。

Exercise

1. 創建一個新文件 dashboard_loader.js 。

2. 將注冊 AwesomeDashboard 到儀表板加載器的代碼復制。

3. 將 AwesomeDashboard 注冊為 LazyComponent 。

4. 修改儀表板加載器中的代碼，使用延遲加載組件 AwesomeDashboard 。

另請參閱

• 關于資源的文檔

• 代碼: LazyComponent