Oracle JET Webアプリケーションで選択イベントを処理します

イントロダクション

Oracle JET WebアプリケーションのviewModelでOracle JavaScript Extension Toolkit (Oracle JET) APIを使用して、Oracle JETリスト・ビュー・コンポーネントのselected属性変更リスナーに応答するイベント・ハンドラを作成できます。ユーザーがリスト内の項目を選択または選択解除すると、変更リスナーによってイベント・ハンドラがトリガーされます。イベント・ハンドラを使用してOracle JETデータ・プロバイダを移入できます。また、ビュー・コンポーネントが使用できる監視機能にデータ・プロバイダをバインドできます。イベント・ハンドラは、Oracle JET If BindingコンポーネントがビューのネストされたHTML要素を条件付きでレンダリングするために使用するブール変数も設定できます。マスター・リストのOracle JETリスト・ビュー・コンポーネントのselected属性が空でない場合、変数はtrueに設定され、ビューにはデータバインド詳細リストがレンダリングされます。選択解除イベントのためにselected属性が空の場合、変数はfalseに設定され、ビューにはデータバインド詳細リストなしでコンテナがビューに表示されます。

目的

このチュートリアルでは、マスター詳細データを表示できるように、Oracle JET Webアプリケーションのユーザー・インタフェースを更新します。Oracle JETプロパティ変更リスナーを使用してJavaScriptイベント・ハンドラを作成する方法を学習します。また、Oracle JET If Bindingコンポーネントを使用して、リストの選択を処理する詳細リストを条件付きで表示する方法についても学習します。

前提条件

• JavaScriptランタイム、Node.jsおよび最新のOracle JETリリース・コマンドライン・インタフェースを使用して、Oracle JETアプリケーションを作成するために設定された開発環境
• JET_Web_ApplicationフォルダにOracle JET Webアプリケーションを作成できるように、この学習パスでの前のチュートリアルの完了
• 完了したアプリケーション jet_web_application_masterdetail_final.zipはオプションでダウンロードされます

タスク1:ビューでの選択動作の設定

ビューを更新して、「アクティビティ」リストおよび「アクティビティ・アイテム」リストでの行の選択を処理するようにリスト・ビュー・コンポーネントをカスタマイズします。Oracle JETリスト・ビュー・コンポーネントは、ユーザーの行選択のデータ項目をコンポーネントに移入するfirst-selected-item属性を定義し、双方向バインディングを使用して監視可能に読み取ることができます。コンポーネントのon-selection-changed属性を使用して、viewModelで定義したイベント・リスナーをバインドして、リストの選択/選択イベントを捕捉および処理します。

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

2. 「アクティビティ」ヘッダーの下で、id="activitiesList"のoj-list-viewカスタムHTML要素を見つけて、gridlines.item属性の後に選択動作属性を追加します。

      
   <h3 id="activitiesHeader">Activities</h3>
      <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
        data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
        on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
        scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
        <template slot="itemTemplate">
   . . .
      
   

3. 「アクティビティ・アイテム」ヘッダーの下で、id="itemsList"のoj-list-viewカスタムHTML要素を見つけて、gridlines.item属性の後に選択動作属性を追加します。

      
   <h3 id="itemsListHeader">Activity Items</h3>
        <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
          gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
          on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
          scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
          <template slot="itemTemplate">
   . . .
      
   

4. dashboard.htmlファイルを保存します。

   ファイルは event-task1-dashboard-html.txtに似ています。

タスク2: ViewModelでのイベント・ハンドラの作成

viewModelを更新して、「アクティビティ」リストおよび「アクティビティ・アイテム」リストの選択に応答するリスト・ビュー・コンポーネントのイベント・ハンドラを追加します。Oracle JETリスト・ビュー・コンポーネントは、Oracle JETリスト・ビューAPIでプロパティ変更リスナーを定義するselected属性を定義します。ユーザーがリスト選択を行い、selected属性の値が変更されると、イベント・ハンドラによってselectedActivityおよびselectedItemが使用可能になります。

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

