Doch nicht jeder Webentwickler möchte komplexere Strukturen einer interaktiven Web-GUI jedesmal von Hand erstellen. Deshalb kommen gerade bei aufwendigeren Internet-Auftritten Web-Toolkits und -Frameworks immer mehr in Mode. Mit dem „Yahoo User Interface“ hat Yahoo eine populäre JavaScript- und CSS-Bibliothek für webbasierte Benutzerschnittstellen als Open Source [1] veröffentlicht – YUI Version 2.4.0 ist Anfang Dezember 2007 erschienen. Mit den darüber verfügbaren Komponenten/Widgets lassen sich insbesondere Web-Applikationen mit ereignisgesteuerter Interaktion unter Verwendung von AJAX auf komfortable Weise entwickeln.

Nicht wenige Entwickler aus den Programmierwelten .NET, Java oder C/C++ schauen etwas verächtlich auf die scheinbar sehr einfachen Technologien HTML, JavaScript oder Stylesheets herab. In der Tat können sich weder der Umfang noch die Komplexität dieser klassischen clientseitigen Webtechnologien mit Programmiertechniken aus dem Desktop- beziehungsweise Netzwerk- oder Großrechnerumfeld messen.

Aber das ist nur die eine Seite der Medaille. Das Zusammenspiel dieser – einzeln gesehen – sehr einfachen Web-Technologien im Client kann äußerst diffizil sein, was nicht zuletzt ein Resultat der Browserkriege des letzten Jahrtausends ist. Zudem erzwingt die sehr eingeschränkte Leistungsfähigkeit von JavaScript oft eine komplizierte Programmierung von Strukturen, die in leistungsfähigeren (insbesondere objektorientierten) Programmiertechniken auf dem Silbertablett serviert werden. So gesehen kann sich die Programmierung einer interaktiven Benutzeroberfläche für das Web heutzutage durchaus mit der Komplexität der Erstellung einer GUI für eine Desktop-Applikation messen.

Aus diesem Grund werden Toolkits und Frameworks zur Erstellung von Web-Oberflächen immer populärer. Die Vorteile bestehen im Wesentlichen darin, dass immer wiederkehrende Strukturen wie Schaltflächen, Menüs oder auch Animationen und Slideshows in Form von Komponenten verfügbar gemacht werden können, die in den meisten relevanten Browsern funktionieren. Ebenso lassen sich Webseiten zuverlässig strukturieren. Besonders die Unterstützung über verschiedene Plattformen hinweg – nicht nur der konkrete Browser samt Browserversion, sondern auch das Betriebssystem und die Bildschirmauflösung – rechtfertigt bereits den Einsatz solcher Toolkits oder Frameworks. Aber auch Abläufe der Oberflächenlogik wie die Überprüfung von Formulareingaben auf der Clientseite lassen sich durch standardisierte Schablonen vereinfachen.

Dabei kann man bei den unterstützenden Tools und Bibliotheken grundsätzlich verschiedene Ansätze beobachten. Es gibt zum einen Toolkits und Frameworks, die zum Erstellungszeitpunkt von Ajax- bzw. interaktiven Web-Applikationen den direkten Kontakt mit HTML, JavaScript und Stylesheets komplett vermeiden, beispielsweise das Google-Web-Toolkit, mit dem in Java eine Applikation erstellt und später erst in die tatsächlichen Client-Technologien überführt wird. Ebenso kapseln serverseitige PHP-, Perl- oder Ruby-Frameworks (AjaxAC, Cajax, Cpaint, Xajax, XOAD, Sajax, Ruby on Rails) etwa Ajax-Aufrufe in Objekte und vereinfachen dadurch die Interaktion mit dem Anwender. Diese Toolkits und Frameworks nehmen Webentwicklern immens viel Arbeit ab, erfordern aber natürlich Know-How in den zugrunde liegenden Programmiertechniken und entziehen zudem vollständig die Kontrolle über den letztendlich zum Besucher geschickten Code. Ebenso macht man sich mit dem Einsatz von solchen generierenden Systemen abhängig von einer vernünftigen Pflege und Weiterentwicklung des dahinter stehenden Projekts respektive der verantwortlichen Firma.

