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

はじめに

Oracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションでは、Preactのリソースの組合せ(状態、プロパティ、フックなど)を使用して、Oracle JETリスト・ビュー・コンポーネントでの選択および選択解除に応答する変更リスナーおよびイベント・ハンドラを作成できます。ユーザーがアプリケーションのマスター・ビューまたはディテール・リスト・ビューでアクティビティまたはアクティビティ・アイテムを選択すると、変更リスナーによってイベント・ハンドラがトリガーされます。これにより、アクティビティ・コンテナおよびアクティビティ・アイテム・コンテナのリスト・ビュー・コンポーネントに移入するOracle JETデータ・プロバイダ・オブジェクトが作成されます。

親コンテナ・コンポーネントで、子コンポーネントの条件付きレンダリングを実装して、Oracle JETリスト・ビュー・コンポーネントの特定のselected属性が空でない場合、変数はtrueに設定され、ビューによってデータバインドされた詳細リストがレンダリングされるようにします。選択解除イベントが原因でselected属性が空の場合、変数はfalseに設定され、子コンポーネントはディテール・ビューなしでレンダリングされます。

目的

このチュートリアルでは、Oracle JETリスト・ビュー・コンポーネント選択イベントに応答するマスター/ディテール・データを表示できるように、Oracle JET仮想DOMアプリケーションのユーザー・インタフェースを更新します。

前提条件

• Node.jsのインストールを含むOracle JET仮想DOMアプリケーションを作成するように設定された開発環境
• この学習パスの前のチュートリアルの完了、 Oracle JET仮想DOMアプリケーションでのディテール・ビューの作成
• 完了したアプリケーションjet-virtual-dom-app-temp.zipがオプションでダウンロードされます

タスク1: 選択の親コンテナ1の変更

1. JET-Virtual-DOM-app/src/componentsディレクトリに移動し、エディタでParentContainer1.tsxファイルを開きます。

2. useStateフックのimport文をファイルの最上部に追加します。

   import { useState } from 'preact/hooks';
   

3. Item型の別名とINIT_SELECTEDACTIVITY変数を作成します。

   type Item = {
     id: number;
     name: string;
     short_desc?: string;
     price?: number;
     quantity?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
     activity_id?: number;
     image?: string;
   };
   
   let INIT_SELECTEDACTIVITY: Item | null = null;
   

4. ParentContainer1ファンクションのreturn文の前に、次のコードを追加します。

   const [selectedActivity, setSelectedActivity] = useState(INIT_SELECTEDACTIVITY);
   
   const showActivityItems = () => {
     return selectedActivity != null ? true : false;
   };
   
   const activityChangedHandler = (value: Item) => {
     setSelectedActivity(value);
   };
   

5. onActivityChanged属性をActivityContainer要素に追加し、ParentContainer2要素を、ActivityContainerコンポーネントから取得されたselectedActivityプロパティ値でParentContainer2要素を表示したり、アクティビティを選択するための指示付きヘッダーを表示するために使用される条件文のペアに置き換えます。また、div要素からoj-bg-warning-20およびoj-panelスタイル・クラスを削除して、黄色の背景色と境界線をコンテナから削除します。

   return (
     <div id="parentContainer1" class="oj-flex oj-flex-init">
       <ActivityContainer data={activityDataProvider} onActivityChanged={activityChangedHandler} />
       {showActivityItems() && <ParentContainer2 activity={selectedActivity} />}
       {!showActivityItems() && (
         <h4 class="oj-typography-subheading-sm">Select activity to view items</h4>
       )}
     </div>
   );
   

   ファイルを保存します。コードはparent-container1-1-tsx.txtのようになります。

タスク2: 選択用のアクティビティ・コンテナの変更

1. JET-Virtual-DOM-app/src/components/Activityディレクトリに移動し、エディタでActivityContainer.tsxファイルを開きます。

2. 次のimport文をファイルの最上部に追加します。

   import { KeySetImpl, KeySet } from 'ojs/ojkeyset';
   import { useMemo } from 'preact/hooks';
   

3. onActivityChangedプロパティをProps型の別名に追加します。また、Item型の別名を作成します。

   type Props = {
     data?: MutableArrayDataProvider<Activity['id'], Activity>;
     value?: string;
     onActivityChanged: (value: Item) => void;
   };
   
   type Item = {
     id: number;
     name: string;
     short_desc?: string;
     price?: number;
     quantity?: number;
     quantity_shipped?: number;
     quantity_instock?: number;
     activity_id?: number;
     image?: string;
   };
   

