Rich UI GridLayout

Rich UI グリッド・レイアウトには可変スペースの行と列があり、子ウィジェットが埋め込まれています。各子ウィジェットには layoutData プロパティーがあり、そのプロパティーに値を割り当てることによりウィジェットの位置を指定します。layoutData 設定により、その位置での水平方向および垂直方向のウィジェットの位置合わせを行い、ウィジェットが複数の行と列にわたることができるようにすることもできます。

グリッド・レイアウトは、以下のプロパティーをサポートします。

サポートされる他のプロパティーおよび関数は、『ウィジェットのプロパティーと関数』で説明されています。

グリッド・レイアウトを使用するには、通常は以下のステートメントがすべて必要です。
import com.ibm.egl.rui.widgets.GridLayout;
import com.ibm.egl.rui.widgets.GridLayoutData;
import com.ibm.egl.rui.widgets.GridLayoutLib;
以下の詳細が、グリッド・レイアウトの子の layoutData プロパティーに組み込まれます。
子ウィジェットが全体のレイアウトに影響する可能性があります。
Rich UI エディターは、グリッド・レイアウトを処理する上で多くの点で役立ちます。特に、以下のタスクを実行できます。
ここに述べたエディター機能の詳細については、以下のトピックを参照してください。

以下のユーザー・インターフェースを考えてください。

Rich
UI GridLayout の例

以下に、インターフェースを形成する Rich UI ハンドラーの概要を示します。
handler SingleGridlayout type RUIhandler {initialUI = [ myGridLayout ]... }

   myGridLayout GridLayout{ 
      rows = 4, columns = 4, cellPadding = 4,
      children = [ Button3, Button1, Button2 ]
   };
   ...
end

myGridLayout レイアウトには、4 つの行、4 つの列、および各セルのまわりに 4 ピクセルの余白が含まれています。 3 つの子が指定されており、それらが children 配列内にリストされている順序は重要ではありません。 ただし、ウィジェットが同じ場所を占めることになる layoutData 値を複数のウィジェットが持っている場合、それらのウィジェットのうち最初にリストされているものが表示されます。

それぞれのウィジェットについて、layoutData プロパティーの値のタイプは ANY です。 この時点で、プロパティーは常にタイプ GridLayoutData (後述) のレコードを取ります。

myLayoutData レコードは、Button1 ボタンの layoutData プロパティーに割り当てられます。レコード宣言の例を以下に示します。
myLayoutData GridLayoutData{ row = 1, column = 2 };

Button2 および Button3layoutData プロパティーに必要なレコード宣言は、ウィジェット宣言自体の中にあります。以下に、3 つのボタンすべての宣言を示します。

Button1 Button{ layoutData = myLayoutData, text = "Button1", onClick ::= respond };
Button2 Button{ layoutData = new GridLayoutData{ row = 2, column = 3 },
                text = "Button2" };
Button3 Button{ layoutData = new GridLayoutData{ row = 3, column = 4 },
                text = "Button3" };

グリッド・レイアウトに埋め込まれるウィジェットの layoutData プロパティーにタイプ GridLayoutData のレコードが割り当てられる場合、そのレコードの row フィールドと column フィールドが設定されている必要があり、それらの値がそのレイアウトに適している必要があります。ただし、layoutData プロパティーに NULL を割り当てることが可能で、その場合、埋め込まれたウィジェットは表示されず、レイアウト全体をカスタマイズする幅と高さの計算には含まれません。

レイアウトに対する実行時更新

レイアウトを動的に更新できます。例えば、ユーザーが Button1 をクリックした場合に次のように表示させることができます。

Rich UI GridLayout の例 2

以下に、ユーザーが Button1 をクリックしたときにその表示を発生させる関数を示します。
function respond(e Event in)
   Button2.layoutData = null;
end	

respond 関数の実行後、2 番目の行の高さと 2 番目の列の幅には、グリッド・レイアウト定義で指定されている余白のみが含まれます。 3 番目のボタン (Button3) は左上へ移動しますが、Button1 に対する相対位置は変わりません。

または、ユーザーが Button1 をクリックした場合に次のように表示させることができます。

Rich UI GridLayout の例 3