Auf der anderen Seite stehen Toolkits und Frameworks, die als reine Bibliotheken für (X)HTML, JavaScript und/oder CSS zu verstehen sind und oft zu programmierende Clientstrukturen in Form vorgefertigter Funktionen sowie Klassen und Objekten bereitstellen. Beispiele dafür sind Mochi Kit, das sehr populäre Prototype, Ajax Face oder Dojo. Auch YUI ist in diese Reihe einzuordnen. Aber auch spezialisierte Anwendungen, wie viele Google APIs oder auch YAML als speziell auf ein flexibles Layout ausgerichtetes (X)HTML/CSS-Framework. Solche Toolkits und Frameworks erhalten dem Webentwickler weitgehende Kontrolle über seinen Quellcode und bewirken nur eine recht geringe Abhängigkeit. Dafür benötigt man in der Regel aber ausreichende Kenntnisse in (X)HTML, JavaScript und CSS als Grundlagen.

Konkret versteht Yahoo YUI als einen Satz an Utilities und Steuerelementen, die selbst in JavaScript geschrieben sind und vollständig transparent im Quellcode nachvollzogen und angepasst werden können. Ähnlich wie einige andere mächtige JavaScript-Framworks hat Yahoo mit dem YUI auch die Möglichkeit für eine OOP samt Klassen, Konstruktoren und Vererbung auf Basis von JavaScript nachgebildet. Der Fokus ist die einfache Erstellung von Rich Internet Applications unter Verwendung von Techniken wie DOM-Scripting, DHTML und Ajax. Die YUI-Bibliothek enthält zudem verschiedene CSS-Kernressourcen.

YUI wurde 2006 in einer ersten Version veröffentlicht und hat sich nach und nach eine rege Community erarbeitet, die unablässig Erweiterungen entwickelt und Probleme beseitigt. Bereits die letzten Versionen zeigten die Tendenz, dass sich die Bibliothek weg von einer einfachen Utility-Sammlung zu einem schwergewichtigen JavaScript- und CSS-Framework entwickelt.

Die YUI-Komponenten umfassen mittlerweile neben elementaren Kernkomponenten wie Kalender, Schaltflächen, Animationen oder Menüs auch kompexere Komponenten wie einen Rich-Text-Editor, Cross-Browser-Support, ein vierschichtiges CSS-System, ein YUILoader-Utility, einen Image-Loader, ein Color-Picker-Control und sogar ein YUI-Test-Utility, worüber ein (eingeschränktes) Unit-Testing-Framework in YUI zur Verfügung steht. Die derzeit aktuelle Version 2.4.0 erweitert diesen bis dato schon großen Komponentenumfang um eine Selector-Komponente, Charts, Profiler, Script/CSS-Get und vor allen Dingen den immer wichtiger werdenden JSON-Support.

Auf der Entwickler-Seite [2] finden Sie neben FAQs und diversen Informationen auch den direkten Download-Link [3] für die gesamte Bibliothek bzw. den Verweis auf die Sourceforge-Projektseite [4], über die YUI vertrieben wird. Das Download-Paket der aktuellen YUI-Version 2.4.0 enthält neben der eigentlichen Bibliothek eine vollständige API-Dokumentation mit über 230 Beispielen von Sourceforge. Die Bibliothek teilt sich in verschiedene Bestandteile auf:

• Unter YUI Core ist das YAHOO-Global-Object enthalten. Dieses stellt die Basisvoraussetzung für alle YUI-Komponenten zur Verfügung. Des Weiteren gibt es hier eine DOM-Collection (nützliche Methoden für die Interaktion mit dem DOM) und ein Event-Utility (event normalization und Tools).
• Die YUI Library Utilities entwickeln sich aktuell rasant und umfassen mittlerweile auch diverse Features, die sich in der Version 2.4.0 noch im Betastadium befinden. In dieser Kategorie befinden sich u.a. Utilities für Animationen, die Browser-History, Drag & Drop, JSON, verschiedene Loader, das YUI-Test-Utility und ein Connection-Manager, der insbesondere für XHR/Ajax interessant ist.
• Unter YUI Library Controls/Widgets finden sich die wesentlichen Kernkomponenten für eine GUI: Buttons, Menüs, Kalender, Farbwahlkomponenten, Container (Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog), Baum- und Registeransichten, aber auch der neue Rich-Text-Editor und Slider.

Von besonderem Interesse sind die YUI-Library-CSS-Tools. Diese Tools sind nicht zuletzt bei mehrspaltigen CSS-Designs zur Gewährleistung einer einheitlichen Darstellung von <div>-Containern in verschiedenen Browsern und Auflösungen von großem Nutzen. So gibt es mit der Bibliothek „reset.css“ ein wertvolles Feature, um alle browsereigenen Einstellungen zurückzusetzen. Das Resultat ist, dass kein HTML-Element mehr störende Eigenwirkungen wie individuelle Margins, Paddings etc. hat.

