Oracle JET Webアプリケーションのディテール・ビューの作成

イントロダクション

Oracle JavaScript Extension Toolkit (Oracle JET)コンポーネントは、データ・ソースによって定義されたマスター・データ・オブジェクトと詳細データ・オブジェクトの階層関係を保持します。Oracle JET WebアプリケーションのviewModelでは、Oracle JET APIを使用してデータ・プロバイダ・オブジェクトを作成できます。このオブジェクトは、JavaScript Object Notation (JSON)ドキュメント・データ・ストアの子データ・オブジェクトから移入するデータ配列を表します。Oracle JETデータ・プロバイダは、現在の親データ・オブジェクトのidキー属性に基づいて子データ・オブジェクトをフェッチします。Oracle JET Webアプリケーションのビューでは、Oracle JETリスト・ビューのコンポーネントのdata属性は、Knockoutで観測可能なデータ・プロバイダにバインドされます。Knockoutは、アプリケーションのviewModelソース・コードでも宣言されます。このコードにより、詳細リスト・データ・プロバイダのインスタンスとして観測可能になります。

目的

このチュートリアルでは、ローカルJSONドキュメントからマスター詳細階層データを読み取り、Oracle JET Webアプリケーションに詳細ビューを表示します。子データ・オブジェクトのデータ・バインド項目を使用して、Oracle JETリスト・ビュー・コンポーネント、複数のOracle JET入力テキスト・コンポーネントおよびOracle JETチャート・コンポーネントを移入する方法を学習します。

前提条件

タスク1:ビューのアクティビティ・アイテム詳細リストのデータ・バインド

静的データにバインドされているアクティビティ・アイテム・リストを、アクティビティ・アイテム子オブジェクトの複数のデータ・アイテムにバインドされたOracle JETリスト・ビュー・コンポーネントに置換します。

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

  2. id="container"が含まれるdiv要素を検索し、その要素と、それに含まれる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. id="activityItemsContainer"のdiv要素内に、アクティビティ・アイテム詳細リストの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>

    プレースホルダとしてslot属性を持つインラインHTML template要素で使用されるOracle JETリスト・ビュー・コンポーネントは、実行時にアクティビティ・アイテム詳細リストのコンテンツをインスタンス化します。

  5. 作成したtemplate要素内に、各アクティビティ・アイテム子オブジェクトのイメージおよび名前データ・アイテムをバインドするコードを持つ3つの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で、JSONドキュメントで定義された子オブジェクトの配列を表すOracle JET MutableArrayDataProviderクラスのインスタンスを作成します。次に、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モジュールのインポート文をインポート・リストに追加します。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:ビューのデータ・バインド項目の詳細と円グラフ

「アイテム詳細」円グラフと棒グラフを次の要素に置き換えます。

  1. dashboard.htmlファイルのdiv要素(id="itemDetailsContainer")内で、「アイテムの詳細」ヘッダーを見つけます。見出しの下に、水平ルールの後に、アクティビティ・アイテム子オブジェクトのイメージ・データ・アイテムにバインドされた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関数は、データ・アイテムの現在の値を読み取るノックアウト観測可能な表記法です。データ項目は、「アクティビティ・アイテム」子オブジェクトのimageプロパティによって識別されます。

  2. dashboard.htmlで、作成したoj-avatar要素の終了タグの下に、oj-label for="basicSelect"カスタムHTML要素とoj-select-single要素を削除します。

  3. 作成したoj-avatar要素の終了タグの下に、アクティビティ・アイテム子オブジェクトの名前、簡単な説明、価格およびIDデータ・アイテムにバインドされたoj-bind-textカスタムHTML要素を含む4つのdiv要素を追加します。

    . . . 
</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-dDashboard-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文の後、itemDataを最初のアクティビティ親オブジェクトへの参照、およびJSONドキュメント内のそのアクティビティに関連付けられた最初のアクティビティ・アイテム子オブジェクトへの参照とともに設定します。

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

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

その他の学習リソース

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

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