在 Oracle JET 虛擬 DOM App 中建立詳細資訊檢視

簡介

Oracle JavaScript Extension Toolkit (Oracle JET) 元件會保留主要和明細資料物件的階層關係，如資料來源所定義。在上一個教學課程中，您將使用 MutableArrayDataProvider 類別的執行處理建立資料提供者物件。使用 props，您會將資料提供者物件傳遞至 ActivityContainer 元件中的「清單檢視」元件，並轉譯資料項目。現在，使用相同的 JSON 資料存放區時，您將分別植入指定活動的 ActivityItemContainer 和 ItemDetailContainer 元件，以及使用 props 從父項容器傳送資料，以建立指定活動的活動項目明細檢視，以及活動項目的特定項目明細。

目標

在本教學課程中，您將從本機 JSON 文件讀取主要 - 明細階層資料，並在 Oracle JET 虛擬 DOM 應用程式中顯示明細檢視。資料會從本機 JSON 文件連結多個子項資料物件項目，並在 ActivityItemContainer 元件中填入 Oracle JET 清單檢視元件的資料列與該資料，以及 ItemDetailContainer 元件中的 Oracle JET 大頭貼和圖表元件。

必備條件

• 用來建立 Oracle JET 虛擬 DOM 應用程式 (包括安裝 Node.js) 的開發環境
• 完成此學習路徑的上一個教學課程，在 Oracle JET Virtual DOM 應用程式中建立主要檢視

工作 1：在父項容器 2 中建立資料提供者

1. 瀏覽至 JET-Virtual-DOM-app/src/components 目錄，然後在編輯器中開啟 ParentContainer2.tsx 檔案。

2. 在檔案頂端，新增 MutableArrayDataProvider 類別的 import 陳述式，以及 store_data.json 檔案中的 JSON 資料。

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

3. 建立 Item 和 ActivityItem 類型別名。

    type Item = {
      id: number;
      name: string;
      short_desc?: string;
      price?: number;
      quantity?: number;
      quantity_shipped?: number;
      quantity_instock?: number;
      activity_id?: number;
      image?: string;
    };
   
    type ActivityItem = {
      id: number;
      name: string;
      items: Array<Item>;
      short_desc: string;
      image: string;
    };
   

4. 新增 MutableArrayDataProvider 的 activityItemDP 執行處理，以及兩個變數，用來為資料提供者提供來自 JSON 資料來源的棒球活動項目。

    const activityData = JSON.parse(storeData);
    let activityItemsArray = activityData[0].items
   
    // Create data provider instance for the array of activity items for the Baseball activity
    const activityItemDP = new MutableArrayDataProvider<ActivityItem["id"], ActivityItem>(activityItemsArray, {
      keyAttributes: "id",
    });
   

5. 在 ParentContainer2 函數中，新增 data 屬性至 ActivityItemContainer 元素，以使用 props 將資料提供者物件傳送至 ActivityItemContainer 元件。

    <ActivityItemContainer data={activityItemDP} />
   

   儲存檔案。您的程式碼看起來應該類似於 parent-container2-1-tsx.txt 。

任務 2：建立活動項目容器的清單檢視元件

1. 瀏覽至 JET-Virtual-DOM-app/src/components/ActivityItem 目錄，然後在編輯器中開啟 ActivityItemContainer.tsx 檔案。

2. 在檔案頂端，刪除 ResponsiveUtils 模組和 useRef、useState 和 useEffect 鉤點的 import 陳述式。同時刪除 sm_md_view 變數。

3. 在 ActivityItemContainer 函數中，移除使用鉤點和狀態，並啟用 return 陳述式中內容條件式顯示的程式碼。您的函數看起來應類似下列程式碼。

    const ActivityItemContainer = () => {
   
      return (
        <div
          id="activityItemsContainer"
          class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
          <div id="container" class="item-display no-wrap">
            <h3>Activity Items</h3>
            <ul>
              <li class="li-item">Louisville Slugger Bat</li>
              . . .
            </ul>
          </div>
        </div>
      );
    };
   

4. 刪除 return 敘述句中的 ul 元素，並移除 id="container" 之 div 元素中的 class 屬性。ActivityItemContainer 函數應該與下列程式碼類似。

    const ActivityItemContainer = () => {
   
      return (
        <div
          id="activityItemsContainer"
          class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
          <div id="container">
            <h3>Activity Items</h3>
          </div>
        </div>
      );
    };
   

