Oracle JET Webアプリケーションへのコンテナの追加

イントロダクション

レスポンシブ・ページ・レイアウトは、小さな電話からデスクトップ・モニターまで、様々な画面サイズに合わせて柔軟にスケーリングできます。Oracle JavaScript Extension Toolkit (JET)フレックス・レイアウトには、任意の方向に配置できる子要素があります。画面サイズが変更されると、これらの要素は、レイアウト内の親要素または子要素のオーバーフローを回避するために、未使用のスペースを埋めるように調整し、縮小します。Oracle JETレイアウト・クラスoj-flexおよびoj-flex-itemを使用して、レスポンシブ・ページ・レイアウトを設計するレスポンシブ・コンテナを作成できます。Oracle JETスタイル・クラスoj-panelおよびoj-panel-bgは、コンテナに枠線と色を追加します。これらのスタイル・クラスを使用して、レイアウトの視覚化を支援し、それらを最終アプリケーションで削除できます。

このチュートリアルで作成するWebアプリケーションには、2番目の親コンテナと子コンテナであるアクティビティ・コンテナを囲むメインの親コンテナを含むページ・レイアウト構造があります。2番目の親コンテナには、「アクティビティ・アイテム」コンテナと「アイテム詳細」コンテナという2つの子コンテナがあります。

レスポンシブ・レイアウト・ページのレイアウト・プラン

図Layout-plan.pngの説明

親コンテナは、子コンテナを保持するコンテナです。ただし、子コンテナが子コンテナ(上の親コンテナ2など)を保持している場合は、子コンテナを親コンテナにすることもできます。

作成するページ・レイアウトの次の図で、メインのdiv要素には親コンテナ1が含まれます。親コンテナ1は子コンテナ1と親コンテナ2を囲みます。親コンテナ2には、子コンテナ2と子コンテナ3という2つの子コンテナがあります。

親コンテナと子コンテナを含むレスポンシブ・レイアウト

図responsive-layout-containers.pngの説明

目的

このチュートリアルでは、Oracle JETのレイアウトおよびスタイル・クラスを使用して、ページ・レイアウトをOracle JET Webアプリケーションのレスポンシブ・ページ・レイアウトに変換するためのコンテナおよびパネルを追加します。

前提条件

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

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

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

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

    $ npm list -g @oracle/ojet-cli

    $ npm install -g @oracle/ojet-cli

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

    $ ojet restore

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

タスク2:アクティビティ・コンテナの追加

柔軟なボックス・レイアウトを追加するようにOracle JET Webアプリケーション・レイアウトを変更します。フレックス・レイアウトを作成するには、親div要素にOracle JET oj-flexクラスを追加し、子div要素にoj-flex-itemクラスを追加します。親コンテナ1は、その中の他のすべてのコンテナを囲む親コンテナです。子コンテナ1は最初の子コンテナで、アクティビティ・リストが含まれています。

親コンテナ1と子コンテナ1はアクティビティ・コンテナを形成します

図activity-containers.pngの説明

  1. Oracle JETクックブックを開き、メニュー・バーの「レイアウトとナビゲーション」をクリックし、「フレックス・レイアウト」コンポーネントを選択します。ツールバーで、「APIドキュメント」をクリックし、「フレックス」を選択します。

  2. フレックス・レイアウトAPIドキュメントで、Oracle JETレイアウト・クラスを説明する表をスクロールし、oj-flexクラスについて読み取ります。

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

  4. 「製品情報」見出しh1要素を見つけて、その下にid属性値parentContainer1を持つ外部div要素とOracle JETコンテナ・クラスを追加します。このdiv要素は、その中の他のすべてのコンテナを囲みます。ファイルの最後にある最後の終了</div>の上に閉じる</div>タグを追加します。

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <!-- Parent Container 1 contains all the panels in the app -->
  <div id="parentContainer1" class="oj-flex oj-flex-init">
    <div id="activitiesContainer">
      <h3 id="activitiesHeader">Activities</h3>
      . . .
      </oj-chart>
    </div>
  </div>
