Oracle JET Webアプリケーションのデータ・バインド

イントロダクション

このチュートリアルでは、Oracle JavaScript Extension Toolkit (Oracle JET) WebアプリケーションでローカルJSONドキュメントを使用する方法について説明します。

Oracle JETは、様々なソースからのデータを管理するための多数のデータ・プロバイダ・クラスを提供する開発ツールキットです。viewModelでは、MutableArrayDataProviderのインスタンスにJSONファイルから読み取ったデータを移入してから、MutableArrayDataProviderインスタンスをビューのOracle JETカスタムHTML要素にバインドします。

目的

このチュートリアルの完了時に、JSONドキュメントからデータ・プロバイダにデータを読み取り、Oracle JETリスト・ビュー・コンポーネントを追加し、そのコンポーネントをJSONデータ・オブジェクトにバインドする方法を学習します。

前提条件

タスク1: JSONドキュメントのダウンロードとデータの確認

  1. store_data.jsonファイルをJET_Web_Application/src/ts/ディレクトリにダウンロードします。
  2. Webブラウザでstore_data.jsonファイルを開き、データ構造を表示します。store_data.jsonファイルには、アクティビティ・オブジェクトとそのプロパティのリストが含まれます。各アクティビティには、独自のプロパティを持つアイテムの配列が含まれます。

タスク2: ViewModelでのデータ・プロバイダの移入

JSONファイルからOracle JETのojmutablearraydataproviderオブジェクトにデータをプッシュします。

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

  2. store_data.jsonファイルからデータをインポートして、ViewModelで使用できるようにします。

    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";

  3. 存在しない場合は、JSONデータを保持するために使用するojmutablearraydataproviderモジュールをインポートします。

    import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

  4. DashboardViewModel()クラスの前に、number型のidフィールドを含む型別名Activityを定義します。

    ...
type Activity = {
  id: number;
}

class DashboardViewModel {

  5. DashboardViewModel()クラスで、次のステップで作成するactivityDataProviderのタイプを追加します。

    class DashboardViewModel {

   val: ko.Observable<string>;
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;    
   . . .

  6. DashboardViewModel()クラスのconstructrorメソッドで、MutableArrayDataProviderのインスタンス(activityDataProvider)を作成し、JSON.parseメソッドを使用してJSONデータを読み取ります。

    constructor() {
   this.val = ko.observable("pie");
   ...

   this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id", 
      });
 . . .

  7. Oracle JETリスト・ビュー・コンポーネント・モジュールをインポートします。

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

    ojlistviewモジュールは、このチュートリアルの次の項のビューをサポートします。

  8. dashboard.tsファイルを保存します。dashboard.tsファイルは、final-data-bind-dashboard-ts.txtのようになります。

タスク3:ビューのリスト・ビュー・コンポーネントのデータ・バインド

oj-list-view要素は、HTMLリストの拡張バージョンである対話型機能を備えたOracle JETカスタムHTML要素です。viewModelに移入されたactivityDataProvider変数をリスト・ビューのdata属性にバインドして、データをリストに指定します。

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

  2. dashboard.htmlファイルで、id属性値がactivitiesContainerのdiv要素を、Oracle JETの単一およびチャートの選択コンポーネントを含むitemDetailsContainer div要素の上に追加します。

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      ...
   </div>

  3. activitiesContainer div要素内で、一方向バインディングを使用してリスト・データを取得するdata属性を持つoj-list-view要素を追加します。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
 <div id="activitiesContainer">
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
   </oj-list-view>
 </div>

    また、gridlines属性のvisible値を指定して、リスト内のアイテム間にグリッド線が表示され、アクセシビリティのベスト・プラクティスとしてaria-labelledby属性が表示されるようにします。

  4. 作成したoj-list-view要素内に、slot属性を持つHTML template要素を追加して、リスト内の各アイテムをレンダリングします。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
         </template>
   </oj-list-view>
</div>

  5. テンプレート要素内で、一方向バインディングを使用して現在のデータ・オブジェクトからリスト・データを取得するvalue属性を持つoj-bind-textカスタムHTML要素を含む別のdiv要素を追加します。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
            <div>
               <strong>
                  <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
               </strong>
            </div>
         </template>
   </oj-list-view>
</div>

  6. HTML h3要素を追加して、アクティビティ・リストのヘッダーを指定します。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
. . .

  7. itemDetailsContainer divで、h3要素とoj-label要素を追加して、チャートのヘッダーを指定します。

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  8. dashboard.htmlファイルを保存します。dashboard.htmlファイルは、final-data-bind-dashboard-html.txtのようになります。

タスク4: Webアプリケーションの実行

  1. ターミナル・ウィンドウで、JET_Web_Applicationディレクトリに移動し、アプリケーションを実行します。

    $ ojet serve

    ブラウザに、Webアプリケーションの「ダッシュボード」タブに表示されるアクティビティのリストが表示されます。

    「製品情報」領域。

    図output.pngの説明

  2. 実行中のWebアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

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

  4. 次のチュートリアルのために、端末ウィンドウを開いたままにします。

その他の学習リソース

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

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