Oracle JETの仮想DOMアプリケーションでのマスター・ビューの作成

はじめに

このチュートリアルでは、ローカルのJavaScript Object Notation (JSON)ドキュメントからマスター/ディテール階層データを読み取って、Oracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションのリスト・ビュー・コンポーネントにデータを表示する方法について説明します。

Oracle JETでは、Oracle JET APIを使用してデータ・プロバイダ・オブジェクトを作成できます。オブジェクトは、JSONドキュメント・データ・ストアの親オブジェクトから移入するデータ配列を表します。Oracle JETカスタムHTML要素のdata属性は、作成するMutableArrayDataProviderデータ・プロバイダ・オブジェクトのインスタンスを介してデータにバインドされます。

目的

このチュートリアルでは、データがローカルJSONドキュメント内の親データ・オブジェクトの複数の項目をバインドし、アクティビティ・コンテナ・コンポーネントのOracle JETリスト・ビュー・コンポーネントの行にそのデータを移入します。

前提条件

Node.jsのインストールを含むOracle JET仮想DOMアプリケーションを作成するように設定された開発環境
Google Chrome Webブラウザがインストールされ、デフォルトのWebブラウザとして設定されている
Oracle JET開発者クックブックへのアクセス
(オプション1)このシリーズの前の学習パスでの最終チュートリアルの完了: 異なる画面サイズでのOracle JET Virtual DOMアプリケーションのテスト
(オプション2)このシリーズの前の学習パスを完了していない場合は、ダウンロードしたjet-virtual-dom-app-temp.zip
JET-Virtual-DOM-app/src/styles/imagesディレクトリにダウンロードされたproduct_images.zip

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

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

jet-virtual-dom-app-temp.zipの名前をJET-Virtual-DOM-app.zipに変更します。JET-Virtual-DOM-appディレクトリにコンテンツを抽出します。
ターミナル・ウィンドウで、JET-Virtual-DOM-appディレクトリに移動し、Oracle JETアプリケーションをリストアします。
```
npm install
```
アプリを使用する準備ができました。

タスク2: 製品イメージのダウンロード

スタータ・アプリケーションをjet-virtual-dom-app-temp.zipにダウンロードした場合は、このタスクをスキップします。

Oracle JETツール・サーバー・バッチ・ジョブがターミナル・ウィンドウで実行されている場合は、Ctrl+Cを押し、プロンプトが表示された場合はyを入力してサーバー・バッチ・ジョブを終了します。

サーバー・バッチ・ジョブでは、既存のアプリケーション・ファイルに対して行ったリビジョンのみが認識されます。新しいファイルを作成したら、仮想DOMアプリケーションを再度実行する必要があります。
product_images.zipファイルをJET-Virtual-DOM-app/src/styles/imagesディレクトリにダウンロードします。
zipファイルの内容を、imagesディレクトリの新しいproduct_imagesディレクトリに抽出します。

新しいディレクトリへのパスはJET-Virtual-DOM-app/src/styles/images/product_imagesで、このディレクトリにはアプリケーションが使用するイメージが含まれます。

タスク3: 親コンテナ1での可変配列データ・プロバイダの作成

Oracle JETクックブックを開き、クックブックのホーム・ページにナビゲートします。「フレームワーク」、「データ・プロバイダ」、「可変配列データ・プロバイダ」の順にクリックします。クックブックのツールバーで、「APIドキュメント」をクリックします。
APIドキュメントで、MutableArrayDataProviderクラスについてお読みください。オプションの引数keyAttributesを使用して、渡されたデータ・オブジェクトのキー属性に基づいてMutableArrayDataProviderのインスタンスを作成する方法に注意してください。
前の学習パスでまだ実行していない場合は、store_data.jsonファイルをJET-Virtual-DOM-app/src/componentsディレクトリにダウンロードします。
JET-Virtual-DOM-app/src/componentsディレクトリに移動し、エディタでParentContainer1.tsxファイルを開きます。
ファイルの上部で、MutableArrayDataProviderクラスのimport文と、store_data.jsonファイルのJSONデータを追加します。
```
import MutableArrayDataProvider = require('ojs/ojmutablearraydataprovider');
import * as storeData from 'text!./store_data.json';
```

