在 Oracle JET 虛擬 DOM 應用程式中建立主要檢視

簡介

本教學課程探討如何從本機 JavaScript 物件表示法 (JSON) 文件讀取主要 - 明細階層資料，以及在 Oracle JavaScript Extension Toolkit (Oracle JET) 虛擬 DOM 應用程式的清單檢視元件中顯示資料。

在 Oracle JET 中，您可以使用 Oracle JET API 來建立資料提供者物件。物件代表從 JSON 文件資料存放區的父項物件填入的資料陣列。Oracle JET 自訂 HTML 元素的 data 屬性會透過您所建立的 MutableArrayDataProvider 資料提供者物件的執行處理連結至資料。

目標

在此教學課程中，您將資料連結本機 JSON 文件中的多個父項資料物件項目，並以該資料填入「活動容器」元件中 Oracle JET 清單檢視元件的資料列。

必要條件

設定為建立 Oracle JET 虛擬 DOM 應用程式 (包括安裝 Node.js) 的開發環境
已安裝 Google Chrome Web 瀏覽器並將它設為預設 Web 瀏覽器
存取 Oracle JET Developer Cookbook
(選項 1) 完成本系列先前學習路徑的最終教學課程： 測試不同螢幕大小上的 Oracle JET Virtual DOM App
(選項 2) 如果您尚未完成此系列中的上一個學習路徑：已下載 jet-virtual-dom-app-temp.zip
product_images.zip 下載至 JET-Virtual-DOM-app/src/styles/images 目錄

工作 1：下載入門虛擬 DOM App

如果您繼續在上一個學習路徑中建立的應用程式中工作，請略過此任務。

將 jet-virtual-dom-app-temp.zip 重新命名為 JET-Virtual-DOM-app.zip。將內容擷取至 JET-Virtual-DOM-app 目錄。
在終端機視窗中，瀏覽到 JET-Virtual-DOM-app 目錄，然後復原 Oracle JET 應用程式。
```
npx @oracle/ojet-cli restore
```
您的應用程式已可供使用。

作業 2：下載產品影像

如果您在 jet-virtual-dom-app-temp.zip 中下載起始應用程式，請略過此工作。

如果在終端機視窗中執行 Oracle JET 工具伺服器批次工作，請按 Ctrl+C，如果出現提示，請輸入 y 以結束伺服器批次工作。

伺服器批次工作只會辨識您對現有應用程式檔案的修訂。建立新檔案後，您必須再次執行虛擬 DOM 應用程式。
將 product_images.zip 檔案下載至 JET-Virtual-DOM-app/src/styles/images 目錄。
將 zip 檔案的內容解壓縮至 images 目錄的新 product_images 目錄中。

新目錄的路徑為 JET-Virtual-DOM-app/src/styles/images/product_images，該目錄包含您應用程式使用的影像。

作業 3：在父項容器 1 中建立可變陣列資料提供者

開啟 Oracle JET Cookbook 並瀏覽至「C Cookbook 首頁」。依序按一下架構、資料提供者和可變陣列資料提供者。在「電子書」工具列中，按一下 API 文件。
在 API 文件中，閱讀有關 MutableArrayDataProvider 類別的資訊。請注意，您可以使用選擇性引數 keyAttributes，根據傳入資料物件的索引鍵屬性建立 MutableArrayDataProvider 的執行處理。
如果您尚未在先前的學習路徑中執行此操作，請將 store_data.json 檔案下載至 JET-Virtual-DOM-app/src/components 目錄。
瀏覽至 JET-Virtual-DOM-app/src/components 目錄，並在編輯器中開啟 ParentContainer1.tsx 檔案。

在檔案頂端，新增 MutableArrayDataProvider 類別的 import 敘述句和 store_data.json 檔案中的 JSON 資料。

import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import * as storeData from "text!./store_data.json";

建立 Activity 類型別名。

type Activity = {
    id: number;
    name: string;
    short_desc: string;
};

建立 MutableArrayDataProvider 的 activityDataProvider 執行處理。
```
const activityDataProvider = new MutableArrayDataProvider<Activity["id"], Activity>(JSON.parse(storeData), {
    keyAttributes: "id",
});
```
MutableArrayDataProvider 類別的 keyAttributes 特性會根據父項物件的 id 屬性植入陣列。id 屬性是 JSON 文件中父項和子項資料物件的索引鍵屬性。

在 ParentContainer1 函數中，新增 data 屬性至使用 props 將資料提供者物件傳送至「活動容器」元件的 ActivityContainer 元素。

return (
    <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
        <ActivityContainer data={activityDataProvider} />
        <ParentContainer2 />
    </div>
    );
};

您的程式碼應該類似於 parent-container1-1-tsx.txt 。

任務 4：建立活動容器清單檢視元件

在「活動容器」元件中建立 Oracle JET 清單檢視元件，以從透過 ParentContainer1 元件的 props 傳遞的資料提供者物件，顯示每個清單資料列的多個資料項目。若要在執行階段建立清單資料列資料項目的內容，「清單檢視」元件使用 HTML template 元素與 slot 屬性作為預留位置。

瀏覽至 JET-Virtual-DOM-app/src/components/Activity 目錄，並在編輯器中開啟 ActivityContainer.tsx 檔案。

將 Oracle JET「清單檢視」元件和 MutableArrayDataProvider 類別的下列匯入敘述句新增至檔案頂端。

import "ojs/ojlistview";
import { ojListView } from "ojs/ojlistview";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

