Oracle JET Webアプリケーションのマスター・ビューの作成

イントロダクション

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

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

目的

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

前提条件

• JavaScriptランタイム、Node.jsおよび最新のOracle JETコマンドライン・インタフェースがインストールされたOracle JETアプリケーションを作成するために設定された開発環境
• Google Chrome Webブラウザがインストールされ、デフォルトのWebブラウザとして設定されました
• Oracle JET開発者クックブックへのアクセス
• (オプション1)このシリーズの前の学習パスの完了: Oracle JavaScript Extension Toolkitでのレスポンシブ・レイアウトを使用したWebアプリケーションの開発
• (オプション2)このシリーズで前の学習パスを完了していない場合:ダウンロードされたjet_web_application_temp.zip
• JET_Web_Application/src/css/images/ディレクトリにダウンロードされたproduct_images.zip

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

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

1. jet_web_application_temp.zipの名前をJET_Web_Application.zipに変更します。コンテンツをJET_Web_Applicationフォルダに抽出します。

2. ターミナル・ウィンドウで、Oracle JETがインストールされ、最新バージョンに更新されていることを確認します。

   $ npm list -g @oracle/ojet-cli
   

   $ npm install -g @oracle/ojet-cli
   

3. JET_Web_Applicationフォルダに移動し、Oracle JETアプリケーションをリストアします。

   $ ojet restore
   

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

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

jet_web_application_temp.zipでスタータ・アプリケーションをダウンロードした場合は、このタスクをスキップします。

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

   サーバー・バッチ・ジョブでは、既存のアプリケーション・ファイルに行ったリビジョンのみが認識されます。新しいファイルを作成した後、Webアプリケーションを再度実行する必要があります。

2. product_images.zipファイルをJET_Web_Application/src/css/images/ディレクトリにダウンロードします。

3. zipファイルのコンテンツをimagesフォルダの新しいproduct_imagesフォルダに抽出します。

   新しいフォルダへのパスはJET_Web_Application/src/css/images/product_imagesで、フォルダにはアプリケーションが使用するイメージが含まれます。

タスク3:ビューの「アクティビティ」リストの拡張

Oracle JETリスト・ビュー・コンポーネントを変更して、各リスト行の「アクティビティ」配列データ・ソースの複数のデータ・アイテムを表示します。実行時にリスト行データ・アイテムの内容をインスタンス化するために、アクティビティ・リスト・ビュー・コンポーネントは、slot属性を持つHTML template要素をプレースホルダとして使用します。

1. id="activityItemsContainer"を含むdiv要素を検索し、oj-sm-only-text-align-endヘルパー・クラスを削除して、「アクティビティ」リストの内容が再配置されないようにします。

   <div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-md-4 oj-sm-12">
   

2. id="activitiesList"のoj-list-viewカスタムHTML要素を検索し、値item-displayのclass属性を追加します。

   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible">
   

   リスト・ビュー・データ・ソースを提供するために、data属性は、監視可能なactivityDataProviderを一方向のデータ・バインディングとしてバインドします。

3. JET_Web_Application/src/cssディレクトリに移動し、app.cssファイルを開きます。ここで、アプリケーション固有のCSSスタイルを追加できます。width、heightおよびoverflow-xプロパティを使用して.item-displayスタイル定義を作成し、リスト行の複数のデータ・アイテムの表示をサポートします。

   .item-display {
         width: 100%;
         height: 500px;
         overflow-x: hidden;
         }
   

4. id="activitiesList"のoj-list-view要素で、slot="itemTemplate"のテンプレート要素を検索し、div要素および含まれているoj-bind-text要素を削除します。

   
   <template slot="itemTemplate">
   
   </template>
   
   

5. 空のtemplate要素で、リスト・ビュー・コンポーネントの行に背景イメージ、名前および簡単な説明を移入するコードを3つのdiv要素に追加します。

   <template slot="itemTemplate">
    <div class="oj-flex no-wrap">
     <span class="demo-thumbnail oj-flex-item"
         :style.background-image="[[' url('+$current.data.image+')']]"></span>
   <div class="demo-content oj-flex-item">
     <div>
      <strong>
        <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
      </strong>
      </div>
     <span class="demo-metadata">
      <oj-bind-text value="[[$current.data.short_desc]]"></oj-bind-text>
     </span>
     </div>
    </div>
   </template>
   

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

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

タスク4: ViewModelのアクティビティ・データ・プロバイダの確認