</div>

  5. 「アクティビティ」見出しの前にid="activitiesContainer"が含まれるdiv要素を検索し、Oracle JETコンテナ・アイテム・クラスを追加します。

    
<!-- The Activities container displays the Activities list -->
<div id="activitiesContainer" class="oj-flex-item">
  <h3 id="activitiesHeader">Activities</h3>

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

    コードはparent-containers-dashboard-html.txtのようになります。

タスク3:品目詳細コンテナの追加

Oracle JET Webアプリケーションのレスポンシブ・レイアウトを変更して、アイテム詳細コンテナを追加します。親コンテナ2には、2つの子コンテナが含まれています。子コンテナ2は空のままですが、後のチュートリアルでは「アクティビティ・アイテム」リストが表示されます。子コンテナ3には、品目詳細チャートが含まれます。

親コンテナ2、子コンテナ2および子コンテナ3が品目詳細コンテナを形成します

図item-details-containers.pngの説明

  1. id="itemDetailsContainer"のdiv要素を検索します。その上で、parentContainer2値を持つid属性を持つ外部div要素と、Oracle JETコンテナ・クラスおよびコンテナ・アイテム・クラスを追加します。ファイルの2番目から最後の閉じる</div>の上に閉じる</div>タグを追加します。

    <!-- Parent Container 2 surrounds the Item Details container -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .
        </oj-chart>
      </div>
    </div>
  </div>
</div>

  2. id="parentContainer2"のdiv要素の下で、activityItemsContainer値を持つid属性を持つ空のdiv要素とOracle JETコンテナ・アイテム・クラスを追加します。

    <!-- Parent Container 2 surrounds the Activity Items and Item Details child containers -->
    <div id="parentContainer2" class="oj-flex oj-flex-item">
      <div id="activityItemsContainer" class="oj-flex-item">
      </div>
      <div id="itemDetailsContainer">
        <h3>Item Details</h3>
        . . .

  3. 最後に、id="itemDetailsContainer"のdiv要素にOracle JETコンテナ・アイテム・クラスを追加します。

    <!-- Item Details container displays a chart upon selection -->
<div id="itemDetailsContainer" class="oj-flex-item">
  <h3>Item Details</h3>

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

    コードはcontainers-dDashboard-html.txtのようになります。

タスク4:パネルとパネルの色の追加

Oracle JETスタイル・クラスを適用して、Webアプリケーションのコンテナおよびコンテナ・アイテムにパネルおよびパネルの色を追加し、レイアウトを視覚化できるようにします。

  1. id="parentContainer1"のdiv要素を検索し、2つのスタイル・クラスを追加して、枠線と背景色でパネルを指定します。

    <!-- The border and color for Parent Container 1 -->
<div id="parentContainer1" class="oj-flex oj-flex-init oj-panel oj-bg-warning-20">

  2. id="activitiesContainer"のdiv要素を検索し、2つのスタイル・クラスを追加して、枠線と背景色でパネルを指定します。

    <!-- The border and color for the Activities container -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30">
  <h3 id="activitiesHeader">Activities</h3>

  3. id="parentContainer2"のdiv要素を検索し、2つのスタイル・クラスを追加して、枠線と背景色でパネルを指定します。

    <!-- The border and color for Parent Container 2 -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30">

  4. id="itemDetailsContainer"のdiv要素を検索し、パネルとパネルの色を指定する2つのスタイル・クラスを追加します。

    <!-- The border and color for the Item Details container -->
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30">

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

    コードはfinal-containers-dashboard-html.txtのようになります。

タスク5: Webアプリケーションの実行

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

    $ ojet serve

    Oracle JETツールは、ダッシュボード・コンテンツを表示できるローカルWebブラウザでWebアプリケーションを実行します。

    親コンテナと3つの子コンテナを持つレスポンシブ・ページ・レイアウト

    図container-panel.pngの説明

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

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

その他の学習リソース

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

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