Rich-UI-Widget 'Grid' und 'GridTooltip'
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.
- Eine Feldgruppe von Datensätzen, deren Feldwerte in den entsprechenden Rasterspalten jeweils in einer Zeile pro Datensatz angezeigt werden.
- Verhalten ('behaviors'), das heißt, Felder, die jeweils eine Feldgruppe von Funktionsreferenzen
akzeptieren. Wenn ein Benutzer auf eine Zelle klickt, werden die referenzierten Funktionen in der
Reihenfolge der Feldgruppenelemente ausgeführt. Jede Funktion kann Zellmerkmale aktualisieren.
Das Ergebnis besteht darin, dass Sie Stilmerkmale und Aktionen, wie zum Beispiel das Sortieren nach
einer Spalte oder das Anzeigen einer QuickInfo angeben können. (Eine QuickInfo (Tooltip) ist eine
Kurzinformation in einem Fenster, die angezeigt wird, wenn der Benutzer die Maus anhält und sich der
Mauszeiger auf einem bestimmten Bereich des Rasters befindet.)
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- grid
- Das Raster, das an die Funktion übergeben wird.
- cell
- Ein internes Widget, das die Rasterzelle darstellt. Dieses Widget basiert auf dem HTML-Tag TD (Tabellendaten).
- row
- Der Datensatz, der die Zeilendaten darstellt. (Wie später erläutert, ordnen Sie dem Raster Werte zu, indem Sie die Eigenschaft data des Rasters festlegen, die eine Feldgruppe von Datensätzen mit einem Datentyp akzeptiert, die Sie angeben. Die Werte für eine bestimmte Rasterzeile werden aus einem Element dieser Feldgruppe abgerufen.)
- rowNumber
- Die Zeilennummer, die von 1 bis zum Wert der Eigenschaft totalRows geht, die die Anzahl der Zeilen im Raster enthält.
- column
- Der Datensatz, der die Spaltenbeschreibung darstellt. (Wie später erläutert, beschreiben Sie die Spalten, indem Sie die Eigenschaft 'columns' des Rasters auf eine Feldgruppe von Datensätzen des Typs 'GridColumn' setzen. Die Beschreibungen für eine bestimmte Spalte werden aus einem Element dieser Feldgruppe abgerufen.
- GridBehaviors.egl
- GridSelector.egl
- GridSorter.egl
- GridToolTip.egl (Diese Datei wird später in diesem Abschnitt behandelt.)
Beachten Sie das Problem, das in “Rich-UI-Speicherverwaltung” beschrieben wird.
Unterstützte Eigenschaften und Funktionen
- data: Diese Eigenschaft mit dem Typ ANY enthält eine Feldgruppe von Datensätzen,
die vom Entwickler definiert werden. Die Daten in einem bestimmten Datensatzfeld werden nur im Raster
dargestellt, wenn der Name des Felds mit dem Namen einer Rasterspalte übereinstimmt, wie er in der
Eigenschaft columns angegeben wird.
In der Rasterdeklaration wird die Eigenschaft data nach den anderen Eigenschaften aufgeführt.Beispiel:
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[]}; - columns: Diese Eigenschaft enthält eine Feldgruppe von Datensätzen
des folgenden Typs:
Record GridColumn displayName String; name String; width int; end- displayName
- Der Spaltentitel. Wenn dieses Feld nicht angegeben wird, ist der Spaltentitel der Wert des Felds name.
- name
- Der Standardspaltentitel und der Name des Datensatzfelds data, das den Wert für die Spalte bereitstellt.
- width
- Die Anzahl Pixel in der Spalte.
- totalRows: Diese schreibgeschützte Eigenschaft enthält die Anzahl der Zeilen im Raster.
- behaviors: Diese Eigenschaft enthält eine Feldgruppe von Stellvertretern ('Delegate') des Typs CellBehavior. Sie geben eine Feldgruppe von Funktionen an, die jedes Mal aufgerufen werden, wenn der Benutzer auf eine andere Zeile als die Kopfzeile klickt. Die Funktionen werden in der Reihenfolge ihrer Angabe in der Feldgruppe aufgerufen.
- headerBehaviors: Diese Eigenschaft enthält eine Feldgruppe von Stellvertretern ('Delegate') des Typs CellBehavior. Sie geben eine Feldgruppe von Funktionen an, die jedes Mal aufgerufen werden, wenn der Benutzer auf eine Kopfzeile klickt. Die Funktionen werden in der Reihenfolge ihrer Angabe in der Feldgruppe aufgerufen.
- Mit Ausnahme der Widgets, auf die in den Eigenschaften children oder initialUI verwiesen wird, erfordert Rich-UI, dass ein Wert deklariert wird, bevor auf ihn verwiesen wird. Wenn eine Grid-Eigenschaft auf eine Feldgruppe verweist, die sich außerhalb der Rasterdeklaration befindet (wie im vorherigen Beispiel für die Eigenschaft data), muss die Feldgruppe vor der Rasterdeklaration angegeben werden.
- Stellen Sie beim Deklarieren eines Rasters sicher, dass Sie die Eigenschaften behaviors, headerBehaviors und column vor der Eigenschaft data auflisten.
- Wenn Sie beim Schreiben von Anweisungen in Funktionen den Wert der Eigenschaft behaviors oder headerBehaviors ändern, rufen Sie die rasterspezifische Funktion layouts() auf, um das Widget zurückzusetzen.
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;
GridTooltip-QuickInfos
- Wenn die QuickInfo immer angezeigt werden soll, wenn sich der Cursor über dem Raster befindet, und nicht nach Zelle, Zeile oder Spalte variieren soll, ordnen Sie das Raster als Ganzes einer QuickInfo (Tooltip) zu. Detaillierte Informationen dazu finden Sie in Rich-UI-Widget 'Tooltip'. Sie könnten ein Widget 'Tooltip' als globales Widget deklarieren und in einer Funktion aktivieren, wie zum Beispiel in der onConstruction-Funktion oder einer Funktion, die in der Eigenschaft behaviors oder headerBehaviors angegeben wird.
- Wenn die QuickInfo für eine bestimmte Zelle, Zeile oder Spalte außerhalb der Kopfzeile unterschiedliche
Informationen anzeigen soll, können Sie eine GridTooltip-QuickInfo angeben, die ähnlich wie eine QuickInfo funktioniert,
jedoch immer erfordert, dass Sie eine GridTooltip-Providerfunktion angeben. Diese Funktion gibt
ein Feld zurück, das den Inhalt bereitstellt, der dem Benutzer angezeigt werden soll.
Sie können nur eine GridTooltip-QuickInfo pro Raster angeben.
- Deklarieren Sie einen GridTooltip-Handler wie im folgenden Beispiel, der einen Raster-QuickInfo-Provider
(die aufzurufende Funktion) und eine Verzögerung (die Anzahl Millisekunden zwischen dem Beginn der Mausbewegung
über dem Widget und dem Aufruf des Providers) angibt:
gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };Diese Deklaration erfordert den Einschluss der folgenden Anweisung 'import':import egl.rui.widgets.GridToolTip; - Referenzieren Sie eine Funktion im GridTooltip-Handler, wenn Sie eine Feldgruppe für die Eigenschaft behaviors zuordnen. In diesem Beispiel hat die Funktion den Namen gridToolTip.setToolTips.
- Erstellen Sie eine GridTooltip-Providerfunktion mit dem Namen, der in der GridToolTip-Eigenschaft
provider angegeben ist (in diesem Beispiel heißt die Funktion 'tooltipText'). Die GridTooltip-Providerfunktion
hat die Parameter- und Rückgabewertmerkmale, die im folgenden Stellvertreterabschnitt gezeigt werden:
Delegate GridTooltipTextProvider(row any in, fieldName String in, td TD in) returns(Box) end- row
- Die Zeile, die für die Funktion angegeben wird. Sie können das Eingabeargument verwenden, um
auf einen bestimmten Wert zuzugreifen. Betrachten Sie zum Beispiel den Fall, in dem die folgenden Daten
verwendet werden:
stocks Stock[] = [ new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false} ];In der Providerfunktion können Sie bestimmen, auf welcher Zeile sich der Mauszeiger befindet, indem Sie Code wie den folgenden schreiben:if (row.Quote as int == 200) // Inhalt in eine QuickInfo einfügen und die QuickInfo zurückgeben end - fieldName
- Der Name der Spalte, die für die Funktion angegeben wird.
- td
- Ein internes Widget, das die Rasterzelle darstellt. Dieses Widget basiert auf dem HTML-Tag TD (Tabellendaten).
- Sie aktivieren die GridTooltip-QuickInfo nicht, da sie aktiviert wird, sobald Sie sie deklarieren.
Beispiel
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