在 Oracle JET Web 應用程式中建立詳細資料檢視

簡介

Oracle JavaScript Extension Toolkit (Oracle JET) 元件會保存主要與明細資料物件 (如資料來源所定義) 的階層關係。在 Oracle JET Web 應用程式的 viewModel 中，您可以使用 Oracle JET API 建立資料提供者物件。物件代表您從 JavaScript 物件表示法 (JSON) 文件資料存放區的子項資料物件填入的資料陣列。Oracle JET 資料提供者會根據目前父項資料物件的 id 索引鍵屬性擷取子項資料物件。在 Oracle JET Web 應用程式的檢視中，「Oracle JET 清單檢視」元件的 data 屬性會透過可觀察的 Knockout 連結到資料提供者。Knockout 可觀察也會在應用程式的 viewModel 原始程式碼中宣告。此代碼會植入可觀察作為詳細資料清單資料提供者的實例。

目標

本教學課程將從本機 JSON 文件讀取主要 - 明細階層資料，然後在 Oracle JET Web 應用程式中顯示明細檢視。您會學習如何資料連結子資料物件的項目，以植入「Oracle JET 清單檢視」元件、多個「Oracle JET 輸入文字」元件，以及一個「Oracle JET 圖表」元件。

必要條件

• 設定使用 JavaScript 程式實際執行、Node.js 及已安裝最新 Oracle JET 命令行介面建立 Oracle JET App 的開發環境
• 在此學習路徑中完成上一個教學課程，因此您已建立 JET_Web_Application 資料夾

任務 1：資料連結檢視中的活動項目詳細資料清單

以連結至多個「活動項目」下階物件資料項目的 Oracle JET 清單檢視元件，取代連結至靜態資料的「活動項目」清單。

1. 瀏覽至 JET_Web_Application/src/ts/views 目錄，然後在編輯器中開啟 dashboard.html 檔案。

2. 尋找 div 元素，其中 id="container" ，然後將其刪除及其包含的 oj-module 自訂元素。

     <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
       <div id="container">
         <oj-module config="[[moduleConfig]]"></oj-module>
       </div>
     </div>
   
   <!-- Delete the div element with id="container" so that your code is similar to the following: -->
   
     <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   
     </div>
     . . . 
   

3. 在 div 元素的 id="activityItemsContainer" 中，為「活動項目」詳細資料清單新增 h3 標題元素。

   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
     <h3 id="itemsListHeader">Activity Items</h3>
   </div>
   
   

4. 在您建立的 h3 元素之結束標記之後，新增 oj-list-view 自訂 HTML 元素以顯示「活動項目」詳細資訊清單，以及含有 slot 屬性的 template 元素，以套用至詳細資訊清單的內容。

    <h3 id="itemsListHeader">Activity Items</h3>
      <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
        <template slot="itemTemplate">
   
        </template>
      </oj-list-view>
   
   

   Oracle JET 清單檢視元件用於內含 slot 屬性的內嵌 HTML template 元素作為預留位置，會在執行時期建立「活動項目」明細清單的內容。

5. 在您建立的 template 元素內，新增三個含代碼的 div 元素，以連結每個「活動項目」子物件的影像與名稱資料項目。

   
   <template slot="itemTemplate">
     <div class="oj-flex no-wrap">
       <span class="demo-thumbnail oj-flex-item"
         :style.background-image="[[' url('+$current.data.image+')']]"></span>
       <div class="demo-content oj-flex-item">
         <div>
           <strong>
             <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
           </strong>
         </div>
       </div>
     </div>
   </template>
   
   

   $current.data.image 和 $current.data.name 程式碼會連結資料，而 HTML template 元素會顯示「活動項目」詳細資訊清單的影像和活動項目名稱。$current 前置碼代表 Oracle JET 清單檢視元件資料提供者傳入樣板的目前子項物件。

6. 儲存 dashboard.html 檔案，並在編輯器中開啟。

   您的檔案看起來應類似 detail-list-task1-dashboard-html.txt。

工作 2：在 ViewModel 中建立活動項目下階物件

取代您在上一個學習路徑中建立的 oj-module 內嵌範本，以 JSON 文件呼叫顯示「活動項目」清單，以便從本機 JSON 文件讀取「活動項目」下階物件。在 itemsDataProvider 中建立 Oracle JET MutableArrayDataProvider 類別的執行處理，該類別代表 JSON 文件所定義的子項物件陣列。然後將 itemsArray 執行處理連結至 itemsDataProvider 可觀察。檢視中的 Oracle JET 清單檢視元件會在其 data 屬性上參照此可觀察，以顯示「活動項目」詳細資料清單。

