Im Laufe der Zeit wächst die Datenmenge in Systemen ganz automatisch. Listen und Tabellen werden immer länger und gerade betagtere Browser bekommen Probleme, diese in angenehmer Zeit zu rendern. Die Aufgabe eines DataGrids besteht darin, dem Benutzer größere tabellarische Datenmengen flüssig darzustellen und diese so zu visualisieren, dass der Benutzer sie komfortabel anschauen kann.

Anforderungen an DataGrids

Bevor wir uns einem praktischen Beispiel zuwenden, möchte ich kurz definieren, welche Features ein DataGrid von einer herkömmlichen Tabelle unterscheidet:

• Auf- und absteigende Sortierung nach Spalten
• Pagination – Unterteilung der Daten in mehrere Datenblätter
• Daten dynamisch per XMLHttpRequest laden, um auch das flüssige Arbeiten mit großen Datenmengen zu ermöglichen
• Daten mittels Filtermaske filtern
• Inline Cell Editing – direkte Manipulation von Daten im DataGrid

Die YUI Library

Wie eingangs erwähnt, gibt es zahlreiche JavaScript-Bibliotheken, derer sich Entwickler bedienen können, um zeitgemäße Webapplikationen zu entwickeln. Eine mögliche JavaScript-Bibliothek ist YUI [1] von Yahoo! [2]. YUI ist eine umfangreiche und sehr gut dokumentierte Bibliothek. Zu sämtlichen Komponenten gibt es eine Vielzahl an Codebeispielen. Darüber hinaus ist YUI, letztlich auch durch den Einsatz bei Yahoo! selbst, im aktuellen Stadium gut getestet und sehr robust. In den folgenden Beispielen verwende ich das aktuelle Release 2.8.1 von YUI. Die neue YUI-3-Bibliothek ist zwar bereits einsetzbar und bringt viele Neuerungen und Verbesserungen mit, basiert aber bei den erweiterten Elementen noch weitestgehend auf Betaversionen und sollten daher noch nicht in produktiven Applikationen verwendet werden. Zudem wird nach Aussage [3] des YUI-Teams noch die Version 2.9 folgen, was darauf schließen lässt, dass YUI 2 noch einige Zeit erhalten bleibt und von Yahoo! weiterhin gepflegt wird.

Jetzt geht’s los

Yahoo! bietet diverse Möglichkeiten, um seine Bibliothek zu konfigurieren und einzubinden. Neben dem YUI Loader Utility [4] besteht die Möglichkeit, die gewünschten Komponenten mittels Dependency Configurator [5] zu konfigurieren und einzubinden. Als weitere Alternative bietet sich auch das YUI PHP Loader Utility (Beta) [6] an. Selbstverständlich können die Sourcen auch einfach auf der lokalen Festplatte gespeichert und per Script-Element eingebunden werden. Da viele Komponenten auf anderen aufbauen, ist es anfangs einfacher, den Dependency Configurator zur verwenden bzw. per YUI Loader einzubinden.

YUI Loader

In Listing 1 ist die Konfiguration des YUI Loaders mit den benötigten Komponenten abgebildet. Für das erste Beispiel benötigen wir neben der Standardkomponente YAHOO auch die Komponente YAHOO.widget.DataTable [7]. Des Weiteren binden wir die Komponenten YAHOO.util.Dom, YAHOO.util.Event und YAHOO.widget.Logger ein. Alle optional benötigten Komponenten können mit loadOptional: true automatisch eingebunden werden. Das Setzen der Konfigurationsvariable combine: true ermöglicht, sofern das YAHOO! CDN [8] (Content Delivery Network) verwendet wird, das Zusammenfassen aller Dateien zu einem Request je Dateityp (JS und CSS). Alternativ steht die Bibliothek im Google CDN [9] zur Verfügung, das zwar das Kombinieren der Dateien nicht ermöglicht, dafür aber SSL unterstützt. Es ist zu beachten, dass der YUI Loader automatisch das YAHOO! CDN verwendet, sobald combine: true gesetzt ist. Zu Entwicklungszwecken laden wir mit filter: „DEBUG“ nicht die minimierten Sourcen für den produktiven Einsatz, sondern Sourcen mit integrierten Log-Ausgaben. Nach dem Laden aller benötigten Sourcen, ruft der YUI Loader die Callback-Funktion onSuccess auf, in der dann die eigenen Komponenten und Funktionen ausgeführt werden können. Mit dem Aufruf YAHOO.widget.Logger.enableBrowserConsole(); nutzen wir die Möglichkeit des Loggers, alle Ausgaben in Firebug anzuzeigen.

