Rich UI grid ウィジェットで、値の配列を表形式で定義します。新規開発の場合は、Rich UI dataGrid ウィジェットを使用します。これは、パフォーマンスと機能にすぐれており、『Rich UI の DataGrid および DataGridTooltip』で説明されています。
CellBehavior という名前の Delegate パーツは、グリッド・ウィジェットの behaviors フィールドおよび headerBehaviors フィールドで参照されている各関数の特性を記述します。
Delegate
CellBehavior(grid Grid in, cell TD in, row any in,
rowNumber int in, column GridColumn in)
end
『Rich UI メモリー管理』に記載されている問題に注意してください。
stocks Stock[] = [
new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false},
new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false},
];
Grid myGrid {..., data = stocks as any[]};
Record GridColumn
displayName String;
name String;
width int;
end
Grid (ただし GridTooltip は除く) との関連で、サポートされる他のプロパティーおよび関数は、『ウィジェットのプロパティーと関数』で説明されています。
import com.ibm.egl.rui.widgets.Grid;
import com.ibm.egl.rui.widgets.GridBehaviors;
import com.ibm.egl.rui.widgets.GridSelector;
import com.ibm.egl.rui.widgets.GridSorter;
import com.ibm.egl.rui.widgets.GridToolTip;
グリッド・ツールチップは、グリッドにつき 1 つのみ指定できます。
gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };
import egl.rui.widgets.GridToolTip;
Delegate GridTooltipTextProvider(row any in, fieldName String in, td TD in) returns(Box)
end
stocks Stock[] = [
new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false},
new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}
];
if (row.Quote as int == 200)
// place content in a tooltip and return the tooltip
end
次は、ヘッダー行用のツールチップと、その他場所のグリッド・ツールチップが含まれている例で、ご使用のワークスペースで試すことができます。
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Grid;
import com.ibm.egl.rui.widgets.GridBehaviors;
import com.ibm.egl.rui.widgets.GridColumn;
import com.ibm.egl.rui.widgets.GridSelector;
import com.ibm.egl.rui.widgets.GridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import com.ibm.egl.rui.widgets.Tooltip;
import egl.ui.rui.Widget;
Record Filler
F1 String;
F2 String;
F3 String;
end
handler myGrid1 type RUIhandler {initialUI = [ myBox ]}
gridSelector GridSelector { color = "lightgreen" };
filler Filler[] = [
new Filler{F1 = "R3, C1", F2 = "R3, C2", F3 = "R3C3"},
new Filler{F1 = "R4, C1", F2 = "R4, C2", F3 = "R4C3"}
];
myFirstGrid Grid{
behaviors = [
GridBehaviors.whiteCells,
GridBehaviors.alternatingColor,
GridBehaviors.tightCells,
gridSelector.enableSelection,
gridTooltip.setTooltips
],
headerBehaviors = [
GridBehaviors.grayCells,
headerTooltips
],
columns = [
new GridColumn{name = "F1", displayName = "Column 1 Header", width=120},
new GridColumn{name = "F2", displayName = "Column 2 Header", width=120},
new GridColumn{name = "F3", width=50}
],
data = [
new Dictionary { F1 = "Row 1, Column 1", F2 = "Row 1, Column 2", F3 ="me"},
new Dictionary { F1 = "Row 2, Column 1", F2 = "Row 2, Column 2", F3 = "you"},
filler[1], filler[2]
]
};
myBox Box{ backgroundcolor = "peachpuff", padding=8,
children=[myFirstGrid], marginbottom=15};
HtooltipText String = "This is a Header tooltip";
headerTooltip Tooltip { text = HtooltipText, delay=1000 };
function headerTooltips(grid Grid in, td Widget in, row any in,
ignoreRowNumber int in, column GridColumn in)
headerTooltip.enable(td);
end
gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };
tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };
function tooltipText(row any in, fieldName String in, td Widget in) returns(Box)
tooltipArea.text =
"In function tooltipText (a tooltip provider):" +
" ¥n fieldName is the column name ('"+fieldName+"')." +
"¥nYou can access cell content:" +
"¥n td.innerText is '"+td.innerText+"'. ¥nThanks to EGL dynamic access" +
"¥n row[fieldName] is also '"+row[fieldName] + "'.";
return (tooltipBox);
end
tooltipBox Box {columns=1, width=475, children = [ tooltipArea ]};
end