2. pieSeriesValue観測可能定義の下、constructor()の前に、「アクティビティ・リスト」の選択および「アクティビティ・アイテム」リストの選択の可観測性を追加します。

   class DashboardViewModel {
      . . . 
      pieSeriesValue: ko.ObservableArray;
      // Observables for Activities
      selectedActivity = new ObservableKeySet();
      activitySelected = ko.observable(false);  // Controls display of Activity Items
      firstSelectedActivity = ko.observable();
      selectedActivityIds = ko.observable();
   
      // Observables for Activity Items
      itemSelected = ko.observable(false);
      selectedItem = ko.observable();
      firstSelectedItem = ko.observable();
   
      constructor() {
      . . .
   
   

3. dashboard.tsファイルの上部で、ojs/ojknockout-keysetモジュールからObservableKeySetクラスとojs/ojlistviewモジュールからojListViewクラスをインポートします。

   import * as ko from "knockout";
   . . . 
   import "ojs/ojavatar";
   import { ObservableKeySet } from "ojs/ojknockout-keyset";
   import { ojListView } from "ojs/ojlistview";
   

4. DashboardViewModelクラスの前に、ActivityItemsタイプの別名を追加します。

   . . . 
   type ActivityItems = {
      id: number;
      name: string;
      items: Array<Item>;
      short_desc: string;
      image: string;
   };
   
   class DashboardViewModel {
   . . .
   

5. DashboardViewModelクラスのconstructor()メソッド宣言の後、選択および選択解除イベントを処理するためのテスト条件を持つselectedActivityChangedイベント・ハンドラを追加します。

   } // End of constructor function
   
   selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
      /**
      *  If no items are selected then the firstSelectedItem property  returns an object 
      *  with both key and data properties set to null.
      */
      let itemContext = event.detail.value.data;
   
      if (itemContext != null) {    
         // If selection, populate and display list
   
      } else {
            // If deselection, hide list          
      }
   };
   

   次のステップでこのイベント・ハンドラを実装します。

6. selectedActivityChangedイベント・ハンドラのif文内で、itemsArray変数を使用して監視可能なitemsDataProviderを移入し、選択イベントに対してactivitySelectedおよびitemSelected選択状態観測可能値をtrueに設定します。

   
   selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
      /**
       *  If no items are selected, then this property firstSelectedItem 
       *  will return an object with both key and data properties set to null.
      */
      let itemContext = event.detail.value.data;
   
      if (itemContext != null) {    
         // If selection, populate and display list
         // Hide currently-selected activity item
         this.activitySelected(false);
   
         let itemsArray = itemContext.items;
         this.itemsDataProvider.data = itemsArray;
         // Set List View properties
         this.activitySelected(true);
         this.itemSelected(false);
         this.selectedItem();
         this.itemData();
   
      } else {
            // If deselection, hide list
      }
   };
   
   

7. selectedActivityChangedイベント・ハンドラのelse文内で、選択解除イベントのactivitySelectedおよびitemSelected選択状態観測可能値をfalseに設定します。

   
   selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
      /**
       *  If no items are selected then this property firstSelectedItem will return an 
       *  object with both key and data properties set to null.
      */
   
      let itemContext = event.detail.value.data;
   
      if (itemContext != null) {    
         . . .
      } 
   
      else {
         // If deselection, hide list
         this.activitySelected(false);
         this.itemSelected(false);
      }
   };
   
   

8. selectedActivityChangedイベント・ハンドラの後に、選択および選択解除イベントを処理するためのテスト条件を持つselectedItemChangedイベント・ハンドラを追加します。

   
   selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
      . . .
   };
   
   /**
   * Handle selection from Activity Items list
   */
   selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {
   
      let isClicked = event.detail.value.data;
   
      if (isClicked != null) {
   
          // If selection, populate and display list
      }
      else {
      // If deselection, hide list
      }
   };
   

   次のステップでこのイベント・ハンドラを実装します。

