Rich UI GridLayout
Rich UI グリッド・レイアウトには可変スペースの行と列があり、子ウィジェットが埋め込まれています。各子ウィジェットには layoutData プロパティーがあり、そのプロパティーに値を割り当てることによりウィジェットの位置を指定します。layoutData 設定により、その位置での水平方向および垂直方向のウィジェットの位置合わせを行い、ウィジェットが複数の行と列にわたることができるようにすることもできます。
- children。ウィジェットの配列を保持します (『ウィジェットのプロパティーと関数』を参照)。
- columns。レイアウト内の列数を示す整数値を保持します。
- row。レイアウト内の行数を示す整数値を保持します。
- cellPadding。子ウィジェットとその親の間のピクセル数を識別する整数値を保持します。この場合、ウィジェットと gridLayout セルの間です。後述するように、子ウィジェット自体がさらに余白を提供できます。セル間の余白の埋め込みをなくす場合、Rich UI ハンドラーによって参照される CSS ファイルに以下のコードを追加します。
.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;
- ウィジェットがレイアウト内にそれ自体のために予約する行と列の位置。
- ウィジェットが占める行数と列数。
- ウィジェットがそれ自体のために予約するセル内でのウィジェットの水平位置 (左、中央、または右)。
- ウィジェットがそれ自体のために予約するセル内でのウィジェットの垂直位置合わせ (上部、中央、または下部)。
- 余白の役割を果たすピクセル数。これは、ウィジェットがそれ自体のために予約する領域のまわりの余分なスペースです。
- レイアウト行の高さは、その行で最も高いウィジェットに必要な高さ (すべての余白を含む) に等しくなります。ただし、複数行にわたるウィジェットは、どの列の高さの計算にも寄与しません。
- レイアウト列の幅は、その列で最も広いウィジェットに必要な幅 (すべての余白を含む) です。ただし、複数列にわたるウィジェットは、どの列の幅の計算にも寄与しません。
- パレットからグリッド・レイアウトの特定のセルにウィジェットをドラッグ・アンド・ドロップする。
- セル間でウィジェットを移動する。
- 「データ」ビューからレコードをドラッグ・アンド・ドロップする。
- 検証などの書式動作を提供する EGL コードが自動的に作成されるようにする。
- 『Rich UI エディターの概要』
- 『Rich UI エディターへのデータのドラッグによるウィジェットの作成』
- 『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 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 つの列があります。

- 行 1 では、最初の列にラベルがあり、テキスト・フィールドが 2 番目の列から 3 番目の列まで水平方向に拡張されています。
- 行 2 では、2 番目の列にチェック・ボックスがありますが、3 番目の行まで垂直方向に拡張されています。
- 行 3 では、ボタンが最初の列から 2 番目の列まで水平方向に拡張されており、それら 2 つの列の中央に揃えられています。
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
- 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 の値より大きい。または
- レイアウト・グリッドの幅が、提示された行の幅より大きい。