Mit der Bibliothek „font.css“ und zugehörigen Dateien werden alle Schriften auf Standardwerte eingestellt, base.css stellt für die wichtigsten Elemente gewisse Grundformatierungen her. Das sorgt dafür, dass alle Elemente auf konsistente Werte gesetzt sind, die dann überall gleich aussehen.

Das Highlight des CSS-Pakets aber ist die Bibliothek „grid.css“. Mit der nur 4 KByte großen Datei lässt sich das Layout einer Webseite beliebig in Spalten und Zeilen aufteilen. Damit können fast beliebig geschachtelte Layouts erstellt werden, die mit einem minimalen Aufwand an HTML-Tags auskommen und trotzdem barrierefrei sind.

Ein weiteres sehr nützliches Tool des YUI ist der YUI Compressor [5], eine Erzeugerkomponente zum Minimieren der JavaScript- und CSS-Dateien.

Am einfachsten lernt man den Umgang mit YUI, indem man die beigefügten YUI-Beispiele direkt ausprobiert, anschließend den Quellcode analysiert und dann modifiziert. Yahoo empfiehlt den Einstieg über die Event-Utility-Sammlung. Dort gibt es einfache Beispiele, die sich exzellent zu ersten Experimenten eignen, aber auch komplexere Anwendungen. Vor allem mit den Utilities zu Drag & Drop wird es auch für JavaScript-erfahrene Programmierer interessant. Aus dieser Auswahl wollen wir ein Beispiel konkret modifizieren.

YUI-Skripte und CSS-Dateien lassen sich sowohl aus Ihrer lokalen YUI-Installation (aus dem Verzeichnis build) oder direkt von den Yahoo-Servern einbinden. Das YUI-Loader-Utility unterstützt Sie dabei als ein clientseitiges Ladepaket, das dynamisch alle benötigten YUI-Ressourcen liefert.

Über den Link [6] bzw. im lokalen Installationsverzeichnis von YUI gelangt man zu einer Website mit Beispielen zu Drag & Drop. Wir wählen Drag & Drop – Resizable Panel als unsere Basisapplikation aus, die wir analysieren und anpassen. Sie sehen bei diesem Beispiel zwei ineinander verschachtelte Rahmen (div-Container mit CSS-Formatierung), die Sie als Gesamtes per Drag & Drop verschieben können. Wenn Sie das Rechteck rechts unten mit der Maus anpacken, können Sie die Größe des äußeren Rechtecks verändern.

Unterhalb der Beispielapplikation sehen Sie in der Webseite die entscheidenden Quelltextpassagen.
Ein Klick auf den Link „View example in new window“ öffnet die Applikation in einem eigenständigen Browserfenster. Das ist deshalb sinnvoll, weil so der vollständige Quelltext der Webseite für die Beispielapplikation besser analysiert werden kann.

Am Beginn des Quelltextes setzt ein internes Stylesheet alle margin- und padding-Werte für den Body auf „0“. Solche Werte führen in verschiedenen Situationen zu Fehlern und werden daher als Grundprinzip von YUI-CSS-Anweisungen immer ausgeschaltet. Im nächsten Schritt werden die CSS-Bibliothek „fonts-min.css“ und die JavaScript-Bibliotheken „yahoo-dom-event.js“ und „dragdrop.js“ eingebunden. Die folgenden CSS-Definitionen der IDs sind individuelle Formatierungen der beiden verwendeten div-Elemente.

Wenn Sie sich den konkreten JavaScript-Code in der Beispieldatei ansehen, können Sie erkennen, dass mit der Klasse YAHOO gearbeitet wird. Im Inneren der Erweiterung „extend“ werden Reaktionen auf Mausereignisse definiert.

Zentraler Angelpunkt der Reaktion ist die Funktionsreferenz „function(e)“, der ein Ereignisobjekt übergeben wird.

Sie finden im Quelltext auch die Definition eines selbst geschriebenen Konstruktors (YAHOO.example.DDResize), der in der Reaktionsfunktion über „dd = new YAHOO.example.DDResize“ analog zum Standardkonstruktor des YUI-APIs zum Erzeugen eines Objekts verwendet wird .

Das nachfolgende Listing ist eine Modifikation der eben besprochenen Beispielapplikation, die zwei Elemente verwendet. Zum vorhandenen div-Container, der nun zusätzlich einen umgebrochenen Text enthält, ist ein verschiebbares Bild hinzugekommen. Der Abdruck des Listings verzichtet aus Platzgründen auf sämtliche Kommentare und die Implementation für den Konstruktor und YAHOO.extend(), da sie sich nicht vom Original unterscheiden:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Verschiebbare Webseitenelemente</title>
		<style type="text/css">
			body {  margin:0; padding:0; }
		</style>
