第二章：Odoo Web框架?

在上一章中，我們學習了如何使用Owl框架及其不同的概念?，F在我們可以學習如何使用Odoo JavaScript框架，該框架是建立在Owl之上的。

這是我們在第一章：組件結束時發現 JavaScript web 框架的進展。?

在 awesome_tshirt 模塊中，我們將構建我們的 Awesome 儀表板。這將是一個很好的機會，可以發現 Odoo JavaScript 框架中的許多有用功能。

目標

Solutions

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

1. 新布局?

Odoo Web客戶端中的大多數屏幕都使用相同的布局：頂部有一個控制面板，帶有一些按鈕，下面是一個主要的內容區域。這是通過使用 Layout組件 <https://github.com/odoo/odoo/blob/16.0/addons/web/static/src/search/layout.js>`_在 `@web/search/layout 中實現的。

Exercise

更新位于 awesome_tshirt/static/src/ 的 AwesomeDashboard 組件，使用 Layout 組件。您可以使用 Layout 組件的 display 屬性，如下所示： { "top-right": false, "bottom-right": false } 。

另請參閱

示例: 在客戶端操作中使用布局和模板
示例: 在看板視圖中使用布局

2. 添加一些快速導航按鈕?

Bafien Carpink想要在Odoo中為常用視圖提供易于訪問的按鈕。為了實現這一點，您需要使用操作服務。

Services 是Odoo JavaScript框架定義的一個概念，它是一個持久的代碼片段，可以導出狀態和/或函數。每個服務可以依賴其他服務，組件可以使用 useService() 鉤子導入服務。

Example

這展示了如何使用動作服務從組件中打開設置視圖。

import { useService } from "@web/core/utils/hooks";
...
setup() {
    this.action = useService("action");
}
openSettings() {
    this.action.doAction("base_setup.action_general_configuration");
}
...

Exercise

讓我們在控制面板左下角區域添加三個按鈕。

一個名為“客戶”的按鈕，點擊后打開一個看板視圖，顯示所有客戶（這個操作已經存在，所以你應該使用其xml id）。
一個名為“新訂單”的按鈕，點擊后會打開一個列表視圖，顯示最近7天內創建的所有訂單。
一個名為“已取消訂單”的按鈕，點擊后會打開一個列表，其中包含了最近7天內創建但已經被取消的所有訂單。

另請參閱

示例: doAction使用
代碼: 動作服務

3. 調用服務器，添加一些統計信息?

讓我們通過添加一些卡片（請參見Owl培訓中制作的 Card 組件）包含一些統計信息來改進儀表板。有一個路由 /awesome_tshirt/statistics 將執行一些計算并返回一個包含一些有用信息的對象。

每當我們需要調用特定的控制器時，我們需要使用 rpc 服務。它只導出一個函數來執行請求： rpc(route, params, settings) 。

這里是有關各種參數的簡短說明：

route 是目標路由，以字符串形式表示。例如 /myroute/ 。
params 是一個包含所有將提供給控制器的數據的對象。(可選)
settings 是用于請求的高級控制?？梢允蛊潇o默，或使用特定的 xhr 實例。(可選)

Example

一個基本的請求可能是這樣的：

setup() {
    this.rpc = useService("rpc");
    onWillStart(async () => {
        const result = await this.rpc("/my/controller", {a: 1, b: 2});
        // ...
    });
}

Exercise

修改 Dashboard 以使用 rpc 服務。
在 onWillStart 鉤子中調用統計路由 /awesome_tshirt/statistics 。
在儀表板中顯示幾張包含以下內容的卡片：
- 本月新訂單數量
- 本月新訂單的總金額
- 本月每個訂單的T恤平均數量
- 本月取消訂單數量
- 從“新建”到“已發送”或“已取消”的訂單平均處理時間

另請參閱

代碼: RPC服務
示例: 在 onWillStart 中調用路由

4. 緩存網絡調用，創建服務?

如果你打開瀏覽器的開發者工具，在網絡選項卡中，你可能會發現每次顯示客戶端操作時都會調用 /awesome_tshirt/statistics 。這是因為每次掛載 Dashboard 組件時都會調用 onWillStart 鉤子。但在這種情況下，我們可能更希望只在第一次調用時執行，因此我們實際上需要在 Dashboard 組件之外維護一些狀態。這是服務的一個很好的用例！

Example

下面的示例注冊了一個簡單的服務，每5秒顯示一次通知。

import { registry } from "@web/core/registry";
const myService = {
    dependencies: ["notification"],
    start(env, { notification }) {
        let counter = 1;
        setInterval(() => {
            notification.add(`Tick Tock ${counter++}`);
        }, 5000);
    },
};
registry.category("services").add("myService", myService);