4. ActivityContainerファンクションのreturn文の前に、次のコードを追加します。

   const selectedActivityChanged = (
     event: ojListView.firstSelectedItemChanged<Item['id'], Item>
   ) => {
     props.onActivityChanged(event.detail.value.data);
   };
   
   const activityValue = useMemo(() => {
     return new KeySetImpl([props.value]) as KeySet<Activity['name']>;
   }, [props.value]);
   

5. Oracle JETリスト・ビュー・コンポーネントにselectedおよびonfirstSelectedItemChanged属性を追加します。また、div要素からoj-bg-info-30を削除して、コンテナから青色の背景色を削除します。

   selected = { activityValue };
   onfirstSelectedItemChanged = { selectedActivityChanged };
   

   ファイルを保存します。コードはactivity-container-1-tsx.txtのようになります。

タスク3: 選択の親コンテナ2の変更

1. JET-Virtual-DOM-app/src/componentsディレクトリに移動し、エディタでParentContainer2.tsxファイルを開きます。

2. 次のPreactフックのimport文をファイルの最上部に追加します。

   import { useState, useEffect, useCallback } from 'preact/hooks';
   

3. Props型の別名を追加します。

   type Props = {
     activity: Item | null;
   };
   

4. const activityItemDPの名前をconst INIT_DATAPROVIDERに変更し、変数const specificItemを削除します。

