RWA でのレイアウトの調整

レスポンシブ Web アプリケーションでは、最終的な画面サイズに応じて、異なる方法でフォームのエレメントが配置されます。主な目的は、さまざまな画面サイズにおいて、ユーザーが読むことのできる形式ですべての情報が提供されるようにレイアウトを調整することです。
ここでは、RWD を作成するために、Web 抽象エディターの使用方法 (フォーム内のエレメントを調整する方法) について例を挙げて説明します。

課題

航空券予約に関するデータと予約確認ボタンを表示する、さまざまなデバイスに対応した Web パネルフォームを設計するのが目的です。
次の図は、携帯電話およびデスクトップコンピューターに表示される最終的な画面を示しています。

図 1

通常、携帯電話などの小さな画面では、情報を表示する列を 1 列だけにする (列を積み重ねて表示する) のが最良の方法です。タブレットやデスクトップなどのワイドスクリーンでは、情報を横方向に表示すると分かりやすくなります。また、タブレットやデスクトップの画面の場合は、より多くの情報を表示できます。
GeneXus で画面のタイプに応じた設計を行うには、Web 抽象エディターを使用します。

手順

ここで示す例の抽象レイアウトは次のようになります:

図 2

1. レスポンシブテーブルを別のレスポンシブテーブル内に定義します。

2 つのレスポンシブテーブルを使用して、一方のテーブルをもう一方のテーブルにネストしました。"InnerTable" には旅行の情報と確認ボタンが表示されます。外側のテーブルには、InnerTable と &AttractionThumbnail の写真が含まれます。これにより、行スパンが n 行のセルに写真を配置できます。

2. 外側のレスポンシブテーブルの設定を行います。

最初に、外側のテーブルを設計します。レスポンシブテーブルの [ Responsive Sizes ] プロパティ (X Evolution 3) をクリックします。
画面サイズに応じて、 [ Width ] 、 [ Offset ] 、 [ Visible ] 、および [ Move ] の各プロパティを設定するためのセルが 2 つあります。

図 3

極小サイズのデバイス (768 ピクセル未満) の場合は、&AttractionThumbnail セルと InnerTable の幅を 100% に設定します。つまり、&AttractionThumbnail セルと InnerTable は縦に並んで表示されます。

図 4

小サイズのデバイス (768 ピクセル以上) では、&AttractionThumbnail の幅が 33% に設定され、InnerTable の幅が 67% に設定されます。図 1 を参照してください。
幅はコンボボックスにパーセント値で表されます。コンボボックスから選択できる値は、Bootstrap のグリッドの列の配分と一致する値です。つまり、パーセント値は 100% を 12 分割した値です。1 つの行のセルの幅の合計は 100% 未満にする必要があります。このように設定しないと、行に収まらないセルが下に移動されます。
この例では (図 2 を参照)、抽象レイアウトにおいて、&UserLastname が &ReservationDate の横にある場合でも、実行時には、コントロールの位置はそれらに設定された幅によってのみ決まります。幅の合計が 100% より大きい場合は、コントロールが縦に並んで表示されます。

3. "InnerTable" の設定: ボタンの縦位置を揃えます。

&AttractionName、&CountryName、および &CityName の各コントロールはすべて、自動ラベルを使用してフォームにドラッグされました ( [ Label Position ] プロパティの値は Left に設定されます):

図 5

結果として、ラベルに割り当てられる幅と、小サイズ画面のデバイスの入力コントロールに割り当てられる幅は自動的に決まります。ラベルについては、既定で幅が 25% になります。小サイズ画面のデバイスの入力コントロールについては、幅が 75% になります。
そのため、確認ボタンとラベルの縦位置を揃えるには、ボタンに対して 25% のオフセットを設定する必要があります:

図 6

4. "InnerTable" の設定: 携帯電話の画面で、編集コントロールのラベルを入力コントロールの上に揃えます。

携帯電話 (極小サイズの画面のデバイス) の場合は、編集コントロールのラベルを、入力コントロールの横ではなく上に配置することをお勧めします。
この例に示すとおり、ラベルは自動で、小サイズの画面やワイドスクリーン (768 ピクセル以上) の場合は、既定で 25% のセルの幅が割り当てられます。
つまり、小サイズの画面 (768 ピクセル未満) の場合は、ラベルおよび入力コントロールには設定が指定されないので、100% の行の幅が使用されます。
極小サイズの画面では、図 1 のような表示になり、ラベルが上に配置されます。
画面サイズの設定は、その画面サイズ以上の画面に適用されます (その画面より大きいサイズの画面用に明確な設定が行われていない場合)。その画面よりも小さいサイズの画面用の設定が指定されていない場合は、既定値が 100% になります。これは Bootstrap の動作に基づいています。
この例では、自動ラベルの代わりに、ラベル用に追加のセルを使用することもできます。その場合は、ラベルの幅と入力コントロールの幅を個別に指定します。

参考情報

レスポンシブ Web アプリケーションを設計する方法: フォーム内のエレメントの非表示
レスポンシブ Web アプリケーションを設計する方法: グリッド内の列の非表示
抽象エディターを使用する方法: レスポンシブテーブル内のセルの非表示
抽象エディターを使用する方法: Web トランザクションフォームの設計
レスポンシブアプリケーションでメニューを表示する方法
RWA のセル幅を変更する方法