1. 瀏覽至 JET_Web_Application/src/ts/viewModels 目錄，然後在編輯器中開啟 dashboard.ts 檔案。

2. 在 dashboard.ts 檔案的頂端，在類型宣告為 Activity 之後，宣告下列 Item 類型。

   type Activity = {
      id: number;
   };
   
   type Item = {
      id: number;
      name: string;
      short_desc: string;
      price: number;
      quantity: number;
      quantity_shipped: number;
      quantity_instock: number;
      activity_id: number;
      image: string;
   };
   . . . 
   

3. 將 const lg_xl_view 宣告中的程式碼刪除，但不包括 this.chartTypes 宣告。程式碼區塊以讀取 End of oj-module code 的註解行結尾。JSON 文件呼叫將會取代靜態資料和內嵌樣板程式碼。

   您的檔案看起來應類似 detail-list-task2a-dashboard-ts.txt。

4. 從 dashboard.ts 頂端的模組匯入中，刪除未使用的 HtmlUtils、ResponsiveUtils、ResponsiveKnockoutUtils 和 ojmodule-element 匯入敘述句。

5. 將 ojs/ojavatar 模組的 import 敘述句新增至匯入清單。ojavatar 模組支援此教學課程下一區段中的檢視。

   import * as AccUtils from "../accUtils";
   import * as ko from "knockout";
   import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
   import "ojs/ojselectsingle";
   import "ojs/ojlabel";
   import "ojs/ojchart";
   import * as storeData from "text!../store_data.json";
   import "ojs/ojlistview";
   import "ojs/ojavatar";
   