<link rel="stylesheet" type="text/css" xhref="../../build/fonts/fonts-min.css?_yuiversion=2.4.0" />
<script type="text/javascript" xsrc="../yui/build/yahoo-dom-event/yahoo-dom-event.js?_yuiversion=2.4.0"></script>
<script type="text/javascript" xsrc="../yui/build/dragdrop/dragdrop.js?_yuiversion=2.4.0"></script>
<style type="text/css">
		#dd-panel { position: relative; top: 0px; left: 20px;
			height: 200px; width: 150px; text-overflow:clip;
			border: 1px solid #333333; background-color: green; }
		#dd-panel2 { position: relative; top: -10px; left: 240px;
			border: 1px solid #333333; background-color: #f7f7f7; }
		#dd-resize-handle {  cursor: se-resize; width: 10px;
			height: 10px;position: absolute;  bottom: 0px; right: 0px;
			background-color: blue; font-size: 1px; }
</style>
<script type="text/javascript">
YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
		YAHOO.example.DDResize.superclass.constructor.apply(this, arguments);
...};
YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, {...});
(function() {
		var dd, dd2, dd3;
		YAHOO.util.Event.onDOMReady(function() {
			dd = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize");
			dd2 = new YAHOO.util.DD("dd-panel", "paneldrag");
			dd3 = new YAHOO.util.DD("dd-panel2", "paneldrag");
			dd2.addInvalidHandleId("dd-resize-handle");
		});
})();
</script>
</head>

<body class="yui-skin-sam">
<h1>Drag and Drop</h1>
<div>Das div-Element ist verschiebbar und in der Größe zu verändern. Das Bild kann nur verschoben werden.</div>
<div id="dd-panel">
	<div id="dd-resize-handle"></div>
</div>
<img xsrc="http://rjs.de/bilder/devil.gif"  id="dd-panel2">
</body>
</html>

Im Wesentlichen wurde für die Modifikation eine dritte ID für das Bild eingeführt, mit CSS formatiert sowie ein Objekt erzeugt, das die Referenz auf die Grafik zur Verfügung stellt. Weitere Komponenten wie die vorgefertigten Steuerelemente, aber auch komplexere Strukturen lassen sich analog verwenden oder modifizieren.

Wenn man sich den Quellcode der einzelnen YUI-Komponenten ansieht, erkennt man sowohl recht triviale Kernkomponenten wie die einfachen Event- und DOM-Utilities oder Animationen, die einen durchschnittlichen JavaScript-Programmierer kaum fordern. Aber bereits Drag & Drop-Features, komplexe Konstruktionen und die Neuerungen der Versionen 2.3 und 2.4 wie der RTF-Editor ersparen viel Arbeit. Auch die CSS-Bibliothek ist Gold wert.

Ein wesentliches Highlight von YUI gegenüber Konkurrenzbibliotheken wie Prototype oder jQuery ist die Modularität. Da nur der Code eingebunden wird, der konkret genutzt werden soll, muss beim Aufruf der Website nur der Teil von YUI geladen werden, der auch wirklich benötigt wird.

Weniger gut ist, dass YUI explizit nur sogenannte „A-Klasse-Browser“ unterstützt. Wie Yahoo in seinen FAQ ausdrücklich betont, gibt es keine leistungsfähige Bibliothek für JavaScript oder CSS, die in jedem Browser funktioniert. Die folgende offizielle Auswahl ist jedoch etwas sehr eingeschränkt:

Besonders negativ fällt auf, dass Linux bzw. Browser wie Konqueror überhaupt nicht erwähnt werden und die Versionsnummern der unterstützten Browser sehr hoch sind. Allerdings funktionieren diverse Teile von YUI auch in nicht ausdrücklich als A-Klasse-Browser bezeichneten Webbrowsern und auch unter Linux.

Der Autor

Der Diplom-Mathematiker Ralph Steyer (www.rjs.de) arbeitet seit 1995 als Freelancer. Dabei teilt sich seine Tätigkeit in Publikationen, EDV-Schulungen sowie Programmierung und Beratung auf. Daneben betreut er das Portal AJAX-NET.de rund um Ajax und Web 2.0. Bücher zu den Themen JavaScript und Ajax sowie GWT sind bei Addison-Wesley bzw. entwickler.press erschienen.