顯示或隱藏 Oracle JET Web App 中的內容

簡介

Oracle JET oj-module 元件和 JavaScript 回應式公用程式類別可根據螢幕大小載入不同的檢視。您可以使用 oj-module 元件來取代頁面區域中的內容，方法是將檢視和對應的 viewModel 連結到元素。

目標

完成此教學課程時，您將自訂 Oracle JET Web 應用程式，以使用 Oracle JET oj-module 元件和回應式 TypeScript 程式碼來連結檢視和對應的 viewModel。

必要條件

作業 1：新增模組元件至檢視

使用組態物件定義 Oracle JET oj-module 元件下的檢視和對應的 viewModel。

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

  2. 使用 id="activityItemsContainer" 尋找 div 元素。在空的 div 中，新增將 oj-module 自訂 HTML 元素帶入定義導覽區域的 config 屬性的 div 容器。

    
<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <div id="container">
    <oj-module config="[[moduleConfig]]"></oj-module>
  </div>
</div>

  3. 儲存 dashboard.html 檔案。

    您的程式碼可能與 final-dashboard-html.txt 類似。

作業 2：更新 ViewModel 中匯入的模組清單

在 dashboard.ts 檔案的頂端，匯入支援 Oracle JET 元件的模組。

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

  2. 在 ojlistview 模組之後，新增三個 JET 回應式 HTML 公用程式模組和 ojmodule-element 模組。

    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 * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

  3. 儲存 dashboard.ts 檔案。

    您的匯入區塊看起來應類似 import-block-ts.txt。

作業 3：在 ViewModel 中新增回應載入的程式碼

您想要在回應式版面配置中載入不同畫面大小的不同內容。您可以使用 oj-module，透過可觀察、媒體查詢或自訂媒體查詢來載入不同的檢視。

  1. 開啟 Oracle JET Cookbook，然後瀏覽至 Cookbook 首頁。按一下功能表列中的 Framework，然後按一下Responsive Behaviors，再按一下Responsive Load。

  2. 您可以存取 ResponsiveUtils 命名空間的 API 文件。接著捲動至「方法 (Method)」區段，並讀取 getFrameworkQuery 方法。

  3. 在 dashboard.ts 檔案的 chartDataProvider 宣告下方，新增內嵌樣板程式碼區塊以傳送至 oj-module 自訂 HTML 元素。

    this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
});

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

    大型畫面與額外大型畫面的內嵌資料節點會透過 lg_xl_view 變數傳送。

  4. 在 lg_xl_view 變數的定義下方，定義透過 sm_md_view 變數傳送中小型和中型畫面之內嵌資料節點的程式碼。

    // Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

  5. 在 sm_md_view 變數的定義下方，使用可觀察的 this.large 媒體查詢來定義載入不同畫面大小檢視的程式碼。

    // Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */

    透過使用 HTML 公用程式函數，您可以在 this.large 變數中取得架構媒體查詢字串。如果 this.large() 中的媒體查詢字串值等於 LG_UP (大或以上)，則會載入 lg_xl_view 變數中的 HTML 程式碼。如果 this.large() 中的媒體查詢字串值不等於 LG_UP，則會載入 sm_md_view 變數中的 HTML 程式碼。

  6. 將 large 和 moduleConfig 的類型宣告新增至類別。

    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>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

  7. 儲存 dashboard.ts 檔案。

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

任務 4：執行 Web 應用程式

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

    $ ojet serve

    Oracle JET 工具會在本機 Web 瀏覽器中執行 Web 應用程式，供您檢視儀表板內容。

    最後應用程式的外觀與操作方式

    final-app.png 圖解的描述

    若要顯示 sm_md_view 變數中的內容，請將螢幕調整為中小或中型大小。請注意「活動明細」標題下項目的縮短清單，該標題會反白標示星號。

    中小螢幕大小的內容 Name

    小螢幕 .png 圖的描述

    若要顯示 lg_xl_view 變數中的內容，請將螢幕大小變更為大或額外大。

    大型與額外大型螢幕大小的內容

    大螢幕 .png 圖像描述

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

  3. 關閉瀏覽器視窗或頁籤。

  4. 您的已完成應用程式具有回應式設計功能，看起來應類似 jet_web_application_responsive_design_final.zip。

作業 5：(選擇性) 從回復的應用程式執行 Web 應用程式

如果您要從提供的程式碼執行完成的 Oracle JET Web 應用程式，可以從下載的存檔檔案還原應用程式。若要使用擷取和壓縮的 Oracle JET 應用程式，您必須在擷取的應用程式內回復專案相依性，包括 Oracle JET 工具和必要的程式庫和模組。

  1. 下載 jet_web_application_responsive_design_final.zip 檔案，並將已完成的應用程式內容解壓縮至 jet_web_application_responsive_design_final 資料夾。

  2. 在終端機視窗中，瀏覽至 jet_web_application_responsive_design_final 資料夾並回復 Oracle JET Web 應用程式。

    $ ojet restore

  3. 等待確認。

    $ Restore complete

    應用程式已可執行。

  4. 在瀏覽器中執行 Web 應用程式並測試。

    $ ojet serve

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

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

其他學習資源

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

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