6. this.activityDataProvider 定義之後，在 constructor 函數中，新增 activitiesArray 和 itemsArray 的定義。然後將 this.itemsDataProvider 宣告為 MutableArrayDataProvider 的執行處理。這會剖析儲存資料，並使第一個「活動」上階物件的下階物件可在「Oracle JET 清單檢視」元件中取得。在下一個教學課程中，您可以使用事件處理程式動態設定「活動」物件。

   . . . 
   let activitiesArray = JSON.parse(storeData);
   let itemsArray = activitiesArray[0].items;
   
   this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
     itemsArray,
     { keyAttributes: "id" }
     );
   
   } // closing bracket of constructor function
   . . . 
   

   然後移除 large 和 moduleConfig 的未使用類型註解，然後新增 itemsArray 和 itemsDataProvider 的類型註解。

   class DashboardViewModel {
       chartTypes: Array<Object>;
       chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
       chartData: Array<Object>;
       chartDataProvider: MutableArrayDataProvider<string, {}>;
       activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
       val: ko.Observable<string>;
       itemsArray: Array<Object>;
       itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
   
   

   您的檔案看起來應類似 detail-list-task2b-dashboard-ts.txt。

任務 3：執行 Web 應用程式

ojet serve 命令可讓您變更立即反映在 Web 瀏覽器中的應用程式程式碼。

1. 在終端機視窗中，變更為 JET_Web_Application 目錄，然後執行應用程式。

   $ ojet serve
   

   在儀表板頁籤中，Web 瀏覽器會顯示含有活動項目標頭的資料繫結詳細資料清單。

   

   formatted_master_detail_list.png 圖解描述

2. 離開終端機視窗，以及顯示您開啟 Web 應用程式的瀏覽器。

作業 4：檢視中的資料連結項目明細與圓餅圖

以下列元素取代「項目詳細資料」圓餅圖與長條圖：

• 連結至「活動項目」下階物件之項目影像的 Oracle JET Avatar 元件
• 多個 Oracle JET 文字欄位元件連結至該「活動項目」下階物件的資料項目
• 連結至相同「活動項目」下階物件之圖表資料項目的圓餅圖元件

1. 在 dashboard.html 檔案中，在 id="itemDetailsContainer" 的 div 元素中，尋找「項目詳細資料」標題。在標題下方，新增水平規則，然後新增連結至「活動項目」下階物件之影像資料項目的 oj-avatar 自訂 HTML 元素。

   <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
     <h3>Item Details</h3>
     <hr class="hr-margin" />
     <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
       :src="[[itemData().image]]" class="float-right">
     </oj-avatar>
   
   

   itemData 可觀察使用您在應用程式 viewModel 中建立的資料提供者執行處理植入 Oracle JET Avatar 元件。itemData().image 函數是讀取資料項目目前值的 Knockout 可觀察標記。資料項目是由「活動項目」子項物件的 image 特性識別。

2. 在 dashboard.html 中，在您建立之 oj-avatar 元素的結束標記下，刪除 oj-label for="basicSelect" 自訂 HTML 元素和 oj-select-single 元素。

3. 在您建立的 oj-avatar 元素之結束標記下方，新增四個含有 oj-bind-text 自訂 HTML 元素的 div 元素，其繫結至「活動項目」下階物件的名稱、簡短描述、價格及 ID 資料項目。

   . . . 
   </oj-avatar>
     <div id="itemName" class="data-name">
       <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
     </div>
     <div id="itemDesc" class="data-desc">
       <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
     </div>
     <div id="itemPrice">
       <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
     </div>
     <div id="itemId">
       <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
     </div>
   . . . 
   

   itemData 可觀察項目會使用您在應用程式 viewModel 中建立的資料提供者填入「Oracle JET 文字連結」元件。itemData().<prop_name> 函數會讀取指定資料項目的目前值。資料項目是由「活動項目」子物件的 name、short_desc、price 及 id 特性所識別。

4. 瀏覽至 JET_Web_Application/src/css 目錄，然後開啟 app.css 檔案以新增下列樣式定義。

   
   .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-final.txt。

5. 在您建立的 div 元素下方，刪除 oj-chart id="barChart" 自訂 HTML 元素。

6. 在 div id="itemId" 元素的結束 </div> 標記之後，新增新的 div 元素和一個 oj-chart 自訂 HTML 元素，其連結至「活動項目」子物件的圓餅圖序列。

   . . . 
   <div id="itemId">
     <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
   </div>
   <div>
     <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
       animation-on-data-change="auto"
       hover-behavior="dim" legend.position="bottom" class="chartStyle">
     </oj-chart>
   </div>
   . . . 
   

   pieSeriesValue 可觀察使用您在應用程式 viewModel 中建立的資料陣列來植入 Oracle JET 圓餅圖元件。

7. 儲存 dashboard.html 檔案。

   您的檔案看起來應類似 final-detail-list-dashboard-html.txt。

作業 5：設定 ViewModel 中項目明細與圓餅圖元件的可觀察項目

從「活動項目」下階物件取得資料項目，並將可觀察項目植入資料繫結檢視元件。在此檢視中，各種「項目詳細資訊」元件的 value 屬性會參照 itemData 可觀察。而「圓餅圖」元件的 series 屬性會參照 pieSeriesValue 可觀察連結至相同資料項目的圖表資料。

1. 在 dashboard.ts 檔案中，刪除開頭為 this.val 且結尾為 this.chartTypesDP 的程式碼區塊。同時刪除已移除變數未使用的類型註解。您的類型註解清單和 constructor() 函數的開始應與下列範例類似。

   class DashboardViewModel {
     activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
     itemsArray: Array<Object>;
     itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
   
     constructor() {
       this.activityDataProvider = new MutableArrayDataProvider<
         Activity["id"],
         Activity
       >(JSON.parse(storeData), {
         keyAttributes: "id",
       });
   . . . 
   

2. 將 itemData 和 pieSeriesValue 類型註解新增至 DashboardViewModel 類別。

   class DashboardViewModel {
     activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
     itemsArray: Array<Object>;
     itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
     itemData: ko.Observable<any>;
     pieSeriesValue: ko.ObservableArray;
   
     constructor() {
   . . . 
   

3. 在 this.itemsDataProvider 敘述句之後，使用第一個「活動」父項物件的參照，以及在 JSON 文件中與該活動關聯的第一個「活動項目」子項物件來設定 itemData 可觀察到。

     this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
       itemsArray,
       { keyAttributes: "id" }
     );
   
     this.itemData = ko.observable(''); 
     this.itemData(activitiesArray[0].items[0]);
   
   }   // End of constructor function
   

4. 最後，在 itemData 可觀察的宣告下設定 this.pieSeriesValue 可觀察。

   this.itemData = ko.observable(''); 
   this.itemData(activitiesArray[0].items[0]);
   
   this.pieSeriesValue = ko.observableArray([]);
   
   let pieSeries = [
     { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
     { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
   ];
   this.pieSeriesValue(pieSeries);
   

作業 6：檢視主要與明細清單

1. 返回瀏覽器以檢視 Web 應用程式中的變更。

   在您 Web 應用程式的「儀表板」頁籤中，資料繫結的 Oracle JET 文字欄位、大頭貼和圓餅圖會顯示在「項目明細」容器中，但清單不會回應選取項目。在下一個教學課程中，您所建立的事件處理常式會新增選取功能。

   

   formatted_master_detail_items_list.png 圖解描述

2. 關閉顯示您執行中 Web App 的瀏覽器視窗或頁籤。

3. 在終端機視窗中，按 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 detail view in an Oracle JET web app

F53173-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.