コンポーネント・コンテナを様々な画面サイズに書式設定します。

はじめに

このチュートリアルでは、Oracle JETヘルパー・クラスを使用して、Oracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションを様々な画面サイズをサポートするようにカスタマイズする方法を学習します。

Oracle JETヘルパー・クラスを使用して、様々な画面サイズの条件を設定できます。フレックス・レイアウトでは、コンテナ内のアイテムが拡大または縮小され、コンテナ・スペースが一杯になります。Oracle JETには、小、中、大および余分な画面サイズ用のスタイル・クラスが用意されています。選択した画面サイズにコンテンツが使用する論理列の数を1から12に指定することで、コンテンツに割り当てられる最小画面幅を設定できます。画面サイズを選択して、より大きな画面サイズ条件を省略した場合、条件は選択した画面サイズおよびすべての大きい画面サイズに適用されます。条件でキーワードonlyを指定して画面サイズを選択した場合、条件はその画面サイズにのみ適用されます。仮想DOMアプリケーションでヘルパー・クラスを使用すると、テキストと要素の表示と配置を制御したり、パネルの周囲のパディングをカスタマイズしたり、様々な画面サイズの列を設定できます。

画面サイズは12列に論理的に分割されます。

目的

このチュートリアルでは、仮想DOMアプリケーションにヘルパー・クラスを追加して、テキストの配置の指定、パネルへのパディングの追加、および様々な画面サイズの列の設定を行います。

前提条件

タスク1: コンテンツ連携のヘルパー・クラスの追加

div要素にOracle JETヘルパー・クラスを指定して、アクティビティ・コンテナ・コンポーネントでのコンテンツの配置を変更して、小さい画面サイズの使用時にコンテンツの配置を調整します。

  1. Oracle JETクックブックを開き、メニュー・バーの「フレームワーク」をクリックします。次に、「CSSユーティリティ」をクリックし、「レイアウト」をクリックして、サイドバーで「テキスト終了」デモを選択します。

  2. テキスト終了のOracle JETクックブックのデモで、oj-sm-only-text-align-endスタイル・クラスを実装して、テキスト・コンテンツを小さな画面の末尾に位置合せする方法を学習します。小さい画面をデモンストレーションするには、「電話ポートレート」アイコンをクリックし、S align endのレスポンシブ動作を表示します。

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

  4. ActivityContainer関数定義で、div (id="activitiesContainer")を検索し、oj-sm-only-text-align-endレスポンシブ・ヘルパー・スタイル・クラスを追加します。

    <div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">

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

タスク2: パディング用のヘルパー・クラスの追加

Oracle JETレスポンシブ・スペーシング・スタイル・クラスを使用して、親コンテナ2コンポーネントとその子コンポーネントであるアクティビティ・アイテム・コンテナおよびアイテム詳細コンテナにパディングを追加します。親のdiv要素でレスポンシブ・スペーシング・クラスを指定すると、パディング・スタイルはその親のすべての子div要素に適用されます。

  1. Oracle JETクックブックを開き、メニュー・バーの「フレームワーク」をクリックします。次に、CSSユーティリティをクリックし、「マージンとパディング」をクリックして、サイドバーでレスポンシブ・スペーシング・デモを選択します。

  2. レスポンシブ・スペーシングのOracle JETクックブックのデモで、レスポンシブ・スペーシング・クラスを実装して、様々な画面サイズのコンテナにパディングを追加する方法を学習します。

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

  4. ParentContainer2関数定義で、div (id="parentContainer2")を検索し、oj-lg-padding-6x-horizontalレスポンシブ・スペーシング・クラスを追加します。

    <div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal">

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

  6. ActivityContainer関数定義で、div (id="activitiesContainer")を検索し、oj-sm-padding-4x-startレスポンシブ・スペーシング・クラスを追加します。

    <div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start">

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

  8. ActivityItemContainer関数定義で、div (id="activityItemsContainer")を検索し、oj-sm-padding-4x-startレスポンシブ・スペーシング・スタイル・クラスを追加します。

    <div  id="activityItemsContainer"
      class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start">

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

  10. ItemDetailContainer関数定義で、div (id="itemDetailsContainer")を検索し、oj-sm-padding-4x-startレスポンシブ・スペーシング・スタイル・クラスを追加します。

    <div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start">

  11. 開いているファイルを保存して閉じます。

タスク3: 様々な画面サイズの列の設定

コンポーネントのコンテナdiv要素で、Oracle JETグリッド・レイアウト・スタイル・クラスを指定します。これらのスタイル・クラスを使用すると、指定した画面サイズでコンテナに割り当てられる最小列幅を設定できます。

  1. Oracle JETクックブックを開き、メニュー・バーの「レイアウトとナビゲーション」をクリックします。次に、「グリッド」をクリックし、サイドバーで「基本」デモを選択します。

  2. レスポンシブ・グリッド・レイアウト・クラスのOracle JETクックブックのデモでは、12列グリッドの概念と、これらのスタイル・クラスを実装して、様々な画面サイズのレスポンシブ動作を仮想DOMアプリケーションに追加する方法を学習します。

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

  4. ActivityContainer関数定義で、div (id="activitiesContainer")を検索し、様々な画面サイズの列の最小数を指定するoj-md-4およびoj-sm-12サイズ設定スタイル・クラスを追加します。

    <div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start oj-md-4 oj-sm-12">

    クラスoj-sm-12は、divコンテナを小さい画面で12列の幅にし、oj-md-4は、中または大きい画面サイズでdivコンテナを4列の幅にします。

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

  5. JET-Virtual-DOM-app/src/components/ActivityItemディレクトリに移動し、エディタでActivityItemContainer.tsxを開きます。id="activityItemsContainer"のdivに、oj-md-6およびoj-sm-12スタイル・クラスを追加します。

    <div id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">

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

  6. JET-Virtual-DOM-app/src/components/ItemDetailディレクトリに移動し、エディタでItemDetailContainer.tsxを開きます。id="itemDetailsContainer"のdivに、oj-md-6およびoj-sm-12スタイル・クラスを追加します。

    <div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start oj-md-6 oj-sm-12">

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

  7. JET-Virtual-DOM-app/src/componentsディレクトリから、エディタでParentContainer2.tsxを開きます。id="parentContainer2"のdivに、oj-md-8およびoj-sm-12スタイル・クラスを追加します。

    <div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">

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

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

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

    npx ojet serve

    Oracle JETツールは、ローカルWebブラウザで仮想DOMアプリケーションを実行します。

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

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

    デバイスモードのツールバーロケータ

  4. 次に、「ディメンション」ドロップダウン・メニューから「ピクセル7」などの小さい画面サイズのデバイスを選択して、アクティビティ・コンテナ・コンポーネントのアクティビティ・リストおよびヘッダーのコンテンツ配置の変更を確認します。

    アクティビティ・コンテナ・コンテンツを右揃え

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

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

次のステップ

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

このチュートリアルは、モジュールのレスポンシブ・デザインの一部です。

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

その他の学習リソース

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

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