Ein Rich-UI-Widget 'DataGrid' (Datenraster) definiert eine Feldgruppe von Zeilenwerten in einer Tabelle. Dieser Abschnitt enthält zunächst allgemeine Informationen über das Widget und stellt anschließend detaillierte Referenzinformationen zur Verfügung.
Der Datensatzabschnitt sieht wie folgt aus:
Record Stock type BasicRecord
Symbol STRING;
NumShares INT;
Quote DECIMAL(5,2);
SelectQuote Boolean;
end
Die Feldnamen sind wichtig, da auf sie später in der Deklaration der Rasterspalten verwiesen wird.
stockList Stock[] = [
new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40 },
new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10 } ];
Die Reihenfolge der Felder in einem bestimmten Datensatz ist nicht von Bedeutung. Allerdings ist die Reihenfolge der Datensätze in der Feldgruppe standardmäßig die Reihenfolge der Zeilen im Datenraster.
myGrid DataGrid{...};
columns = [
new DataGridColumn { name = "Symbol", displayName = "Company Symbol"},
new DataGridColumn { name = "Quote", displayName = "Price Per Share" },
new DataGridColumn { name = "NumShares", displayName = "Number of Shares" },
new DataGridColumn { name = "Total",
displayName = "Value of Shares",
formatters = [totalFormatter] }
]
Jede der ersten drei Deklarationen vom Typ 'DataGridColumn' verweist auf ein Datensatzfeld in der Datensatzfeldgruppe Stock. Die vierte Deklaration gibt eine berechnete Spalte an. Dies ist eine Spalte, zu der kein entsprechendes Datensatzfeld vorhanden ist. In diesem Fall ist dies das Feld ohne Datensatz mit dem Namen Total.
Die Reihenfolge der DataGridColumn-Elemente legt die Reihenfolge fest, in der die Spalten angezeigt werden.
data = stockList as any[]
Jedes Element der Feldgruppe stellt eine Untergruppe der Daten bereit, die für eine Zeile im Datenraster erforderlich sind.
In den meisten Fällen erfordert Rich-UI, dass Sie Variablen deklarieren, bevor Sie auf sie verweisen. In diesem Beispiel muss stockList vor dem Datenraster deklariert werden.
function totalFormatter(class String inout, value String inout, rowData any in)
// Gesamtwert der Aktien (Shares) anzeigen, nachdem der Wert aus dem Inhalt von
// zwei anderen Spalten in derselben Zeile berechnet wurde
value = rowData.NumShares as INT * rowData.Quote as DECIMAL(5,2);
end
Der Aufruf einer Funktion, auf die in der Eigenschaft formatters verwiesen wird, erfolgt einmal pro Zeile, bevor das Raster wiedergegeben wird. Der Inhalt der gesamten Zeile ist im dritten Parameter verfügbar. Sie können die spaltenspezifische Zelle aktualisieren, indem Sie entweder den ersten Parameter festlegen, durch den die CSS-Klasse gesteuert wird, oder den zweiten Parameter festlegen, durch den der Wert gesteuert wird.
Führen Sie eine erneute Wiedergabe des Rasters nur in einer onConstruction-Funktion, in einem Listener oder in einem anderen Ereignishandler aus, wie zum Beispiel einem Handler, der als Antwort auf einen Schaltflächenklick ausgeführt wird.
Das Datenraster unterstützt keine Initialisierung in einem ausgeblendeten übergeordneten Element, dessen Attribut 'none' ist. Wenn Sie ein Datenraster in einem ausgeblendeten übergeordneten Element mit einem Attribut 'none' initialisieren wollen, führen Sie eine erneute Wiedergabe des Rasters erst aus, wenn Sie das Datenraster aus einem ausgeblendeten übergeordneten Element anzeigen, indem Sie die Wiedergabefunktion ('Render') des Widgets aufrufen.
Wie erwähnt, unterstützt ein Datenraster die Spaltensortierung. Eine Sortierung erfolgt, wenn der Benutzer auf die Spaltenüberschrift klickt, jedoch nur, wenn die DataGridColumn-Eigenschaft enableSorting den Wert 'true' hat. Die Eigenschaft enableSorting hat standardmäßig den Wert 'true', und eine Sortierung ordnet den Spalteninhalt entsprechend den ASCII-Zeichenfolgewerten der Zellen an. Der Wert der DataGridColumn-Eigenschaft ignoreCase wirkt sich auch auf die Standardsortierung aus. Sie können das Sortierverhalten anpassen, indem Sie die DataGridColumn-Eigenschaft comparatorFunction festlegen und die gewünschte Funktion schreiben, auf die diese Eigenschaft verweist.
myGrid.data[3];
Neben dem Sortieren von Spalten kann der Benutzer eine Spalte ziehen und an einer anderen Position übergeben (Drag-and-drop). Diese Funktionalität ist immer aktiviert.
Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end
Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int)
if ( (myFirst as string )[8:8] == "6")
return(-1);
else
return(1);
end
end
Wenn die Eigenschaft columnComparator die Funktion CompareTo angibt, platziert der Benutzerklick den Namen Company6 an den Anfang oder an das Ende der Spalte.
Delegate CellFormatter(class String inout, value String inout, rowData any in) end
Die Funktionen für das Feld formatters werden in der Reihenfolge aufgerufen, in der die DataGridColumn-Einträge in der DataGrid-Eigenschaft columns definiert sind. Diese Funktionen werden vor den Funktionen ausgeführt, die in den folgenden DataGrid-Eigenschaften angegeben werden, die in der Laufzeitreihenfolge aufgelistet werden: headerBehaviors, behaviors und editingBehaviors.
Eine Gruppe von Funktionen ist für die Verwendung mit der Eigenschaft formatters vorgesehen. Details finden Sie in der folgenden Datei im Paket 'com.ibm.egl.rui.widgets' des Projekts 'com.ibm.egl.rui': DataGridFormatters.egl.
.EglRuiDataGridHeaderCell {
text-align: center;
}
Sie können in einer Vergleichsoperatorfunktion auf das Feld sortDirection zugreifen.
Delegate
DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in,
rowNumber INT in, column DataGridColumn in)
end
Die DataGrid-Eigenschaften werden in der folgenden Reihenfolge verarbeitet: headerBehaviors, behaviors und editingBehaviors.
Delegate
CheckBoxListener(grid DataGrid in) end
end
function myListener(grid DataGrid in)
columnRetrieve Stock[];
columnRetrieve = grid.getChecked() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
end
end
end
Details zur Einstellung von Kontrollkästchen durch Ihren Code finden Sie in der späteren Beschreibung der DataGrid-Funktionen checkAll und setChecked.
Delegate DataLoader(startRow int in, endRow int in, sortFieldName string in,
sortDirection int in) returns(boolean)
end
if (dataComplete)
return(true);
else
// Erforderliche Verarbeitung zum Hinzufügen von Daten in den angegebenen Zeilen
end
Dieses Beispiel geht davon aus, dass Sie eine Variable mit dem Namen dataComplete auf den Wert 'true' setzen, nachdem ein Service alle Daten bereitgestellt hat, die angezeigt werden können. Die Bedingung in der if-Anweisung verhindert, dass der Datenloader nachfolgend weitere Aktionen in Ihrer Anwendung ausführt.
myGrid.dataLoader = myDataLoader;
myGrid.data = myDataList as ANY[];
Ein Beispiel für die Verwendung der Eigenschaft dataLoader finden Sie im Abschnitt “End-to-End-Verarbeitung mit einem UI-Programm und einem Datenraster”.
Delegate
EditorBehavior(grid dataGrid in, cell Widget in, rowData any in,
rowNumber INT in, column DataGridColumn in, value ANY in)
returns (Widget)
end
Der Rückgabewert ist ein Widget oder 'null'.
Die DataGrid-Eigenschaften werden in der folgenden Reihenfolge verarbeitet: headerBehaviors, behaviors und editingBehaviors.
Delegate
SelectionListener(grid DataGrid in) end
end
function myListener(grid DataGrid in)
columnRetrieve Stock[];
columnRetrieve = grid.getSelection() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
end
end
end
Details zur Zeilenauswahl in Ihrem Code finden in der späteren Beschreibung der DataGrid-Funktionen selectAll und setSelection.
Delegate
SortListener(grid DataGrid in, sortColumn DataGridColumn in) end
end
Im folgenden Beispiel wird diese Funktion verwendet:
function mySortListener(grid DataGrid in, sortColumn DataGridColumn in)
syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. ");
end
Die ausgewählten Zeilen können sich über mehrere Rasterseiten erstrecken.
Wenn Sie die Eigenschaft showButtonBar auf 'false' setzen und mehr Zeilen verfügbar sind, als sichtbar gemacht werden können und wenn Sie die Eigenschaft showScrollBar nicht auf 'true' setzen, kann der Benutzer nicht auf die nicht sichtbaren Zeilen zugreifen.
function getChecked() returns (any[])
function myResponse (e event in)
columnRetrieve Stock[];
columnRetrieve = grid.getChecked() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
end
end
end
Die Funktion getChecked ruft die Datensätze ab, die von der DataGrid-Eigenschaft data referenziert werden. Allerdings hängt die Reihenfolge, in der die Daten zurückgegeben werden, von der aktuellen Anzeige ab, die durch die Sortierung des Benutzers beeinflusst wird.
function getCurrentPageIndex() returns (int)
function getPageCount() returns (int)
function getSelection() returns (any[])
function myResponse (e event in)
columnRetrieve Stock[];
columnRetrieve = grid.getSelection() as Stock[];
numberOfRows int = columnRetrieve.getSize();
if (numberOfRows > 0)
for (i int from 1 to numberOfRows)
sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
end
grid.deSelectAll();
else
sysLib.writeStdOut("Select one or more rows.");
end
end
Die Funktion getSelection ruft die Datensätze ab, die von der DataGrid-Eigenschaft data referenziert werden. Allerdings hängt die Reihenfolge, in der die Daten zurückgegeben werden, von der aktuellen Anzeige ab, die durch die Sortierung des Benutzers beeinflusst wird.
function goToPage(pageNumber int in)
function setChecked(selection any[] in)
function start()
grid.setChecked([grid.data[2], grid.data[3]]);
// Alternative Codierung
myAny ANY[] = [grid.data[2], grid.data[3]];
grid.setChecked(myAny);
end
function setSelection(selection any[] in)
function start()
grid.setSelection([grid.data[3], grid.data[2]]);
// Alternative Codierung
myAny ANY[] = [grid.data[3], grid.data[2]];
grid.setSelection(myAny);
end
Die Möglichkeit zur Auswahl von Zeilen hängt von der Einstellung der DataGrid-Eigenschaft selectionMode ab. Zum Beispiel wird nur der erste Eintrag, der an die Funktion setSelection übergeben wird, ausgewählt, wenn Ihr Code versucht, zwei Zeilen auszuwählen, und die Eigenschaft selectionMode nur eine Auswahl zulässt.
gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };
import egl.rui.widgets.DataGridToolTip;
Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in,
td Widget 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 (rowData.Quote as int == 200)
// Inhalt in ein Feld (QuickInfo) einfügen und die QuickInfo zurückgeben
end
Das folgende Beispiel können Sie in Ihrem Arbeitsbereich ausprobieren:
package client;
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.DataGrid;
import com.ibm.egl.rui.widgets.DataGridColumn;
import com.ibm.egl.rui.widgets.DataGridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import egl.ui.rui.RUIHandler;
Record Stock
Symbol STRING;
Quote DECIMAL(5,2);
NumShares INT;
end
handler MyDataGrid1 type RUIhandler { initialUI = [ grid ],
onConstructionFunction = start }
stockList Stock[] = [
new Stock{Symbol = "Company1", Quote = 100.00, NumShares = 40 },
new Stock{Symbol = "Company2", Quote = 200.00, NumShares = 10 },
new Stock{Symbol = "Company3", Quote = 100.00, NumShares = 40 } ];
grid DataGrid {
data = stockList as any[],
behaviors = [myDataGridToolTip.setToolTips],
pageSize = 15,
columns = [
new DataGridColumn { name = "Symbol", displayName = "Symbol Display"},
new DataGridColumn { name = "Quote", displayName = "Quote Display"},
new DataGridColumn { name = "NumShares", displayName = "NumShares Display" }]};
myDataGridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };
tooltipBox Box{columns=1, width=475};
function start()
end
function tooltipText (rowData any in, fieldName String in, td Widget in) returns (Box)
tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };
tooltipBox.children = [ tooltipArea ];
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 rowData[fieldName] is also '"+rowData[fieldName] + "'.";
return (tooltipBox);
end
end