"YUI" - Webentwickler haben vielleicht schon von YAHOOs AJAX- und DHTML-Framework gehört. Wahrscheinlich ist das aber nicht, denn YUI hat noch nicht den Bekanntheitsgrad von Script.aculo.us, Prototype oder Mootools. Völlig zu Unrecht. DrWeb stellt das Framework mit zahlreichen anschaulichen Filmchen vor.

Color Picker (YUI-Library)
"Color Picker" bietet die von vielen Desktop-Anwendungen bekannte Farbauswahl. Farbwerte werden im RGB-, Hex und HSV-Format angezeigt.



Farbwähler kombiniert mit einem "TabView"-Widget.

Container (YUI-Library)
"Container" ist eine Basisklasse für zahlreiche Sub-Komponenten:

"Dialog" und "SimpleDialog" bieten Funktionen, mit denen Dialog-Fenster erzeugt werden können.

Container-Effekte

"Loading"-Panel anzeigen, um Wartezeiten zu überbrücken

Neben "Dialog", "SimpleDialog" gibt es noch weitere Sub-Komponenten. "Module" ist ein Gerüst für eigene Widgets. "Overlay" bietet Funktionen zum Überlagern und Positionieren von HTML-Elementen auf einer Seite, ähnlich wie Lightbox es macht. "Panel" bietet etwas Ähnliches wie kleine verschiebbare und schließbare Fensterchen an, die entweder aus HTML-Markup oder aus Javascript heraus erzeugt werden. Mit "Tooltips" können die bekannten Tooltips erzeugt und auch mehreren DOM-Elementen gleichzeitig zugewiesen werden.

DataTable (YUI-Library)

DataTable-Demo

"DataTable" ist eines der mächtigsten YUI-Widgets. Beispielsweise können JSON-Objekte direkt in das Widget geladen werden, welches dann die Darstellung übernimmt. Einträge können vom Benutzer direkt im Browser oder auch auf dem Server sortiert werden oder es können über Kontext-Menüs Funktionen auf bestimmte Datensätze ausgeführt werden. Auch Paginierung ist möglich. Obwohl die Darstellung komplett in YUI gekapselt ist, bleiben dennoch alle CSS-Gestaltungsmöglichkeiten erhalten.

DataTable-Inline-Bearbeitung

Logger (YUI-Library)
Bietet Entwicklern ein so genanntes Logger-Panel an, in dem Logeinträge chronologisch dargestellt werden.

Menu (YUI-Library)
Gibt Entwicklern ein mächtiges Werkzeug in die Hand, mit dem barrierefreie Menüs erzeugt werden können. Menüeinträge können dynamisch manipuliert und per Maus oder Tastatur navigiert werden.

Menü-Effekt

Rich Text Editor (YUI-Library)
Diese Komponente enthält einen einfachen, aber dennoch komfortablen Rich-Text-Editor.

RTE mit Flickr-Anbindung

Slider
"Slider", bietet eine einfache Möglichkeit, in einem endlichen Zahlenraum einen Wert über einen Slider einzustellen.

Slider

TabView (YUI-Library)
Mit TabView werden Tab-Ansichten erzeugt, die über HTML-Markup oder als Javascript definiert werden können. Die Tabs sind dynamisch manipulierbar.

Dynamisches TabView-Widget

TreeView (YUI-Library)
"TreeView" stellt hierarchische Datenstrukturen übersichtlich dar, ähnlich wie Verzeichnisse in einem Dateimanager. Die Datenstruktur kann dynamisch geladen und mit Icons versehen werden.

TreeView-Widget

YUI-CSS-Grids:

Reset
"Reset CSS" normalisiert die Standard-Darstellung von CSS in Webbrowsern, in dem das Stylesheet alle Elemente auf "0" bringt, das heißt Abstände, Ränder, Zwischenräume auf 0 setzt, Schriftgrößen vereinheitlicht und noch einiges mehr macht.

Base-CSS & Fonts-CSS
"Base-CSS" macht im Prinzip das Gleiche wie "Reset CSS". Während "Reset CSS" die Darstellung durch Entfernen von Styles normalisiert, setzt "Base-CSS" die CSS-Einstellungen so, dass die Darstellung in allen (unterstützten) Webbrowsern gleich ist. "Fonts-CSS"kümmert sich nicht nur um browserspezifische, sondern auch um plattformspezifische Font-Eigenheiten.

Grids CSS
"Grids-CSS" ist eine 4kb-CSS-Datei mit verschiedenen dynamischen und fixen Seitenlayouts auf über 1000 verschiedene Weisen kombiniert werden können.

Fazit
Der Umfang von YUI ist bereits jetzt sehr groß. Die sehr liberale BSD-OpenSource-Lizenz erlaubt auch den Einsatz in Closed-Source-Software, so dass Entwicklern kaum Grenzen gesetzt sind. Die konsequente und auch selbstverständliche Ausrichtung auf Cross-Browser-Funktionalität nimmt Entwicklern sehr viel mühsame und wenig produktive Arbeit ab, wenngleich man wohl nie ganz ohne Tests und Anpassungen auskommen wird. YAHOO treibt die Entwicklung weiter voran. Von YUI werden wir daher in Zukunft sicherlich noch viel hören und sehen. (tm)

Links zum Artikel:

• developer.yahoo.com/yui/ (engl.)
• API-Dokumentation (engl.)
• Teil 1 des Artikels

Verwandte Artikel

• YUI - ein AJAX-Riese startet - Teil 2 (0)
• YUI - ein AJAX-Riese startet - Teil 1 (1)
• Timeline für Webseiten (11)
• Sortierbare Tabellen - Datagrids mit AJAX und Javascript (11)
• Moderne Benutzerschnittstellen für die Webseite mit den jsComponents (0)
• Grids CSS: ein zeitsparendes System für das Layout (1)
• Das aktuelle YUI 3 CSS Framework im Praxistest (2)