親コンテナ1およびアクティビティ・コンテナ・コンポーネントの作成

イントロダクション

この学習パス・シリーズの最後に開発したOracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションは、次のイメージに示すコンポーネントで構成されます。つまり、ParentContainer1コンポーネントには、アクティビティのリストを表示するActivityContainerコンポーネントが含まれます。アクティビティが選択されると、コンポーネント(ActivityItemContainer)を含む2番目の親コンポーネント(ParentContainer2)がレンダリングされ、選択したアクティビティに関連付けられたアイテムのリストが表示されます。最後に、アクティビティ・アイテムを選択すると、選択したアクティビティ・アイテムに関する価格設定および在庫レベル情報を表示するItemDetailContainerコンポーネントがレンダリングされます。

図component_structures.pngの説明

目的

このチュートリアルでは、Oracle JET仮想DOMアプリケーションの基本的なコンポーネントの一部を構成します。アプリケーション・レイアウトのビジュアライゼーションを支援するために、コンテナの周囲に境界および色を表示するためにOracle JET oj-panelおよびoj-bgスタイル・クラスも追加します。これらのスタイル・クラスは、最終アプリケーションから削除できます。

前提条件

• Node.jsのインストールを含むOracle JET仮想DOMアプリケーションを作成するために設定された開発環境
• Oracle JETクックブックへのアクセス
• (オプション1)このシリーズの前の学習パスの最終チュートリアルの完了: Oracle JET仮想DOMアプリケーションのデプロイの準備
• (オプション2)このシリーズで前の学習パスを完了していない場合: ダウンロードしたjet_virtual_dom_app_temp.zip

タスク1: スタータ仮想DOMアプリケーションのダウンロード

前の学習パスで作成したアプリケーションで作業を続行する場合は、このタスクをスキップします。

1. jet_virtual_dom_app_temp.zipの名前をJET-Virtual-DOM-app.zipに変更します。内容をJET-Virtual-DOM-appディレクトリに抽出します。

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

   npx @oracle/ojet-cli restore

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

タスク2: 品目詳細コンポーネントの作成

最後の学習パスで仮想DOMアプリケーションをスキャフォールドしたときに、Contentコンポーネントが作成されました。このコンポーネントの名前を変更して、次のチュートリアルで作成するParentContainer2コンポーネントによってレンダリングされる子コンポーネントであるItemDetailContainerとしてリファクタリングします。

1. JET-Virtual-DOM-app/src/componentsディレクトリで、contentディレクトリの名前をItemDetailに変更します。次に、その中のindex.tsxファイルの名前をItemDetailContainer.tsxに変更します。

   ノート:エディタで、名前を変更したファイルまたはディレクトリでインポートを更新するかどうかを尋ねるプロンプトが表示された場合は、次のVisual Studio Codeからのメッセージのように、「いいえ」をクリックして続行します。

   

   図refactor_imports.pngの説明

