Oracle JET Webアプリケーションのコンテンツの表示または非表示

イントロダクション

Oracle JET oj-moduleコンポーネントおよびJavaScriptレスポンシブ・ユーティリティ・クラスは、画面サイズに基づいて異なるビューをロードできます。oj-moduleコンポーネントを使用して、ビューと対応するviewModelを要素にバインドすることで、ページのリージョン内のコンテンツを置き換えることができます。

目的

このチュートリアルの完了時に、Oracle JET oj-moduleコンポーネントおよびレスポンシブTypeScriptコードを使用して、ビューと対応するviewModelをバインドするOracle JET Webアプリケーションをカスタマイズします。

前提条件

タスク1:ビューへのモジュール・コンポーネントの追加

構成オブジェクトを使用して、Oracle JET oj-moduleコンポーネントの下にビューおよび対応するviewModelを定義します。

  1. JET_Web_Application/src/ts/viewsディレクトリに移動し、エディタでdashboard.htmlファイルを開きます。

  2. id="activityItemsContainer"を含むdiv要素を検索します。空のdiv内で、ナビゲーション・リージョンを定義するconfig属性を使用して、oj-moduleカスタムHTML要素を囲む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-dDashboard-html.txtのようになります。

タスク2: ViewModelのインポート済モジュール・リストの更新

dashboard.tsファイルの上部で、Oracle JETコンポーネントをサポートするモジュールをインポートします。

  1. JET_Web_Application/src/ts/viewModelsディレクトリに移動し、エディタでdashboard.tsファイルを開きます。

  2. ojlistviewモジュールの後に、3つの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クックブックを開き、クックブックのホーム・ページに移動します。メニュー・バーの「フレームワーク」をクリックし、「レスポンシブ動作」、「レスポンシブ・ロード」の順にクリックします。

  2. ResponsiveUtilsネームスペースのAPIドキュメントにアクセスできます。次に、「メソッド」セクションまでスクロールし、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変数でフレームワーク・メディアの問合せ文字列を取得できます。lg_xl_view変数のHTMLコードは、this.large()のメディア問合せ文字列値がLG_UP以上の場合にロードされます。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変数のコンテンツを表示するには、画面を小さいサイズまたは中サイズに調整します。「Activity Details(アクティビティ詳細)」ヘッダーの下にある項目の短縮リストを確認します。この見出しでは、薄いシアンが強調表示されています。

    小画面サイズと中画面サイズのコンテンツ

    図small-screen.pngの説明

    lg_xl_view変数のコンテンツを表示するには、画面サイズを大きくまたは大きく変更します。

    大きい画面サイズと大きい画面サイズのコンテンツ

    図large-screen.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アプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

  6. 端末ウィンドウでCtrl+Cを押し、プロンプトが表示されたらyと入力してOracle JETツール・バッチ・ジョブを終了します。

その他の学習リソース

docs.oracle.com/learnの他のラボを調べるか、Oracle Learning YouTubeチャネルでさらに無料の学習コンテンツにアクセスします。さらに、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerにします。

製品ドキュメントは、Oracleヘルプ・センターを参照してください。