9. selectedItemChangedイベント・ハンドラのif文で、itemDataを可観測可能に移入し、pieSeries配列変数を使用してpieSeriesValueを可観測可能に移入してから、選択イベントに対してitemSelected選択状態をtrueに設定します。

   selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {
   
      let isClicked = event.detail.value.data;
   
      if (isClicked != null) {
   
         // If selection, populate and display list
         this.itemData(event.detail.value.data);
   
         // Create variable and get attributes of the items list to set pie chart values
         let pieSeries = [
         { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
         { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
         ];
         // Update the pie chart with the data
         this.pieSeriesValue(pieSeries);
   
         this.itemSelected(true);
   
      }
      else {
      // If deselection, hide list
   
      }
   };
   

10. selectedItemChangedイベント・ハンドラのelse文で、選択解除イベントのitemSelected選択状態をfalseに設定します。

    selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {
    
       if (isClicked != null) {
       . . . 
       }
       else {
       // If deselection, hide list
       this.itemSelected(false);        
       }
    };
    

11. dashboard.tsファイルを保存します。

    このファイルは、final-event-dashboard-ts.txtのようになります。

タスク3:ビューでのリスト・レンダリングの条件付き設定

Oracle JETのIf Bindingコンポーネントを使用してビューを更新し、詳細リストを条件付きでレンダリングします。Oracle JETのIf Bindingコンポーネントは、そのtest属性でブール変数を取ります。1つの「If Binding」コンポーネント内で、「Activity Items」コンテナをネストし、別の「If Binding」コンポーネントで「Item Details」コンテナをネストします。次に、If Bindingコンポーネントを使用して、オブザーバブルactivitySelectedおよびitemSelectedの状態をテストします。テスト条件がtrueの場合は、If Bindingコンポーネントのネストされたコンテンツがレンダリングされます。リスト・イベント・ハンドラによって設定されたとおり、監視可能がtrueの場合、データバインド・リストを表示します。別のIf Bindingコンポーネントを使用して、監視可能がfalseかどうかをテストしてから、リストの選択をユーザーに指示するメッセージを含むコンテナを表示します。

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

2. id="parentContainer2"のdiv要素を検索します。その上で、oj-bind-ifカスタムHTML要素の開始タグを追加し、test属性をactivitySelected観測可能の状態に設定します。

   . . .
      </oj-list-view>
   </div>
   <oj-bind-if test="[[activitySelected()]]">
   <div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
      <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
      <h3 id="itemsListHeader">Activity Items</h3>
   . . .
   

   ユーザーが「アクティビティ」リストからアクティビティを選択すると、viewModelアクティビティ変更済イベント・ハンドラによって、activitySelectedが監視可能な値がtrueに設定されます。この場合、oj-bind-ifテスト条件が満たされ、アプリケーションによってアクティビティ選択の「アクティビティ・アイテム」コンテナがレンダリングされます。監視可能プロパティの()表記法は、監視可能オブジェクトのインスタンスを取得するのではなく、監視可能な値を取得するKnockout関数規則です。

3. id="itemDetailsContainer"というdiv要素を検索し、その上にtest属性がitemSelected観測可能の状態に設定されたoj-bind-ifカスタムHTML要素の開始タグを追加します。

   . . .
      </oj-list-view>
   </div>
   <oj-bind-if test="[[itemSelected()]]">
   <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
      <h3>Item Details</h3>
   . . .     
   

   ユーザーが「アクティビティ・アイテム」リストからアイテムを選択すると、viewModel「アイテム変更済」イベント・ハンドラによってitemSelectedがtrueに設定されます。この場合、oj-bind-ifテスト条件が満たされ、アプリケーションによってアクティビティ・アイテム選択の「アイテム詳細」コンテナがレンダリングされます。

4. dashboard.htmlファイルの下部で、2つの終了</div>タグをカウントし、終了</oj-bind-if>タグを追加して、開始<oj-bind-if test ="[[activitySelected()]]">タグに一致させます。終了</div>タグをもう1つカウントしてから、開始<oj-bind-if test ="[[itemSelected()]]">タグに終了</oj-bind-if>タグを追加します。

   . . . 
               </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      </div>
   </div>
   

5. 追加した終了</oj-bind-if>タグ(ファイルの末尾に最も近い)の下に、Oracle JET oj-flex-item oj-sm-6フレックス・レイアウト・ヘルパー・クラスを含むdiv要素を含むoj-bind-if test="[[!activitySelected()]]"カスタムHTML要素を挿入します。

   . . . 
               </oj-bind-if>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!activitySelected()]]">
            <div class="oj-flex-item oj-sm-6">
            <p>Select an Activity to see Items</p>
            </div>
         </oj-bind-if>
      </div>
   </div>
   

   Oracle JET oj-sm-6ヘルパー・クラスは、Select an Activity to see Items見出しのコンテナが、小さい画面サイズおよび大きい画面サイズの6つのコンテナ列を占めることを指定します。

   ユーザーがアクティビティを選択するまで、activitySelectedはfalseです。同様に、ユーザーが[Ctrl]キーを押してすでに選択されているアクティビティをクリックすると、viewModelはこのイベントが選別として処理され、アクティビティ変更済イベント・ハンドラによってactivitySelectedがfalseに設定されるようになります。どちらの場合も、oj-bind-ifテスト条件はブールfalse条件によって満たされ、アプリケーションはSelect an Activity to see Itemsヘッダーをレンダリングします。