Activity型の別名を作成します。

type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

MutableArrayDataProviderのactivityDataProviderインスタンスを作成します。
```
const activityDataProvider = new MutableArrayDataProvider<Activity['id'], Activity>(
  JSON.parse(storeData),
  {
    keyAttributes: 'id',
  }
);
```
MutableArrayDataProviderクラスのkeyAttributesプロパティは、親オブジェクトのid属性に基づいて配列に移入します。id属性は、JSONドキュメントの親データ・オブジェクトおよび子データ・オブジェクトのキー属性です。
ParentContainer1ファンクションで、propsを使用してデータ・プロバイダ・オブジェクトをアクティビティ・コンテナ・コンポーネントに渡すActivityContainer要素にdata属性を追加します。
```
return (
    <div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">
        <ActivityContainer data={activityDataProvider} />
        <ParentContainer2 />
    </div>
    );
};
```
コードはparent-container1-1-tsx.txtのようになります。

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

アクティビティ・コンテナ・コンポーネントでOracle JETリスト・ビュー・コンポーネントを作成し、ParentContainer1コンポーネントからpropsを介して渡されたデータ・プロバイダ・オブジェクトからリスト行ごとに複数のデータ・アイテムを表示します。実行時にリスト行データ・アイテムの内容をインスタンス化するために、リスト・ビュー・コンポーネントは、プレースホルダとしてslot属性を持つHTMLのtemplate要素を使用します。

JET-Virtual-DOM-app/src/components/Activityディレクトリに移動し、エディタでActivityContainer.tsxファイルを開きます。
Oracle JETリスト・ビュー・コンポーネントおよびMutableArrayDataProviderクラスの次のインポート文をファイルの最上部に追加します。
```
import 'ojs/ojlistview';
import { ojListView } from 'ojs/ojlistview';
import MutableArrayDataProvider = require('ojs/ojmutablearraydataprovider');
```

PropsおよびActivity型の別名を作成します。

type Props = {
  data?: MutableArrayDataProvider<Activity['id'], Activity>;
  value?: string;
};

type Activity = {
  id: number;
  name: string;
  short_desc: string;
};

id="activitiesContainer"を含むdiv要素を検索し、oj-sm-only-text-align-endヘルパー・クラスを削除して、アクティビティ・コンテナのコンテンツが再編成されないようにします。

各リスト・アイテムをレンダリングするlistItemRendererファンクションを作成し、リスト・ビュー・コンポーネントの行に背景イメージ、名前および簡単な説明を移入するspanおよびdiv要素を含めます。

また、image変数を定義して、仮想DOMアプリケーションがアプリケーションのstylesディレクトリで製品イメージを検索できるようにします。

const listItemRenderer = (item: ojListView.ItemTemplateContext) => {
  let image = item.data.image.replace('css', 'styles');
  return (
    <div class="oj-flex no-wrap">
      <span
        class="demo-thumbnail oj-flex-item"
        style={'background-image:url(' + image + ')'}></span>
      <div class="demo-content oj-flex-item">
        <div>
          <strong>{item.data.name}</strong>
        </div>
        <span class="demo-metadata">{item.data.short_desc}</span>
      </div>
    </div>
  );
};

listItemRenderer関数の下に、次のListViewProps型の別名と2つの変数を追加して、リスト・ビュー・コンポーネントのグリッド線およびスクロール・プロパティを定義します。

type ListViewProps = ComponentProps<'oj-list-view'>;
const gridlinesItemVisible: ListViewProps['gridlines'] = { item: 'visible' };
const scrollPolicyOpts: ListViewProps['scrollPolicyOptions'] = { fetchSize: 5 };

