抽象エディターを使用する方法: Web トランザクションフォームの設計

レスポンシブ Web アプリケーションを実現し、表示を最適化するには、Web 抽象エディターを使用する必要があります。Web 抽象エディターの主な目的は、レスポンシブ Web アプリケーションの設計を支援することです。
GeneXus でレスポンシブ Web アプリケーションの設計に使用されるコントロールは、レスポンシブテーブルと呼ばれます。これは、抽象レイアウトの主要なコントロールです。
Bootstrap などのフレームワークでは、グリッドというコンテナを利用できます。これはテーブルと似ていますが、画面の幅に合わせて外観が調整されることによって、レスポンシブ Web デザインを実現します。そのため、このコンテナによって、デバイスの種類や画面のサイズに関係なく、ユーザーが読みやすい形式で情報を表示できます。GeneXus のレスポンシブテーブルは、Bootstrap の可変グリッドとして生成されます。
従来のテーブルコントロールとは異なり、レスポンシブテーブルはパーセント値に基づく設計に対応するため、内部のエレメントが常にデバイスの画面に合わせて配置されます。
抽象レイアウト内で異なるレスポンシブテーブルを操作できます。つまり、複数のレスポンシブテーブルをネストでき、すべてのテーブルがエディターの同じウィンドウ内に表示されます。
パーセント値は、4 つの異なる画面サイズに対応するように指定します (画面の幅によって指定)。

極小サイズのデバイス (xs) (768 px 未満のスマートフォン)
小さいサイズのデバイス (sm) (768 px 以上のタブレット)
中程度のサイズのデバイス (md) (992 px 以上のデスクトップ)
大きいサイズのデバイス (lg) (1200 px 以上のデスクトップ)

[ Responsive Sizes ] プロパティを使用すると、さまざまな画面に対応する設定を行うことができます。
ここでは、Web トランザクションフォーム用にレスポンシブ Web デザイン (RWD) を作成する非常にシンプルな例を使用して、Web 抽象エディターの使用方法を説明します。
まず、「RWD の使用: 既定値について」の内容を読むことをお勧めします。

課題

主な目的は、どのような画面サイズ (どのようなデバイス) にも適応できるように Web トランザクションを設計することです。
Web フォームが既定に設定されている、次のような Airport トランザクションがあるとします:

Airport Web トランザクションの既定のフォーム

一般的に、携帯電話などの小さな画面では、1 つの列だけに情報を配置 (積み重ねて配置) するのが適しています。しかし、タブレットやデスクトップの画面など、よりサイズの大きな画面の場合は、情報を横方向に表示できます。さらに、タブレットやデスクトップの画面にはさまざまな情報を表示できますが、小さな画面の場合は、あまり重要でない情報は省略する方が適切です。
GeneXus で画面の種類に合わせて異なる設計を行うには、抽象エディターを使用する必要があります。
この例では、画面が小さいデバイス (タブレット) 用にコントロールの配置を変更するとします。すべてのコントロールを 1 つの列に積み重ねて配置するのではなく、2 つの列に配置します。

次の手順に従います。

1. エレメントをドラッグして新しい列を作成します。
新しい列をレスポンシブテーブルに追加するには、コントロールをドラッグアンドドロップする必要があります。

レイアウトへの列の追加

2. フォームを右クリックし、[ Responsive Sizes ] プロパティを選択します。コンボボックスの [ 小 (タブレット >= 768 px) ] を選択し、 [ AirportId ] セルをクリックします。その後、右側のコンボボックスを使用して幅を 50% に設定します。残りの 50% の幅は AirportName が使用します。

列の幅の設定

3. この画面サイズ用に残りの列設定を続けます。

タブレット用の最終的な Airport トランザクションフォーム設計

フォーム内のコントロールの位置を変更すると、セルの [ Responsive Sizes ] などのレイアウト設定を調整しなければならない場合があります。F5 キーを押す前にフォームの外観を確認するには、Web フォームのプレビューを使用すると大変便利です。

4. Airport トランザクションの [ これだけをビルド ] を実行した後、タブレットで実行すると次のように表示されます:

Airport トランザクションの実行

詳細については次のトピックを参照してください: RWA でのレイアウトの調整

参考情報

GeneXus のレスポンシブ Web デザイン