5. 將下列 import 敘述句新增至「Oracle JET 清單檢視」元件，並將 MutableArrayDataProvider 類別新增至檔案頂端。

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

6. 在 import 敘述句區塊下方新增 Props、ActivityItem 和 Item 類型的別名。

    type Props = {
      data?: MutableArrayDataProvider<ActivityItem["id"], ActivityItem>;
      value?: string;
    };
   
    type Item = {
      id: number;
      name: string;
      short_desc?: string;
      price?: number;
      quantity?: number;
      quantity_shipped?: number;
      quantity_instock?: number;
      activity_id?: number;
      image?: string;
    };
   
    type ActivityItem = {
      id: number;
      name: string;
      items: Array<Item>;
      short_desc: string;
      image: string;
    };
   

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

    const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
      const 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>
      );
    };
   

8. 在 listItemRenderer 函數底下，新增 ListViewProps 類型別名和兩個變數以定義「清單檢視」元件的格線和捲動特性。

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

9. 新增 props 至 ActivityItemContainer 函數定義。

    const ActivityItemContainer = (props: Props) => {
   

10. 在 ActivityItemContainer 函數的 return 敘述句中，新增「Oracle JET 清單檢視」元件，從 ParentContainer2 傳遞的資料提供者物件可透過「清單檢視」的 data 屬性中的 props 存取。

    return (
      <div
        id="activityItemsContainer"
        class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
        <div id="container">
          <h3>Activity Items</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>
        </div>
      </div>
     );
    

11. 在「清單檢視」元件中，新增含有 slot 屬性的 template 元素，以轉譯清單中的每個項目。

    . . .
        <template slot="itemTemplate" render={listItemRenderer}></template>
    </oj-list-view>
    

    儲存檔案。您的程式碼看起來應該類似於 activity-item-container-1-tsx.txt 。

工作 3：執行虛擬 DOM 應用程式

1. 在終端機視窗中，瀏覽至 JET_Virtual_DOM_app 目錄，然後執行應用程式。

    npx ojet serve
   

   此應用程式會在 Web 瀏覽器中執行，而「活動項目」清單會顯示棒球活動項目及其簡短描述和縮圖影像。

   

2. 讓終端機視窗與您的應用程式開啟的瀏覽器保持開啟。

作業 4：建立料號明細圖表與大頭貼元件

透過 props 將 SureCatch Baseball Glove 活動項目的項目詳細資訊從 ParentContainer2 元件傳送至 ItemDetailContainer 元件，將資料連結至「Oracle JET 圖表」和「大頭貼」元件，以及多個文字欄位。

1. 瀏覽至 JET-Virtual-DOM-app/src/components 目錄，然後在編輯器中開啟 ParentContainer2.tsx 檔案。

2. 在 activityItemDP 執行處理下方，新增 specificItem 變數以保留 SureCatch Baseball Glove 活動項目的項目詳細資訊資料。

    // Create an object variable holding the item details for the SureCatch Baseball Glove 
    const specificItem: Item = activityData[0].items[0]
   

3. 新增 item 屬性至 ItemDetailContainer 元素，以透過 props 將項目詳細資訊向下傳遞至子項元件。

    <ItemDetailContainer item={specificItem} />
   

   儲存檔案。您的程式碼看起來應該類似於 parent-container2-2-tsx.txt 。

4. 瀏覽至 JET-Virtual-DOM-app/src/components/ItemDetailContainer 目錄，然後在編輯器中開啟 ItemDetailContainer.tsx 檔案。

5. 將這些 import 敘述句從檔案頂端移除。

    import { useState, useCallback } from "preact/hooks";
    import "ojs/ojlabel";
    import "ojs/ojselectsingle";
    import { ojSelectSingle } from "ojs/ojselectsingle";
    import * as storeData from "text!../store_data.json";
    import "ojs/ojlistview";
    import { ojListView } from "ojs/ojlistview";
    import "ojs/ojlistitemlayout";
   

6. 新增 ojavatar 模組的 import 敘述句。

    import "ojs/ojavatar";
   

7. 移除 ChartType 類型別名、chartTypeData 和 chartData 變數，以及 chartTypesDP 和 chartDataProvider 資料提供者執行處理。

8. 新增 Props 和 Item 類型別名。

    type Props = {
      item?: Item;
    };
   
    type Item = {
      id: number;
      name: string;
      short_desc?: string;
      price?: number;
      quantity?: number;
      quantity_shipped?: number;
      quantity_instock?: number;
      activity_id?: number;
      image?: string;
    };
   

9. 在 ItemDetailContainer 函數中，刪除下列程式碼行。

    const [val, setVal] = useState("bar" as ChartProps['type']);
   
    const valChangeHandler = useCallback(
      (event: ojSelectSingle.valueChanged<ChartType['value'], ChartType>) => {
        setVal(event.detail.value as ChartProps['type']);
      },
      [val, setVal]
    );
   

10. 取代 chartItem 範本變數。

    const chartItem = (
      item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
    ) => {
      return (
        <oj-chart-item
          value={item.data.value}
          groupId={[0]}
          seriesId={item.data.series}
        ></oj-chart-item>
      );
    };
    

11. 新增 props 至 ItemDetailContainer 函數定義

    const ItemDetailContainer = (props: Props) => {
    

12. 在 return 敘述句之前，新增 MutableArrayDataProvider 的 pieDataProvider 執行處理。

    const pieDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> = new MutableArrayDataProvider(
      [
        { series: "Quantity in Stock", value: props.item.quantity_instock },
        { series: "Quantity shipped", value: props.item.quantity_shipped },
      ],
      { keyAttributes: "id" }
    );
    

13. 在 return 敘述句中，「項目詳細資訊」的 h3 標題下方，刪除 oj-label 和 oj-select-single 元素。將該代碼取代為水平規則、oj-avatar 元素和 div 元素，以顯示資料繫結項目詳細資料。

    <hr class="hr-margin" />
    <oj-avatar role="img" size="lg" aria-label={"product image for" + props.item.name} 
        src={props.item?.image?.replace("css", "styles")} class="float-right"></oj-avatar>
    <div id="itemName" class="data-name">{props.item.name}</div>
    <div id="itemDesc" class="data-desc">{props.item.short_desc}</div>
    <div id="itemPrice">{"Price: " + props.item.price + " each"}</div>
    <div id="itemId">{"Item Id: " + props.item.id}</div>
    

14. 取代 oj-chart 元素中的 id、type 和 data 屬性。也新增 oj-chart 元素周圍的 div 元素。

    <div>
      <oj-chart id="pieChart" type="pie" data={pieDataProvider} animationOnDisplay="auto"
                animationOnDataChange="auto" hoverBehavior="dim" class="chartStyle">
        <template slot="itemTemplate" render={chartItem}></template>
        </oj-chart>
       </div>
      </div>
     );
    };
    

    儲存檔案。您的程式碼看起來應該類似於 item-detail-container-tsx.txt 。

