ページ・レイアウトの設定

すべてのページに優先レイアウトがあり、このレイアウト内にレイアウト・コンテナおよびコンポーネントを追加してページを設計できます。

ページ(キャンバス上のコンポーネントが選択されていない場合)を選択する場合は、プロパティ・ペインの「優先レイアウト」オプションを使用してページのレイアウトを設定: グリッド (デフォルト)、フレックスまたはブロック。各ページ・レイアウトの概要を次に示します:

レイアウト・タイプ	イメージ	説明
フレックス		フレックス・レイアウトでは、任意のサイズの行にコンポーネントを追加できます。フレックス・レイアウトで、任意の方向にフレックス・コンテナの子をレイアウトでき、子は、未使用の領域を埋めるために拡大するか、または親がオーバーフローしないように縮小します。ボックスをネスト(たとえば、垂直内に水平または水平内に垂直)して、二次元のレイアウトを作成することもできます。フレックス・レイアウトは最も柔軟性があり、プロパティ・ペインで配置、理由などについて複数のプロパティを調整できます。
グリッド(デフォルト)		グリッド・レイアウトはフレックス・レイアウトに基づいて作成されますが、配置時に要素の配置を容易にする12列のグリッドと行を追加します。アプリケーション内のページに、デバイスの表示領域のサイズに基づいてグラフィカルにサイズ変更するレスポンシブ・デザインを採り入れることができます。
ブロック		ブロック・レイアウトでは、ページにドロップするコンポーネントがブロックとして表示されます。各コンポーネントは、新しい行で開始され、可能なかぎり水平領域を取り上げます。このレイアウトは、アプリケーションにすでに手コード・ページが含まれている場合や、いくつかのコンポーネントを新しいページにドロップしてレイアウトを手動で調整する場合に便利です。

ページに追加するすべてのコンポーネントは、ページ・レイアウトの行、またはページ・レイアウトに配置した「レイアウト・コンポーネント」に配置されます。レイアウト・コンポーネントは、事前定義されたOracle JETコンポーネントおよびパターンです。これにより、初期データ表示を制御でき、ユーザーはセクションを展開したり、タブを選択したり、ダイアログおよびポップアップを表示することで、追加のコンテンツにアクセスできます。コンポーネント・パレットの複数のレイアウト・カテゴリで使用できます。これらは、キャンバスまたは構造ビューにドラッグ・アンド・ドロップできる様々なコンテナおよびコンポーネントです。具体的には、縮小可能な子要素のセットを表示するアコーディオン、様々なコンテンツ・セクション間をナビゲートするナビゲーション・リスト、タイルのグリッドに子を置くメーソリ・レイアウトなど、設計スタイルに役立つように設計されています。一般的なレイアウト・コンテナおよびコンポーネントのリストを次に示します:

コンテナ・コンポーネント	説明
フレックス・コンテナ	フレックス・コンテナは柔軟なコンテナであり、使用可能な領域の使用を最適化するレスポンシブ・デザインに役立ちます。
グリッド・コンテナ	グリッド・コンテナは12-columnグリッドで、グリッドに応じてコンポーネントを正確に配置する場合に役立ちます。
バー・コンテナ	バー・コンテナは3セクション・レイアウトで、コンテンツにサイズ設定された開始および終了セクションと、拡大する中央セクションが含まれます。
フォーム・レイアウト	フォーム・レイアウトは、フォームで一般的に使用されるラベルと入力のペアを表示するように最適化されています。
メーソンリ・レイアウト	石積みレイアウトは、任意のコンテンツを含むタイルのレスポンシブ・グリップです。プロパティ・ペインで各タイルのサイズを指定できます。

様々なレイアウト・コンポーネントの使用方法の例は、「Oracle JET Developerクックブック」の「レイアウト& Nav」セクションを参照してください。

ページにレイアウト・コンテナまたはコンポーネントを追加するには:

コンポーネント・パレットからレイアウト・コンテナまたはコンポーネントをドラッグし、キャンバスに配置します。

コンテナをキャンバスにドラッグすると、コンポーネントを配置できるロケーションがキャンバス上でハイライト表示されます。既存の行にコンポーネントを配置しない場合、コンポーネントを含む新しい行がページに配置されるときに作成されます。たとえば、グリッド・レイアウトでフレックス・コンテナをドラッグするときのキャンバスは次のようになります:

図page-designer-components-addlayout.pngの説明

ブロック・レイアウトを使用するページで同じコンポーネントをドラッグする場合、ビューは次のようになります:

図page-designer-components-blocklayout.pngの説明

構造ビューのグリッド・コンテナおよびメーソン・レイアウト・コンポーネントが行に自動的に囲まれないことに注意してください。これは、グリッド・レイアウトやフレックス・レイアウトとは異なり、ブロック・レイアウトを使用するページで削除されたコンポーネントは、グリッド行またはフレックス行に自動的にラップされないためです。

ページに新規行を作成し、複数のレイアウトを行に配置し、レイアウトをネストすることによって、ページ内のレイアウト・タイプを組み合せることもできます。ページ内の各行には、フレックス、グリッドまたはバー・コンテナを設定できます。要素をキャンバス上にドラッグすると、行の使用可能なすべての列に合わせて要素が展開されます。他の要素には調整可能なデフォルトの列スパンがあります。
「
図layout-combined.pngの説明」
コンポーネントを選択し、プロパティ・ペインでそのプロパティを変更します。レイアウトの各行の表示設定を変更して、行内のコンポーネントのレイアウトを制御できます。

「図layout-components-properties.pngの説明」

追加のコンポーネントをコンテナにドラッグしたり、既存の行の上または下に配置して新しい行を作成できます。