レスポンシブテーブル

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

レスポンシブテーブルのコントロール

1. テーブルのように見えますが、セルの幅はパーセント値で指定されます。

パーセント値は、4 つの異なる画面サイズに対応するように指定します (画面の幅によって指定)。

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

[ Responsive Sizes ] プロパティ (X Evolution 3) を使用して、さまざまな画面に合わせた設定を行うことができます。
2. セルを複数の行にまたがって拡張することはできません。行幅は常に 1 となるため、変更できません。
3. 各サイズ (xs、sm、md、lg) の値は、各列のオフセット用に指定できます。さらに、列は画面サイズに応じて入れ替えることができます (移動)。
4. レスポンシブテーブルでは、セル内のコントロールの外観に関するプロパティを、テーマクラスを使用して管理する必要があります。

レスポンシブテーブルのコントロール

レスポンシブテーブルの特徴

1. DIV エレメントとして生成

2. レスポンシブテーブルとテーブルコントロールの動作の違い

3. 画面サイズに応じて、画面のさまざまな部分の表示または非表示が可能

レスポンシブテーブルのレイアウトの問題

[ すべての画面サイズで既定値を使用する ] ボタン

[ 既定 ] チェックボックス

参考情報