15. 瀏覽至 JET-Virtual-DOM-app/src/styles 目錄，然後在編輯器中開啟 app.css 檔案。

16. 將下列樣式類別新增至用來格式化項目詳細資訊的檔案。

    .hr-margin {
      margin-top: 12px;
    }
    
    .data-name {
      font-size: 20px;
      font-weight: bolder;
    }
    
    .data-desc {
      font-size: 14px;
      font-weight: 400;
      font-style: italic;
      margin-bottom: 10px;
    }
    
    .float-right {
      float: right;
    }
    

    儲存檔案。您的程式碼看起來應該類似於 app.css 。

工作 5：在應用程式中檢視變更

1. 回到瀏覽器，以檢視您虛擬 DOM 應用程式中的變更。

   在「項目詳細資訊容器」中，資料連結文字欄位和「Oracle JET 大頭貼」和「圖表」元件會顯示 SureCatch 棒球手套項目的資料。不過，「活動項目容器」與「活動容器」中的清單不會回應選取。在下一個教學課程中，您將新增選擇功能。

   

2. 關閉顯示您執行中應用程式的瀏覽器視窗或分頁。

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

下一步

繼續本模組的下一個教學課程。

此教學課程是 Oracle JET 中的主要明細檢視模組的一部分。

• 在 Oracle JET Virtual DOM 應用程式中建立主要檢視
• 在 Oracle JET Virtual DOM 應用程式中建立詳細檢視
• 在 Oracle JET Virtual DOM 應用程式中處理選擇事件

您可以返回虛擬 DOM 學習路徑的主頁面，存取建置虛擬 DOM 應用程式的所有模組。

其他學習資源

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

如需產品文件，請造訪 Oracle Help Center 。

---

標題與著作權資訊

Create the detail view in an Oracle JET virtual DOM app

F72856-02

Copyright ©2024,2025,

Oracle 和 (或) 其關係企業。