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.
Was ist YUI?
„Yahoo! User Interface“ ist eine Javascript-Bibliothek, mit der Entwickler mittels AJAX, JSON und DHTML asynchrone Websites und Web-Anwendungen entwickeln können. Die Bibliothek ist BSD-lizensierte, freie OpenSource-Software. Sie kann daher auch in proprietären Web-Anwendungen lizenzkostenfrei eingesetzt werden.
Warum brauche ich YUI?
Noch braucht nicht jeder Entwickler YUI, zumal viele Teile des Frameworks noch im Alpha- oder Beta-Stadium sind und hier und da noch scharfe Kanten die Arbeit mit YUI erschweren. Das wird sich aber bald ändern – und für Entwickler kann es nie zu früh sein, sich mit Zeit sparenden Werkzeugen zu beschäftigen. Zeit spart YUI, weil es für fast alle Zwecke aufeinander abgestimmte Komponenten, Funktionen und Vorlagen bietet. Vielleicht wird YUI bald wie Script.aculo.us, Prototype und Mootools zu den Standard-Werkzeugen von AJAX-Entwicklern gehören – nicht zuletzt, weil mit YAHOO ein milliardenschweres Unternehmen hochkarätige Entwickler auf dessen Weiterentwicklung angesetzt hat. Los geht es mit der Vorstellung der wichtigsten YUI-Komponenten:
Core-Komponenten: DOM-Collection & Events
Mit „DOM-Collection“ greifen Entwickler auf DOM-Elemente und Objektattribute zu, ohne sich um browserspezifische Eigenheiten kümmern zu müssen. Das Framework erledigt die Feinheiten. Bequeme Accessorfunktionen gehören ebenfalls dazu. „Events“ ist für zahlreiche Komponenten die Elternklasse. Sie bietet vereinheitlichtes Event-Handling über alle Komponenten hinweg.
YUI-Utilities
Verschiedene Entwicklungstools sind unter YUI-Utilities zusammengefasst.
Animation (YUI-Utility)
Mit „Animation“ werden auf einfache Weise Animationen definiert, ausgeführt und kombiniert. Beispielsweise Animationen entlang eines Pfads, Ease-In-Animationen oder animierte Farbübergänge.
Pfad-Animation
Browser-History-Manager (YUI-Utility)
Dieses Werkzeug ermöglicht es, dynamisch geladene „Bereiche“ einer HTML-Seite über eine URL zugänglich zu machen, beispielsweise um die Navigation innerhalb des Kalender-Widgets abzubilden. So wäre es möglich, jedem Monat eine URL zu geben, die der Nutzer für ein Bookmark verwenden könnte.
Browser-History-Manager: Die URL wird mit Monat und Jahr aus dem Kalender ergänzt.
Connection Manager (YUI-Utility)
Der „Connection Manager“ ist eine vereinheitlichte Schnittstelle zum XMLHttpRequest-Objekt (XHR). Er kümmert sich um die Initialisierung von XMLHttpRequest, die Antwort des Servers und bietet eine Callback-Schnittstelle für die Verarbeitung der Antwort.
DataSource (YUI-Utility)
„DataSource“ dient der Datenverarbeitung zwischen Komponenten. Behandelt werden können zum Beispiel Arrays oder auch XHR-Antworten, welche dann unter anderem in ein DataTable-Widget geladen werden können.
Drag & Drop: Interagierende Objekte
Drag & Drop (YUI-Utility)
Diese Komponente bietet sehr weit reichende Möglichkeiten an, Drag & Drop-Funktionen zu implementieren. Eigene Drag-Handles können ebenso definiert werden wie gruppiertes Drag & Drop, bei dem verschiedene DOM-Elemente miteinander kombiniert werden.
Drag & Drop: Einträge neu ordnen
Element (YUI-Utility)
„Element“ ist ein Wrapper, mit dem HTML-Elemente aus dem DOM angesprochen und manipuliert werden können. Auch lassen sich Event-Listener implementieren, die Funktionen bei bestimmten Ereignissen aufrufen.
ImageLoader (YUI-Utility)
Mit dem „ImageLoader“ haben Entwickler genaue Kontrolle darüber, wann und welche Bilder geladen werden. Beispiel: Eine Seite besteht aus vielen Bildern. Die Seite lädt dadurch sehr langsam. Mit dem ImageLoader ist es möglich festzustellen oder festzulegen, welche Bilder der Nutzer direkt nach dem Aufruf der Seite sehen kann. Der ImageLoader lädt dann zunächst nur die sichtbaren Bilder und alle weiteren erst dann, wenn alles „wichtige“ fertig geladen wurde.
YUILoader (YUI-Utility)
„YUILoader“ ist für das Laden von Komponenten in der richtigen Reihenfolge und die Auflösung von Komponenten-Abhängigkeiten zuständig.
YUI Test (YUI-Utility)
„YUI Test“ ist der Zugang zur „spannenden Welt“ des Unit-Testens.
YUI-Library & Widgets
„YUI-Library & Widgets“ enthält zahlreiche fertige Controls und Widgets, die auf den aus YUI-Utilities bekannten Komponenten basieren.
AutoComplete (YUI-Library)
Dieser Teil stellt Funktionen zur Verfügung, um Autocomplete-Eingabefelder zu erzeugen. Daten können zwischengespeichert, Abfragen verzögert und beschränkt werden und vieles mehr.
Autocomplete-Demo
Button Control (YUI-Library)
Dieses Control erweitert in Verbindung mit der „Menu“-Komponente die Möglichkeiten von Formularen ganz erheblich. Buttons, Select-, Radio- und Checkboxen können mit dieser Komponente frei gestaltet werden, so dass Entwickler nicht mehr durch Standard-Formularelemente beschränkt sind.
Select-Felder
Checkbox-Demo, Radiofeld-Verhalten ist auch möglich.
Calendar (YUI-Library)
Wie der Name andeutet, enthält diese Komponente ein einfach zu bedienendes Kalender-Widget. Auch eine über mehrere Monate reichende Ansicht ist möglich.
Kalender-Demo