5. ParentContainer2関数定義へのpropsの追加

   const ParentContainer2 = (props: Props) => {
   

6. ファンクションのreturn文の前に状態およびPreactフックを追加します。

   const [selectedItemVal, setSelectedItemVal] = useState<Item | null>(null);
   const [activityItemDP, setactivityItemDP] = useState(INIT_DATAPROVIDER);
   
   const activityItemChangeHandler = useCallback(
     (item: Item) => {
       setSelectedItemVal(item);
     },
     [selectedItemVal]
   );
   
   const showItems = useCallback(() => {
     return selectedItemVal === null ? false : true;
   }, [selectedItemVal]);
   

7. return文の前にuseEffectフックを追加します。

   useEffect(() => {
     let actID = props.activity.id - 1;
     let activityItemsArray = activityData[actID].items;
     setactivityItemDP(
       new MutableArrayDataProvider<ActivityItem['id'], ActivityItem>(activityItemsArray, {
         keyAttributes: 'id',
       })
     );
   }, [props.activity]);
   

8. selectedActivityおよびonItemChangedデータ属性をActivityItemContainer要素に追加します。ItemDetailContainer要素を条件文のペアに置き換えて、ItemDetailContainerを選択したアクティビティ・アイテム値で表示するか、ヘッダーを表示してアクティビティ・アイテムを選択するように指示します。また、div要素からoj-panelおよびoj-bg-danger-30スタイル・クラスを削除して、赤い背景色と境界線をコンテナから削除します。

   <div
     id="parentContainer2"
     class="oj-flex oj-flex-item oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">
     <ActivityItemContainer
       selectedActivity={props.activity}
       data={activityItemDP}
       onItemChanged={activityItemChangeHandler}
     />
     {showItems() && <ItemDetailContainer item={selectedItemVal} />}
     {!showItems() && (
       <h4 class="oj-typography-subheading-sm">Select activity item to see details</h4>
     )}
   </div>
   

   コードはparent-container2-1-tsx.txtのようになります。

タスク4: 選択用のアクティビティ項目コンテナの変更

1. JET-Virtual-DOM-app/src/components/ActivityItemディレクトリに移動し、エディタでActivityItemContainer.tsxファイルを開きます。

2. 次のPreactフックのimport文をファイルの最上部に追加します。

   import { useState, useCallback } from 'preact/hooks';
   

3. Props型の別名を置き換えます。

   type Props = {
     data?: MutableArrayDataProvider<ActivityItem['id'], ActivityItem>;
     selectedActivity: Item | null;
     onItemChanged: (item: Item) => void;
   };
   

4. DEFAULT_ACTIVITY_ITEM_STATE変数を追加します。

   const DEFAULT_ACTIVITY_ITEM_STATE: Partial<Item> = {};
   

5. ActivityItemContainerファンクション定義のreturn文の前に次のコードを追加します。

   // new code
   const activityItemDataProvider = props.data;
   
   const [activityItemValue, setActivityItemValue] = useState(DEFAULT_ACTIVITY_ITEM_STATE);
   
   const [itemData, setItemData] = useState<Item>(props.selectedActivity!);
   
   const selectedActivityItemChanged = useCallback(
     (event: ojListView.firstSelectedItemChanged<Item['id'], Item>) => {
       let tempItem = event.detail.value.data;
       props.onItemChanged(tempItem);
       setActivityItemValue(tempItem);
       setItemData(tempItem);
     },
     [activityItemValue]
   );
   

6. Oracle JETリスト・ビュー要素で、onFirstSelectedItemChanged属性を追加し、data属性を置き換えます。また、oj-bg-success-20スタイル・クラスをdiv要素から削除します。id="activityItemsContainer"では、コンテナから緑の背景色を削除します。

    <div
    id="activityItemsContainer"
    class="oj-flex-item oj-sm-padding-4x-start oj-md-6 oj-sm-12">
    <div id="container">
      <h3>Activity Items</h3>
      <oj-list-view
        id="activitiesList"
        class="item-display"
        aria-labelledby="activitiesHeader"
        data={activityItemDataProvider}
        gridlines={gridlinesItemVisible}
        selectionMode="single"
        onfirstSelectedItemChanged={selectedActivityItemChanged}
        scrollPolicy="loadMoreOnScroll"
        scrollPolicyOptions={scrollPolicyOpts}>
        <template slot="itemTemplate" render={listItemRenderer}></template>
      </oj-list-view>
   

   ファイルを保存します。コードはactivity-item-container-tsx.txtのようになります。

7. JET-Virtual-DOM-app/src/components/ItemDetailディレクトリに移動し、エディタでItemDetailContainer.tsxファイルを開きます。

8. ItemDetailContainerファンクションのreturn文で、div要素からoj-bg-neutral-30スタイル・クラスを削除して、コンテナからグレーの背景色を削除します。ファイルを保存します。

タスク5: 仮想DOMアプリケーションでの選択イベントのテスト

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

   npx ojet serve
   

2. 仮想DOMアプリケーションで、「Baseball」アクティビティをクリックします。

   「アクティビティ」リストの選択により、selectedActivityChangedイベント・ハンドラがトリガーされます。仮想DOMアプリケーションは、選択したアクティビティのアクティビティ・アイテム・データをレンダリングします。

   

3. 「アクティビティ・アイテム」リストで、SureCatch「野球グローブ」をクリックします。

   「アクティビティ・アイテム」リストの選択により、selectedActivityItemChangedイベント・ハンドラがトリガーされます。仮想DOMアプリケーションは、選択したアクティビティ・アイテムのデータを含むアイテム詳細コンテナをレンダリングします。

   

4. 「アクティビティ・アイテム」リストで、[Ctrl]を押しながらSureCatch「野球グローブ」をクリックして選択を解除します。

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

   

5. Ctrl+Shift+Iを押すか、ページを右クリックして「検査」を選択し、開発者ツールでページ・ビューを表示します。

6. ChromeのDevToolsツールバーで、をクリックしてデバイス・モードに切り替えます。

7. 画面エミュレータの「ディメンション」ドロップダウン・メニューから、ピクセル5などの小さい画面サイズのデバイスを選択して、コンテンツの変更を確認します。

   

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

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

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

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

1. jet-virtual-dom-app-temp.zipファイルをダウンロードし、名前をJET-Virtual-DOM-app.zipに変更して、コンテンツをJET-Virtual-DOM-appディレクトリに抽出します。

2. ターミナル・ウィンドウで、JET-Virtual-DOM-appディレクトリに移動し、Oracle JET仮想DOMアプリケーションをリストアします。

   npm install
   

3. 確認待ち。

   Success: Restore complete
   

   仮想DOMアプリケーションを実行する準備ができました。

4. 仮想DOMアプリケーションを実行し、ブラウザでテストします。

   npx ojet serve
   

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

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

次のステップ

このチュートリアルでは、仮想DOM Webアプリケーションの構築に関するこの学習パスのOracle JETのマスター・ディテール・ビューのモジュールを終了します。

• Oracle JET仮想DOMアプリケーションのマスター・ビューの作成
• Oracle JET仮想DOMアプリケーションのディテール・ビューの作成
• Oracle JET仮想DOMアプリケーションでの選択イベントの処理

「RESTサービスを使用したCRUD操作」モジュールで、学習パスOracle JETのREST APIからのデータのフェッチの次のチュートリアルに進むことができます。

仮想DOM学習パスのメイン・ページに戻ると、仮想DOMアプリケーションの構築に関するすべてのモジュールにアクセスすることもできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。

---

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

Handle selection events in an Oracle JET virtual DOM app

F72848-02

Copyright ©2024,2025,

Oracle and/or its affiliates.