アクティビティ・リスト・ビュー・コンポーネントを移入するために、viewModelは、Oracle JET MutableArrayDataProviderクラスを使用してアクティビティ・データ配列のインスタンスを作成します。JSON.parseメソッドは、ローカルJSONデータ・ストアを、データを返す引数として解析します。

1. Oracle JETクックブックを開き、クックブックのホーム・ページに移動します。「フレームワーク」、「データ・プロバイダ」、「可変配列データ・プロバイダ」の順にクリックします。クックブック・ツールバーで、「APIドキュメント」をクリックします。

2. APIのドキュメントで、MutableArrayDataProviderクラスについて確認してください。オプションの引数keyAttributesを使用して、渡されたデータ・オブジェクトのキー属性に基づいてMutableArrayDataProviderクラスのインスタンスを作成する方法に注意してください。

3. JET_Web_Application/src/ts/viewModelsディレクトリに移動し、エディタでdashboard.tsファイルを開きます。コンストラクタ・メソッド内のthis.activityDataProviderの宣言を検索します。

   
      this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
         >(JSON.parse(storeData), {
            keyAttributes: "id",
      });
   }
   

   これにより、MutableArrayDataProviderクラスのインスタンスであるactivityDataProviderオブジェクトが作成されます。MutableArrayDataProviderのkeyAttributesプロパティは、親オブジェクトのid属性に基づいてActivity配列を移入します。id属性は、JSONドキュメントの親および子データ・オブジェクトのキー属性です。

4. 変更せずにdashboard.tsファイルを閉じます。

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

タスク5: Webアプリケーションの実行とアプリケーションのカスケード・スタイル・シートのデバッグ

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

   $ ojet serve
   

   Oracle JETツールは、WebアプリケーションをローカルWebブラウザで実行し、データバインド・マスター・リストを表示できます。「アクティビティ」リストのアクティビティ名の左側に表示されるイメージは、大きすぎるため一部のみが表示されます。

   ブラウザのサイズを変更しても、このサンプル・スクリーンショットのようなページが表示されない場合は、アプリケーション・イメージをproduct_imagesフォルダに抽出したことを確認します。

   

   図master_list_with_error.pngの説明

2. Google Chromeブラウザで、Soccerアクティビティの部分イメージを右クリックし、「検査」を選択します。ブラウザには、HTMLページ・ソースを検査するための開発者ツールが表示されます。

3. 「要素」パネルで、span class="demo-thumbnail"要素を選択します。「スタイル」パネルで、強調表示されたelement.style background-imageスタイルを見つけます。jrsoccerball.jpgイメージのURLを右クリックし、「ソース・パネルで表示」を選択します。

   

   図inspect_image_url.pngの説明

4. 「Chrome DevToolsソース」パネルには、イメージが300 x 300ピクセルであることと、サイズが大きすぎてOracle JETリスト・ビュー・コンポーネントに表示できないことが示されます。フルサイズのイメージからサムネイルサイズのイメージをレンダリングするには、Cascading Style Sheets (CSS)スタイル・クラスを定義します。

   

   図inspect_image_url_contents.pngの説明

5. 開発者ツール・ウィンドウを閉じて、ブラウザでアプリケーションに戻ります。

タスク6: CSSの修正とマスター・リストの表示

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

2. .demo-thumbnailクラス・セレクタのプロパティを定義します。プロパティのリストで、background-repeatプロパティをno-repeatに設定して、イメージを1回のみ表示します。また、プロパティflex-wrapがnowrapに設定されているno-wrapクラス・セレクタも定義します。

   .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;
         }
   
   .no-wrap {
         flex-wrap: nowrap;
         }  
   

   dashboard.htmlファイルで、span要素はクラス・セレクタを参照し、class属性にdemo-thumbnail CSSスタイルを設定してアクティビティ・リスト・イメージをサムネイルとしてフォーマットします。span要素では、background-image CSSプロパティは、現在のアクティビティ親オブジェクトのimageプロパティのURLに基づいてイメージを設定します。

   <span class="demo-thumbnail oj-flex-item" 
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
   

3. app.cssファイルを保存して閉じます。

   ファイルはapp-css-final.txtのようになります。

4. Webブラウザで、ページをリロードします。

   ブラウザには、サムネイルサイズのイメージを含むデータバインド・マスター・リストが表示されます。

   

   図formatted_master_list.pngの説明

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

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

その他の学習リソース

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

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

---

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

Create the master view in an Oracle JET web app

F53180-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.