Web クライアントのページ レイアウト
この記事では、Web クライアントのレイアウトについて説明します。 レイアウトは、ページ上にコントロールを表示する方法を指定するデザイン プロセスです。
はじめに
レイアウトは、ページ上のコントロールを Web クライアントで表示する方法を指定するデザイン プロセスです。 レイアウトはコンテナー コントロール内で発生します。 次のテーブルに、コンテナー コントロールの一覧を示します。
| コンテナー | 説明 |
|---|---|
| Form.Design | ページのルート。 これは、特殊なコンテナーとして機能します。 |
| グループ化 | 汎用コンテナー コントロール。 グループ コントロールは必要に応じて入れ子にできます。 |
| タブ | TabPage コントロールを含み、タブ、クイックタブ、垂直タブ、およびパノラマなど多くの Tab.Style 値を持つコントロールです。 |
| TabPage | 各 TabPage コントロールの表示形式は、その Tab.Style 値によって異なります。 |
| ボタン グループ | ボタンを含むグループ コントロールの特殊なタイプ。 |
グリッドとは、柔軟なサイズ変更 (SizeToAvailable) などいくつかのコンテナ動作を持つ特殊なタイプのコントロールです。 ただし、グリッドには特別な視覚化があり、汎用のコンテナー コントロールではありません。
レイアウト: Dynamics AX 2012 対財務と運用アプリ
Dynamics AX 2012 でのレイアウト
Microsoft Dynamics AX 2012 では、コンテナーのコントロールの配置はほとんど必ず縦で、列を手動で設定して水平に拡大します。
例
列=1 1 2 3 列=2 1 4 2 5 3 Dynamics AX 2012 では、高さおよび幅プロパティを使用してサイジングできます。 高さおよび幅が自動と設定されている場合、サイズは子コントロールが必要とする大きさになります。 高さおよび幅が列に設定されている場合、コンテナーは親コンテナー内に収まる大きさになります。 既定では、高さと幅はすべてのコンテナーに対して自動に設定されています。
財務と運用アプリでのレイアウト
財務と運用アプリでは、レイアウトが Dynamics AX 2012 でのレイアウトを制御する同じ基本的なプロパティによって制御されます。 ただし、応答性の良いレイアウトをサポートするため、追加のオプションが追加されました。 特に、ページのレイアウトは次の要因に基づいています。
- ArrangeMethod プロパティによって指定される配置メソッド。
- 列プロパティで指定された列。
- HeightMode、WidthMode、Height、Width の各プロパティにより指定されているサイズ変更。
ArrangeMethod プロパティ
ArrangeMethod プロパティは、コンテナーの基準配置方法を指定します。 このプロパティでは、AX 2012 からすべてのオプションが財務と運用アプリに設定されています。 パノラマのタイル レイアウトを対象にした HorizontalWrap も含まれています。 次のテーブルでは、ArrangeMethod プロパティのさまざまなオプションについて説明しています。
| オプション | 説明 |
|---|---|
| 垂直 | コントロールは垂直に配置されています。 列も使用されている場合は、コントロールは生成された列の内部で垂直方向に配置されます。 このオプションは、グループおよび Tab.Style が パノラマ以外の値に設定されている TabPages の既定値です。 |
| HorizontalLeft | コントロールは水平方向に配置され、親コンテナーの内部で左揃えおよび下揃えになります。 |
| HorizontalRight | コントロールは水平方向に配置され、親コンテナーの内部で右揃えおよび下揃えになります。 |
| HorizontalWrap | コントロールは水平方向に折り返された固定幅の列の内側に配置されます。 このオプションは通常、パノラマ セクションのタイル レイアウトに使用されます。 これは Tab.Style がパノラマに設定されている TabPages の規定値です。 |
ColumnsMode プロパティ
ColumnsMode プロパティの場合、財務と運用アプリにはレスポンシブ レイアウトをサポートする入力オプションがあります。 プロパティをこの値に設定すると、列は必要に応じて自動的にフローされます。 次のテーブルでは、ColumnsMode プロパティのさまざまなオプションについて説明しています。
| オプション | 説明 |
|---|---|
| 塗りつぶし | コンテナー タイプに応じて、使用可能な水平領域または垂直領域を満たす列が生成されます。 コンテナーがパノラマ スタイル タブである場合、このオプションにより、縦軸に沿ってコンテナーを塗りつぶす列が生成されます。 他のすべてのコンテナー (グループ、タブ スタイルのタブ、およびタブの他のすべてのスタイル) では、このオプションは水平軸に沿ってコンテナーを塗りつぶす列を生成します。 |
| 開始日固定 | 列 プロパティが生成する必要がある列の数を指定します。 コントロールは列の間で均等に分散され、順序が維持されます。 コントロールは、列の間で均等に分配できない場合、一番左の列は追加のコントロールが最初に表示されます。 このオプションは、すべてのコントロールの既定値です。 |
HeightMode/WidthMode プロパティ
財務と運用アプリでは、サイズ変更はサイズ プロパティの 2 つのペアを使用して行われます: WidthMode と Width、および HeightMode と Height。 次のテーブルは、これらのプロパティのさまざまなオプションについて説明しています。
| オプション | 説明 |
|---|---|
| SizeToAvailable | 親コンテナーの内部の垂直 (または水平) 軸に沿って、使用可能な領域を入力します。 コンテナーに高さ (または幅) を提供することができる兄弟コンテナーが存在している場合を除いて、親コンテナーに SizeToContent 高さ (または幅) があり、子コンテナーの高さ (または幅) も SizeToContent である場合。 このオプションは、(すべてのスタイルの) グリッドとタブの既定値です。 |
| SizeToContent | コンテナーの高さ (または幅) は、その内容の高さ (または幅) にする必要があります。 このオプションは、グループとタブ以外のすべてのコントロールの既定値です。 常に拡張されていない FastTabs も、SizeToContent 高さがあります。 |
| マニュアル | 高さ (または幅) は手動でサイズ設定されます。 HeightMode (または WidthMode) を手動に設定してから、高さ (または幅) を固定ピクセル数に設定します。 注記: Microsoft では、手動の高さおよび幅はフォーム密度の変更には対応していないため、使用しないようにお勧めします。 |
これらのプロパティに自動の値を使用すると、動作は自動的に決定されます。 通常、これらのプロパティの自動の値は、AX 2012 の場合と同様に SizeToContent の値と同じ動作になります。
ArrangeMethod および列のプロパティの相互関係
ArrangeMethod=HorizontalLeft または HorizontalRight の場合、アイテムが厳密な水平配置でレイアウトされ、折り返しが使用されないため、列プロパティは無効です。 ArrangeMethod=縦の場合、列は垂直に配置され、コントロールは列 (Fixed) 間で均等に分散されるか、または利用可能な水平または垂直空間 (入力) を埋めるために分散されます。 ArrangeMethod=HorizontalWrap の場合、列が配置され、280 px の固定列幅で水平ラッピングが使用されます。 このオプションは通常、タイル レイアウトをラップするために使用されます。
例
ArrangeMethod=HorizontalWrap
ArrangeMethod=HorizontalWrap および 列=1
| 1 2 |
| 3 4 |
| 5 6 |
| 7 8 |
| 9 |
ArrangeMethod=HorizontalWrap および列=2
| 1 2 | 6 7 |
| 3 4 | 8 9 |
| 5 |
ArrangeMethod=HorizontalWrap および列=塗りつぶし
この例では、コンテナーの高さに合わせることができるのは 3 行の品目だけであると仮定します。
| 1 2 | 7 8 | 13 14 |
| 3 4 | 9 10 | 15 |
| 5 6 | 11 12 |
ArrangeMethod=Vertical
ArrangeMethod=垂直および列=1
| 1 |
| 2 |
| 3 |
| ... |
ArrangeMethod=垂直および列=2
| 1 | 5 |
| 2 | 6 |
| 3 | 7 |
| 4 | 8 |
ArrangeMethod=垂直および列=塗りつぶし
この例では、コンテナーの高さに合わせることができるのは 3 行の品目だけであると仮定します。
| 1 | 4 | 7 |
| 2 | 5 | 8 |
| 3 | 6 |
クイックタブ上でArrangeMethod=垂直および列=塗りつぶし
この例では、クイック タブの幅が 4 列に収まると仮定します。
| 1 | 3 | 5 | 7 |
| 2 | 4 | 6 | 8 |
Breakable グループ
ColumnsMode を塗りつぶしに設定して列を動的に作成するとき、利用可能な領域の量に基づいて、フィールドのグループを複数の列に分割できます。 開発者はグループ コントロールの Breakable プロパティで、グループ内のコントロールが列間で配布されないことを確認できます。 このプロパティの既定値は、はい で、グループの内容がグループ間で分割できることを示します。 常にグループ化しておくには、Breakable を いいえ に設定します。 Breakable は入れ子のグループの最初のレベルにのみ適用されることに注意してください。
レイアウト プロパティを使用するためのガイドライン
ColumnsMode=Fill
- ColumnsMode を入力に設定したコンテナーを入れ子にしないでください。 空き領域を応答として埋めるコントロールやフィールドの直接の親コンテナーでのみ ColumnsMode を Fill に設定します。
- ColumnsMode を入力に設定したコンテナーのどの子コントロールでも、HeightMode を SizeToAvailable に設定しないでください。 ColumnsMode=Fill は、列間のすべてのコントロールの平均の高さを計算して、可能な限り均等に調整しようとします。 しかし、レイアウト CSS および計算は SizeToAvailable の子を処理できず、およびこの設定は必ずしも意味がありません。
- ColumnsMode を入力に設定したコンテナーのどの子コントロールでも、WidhMode を SizeToAvailable に設定しないでください。 それ以外の場合、子コントロールは利用可能なすべての幅を占め、すべてのコントロールが 1 つの列に表示されます。
- ColumnsMode=入力のコンテナーは、WidthMode を SizeToAvailable (タブやグループなどの入力幅コンテナーを使用している場合) または HeightMode を SizeToAvailable (パノラマ セクションなどの入力高さコンテナーを使用している場合) に設定する必要があります。
HeightMode/WidthMode=SizeToAvailable
- WidthMode=SizeToAvailable を使用する場合は、フォーム内の親コンテナーに、WidthMode を SizeToContent にではなく、SizeToAvailable に設定するよう確認します。 SizeToContent 内部のコンテナー SizeToAvailable コンテナー を上書きして SizeToContent コンテナーになります。