Oracle JET Webアプリケーションへのコンポーネントの追加

イントロダクション

このチュートリアルでは、Oracle JavaScript Extension Toolkit (Oracle JET)コンポーネントをOracle JET Webアプリケーションのnavdrawer初期テンプレートに追加する方法について説明します。

Oracle JETは、クライアント側のWebアプリケーションの構築に使用する開発ツールキットです。Webアプリケーションを作成するには、Oracle JETクックブックを使用して、アプリケーションに追加する特定の機能を示すコンポーネント・サンプルを見つけます。Oracle JETクックブックには、コンポーネント固有の動作をサポートするために従うことができる手順も記載されています。

目的

このチュートリアルの完了時に、Oracle JETクックブックを使用して、Oracle JETの単一およびチャートの選択コンポーネントをWebアプリケーションの「ダッシュボード」タブに追加する方法を学習しました。また、これらの2つのコンポーネントを接続して、コンポーネント間の相互作用を追加する方法についても学習します。

前提条件

• JavaScriptランタイム、Node.jsおよび最新のOracle JETコマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するために設定された開発環境
• JET_Web_Applicationフォルダが作成されるように、この学習パスで前のチュートリアルの完了
• Oracle JETクックブックへのアクセス

タスク1:スタイル・クラスの追加

次の例に示すインラインstyle属性を使用するのではなく、コンポーネントに適用するスタイルを別のCSSファイルに配置することをお薦めします。

<oj-select-single id="basicSelect" style="max-width:20em" data="[[chartTypesDP]]"value="">

「Select Single」および「Chart」コンポーネントをページに追加する前に、コンポーネントが参照できるスタイル・クラスをアプリケーションのCSSファイルに作成します。

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

2. app.cssファイルの最後に、単一およびチャートの選択コンポーネントのスタイル・プロパティを決定する次のスタイル・クラスを追加します。

   .selectSingleStyle {
      max-width:20em
   }
   
   .chartStyle {
      max-width:500px;
      width:100%;
      height:350px;
   }
   

   このチュートリアルの後半で、「単一およびチャートの選択」コンポーネントは、コンポーネントのclass属性を使用してこれらのスタイルを参照します。

   <oj-select-single id="basicSelect" . . . class="selectSingleStyle" >. . .
   <oj-chart id="barChart" . . . class="chartStyle">. . .
   

タスク2:単一コンポーネントの選択の追加

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

2. ダッシュボード・コンテンツ領域のHTMLのdiv要素内に、oj-labelカスタムHTML要素とoj-select-single要素を追加します。また、値がparentContainerのid属性をdiv要素に追加します。

      
      <h1>Dashboard Content Area</h1>
      <div id="itemDetailsContainer">
         <oj-label for="basicSelect">Select Chart:</oj-label>
         <oj-select-single id="basicSelect"
                           class="selectSingleStyle"
                           data="[[chartTypesDP]]"
                           value="{{val}}">
         </oj-select-single>
      </div>
      
   

   data属性でchartTypesDPを囲む角カッコは、値を読み取ることができますが、コンポーネントによって更新できないことを意味します。value属性でvalを囲む中カッコは、その値がコンポーネントによって読取りおよび更新できることを意味します。したがって、観測可能値を囲む角括弧は一方向結合を定義しますが、観測可能値を囲む中カッコは二方向結合を定義します。

3. ヘッダーの「製品情報」を表示するには、HTMLのh1要素を編集します。

   <h1>Product Information</h1>
   

4. dashboard.htmlファイルを保存します。dashboard.htmlコード・スニペットは、add-select-single-dDashboard-html.txtのようになります。

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

6. dashboard.tsファイルの上部で、ノックアウト・ライブラリ、Oracle JET可変配列データ・プロバイダ・モジュールおよびラベル・コンポーネントのOracle JETモジュールおよび単一選択コンポーネントをインポートします。

   import * as AccUtils from "../accUtils";
   import * as ko from "knockout";
   import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
   import "ojs/ojselectsingle";
   import "ojs/ojlabel";
   

