Rich UI グリッド・レイアウトには可変スペースの行と列があり、子ウィジェットが埋め込まれています。各子ウィジェットには layoutData プロパティーがあり、そのプロパティーに値を割り当てることによりウィジェットの位置を指定します。layoutData 設定により、その位置での水平方向および垂直方向のウィジェットの位置合わせを行い、ウィジェットが複数の行と列にわたることができるようにすることもできます。
.EglRuiGridLayout table{
border-collapse: collapse;
}
サポートされる他のプロパティーおよび関数は、『ウィジェットのプロパティーと関数』で説明されています。
import com.ibm.egl.rui.widgets.GridLayout;
import com.ibm.egl.rui.widgets.GridLayoutData;
import com.ibm.egl.rui.widgets.GridLayoutLib;
以下のユーザー・インターフェースを考えてください。

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 GridLayoutData{ row = 1, column = 2 };
Button2 および Button3 の layoutData プロパティーに必要なレコード宣言は、ウィジェット宣言自体の中にあります。以下に、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 をクリックした場合に次のように表示させることができます。

function respond(e Event in)
Button2.layoutData = null;
end
respond 関数の実行後、2 番目の行の高さと 2 番目の列の幅には、グリッド・レイアウト定義で指定されている余白のみが含まれます。 3 番目のボタン (Button3) は左上へ移動しますが、Button1 に対する相対位置は変わりません。
または、ユーザーが Button1 をクリックした場合に次のように表示させることができます。

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
この場合、Button2 の layoutData プロパティーを NULL にすることにより、行 2、列 3 の現在のコンテンツを置き換える必要があります。新規コンテンツは Button2 より広くて短く、3 番目のボタンは右上に移動します。
一般に、グリッド・レイアウトから除外するウィジェットの場合、常に layoutData プロパティーを NULL にします。複数の列または行にわたる子ウィジェットを置き換える場合、そのウィジェットを NULL にすることによりランタイム・エラーを回避できる可能性があります。
以下のユーザー・インターフェースを考えてください。

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

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 のフィールドの詳細を説明します。