Abb. 1: Log-Ausgaben in Firebug (Vergrößern)

Listing 1: YUI Loader verwenden

var loader = new YAHOO.util.YUILoader({ 
  require: ["yahoo", "dom", "event", "logger", "datatable"],
  loadOptional: true, 
  combine: true,  // nur im Yahoo! CDN
  filter: "DEBUG",
  
  // wird aufgerufen, sobald alle JS und CSS Datei geladen wurden
      onSuccess: function() { 
    // Ausgabe des Logs in eine Browserkonsole (z.B. Firebug)
    YAHOO.widget.Logger.enableBrowserConsole();
    
    // DataGrid erzeugen
    Examples.markup();
  },
  timeout: 10000  // timeout nach 10 Sekunden
 }); 
loader.insert(); 

DataGrid aus vorhandenem Markup

YUI lässt dem Entwickler die Wahl, sein Grid aus einem JavaScript-Objekt oder aus einem vorhandenen Tabellen-Markup zu erstellen. Ebenso muss der Entwickler definieren, welche Datenbasis (HTML-Markup, lokales JavaScript, XML etc.) er verwenden möchte. Im Fall einer bestehenden Anwendung ist die Möglichkeit, als Datenbasis das Markup einer vorhandenen HTML-Tabelle zu verwenden, naheliegend.

Abb. 2: HTML-Tabelle als Ausgangspunkt (Vergrößern)

Um ein YUI DataTable instanziieren zu können, benötigen wir neben einem DataSource-Objekt auch eine Spaltendefinition. In Listing 2 sehen wir, dass die Spaltendefinition aus einem Array von Objektliteralen besteht. Für die Grundkonfiguration sollten je Spalte ein eindeutiger Schlüssel, ein Titel und die Möglichkeit der Sortierung definiert werden.

Die Variable formatter bietet die Möglichkeit, die Inhalte einer Spalte mit einem zugewiesenen formatter-Objekt zu formatieren. Neben der Definition von eigenen Formatierern, bringt YUI eine Reihe vordefinierter Formatierer zur Anpassung der Darstellung, z. B. DataTable.formatNumber, DataTable.formatCurrency, DataTable.formatDate etc., bereits mit. Die Ausgabe des Formatierers kann mittels Formatoptionen in der Konfiguration des DataTable seinen Vorstellungen angepasst beziehungsweise internationalisiert werden:

• DataTable.formatNumber

  numberOptions: { 
    decimalPlaces: 0, 
    decimalSeparator: ",", 
    thousandsSeparator:"."
  }

• DataTable.formatCurrency

  currencyOptions: {
    suffix:" €",
    decimalPlaces: 2, 
    decimalSeparator:",", 
    thousandsSeparator:"."
  }

• DataTable.formatDate

  dateOptions: { format: '%d.%m.%Y' }

Darüber hinaus besteht die Möglichkeit, eigene Parser-Funktionen in der Felddefinition des Response-Schemas zu definieren, um beispielsweise ein MySQL Date zu parsen und in ein JavaScript-Date umzuwandeln. Neben den Formatierern, die sich auf die Darstellung beziehen, stellt YUI auch Formatierer zur Erzeugung von HTML-Formularelementen bereit (Kasten: „Formatierer zur Erstellung von HTML-Formularelementen“).