7. DashboardViewModel()クラスの前に、チャート・タイプのタイプ別名(ChartType)を追加します。DashboardViewModel()クラス内に、チャート・タイプ・データ配列(chartTypes)および可変配列データ・プロバイダ(chartTypesDP)のインスタンスを追加して、単一選択コンポーネントによるチャート・タイプ・データのバインディングを許可します。

   type ChartType = {
      value: string;
      label: string;
   };
   
   class DashboardViewModel {
      chartTypes: Array<Object>;
      chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
   
      constructor() {
      this.chartTypes = [
         { value: "pie", label: "Pie" },
         { value: "bar", label: "Bar" },
         ];
   
      this.chartTypesDP = new MutableArrayDataProvider<
         ChartType["value"],
         ChartType
         >(this.chartTypes, {
         keyAttributes: "value",
         });
     } // End constructor
   

8. ko.observableメソッドを追加して、円グラフ・タイプをSelect SingleコンポーネントのKnockout観測可能なデフォルト値として表示します。

   class DashboardViewModel {
      val: ko.Observable<string>;
      . . .
   
         constructor() {
           this.val = ko.observable("pie");
           . . .
   

9. dashboard.tsファイルを保存します。dashboard.tsコード・スニペットは、add-select-single-dashboard-ts.txtのようになります。

10. 端末ウィンドウを開き、JET_Web_Applicationディレクトリに変更して、アプリケーションを実行します。

    $ ojet serve
    

    ブラウザにnavdrawerスタータ・テンプレートが表示され、Webアプリケーションの「ダッシュボード」タブに表示される「単一の選択」コンポーネントが表示されます。

    

    図Dashboard-with-select.pngの説明

11. 端末ウィンドウおよびWebアプリケーションを表示するブラウザは開いたままにします。

    ojet serveコマンドを使用すると、ブラウザにすぐに反映されるJET_Web_Application/src内のアプリケーション・コードを変更できます。ただし、ファイルを追加または削除した場合は、ojet serveを実行して、ブラウザに反映された変更を確認する必要があります。JET_Web_Application/webフォルダでアプリケーション・コードを変更しないでください。ojet serveコマンドを次回実行したときにこれらの変更を上書きするためです。ojet serveコマンドは、JET_Web_Application/srcフォルダのコンテンツをJET_Web_Application/webフォルダに作成して提供します。

タスク3:チャート・コンポーネントの追加

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

2. Dashboard Content Areaの同じHTML div要素内に2つの要素が表示されるように、oj-select-singleカスタムHTML要素の下にoj-chartカスタムHTML要素を追加します。

   <oj-select-single id="basicSelect"
     . . .
    </oj-select-single>
   <oj-chart id="barChart"
             type="bar"
             data="[[chartDataProvider]]"
             animation-on-display="auto"
             animation-on-data-change="auto"
             hover-behavior="dim"
             class="chartStyle">
   </oj-chart>
   

3. oj-chartカスタムHTML要素内で、slot属性を持つHTML template要素を追加して、チャートの各アイテムをレンダリングします。

   <oj-chart id="barChart"
             . . .
             class="chartStyle">
     <template slot='itemTemplate' data-oj-as='item'>
     </template>
   </oj-chart>
   

4. テンプレート要素内で、1方向バインディングを使用して現在のオブジェクトからチャート・データを取得する属性を持つoj-chart-itemカスタムHTML要素を追加します。

   <oj-chart id="barChart"
             . . .
             class="chartStyle">
     <template slot='itemTemplate' data-oj-as='item'>
       <oj-chart-item value='[[item.data.value]]'
                     group-id='[[ [item.data.group] ]]'
                     series-id='[[item.data.series]]'>
       </oj-chart-item>
     </template>
   </oj-chart>
   

5. dashboard.htmlファイルを保存します。dashboard.htmlコード・スニペットは、add-chart-dDashboard-html.txtのようになります。

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

7. チャート・データを含む新しいOracle JET MutableArrayDataProviderオブジェクトにchartDataProvider観測可能セットを追加します。

   class DashboardViewModel {
   . . .	
      chartDataProvider: MutableArrayDataProvider<string, {}>;
   
   constructor() {
   
      . . .
      this.val = ko.observable("pie");
   
      this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
      });
      . . .
   }
   

8. DashboardViewModel()クラス内で、Knockoutで観測可能な下にchartData配列を追加します。この配列の型をArray<Object>として宣言します。

   chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
   chartData: Array<Object>;
   
   constructor() {
      this.val = ko.observable("pie");
   
      this.chartData = [
         { "id": 0, "series": "Baseball", "group": "Group A", "value": 42 },
         { "id": 1, "series": "Baseball", "group": "Group B", "value": 34 },
         { "id": 2, "series": "Bicycling", "group": "Group A", "value": 55 },
         { "id": 3, "series": "Bicycling", "group": "Group B", "value": 30 },
         { "id": 4, "series": "Skiing", "group": "Group A", "value": 36 },
         { "id": 5, "series": "Skiing", "group": "Group B", "value": 50 },
         { "id": 6, "series": "Soccer", "group": "Group A", "value": 22 },
         { "id": 7, "series": "Soccer", "group": "Group B", "value": 46 }
      ];
   

9. Oracle JETチャート・コンポーネントのモジュールをインポートします。

   import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
   import "ojs/ojknockout";
   import "ojs/ojselectsingle";
   import "ojs/ojlabel";
   import "ojs/ojchart";
   
   

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

11. ブラウザに戻り、Webアプリケーションでの変更を表示します。

    ブラウザにnavdrawerスタータ・テンプレートが表示され、Webアプリケーションの「ダッシュボード」タブに表示される「棒グラフ」コンポーネントが表示されます。

    

    図Dashboard-with-select-chart.pngの説明

    「ダッシュボード」タブには、「チャートの選択」ドロップダウン・リスト・オプションごとに棒グラフ形式のみが表示されます。各チャート形式を表示するには、2つのコンポーネント間に依存関係を追加する必要があります。

12. 端末ウィンドウおよびWebアプリケーションを表示するブラウザは開いたままにします。

タスク4: 2つのコンポーネントの接続

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

2. dashboard.htmlファイルで、oj-chartカスタムHTML要素を編集して、チャート・コンポーネントのtype属性を一方向バインディングによる単一選択コンポーネントのvalue属性に接続します。

   <oj-chart id="barChart"
          type="[[val]]"
          . . .
    </oj-chart>
   

   type属性でvalを囲む四角形のカッコは、その値を読み取ることはできますが、コンポーネントによって更新することはできません。観測可能な周りの角括弧は、一方向結合を定義します。

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

4. ブラウザに戻り、Webアプリケーションでの変更を表示します。

   ブラウザに、Webアプリケーションの「ダッシュボード」タブに表示される「単一の選択」および「円グラフ」コンポーネントとともにnavdrawerスタータ・テンプレートが表示されます。

   

   図connect-select-and-chart.pngの説明

5. 様々なチャート形式を表示するには、「チャートの選択」ドロップダウン・リストでオプションを選択します。

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

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

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

その他の学習リソース

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

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

---

タイトルおよび著作権情報

Add components to an Oracle JET web app

F53094-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.