建立 Props 和 Activity 類型別名。

type Props = {
    data?: MutableArrayDataProvider<Activity["id"], Activity>;
    value?: string;
};

type Activity = {
    id: number;
    name: string;
    short_desc: string;
};

尋找含有 id="activitiesContainer" 的 div 元素，然後刪除 oj-sm-only-text-align-end 協助程式類別，以防止「活動容器」的內容重新排列。

建立轉譯每個清單項目的 listItemRenderer 函數並包含 span 和 div 元素，以將背景影像、名稱和簡短描述植入「清單檢視」元件的資料列。

並定義 image 變數，以確保虛擬 DOM 應用程式可在應用程式的 styles 目錄中找到產品影像。

const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
    let image = item.data.image.replace("css", "styles");
    return (
    <div class="oj-flex no-wrap">
        <span
        class="demo-thumbnail oj-flex-item"
        style={"background-image:url(" + image + ")"}></span>
        <div class="demo-content oj-flex-item">
        <div>
            <strong>{item.data.name}</strong>
        </div>
        <span class="demo-metadata">{item.data.short_desc}</span>
        </div>
    </div>
    );
};

在 listItemRenderer 函數下方，新增下列 ListViewProps 類型別名與兩個變數，以定義「清單檢視」元件的格線與捲動屬性。

type ListViewProps = ComponentProps<"oj-list-view">;
const gridlinesItemVisible: ListViewProps["gridlines"] = { item: "visible" };
const scrollPolicyOpts: ListViewProps["scrollPolicyOptions"] = { fetchSize: 5 };

新增 props 至 ActivityContainer 函數定義。

const ActivityContainer = (props: Props) => {

在 ActivityContainer 函數的 return 陳述式中，刪除 div 元素，其中 id="activitiesItems 和其中的清單。以下列「清單檢視」元件取代，其中透過「清單檢視」之 data 屬性中的 props 存取資料提供者物件。

<h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader" 
                data={props.data} gridlines={gridlinesItemVisible} selectionMode="single" 
                scrollPolicy="loadMoreOnScroll" scrollPolicyOptions={scrollPolicyOpts}>
  </oj-list-view>

在「清單檢視」元件中，新增含有 slot 屬性的 template 元素，以轉譯清單中的每個項目。
```
. . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>
```
儲存檔案。您的程式碼應該類似於 activity-container-tsx-1.txt 。

作業 5：執行應用程式並對應用程式的層疊樣式表除錯

在終端機視窗中，瀏覽到 JET_Virtual_DOM_app 目錄，然後執行應用程式。
```
npx @oracle/ojet-cli serve
```
Oracle JET 工具會在本機 Web 瀏覽器中執行您的虛擬 DOM 應用程式，您可以在其中檢視「活動容器」元件的變更。顯示在活動名稱左側的影像與簡短描述僅部分顯示，因為影像太大。

如果您調整瀏覽器的大小，但仍看不到與此範例螢幕擷取畫面類似的頁面，請確認已將應用程式影像擷取到 images/product_images 目錄中。

activities_list_with_errors.png 圖解說明
在 Google Chrome 瀏覽器中，在 Soccer 活動的部分影像上按一下滑鼠右鍵，然後選取檢驗。瀏覽器會顯示 Chrome 開發人員工具 (DevTools)，您可以在其中檢查 HTML 頁面來源。
在「元素」面板中，應選取 class="demo-thumbnail oj-flex-item" 的 span 元素。在「樣式」面板中，找出反白顯示的 element.style background-image 樣式。在 jrsoccerball.jpg 影像的 URL 上按一下滑鼠右鍵，然後選取在來源面板中顯示。

inspect_image_url.png 圖解說明
Chrome DevTools 來源面板顯示影像為 300 x 300 像素，因此太大，無法在清單檢視中顯示。若要從完整大小影像呈現縮圖大小的影像，您可以定義「階層式樣式表 (CSS)」樣式類別。

inspect_image_url_contents.png 圖解說明
關閉 Chrome DevTools 視窗，並返回瀏覽器中的應用程式。

任務 6：修正 CSS 並檢視活動清單變更

瀏覽至 JET-Virtual-DOM-app/src/styles 目錄，並在編輯器中開啟 app.css 檔案。
定義 .demo-thumbnail 類別選取器的特性。在特性清單中，將 background-repeat 特性設為 no-repeat，只顯示一次影像。
```
.demo-thumbnail {
    border-radius: 5px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    margin-right: 10px;
}
```
在 ActivityContainer.tsx 檔案的 listItemRenderer 函數中，span 元素會參考類別選取器，將「活動」清單影像格式化為縮圖，方法為在 class 屬性上設定 demo-thumbnail CSS 樣式。
儲存並關閉 app.css 檔案。您的檔案應該類似於 app-css.txt 。
回到瀏覽器並檢視更新。

此應用程式會顯示含有縮圖影像的「活動」清單。

formatted_activities_list.png 圖解說明
關閉顯示您執行中的虛擬 DOM 應用程式的瀏覽器視窗或分頁。
在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

下一步

若要繼續前往此學習進程的下一個教學課程，請按一下此處。

其他學習資源

探索 docs.oracle.com/learn 上的其他實驗室，或存取 Oracle Learning YouTube 通道上的更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請瀏覽 Oracle Help Center 。

標題與版權資訊

Create the master view in an Oracle JET virtual DOM app

F72825-01

December 2022