以下に、変更された respond 関数を示します。
function respond(e Event in)
   myLabel TextLabel {text="replace button 2"};
   myLabel.layoutData = new GridLayoutData {row=2, column=3};
   Button2.layoutData = null;
   myGridLayout.appendChild(myLabel);
end	

この場合、Button2layoutData プロパティーを NULL にすることにより、行 2、列 3 の現在のコンテンツを置き換える必要があります。新規コンテンツは Button2 より広くて短く、3 番目のボタンは右上に移動します。

一般に、グリッド・レイアウトから除外するウィジェットの場合、常に layoutData プロパティーを NULL にします。複数の列または行にわたる子ウィジェットを置き換える場合、そのウィジェットを NULL にすることによりランタイム・エラーを回避できる可能性があります。

スパンと位置合わせを使用する例

以下のユーザー・インターフェースを考えてください。

Rich UI GridLayout の例 4、プレビュー

Rich UI エディターの「設計」タブに示されているように、グリッド・レイアウトには 4 つの行と 3 つの列があります。

Rich UI GridLayout の例 4、設計

インターフェースの以下の側面を考えてみます。
  • 行 1 では、最初の列にラベルがあり、テキスト・フィールドが 2 番目の列から 3 番目の列まで水平方向に拡張されています。
  • 行 2 では、2 番目の列にチェック・ボックスがありますが、3 番目の行まで垂直方向に拡張されています。
  • 行 3 では、ボタンが最初の列から 2 番目の列まで水平方向に拡張されており、それら 2 つの列の中央に揃えられています。
以下に、インターフェースを形成する Rich UI ハンドラーを示します。
handler SingleGridlayout type RUIhandler {initialUI = [ myGridLayout ]... }

  myGridLayout GridLayout{ 
      rows = 4, columns = 3, cellPadding = 4,
      children = [ myLabel, myTextField, myCheckBox, myButton ]
   };

  myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1},
                     text = "Label: " };

  myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2,
                         horizontalSpan = 2 }, text = "Text field"};
	
  myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2, 
                       verticalSpan = 2 }, text="Check box" };

  myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                       horizontalSpan = 2, 
                       horizontalAlignment = GridLayoutLib.Align_Center }, 
                       text="Button" };
end

次のセクションでは、GridLayoutData のフィールドの詳細を説明します。

GridLayoutData

GridLayoutData フィールドは以下のとおりです。
column
ウィジェットがある左端レイアウト列を表す整数。
cellPadding
ウィジェットがそれ自体のために予約する領域の上部、下部、左方、右方の境界線のピクセル数を表す整数。
heightHint
ウィジェットがそれ自体のために予約する領域の高さのピクセル数を表す整数。この値はブラウザーへのヒントで、ブラウザーは異なる値を強制することがあります。例えば以下の場合は、より大きい領域が指定されます。
  • ウィジェットの高さが heightHint の値より大きい。または
  • レイアウト・グリッドの高さが、提示された行の高さより大きい。
horizontalAlignment
ウィジェットがそれ自体のために予約する列内でのウィジェットの水平位置。以下のいずれかの値。
GridLayoutLib.ALIGN_LEFT
列の左側。
GridLayoutLib.ALIGN_CENTER
列の中央。
GridLayoutLib.ALIGN_RIGHT
列の右側。
horizontalSpan
ウィジェットがとる列数 (column フィールドに指定された列を含む)。
row
ウィジェットがある最上部レイアウト行を表す整数。
verticalAlignment
ウィジェットがそれ自体のために予約する行内でのウィジェットの垂直位置。以下のいずれかの値。
GridLayoutLib.VALIGN_TOP
行の上部。
GridLayoutLib.VALIGN_MIDDLE
行の中央。
GridLayoutLib.VALIGN_BOTTOM
行の下部。
verticalSpan
ウィジェットがとる行数 (row フィールドに指定された行を含む)。
widthHint
ウィジェットがそれ自体のために予約する領域の幅のピクセル数を表す整数。この値はブラウザーへのヒントで、ブラウザーは異なる値を強制することがあります。例えば以下の場合は、より幅の広い領域が指定されます。
  • ウィジェットの幅が widthHint の値より大きい。または
  • レイアウト・グリッドの幅が、提示された行の幅より大きい。

フィードバック