propsをActivityContainer関数定義に追加します。
```
const ActivityContainer = (props: Props) => {
```
ActivityContainerファンクションのreturn文内で、div要素(id="activitiesItemsおよびその中のリスト)を削除します。これらを次のリスト・ビュー・コンポーネントに置き換えます。このコンポーネントでは、リスト・ビューのdata属性のpropsを介してデータ・プロバイダ・オブジェクトにアクセスします。
```
<h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
                data={props.data} gridlines={gridlinesItemVisible} selectionMode="single"
                scrollPolicy="loadMoreOnScroll" scrollPolicyOptions={scrollPolicyOpts}>
  </oj-list-view>
```
リスト・ビュー・コンポーネント内で、slot属性を持つtemplate要素を追加して、リスト内の各アイテムをレンダリングします。
```
. . .
    <template slot="itemTemplate" render={listItemRenderer}></template>
</oj-list-view>
```
ファイルを保存します。コードはactivity-container-tsx-1.txtのようになります。

タスク5: アプリの実行およびアプリのカスケード・スタイルシートのデバッグ

ターミナル・ウィンドウで、JET_Virtual_DOM_appディレクトリに移動し、アプリケーションを実行します。
```
npx ojet serve
```
Oracle JETツールでは、ローカルWebブラウザで仮想DOMアプリケーションが実行され、ここでアクティビティ・コンテナ・コンポーネントに対する変更を表示できます。アクティビティ名と短い説明の左側に表示されるイメージは、大きすぎるため部分的にのみ表示されます。

ブラウザのサイズを変更しても、このサンプル・スクリーンショットのようなページが表示されない場合は、アプリケーション・イメージをimages/product_imagesディレクトリに抽出したことを確認します。
Google Chromeブラウザで、Soccerアクティビティの部分イメージを右クリックし、「検査」を選択します。ブラウザには、HTMLページ・ソースを検査できるChrome Developer Tools (DevTools)が表示されます。
「要素」パネルで、class="demo-thumbnail oj-flex-item"を選択するspan要素。「スタイル」パネルで、強調表示されたelement.style background-imageスタイルを見つけます。jrsoccerball.jpgイメージのURLを右クリックし、「ソース」パネルで表示」を選択します。
ChromeのDevToolsの「ソース」パネルには、イメージが300 x 300ピクセルであるため、サイズが大きすぎてリスト・ビューに表示できないことが示されています。フルサイズのイメージからサムネイルサイズのイメージをレンダリングするには、カスケード・スタイル・シート(CSS)スタイル・クラスを定義します。
Chrome DevToolsウィンドウを閉じて、ブラウザ内のアプリケーションに戻ります。

タスク6: CSSの修正およびアクティビティ・リストの変更の表示

JET-Virtual-DOM-app/src/stylesディレクトリに移動し、エディタでapp.cssファイルを開きます。
.demo-thumbnailクラス・セレクタのプロパティを定義します。プロパティのリストで、background-repeatプロパティをno-repeatに設定して、イメージを1回のみ表示します。
```
.demo-thumbnail {
  border-radius: 5px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  margin-right: 10px;
}
```
ActivityContainer.tsxファイルのlistItemRenderer関数で、span要素はクラス・セレクタを参照し、class属性にdemo-thumbnail CSSスタイルを設定して、アクティビティ・リスト・イメージをサムネイルとして書式設定します。
app.cssファイルを保存して閉じます。ファイルはapp-css.txtのようになります。
ブラウザに戻り、更新を表示します。

サムネイル・イメージを含む「アクティビティ」リストが表示されます。
実行中の仮想DOMアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。
ターミナル・ウィンドウでCtrl+Cを押し、プロンプトが表示されたら、yと入力してOracle JETツール・バッチ・ジョブを終了します。

次のステップ

このモジュールの次のチュートリアルに進みます。

このチュートリアルは、「Oracle JETのマスター・ディテール・ビュー」モジュールの一部です。

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

その他の学習リソース

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

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

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

Create the master view in an Oracle JET virtual DOM app

F72847-02

Oracle and/or its affiliates.