Ein Rich-UI-Widget 'Grid' (Raster) definiert eine Feldgruppe von Werten in einem Tabellenformat. Verwenden Sie für eine Neuentwicklung das Rich-UI-Widget 'DataGrid'. Dieses Widget verfügt über eine bessere Leistung und Funktionalität und wird im Abschnitt “Rich-UI-Widget 'DataGrid' und 'DataGridTooltip'” beschrieben.
Ein Stellvertreterabschnitt mit dem Namen CellBehavior beschreibt die Merkmale der einzelnen Funktionen, die durch das Feld behaviors und headerBehaviors eines Rasterwidgets angegeben werden:
Delegate
CellBehavior(grid Grid in, cell TD in, row any in,
rowNumber int in, column GridColumn in)
end
Beachten Sie das Problem, das in “Rich-UI-Speicherverwaltung” beschrieben wird.
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
In Bezug auf den Typ 'Grid' (jedoch nicht 'GridTooltip') werden weitere unterstützte Eigenschaften und Funktionen im Abschnitt “Widgeteigenschaften und Widgetfunktionen” beschrieben.
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;
Sie können nur eine GridTooltip-QuickInfo pro Raster angeben.
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)
// Inhalt in eine QuickInfo einfügen und die QuickInfo zurückgeben
end
Das folgende Beispiel, das Sie in Ihrem Arbeitsbereich ausprobieren können, enthält eine QuickInfo für die Kopfzeile und eine GridTooltip-QuickInfo für die anderen Bereiche:
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