2. ItemDetailContainer.tsxで、行export function Content() {をconst ItemDetailContainer = () => {に変更します。次に、ItemDetailContainerコンポーネントのexport文をファイルの末尾に追加します。

   const ItemDetailContainer = () => {
     . . .
     };
   
   export default ItemDetailContainer;
   

3. ItemDetailContainerコンポーネントのreturn文の先頭を、oj-label要素までの次のコードに置き換えます。divには、コンテナに灰色の背景色を追加するOracle JET oj-bgスタイル・クラスが含まれています。

   return (
     <div
       id="itemDetailsContainer" class="oj-bg-neutral-30">
       <h3>Item Details</h3>
       <oj-label for="basicSelect">Select Chart:</oj-label>
   . . .
   

4. renderListItem関数を削除し、return文の末尾から最後の終了</div>タグを削除します。

5. ファイルを保存して閉じます。

   コードはitem-detail-container-tsx.txtのようになります。

タスク3: コンテンツ・コンポーネントの作成

Contentコンポーネントを再作成します。このコンポーネントは、アプリケーションのタイトルと、次のタスクで作成するParentContainer1コンポーネントのPreact要素を表示します。

1. JET-Virtual-DOM-app/src/componentsディレクトリに、空のContent.tsxファイルを含むContentディレクトリを作成します。

2. ファイルの上部に次のimport文を追加します。ParentContainer1コンポーネントは、このチュートリアルの後半で作成します。

   import { h } from "preact";
   import ParentContainer1 from "../ParentContainer1";
   

3. Contentコンポーネントのファンクション定義を作成します。

   const Content = () => {
     return (
   
     );
   }
   

4. 関数のreturn文で、h1ヘッダーProduct Informationを含むdivと、作成するコンポーネントにアクセスするためのParentContainer1要素を追加します。

   const Content = () => {
     return (
       <div class="oj-web-applayout-max-width oj-web-applayout-content">
         <h1>Product Information</h1>
         <ParentContainer1 />
       </div>
     );
   }
   

5. ファイルの最後に、Contentコンポーネントのexport文を追加します。

   export default Content;
   

6. ファイルを保存して閉じます。コードは content- tsx.txtに似ています。

7. JET-Virtual-DOM-app/src/componentsディレクトリで、エディタでapp.tsxファイルを開きます。ファイルの上部で、import { Content } from "./content/index";のコード行を見つけ、それを編集してimport Content from "./Content/Content";を読み取ります。

8. ファイルを保存して閉じます。

タスク4: 親コンテナ1コンポーネントの作成

作成する残りのコンポーネントの親コンテナ・コンポーネントである親コンテナ1コンポーネントを作成します。

1. JET-Virtual-DOM-app/src/componentsディレクトリに、ParentContainer1.tsxファイルを作成します。

2. 次のimport文をファイルの上部に追加します。ActivityContainerコンポーネントは、このチュートリアルの後半で作成します。

   import { h } from "preact";
   import ActivityContainer from "./Activity/ActivityContainer";
   

3. ActivityContainer要素を含むdivを返すParentContainer1コンポーネントのファンクション定義を作成します。div要素には、コンテナに黄色の背景色を追加するOracle JET oj-bgスタイル・クラスと、境界を作成するoj-panelスタイル・クラスが含まれます。

   const ParentContainer1 = () => {
   
     return (
       <div id="parentContainer1" class="oj-panel oj-bg-warning-20">
         <ActivityContainer />
       </div>
     );
   };
   

4. ファイルの最後に、ParentContainer1コンポーネントのexport文を追加します。

   export default ParentContainer1;
   

5. ファイルを保存して閉じます。

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

タスク5: アクティビティ・コンテナ・コンポーネントの作成

ParentContainer1コンポーネントによってレンダリングされる子コンポーネントであるActivityContainerコンポーネントを作成します。ActivityContainerコンポーネントは、ヘッダーおよびアクティビティのリストをレンダリングします。

1. JET-Virtual-DOM-app/src/componentsディレクトリに、Activityディレクトリとその中にActivityContainer.tsxファイルを作成します。

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

   import { h, ComponentProps } from "preact";
   

3. h3 HTMLヘッダー・アクティビティおよびアクティビティのリストを含むdiv要素を返すActivityContainerコンポーネントのファンクション定義を作成します。divには、コンテナに青の背景色を追加するためのOracle JET oj-bgスタイル・クラスが含まれています。

   const ActivityContainer = () => {
     return (
       <div id="activitiesContainer" class="oj-bg-info-30">
         <h3 id="activitiesHeader">Activities</h3>
         <div id="activitiesItems" class="item-display no-wrap">
           <ul>
             <li class="li-item">Baseball</li>
             <li class="li-item">Bicycling</li>
             <li class="li-item">Skiing</li>
             <li class="li-item">Soccer</li>
           </ul>
         </div>
       </div>
     );
   };
   

4. ファイルの最後に、ActivityContainerコンポーネントのexport文を追加します。

   export default ActivityContainer;
   

5. ファイルを保存して閉じます。

   コードは activity-container-tsx.txtに似ています。

6. JET-Virtual-DOM-app/src/stylesディレクトリに移動し、エディタでapp.cssファイルを開きます。item-display、no-wrapおよびli-itemスタイル・クラスをファイルの末尾に追加します。

   .item-display {
     width: 100%;
     height: 100%;
     max-height: 500px;
     overflow-x: hidden;
     overflow-y: auto;
   }
   
   .no-wrap {
     flex-wrap: nowrap;
   }
   
   .li-item {
     list-style-type: none;
     font-size: 1rem;
     font-weight: 500;
   }
   

7. ファイルを保存して閉じます。

   コードは app-css.txtに似ています。

タスク6: 仮想DOMアプリケーションの実行

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

   npx @oracle/ojet-cli serve
   

   親コンテナ1 (黄色)内のアクティビティ・コンテナ(青)には、アクティビティ名のリストが表示されます。アイテム詳細コンテナは、別のコンポーネント内にまだレンダリングされていないため表示されません(次のチュートリアルで作成した親コンテナ2コンポーネントに追加されます)。

   

   図pc1_and_activity_containers.pngの説明

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

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

次のステップ

この学習パスの次のチュートリアルに進むには、ここをクリックしてください。

その他の学習リソース

他のラボをdocs.oracle.com/learnで探すか、Oracle LearningのYouTubeチャネルでより無料の学習コンテンツにアクセスします。また、education.oracle.com/learning-explorerにアクセスしてOracle Learningエクスプローラになります。

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

---

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

Create parent container 1 and activity container components

F72917-01

December 2022

Copyright © 2022, Oracle and/or its affiliates.