6. ファイルの最初の終了</oj-bind-if>タグの下に、Oracle JET oj-flex-item oj-sm-12 oj-md-6 flexレイアウト・ヘルパー・クラスを含むdiv要素を含むoj-bind-if test ="[[!itemSelected()]]"カスタムHTML要素を追加します。

   . . .
                     </oj-chart>
                  </div>
               </div>
            </oj-bind-if>
            <oj-bind-if test="[[!itemSelected()]]">
               <div class="oj-flex-item oj-sm-12 oj-md-6">
                  <p>Select an Item to see details</p>
               </div>
            </oj-bind-if>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!activitySelected()]]">
            <div class="oj-flex-item oj-sm-6">
            <p>Select an Activity to see Items</p>
            </div>
         </oj-bind-if>
      </div>
   </div>
   

   Oracle JET oj-sm-12およびoj-md-6ヘルパー・クラスでは、詳細見出しを表示するSelect an Itemのコンテナが中画面サイズおよび大きい画面サイズの6つのコンテナ列を占有するか、小さい画面サイズの12個のコンテナ列を占有するように指定します。

   ユーザーがアクティビティ・アイテムを選択するまで、itemSelectedはfalseです。同様に、ユーザーが[Ctrl]キーを押し、すでに選択されているアクティビティ・アイテムをクリックすると、viewModelはこのイベントを選別として処理し、アイテム変更済イベント・ハンドラがitemSelectedをfalseに設定します。どちらの場合も、oj-bind-ifテスト条件はブールfalse条件によって満たされ、アプリケーションはSelect an Item to see detailsヘッダーをレンダリングします。

7. dashboard.htmlファイルを保存します。

   このファイルは、final-event-dDashboard-html.txtのようになります。

タスク4:マスター・リストと詳細リストのテスト

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

   $ ojet serve
   

2. Webブラウザで、アプリの「ベースボール」アクティビティをクリックします。

   「アクティビティ」リストの選択によって、selectedActivityChangedイベント・ハンドラがトリガーされます。選択したアクティビティに対して「アクティビティ・アイテム」コンテナがレンダリングされます。

   

   図master_detail_list.pngの説明

3. 「アクティビティ・アイテム」リストで、SureCatch Baseball Gloveをクリックします。

   「アクティビティ・アイテム」リストの選択によって、selectedItemChangedイベント・ハンドラがトリガーされます。アプリケーションによって、選択したアイテムの「アイテム詳細」コンテナがレンダリングされます。

   

   図master_detail_item.pngの説明

4. 「アクティビティ・アイテム」リストで[Ctrl]を押し、SureCatch「Baseball Glove」をクリックして選択を解除します。

   「アクティビティ・アイテム」リストの選択解除によって、selectedItemChangedイベント・ハンドラがトリガーされます。「アイテム詳細」コンテナは非表示です。

   

   図master_detail_list.pngの説明

5. ブラウザのサイズを変更するか、Ctrl+Shift+Iを押してChrome DevToolsを起動し、画面サイズ・エミュレータからピクセル5などの小さい画面サイズを選択します。

   コンテナは画面サイズに従って配置されます。

   

   図resized_master_detail_list.pngの説明

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

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

タスク5: (オプション)リストアされたアプリケーションからのWebアプリケーションの実行

指定されたコードから完了したOracle JET Webアプリケーションを実行する場合は、ダウンロードしたアーカイブ・ファイルからアプリケーションをリストアできます。ストライプ化および圧縮されたOracle JETアプリケーションを操作するには、抽出したアプリケーション内で、Oracle JETツールや必要なライブラリおよびモジュールなど、プロジェクトの依存関係をリストアする必要があります。

1. jet_web_application_masterdetail_final.zipファイルをダウンロードし、完了したアプリケーションのコンテンツをjet_web_application_masterdetail_finalフォルダに抽出します。

2. ターミナル・ウィンドウで、jet_web_application_masterdetail_finalフォルダに移動し、Oracle JET Webアプリケーションをリストアします。

   $ ojet restore
   

3. 確認されるまで待ちます。

   . . .
   Success: 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ヘルプ・センターを参照してください。

---

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

Handle selection events in an Oracle JET web app

F53164-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.