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.

Das Widget 'Grid' ermöglicht das Festlegen der folgenden Details:
Rich-UI stellt eine Reihe von Funktionen bereit, auf die Sie in den Verhaltensfeldern verweisen können. Detaillierte Informationen dazu finden Sie in den folgenden Dateien im Paket 'com.ibm.egl.rui.widgets' des Ordners 'EGLSource' im Projekt 'com.ibm.egl.rui':

Beachten Sie das Problem, das in “Rich-UI-Speicherverwaltung” beschrieben wird.

Unterstützte Eigenschaften und Funktionen

Die folgenden Eigenschaften werden im Widget 'Grid' unterstützt:
  • 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.
Es gelten die folgenden Regeln:
  • 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.

Zur Verwendung dieses Widgets sind einige oder alle der folgenden Anweisungen erforderlich:
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 Sie eine QuickInfo (bzw. Kurzinfo) für ein Raster einfügen wollen, stehen zwei Hauptalternativen zur Verfügung:
  • 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.

Eine GridTooltip-QuickInfo wird wie folgt erstellt:
  • 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

Feedback