3 Das YUI Yahoo User Interface

Transkript

1

2 3 Das YUI Yahoo User Interface In diesem Kapitel wollen wir uns dem YUI (Yahoo User Interface), dem ersten AJAX- Framework bzw. -Toolkit in diesem Buch, genauer widmen. Dieses YUI bezeichnet eine populäre JavaScript- und CSS-Bibliothek für webbasierte Benutzerschnittstellen, die Yahoo! 1 als Open Source (unter der BSD-Lizenz license.html) herausgibt. Das YUI wurde in einer ersten Version 2006 veröffentlicht und hat sich nach und nach eine rege Community erarbeitet, die unablässig Erweiterungen entwickelt und bestehende Probleme beseitigt. Mit den enthaltenen Komponenten (Widgets) lassen sich insbesondere auf komfortable Weise Webapplikationen mit ereignisgesteuerter Interaktion unter Verwendung von AJAX entwickeln. Und bereits die ersten Folgeversionen der Startvariante zeigten bei YUI die Tendenz, dass sich die Bibliothek schnell weg von einer ursprünglich recht einfachen Utility-Sammlung mehr und mehr zu einem schwergewichtigen JavaScript- und CSS-Framework mit diversen Entwicklungsfeatures entwickelt. Die dem Buch zugrunde liegende Version bestätigt diese Tendenz. Ein Anwender erhält mehr oder weniger für jeden denkbaren Wunsch an die Gestaltung einer RIA-Oberfläche einen passenden Lösungsvorschlag über YUI, der einfach und komfortabel an eigene Bedürfnisse angepasst werden kann. Und Entwickler können zudem mittels diverser Features die Effektivität und Funktionalität ihrer Webapplikationen testen und verbessern. 3.1 Was ist das YUI? ein Überblick Schauen wir uns zuerst das YUI in einem kleinen Überblick an. Konkret versteht Yahoo! das YUI als einen Satz von Utilities und Steuerelementen, die selbst in HTML und vor allen Dingen JavaScript und CSS geschrieben sind und vollständig transparent im Quellcode nachvollzogen und angepasst werden können. Ähnlich wie einige andere mächtige JavaScript-Frameworks hat Yahoo! mit dem YUI über zusätzliche Konstruktionen auch die Möglichkeit für eine OOP 2 samt Klassen, Konstruktoren, indirekten Eigenschaftszugriffen über Getter und Setter und Vererbung auf Basis von JavaScript nachgebildet, was JavaScript in seiner Grundform nicht bietet. Der Fokus für die Anwendung des YUI ist dennoch die einfache Erstellung von RIAs unter Verwendung der üblichen Webtechniken wie DOM-Scripting, DHTML und AJAX. Die YUI-Bibliothek enthält zudem verschiedene mächtige CSS-Kernressourcen. 1 Es ist wohl offensichtlich, dass dieser Pionier des WWW hinter dem System steht. Und Yahoo! behält sich eine gewisse Kontrolle über das YUI vor, was das YUI von vollkommen freien Open Source-Projekten unterscheidet. 2 Objektorientierte Programmierung.

3 3 Das YUI Yahoo User Interface Die YUI-Komponenten umfassen mittlerweile neben elementaren Kernkomponenten wie Schaltflächen, Eingabefeldern, Kalender, Animationen oder Menüs auch richtig schwergewichtige Komponenten wie einen Rich-Text-Editor, Cross-Browser- Support, ein vierschichtiges CSS-System, ein YUILoader-Utility, ein ImageLoader, ein Color Picker Control und sogar diverse Test- und Entwicklungsfeatures wie ein YUI Test Utility, worüber ein (eingeschränktes) Unit-Testing-Framework in YUI zur Verfügung steht. Dieser schon sehr große Umfang an Komponenten und Features wurde in neueren Versionen um weitere Widgets wie beispielsweise eine Selector- Komponente, Charts, Profiler, Script/CSS Get und vor allen Dingen den immer wichtiger werdenden JSON-Support erweitert. Ein wesentliches Highlight des YUI gegenüber diversen wichtigen Konkurrenzbibliotheken ist die Modularität. Beim YUI braucht ein Webseitenersteller für seine RIA nur das aus der gesamten Bibliothek wirklich zu nehmen, was er auch konkret nutzen möchte. Das bedeutet nichts anderes, als dass bei einem Besucher nur der Teil des YUI auch geladen werden muss, der wirklich benötigt wird. Das beschleunigt natürlich das Laden sowie den Aufbau einer Webseite und ist bei einigen anderen Toolkits/Frameworks nicht so elegant gelöst. Das YUI ist also hochperformant und richtet sich bezüglich des Zusammenspiels mit der Serverseite stark auf PHP aus. Das bedeutet keinesfalls, dass man bei der Serverseite auf PHP beschränkt ist. Aber gerade die Anforderungen von PHP-Entwicklern an bestimmte clientseitige Strukturen werden besonders stark unterstützt. 3 Hinweis Da das YUI von Yahoo! entworfen wurde, ist es natürlich auch stark an den Bedürfnissen von Yahoo!-Webapplikationen orientiert. Diese decken sich aber weitgehend mit den Anforderungen aller modernen Webapplikationen. Von daher muss das auf keinen Fall ein Nachteil sein Die offiziell unterstützten Browser Weniger gut ist, dass das YUI explizit nur sogenannte A-Klasse-Browser unterstützt. Aber damit steht das YUI nicht allein da. Wie Yahoo! in seinen FAQ zum YUI ausdrücklich (und vollkommen richtig) betont, gibt es überhaupt keine leistungsfähige Bibliothek für JavaScript oder CSS, die in jedem Browser funktioniert. Die folgende offizielle Auswahl für die Version ist dennoch etwas sehr eingeschränkt, da ein wesentliches Argument für die Verwendung eines Frameworks oder Toolkits ja explizit die Arbeitserleichterung bei der Anpassung an die verschiedenen Plattformen ist. 3 Wobei wir das in diesem Buch nicht weiter berücksichtigen wir bleiben vollkommen neutral von der Serverseite. 98

4 3.2 Die YUI-Webseite und der Download Win 98 Win 2000 Win XP Win Vista Mac 10.4 Mac 10.5 IE 7.0 IE 6.0 Firefox 2.+ Opera 9.+ Safari 3.0+ Tabelle 3.1: Die offiziell vollkommen unterstützten Plattformen im YUI Besonders negativ fällt auf, dass Linux (geschweige denn ein Linux-Browser wie der Konqueror) überhaupt nicht erwähnt wird und die Versionsnummern der unterstützten Browser doch sehr hoch sind (insbesondere bei Opera und Safari). Allerdings funktionieren diverse Teile des YUI auch in nicht ausdrücklich als A-Klasse-Browser bezeichneten Webbrowsern (auch unter Linux) und für kommende RIAs wird man über kurz oder lang bei einem Besucher einfach eine gewisse Ausstattung voraussetzen müssen. 3.2 Die YUI-Webseite und der Download Die Webseite ist insbesondere für den Einstieg die zentrale Anlaufstelle für alle Fragen zum YUI. Hier finden Sie neben FAQs und diversen Informationen insbesondere den direkten Download-Link ( für die gesamte Bibliothek bzw. den Verweis auf die Sourceforge-Projektseite, worüber das YUI ausgeliefert bzw. verteilt wird. Daneben gibt es unter eine sehr gute API-Dokumentation und unter zahlreiche Beispiele. 4 4 In der Version sind es etwa

5 3 Das YUI Yahoo User Interface Abbildung 3.1: Die Projektseite des YUI 5 Hinweis Mit dem Download der jeweils aktuellen YUI-Version (ein ZIP- Archiv) erhalten Sie neben der eigentlichen Bibliothek auch die vollständige API-Dokumentation samt den Beispielen. Wir werden im Buch sehr eng mit der offiziellen YUI-Dokumentation 5 interagieren und häufiger darauf verweisen. 3.3 Die Bestandteile des YUI Wenn Sie in der lokalen Version das YUI-Archiv öffnen, finden Sie darin neben der Bibliothek, der Dokumentation und den Beispielen auch einen Ordner mit Namen build. Dieser enthält die Quellcodes (im Wesentlichen JavaScript- und CSS-Dateien) und Ressourcen (Bilder etc.) der einzelnen Komponenten bzw. Widgets des YUI. 5 Sie gefällt mir wirklich außerordenlich gut. 100

6 3.3 Die Bestandteile des YUI Abbildung 3.2: Der Ordner build enthält die Komponenten des YUI. 101

7 3 Das YUI Yahoo User Interface Die Struktur der YUI-Bibliothek Die YUI-Bibliothek selbst teilt sich grundsätzlich in verschiedene Bestandteile auf. Die Utilities und Komponenten Unter dem Begriff YUI Core finden Sie das YAHOO Global Object. Dieses stellt die Basisvoraussetzung für alle YUI-Komponenten zur Verfügung. 6 Dazu sind unter YUI Core eine DOM Collection (nützliche Methoden für die Interaktion mit dem DOM) und ein Event Utility (Event Normalization und Tools) zum Umgang mit Ereignissen zu finden. Die YUI Library Utilities entwickeln sich aktuell rasant und umfassen mittlerweile auch diverse Features. Sie finden dort u.a. Utilities für Animationen, die Browser- History, Drag and Drop, JSON, verschiedene Loader und einen Connection Manager, der insbesondere für AJAX interessant ist. Unter der Kategorie YUI Library Controls/Widgets sind die wesentlichen Kernkomponenten für die Erstellung einer GUI für Ihre RIA zu finden, beispielsweise Buttons, Menüs, Kalender, Farbwahlkomponenten, Container (Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog), Baum- und Registeransichten, aber auch mächtigere Komponenten wie der relativ neue Rich Text Editor und eine Slider-Komponente. Die YUI Developer Tools enthalten Utilities bzw. ganze Frameworks zur Analyse Ihrer RIA sowie zum Protokollieren und zum Testen (JUnit bzw. nunit) von Java- Script-Lösungen. Sie finden derzeit dort ein Logger Control, einen Profiler samt ProfilerViewer Control und das YUI Test Utility. Hinweis Die Anzahl der Controls und Widgets des YUI sowie der Utilities wird permanent erweitert und verschiedene Controls und Widgets sowie Utilities bzw. Tools werden natürlich auch weiterentwickelt. So werden Sie in der Dokumentation des YUI bzw. auf den Webseiten von Yahoo! oft einen Hinweis finden, dass sich eine spezifische YUI-Komponente noch im Betastadium befindet. Solch ein Betastadium bedeutet aber nicht unbedingt, dass sich eine Komponente nicht schon in Produktion verwenden lässt oder dass sie unzuverlässig ist. Solch eine Kennzeichnung bedeutet nur, dass Yahoo! auf Feedback der Community über diese Komponente und deren API hofft, bevor der Zustand endgültig festgeschrieben wird. Die Kennzeichnung bedeutet weiter, dass es explizit zu erwarten ist, dass es noch Modifikationen im API geben wird, die möglicherweise nicht rückwärts kompatibel sind. Wenn Sie also eine Betakomponente in Ihr Projekt einbauen, müssen Sie möglicherweise in zukünftigen YUI-Releases einige Anpassungen in Ihrer Implementierung vornehmen, wenn Sie auf die neue Version der Komponente zugreifen wollen. 6 So ein oberstes Objekt findet man in den meisten APIs in der OOP. 102

8 3.3 Die Bestandteile des YUI Zusätzlich zur Kennzeichnung einer Komponente als Betaversion gibt es eine Kennzeichnung von Komponenten als experimental. Eine solche Komponente ist noch nicht vollständig ausgetestet. Sie sollte nicht in kritischen Projekten eingesetzt werden, sondern dient im Wesentlichen dem Experimentieren durch die Community, die Yahoo! dann Feedback geben sollte. Die CSS-Bibliotheken Von besonderer Bedeutung beim YUI sind auch die YUI Library CSS Tools, die wir aber aufgrund der äußerst einfachen Anwendung hier nur ganz kurz anreißen wollen. Diese Tools sind nicht zuletzt bei mehrspaltigen CSS-Designs zur Verhinderung umherspringender <div>-container in verschiedenen Browsern und Auflösungen von großem Nutzen. So gibt es mit der Bibliothek reset.css ein nützliches 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 und base.css stellt für die wichtigsten Elemente gewisse Grundformatierungen her. Das sorgt dafür, dass diese Elemente für alle relevanten Browser alle auf konsistente Werte gesetzt sind, die überall dann gleich aussehen. Das Highlight des CSS-Pakets aber ist die Bibliothek grid.css. Mit der nur ca. 4 Kbyte großen Datei lässt sich das Layout einer Webseite beliebig in Spalten und Zeilen aufteilen. Man kann damit fast beliebig geschachtelte Layouts erstellen, die mit einem minimalen Aufwand an HTML-Tags auskommen und trotzdem barrierefrei sind. Wer schon einmal manuell versucht hat, ein solches Layout plattformneutral für alle wichtigen Browser aufzubauen, wird zu schätzen wissen, was dieses Paket an Nutzen bringen kann. Während die anderen drei CSS-Bibliotheken im Wesentlichen nur als externe Dateien in Ihre Webseite eingebunden werden, muss man bei der Verwendung der YUI Grids CSS doch ein paar Dinge machen, bevor das Layout so aussieht, wie Sie es brauchen. Aber das Verfahren ist wie schon angedeutet denkbar einfach. Am besten schauen Sie zuerst unter welche Möglichkeiten Sie im Einzelnen haben. Insbesondere die Templates und vorgegebenen Beispiele und Grids sollten für die meisten denkbaren Layouts Ihrer Webseite bereits vollauf genügen. Die Anwendung besteht in der Regel darin, die vorgegebenen <div>-container mit den spezifischen IDs zu kopieren und darum eine Webseite zu bauen, deren Inhalte sich auf diese <div>-container verteilen. Die genaue Vorgehensweise ist bei jedem Template oder Beispiel genau erklärt und sollte mit etwas Kenntnissen in HTML und CSS ohne Probleme umzusetzen sein. 103

9 3 Das YUI Yahoo User Interface Abbildung 3.3: Ein Template im YUI Grids CSS wurde ausgewählt. Hinweis Über diese Bibliotheken hinaus gibt es im YUI diverse nützliche Tools, die das YUI zu einem echten Framework aufwerten. Wir werden diese Tools wie den YUI Compressor, das Logger Control oder den Log Reader im Laufe des Buchs kennenlernen. 104

10 3.4 Die konkrete Anwendung des YUI Abbildung 3.4: Das Aussehen einer Seite, die auf so einem Template basiert, können Sie sich in einem separaten Fenster anzeigen lassen. 3.4 Die konkrete Anwendung des YUI Wenn Sie Ihre RIA unter Verwendung des YUI erweitern oder von Grund auf neu erstellen wollen, können Sie im Grunde immer gleich vorgehen. 7 Die konkrete Anwendung des YUI basiert auf der Einbindung der notwendigen Ressourcen in die zugrunde liegende Webseite (entweder aus einer eigenen Quelle oder direkt von den Webseiten von Yahoo!), der Erzeugung einer gewünschten Komponente bzw. eines Utilities, der Definition einer JavaScript-Funktion bzw. -Funktionalität auf Basis des YUI und 7 Ich setze eine vernünftige Konzeption und Planung des gesamten Projekts natürlich voraus und möchte auch davon ausgehen, dass die Struktur der Website samt den gesamten HTML- Seiten bereits steht bzw. hier nicht berücksichtigt wird. 105

11 3 Das YUI Yahoo User Interface der Verbindung zwischen der Komponente und der passenden Funktion bzw. Funktionalität. Gegebenenfalls protokollieren und analysieren Sie zur Entwicklungszeit noch die Funktionalität der Komponente bzw. der gesamten Webseite und/oder optimieren im Anschluss die RIA Wie gehen Sie beim Einstieg am besten vor? Am einfachsten lernt man meines Erachtens den Umgang mit YUI, indem man sukzessive einige der beigefügten YUI-Beispiele direkt ausprobiert, anschließend den Quellcode analysiert und dann modifiziert. Es wird aber auch für die konkrete Anwendung in der Praxis bei fast allen Komponenten und Widgets des YUI am Anfang die sinnvollste Vorgehensweise sein, dass Sie ein bestehendes Beispiel als Grundlage nehmen und für eigene Zwecke anpassen. Die grundsätzliche Vorgehensweise ist auch dabei eigentlich immer gleich. Daher sind diese Ausführungen unabhängig von dem konkreten Beispiel zu sehen sie beschreiben eine universelle Herangehensweise, um eine bestimmte Komponente für eigene Zwecke zu verwenden. Abbildung 3.5: Ein Beispiel für Drag&Drop 106

12 3.4 Die konkrete Anwendung des YUI 1. Zuerst suchen Sie über die Webseite des YUI eine Komponente bzw. Funktionalität, die für Ihre Aufgabenstellung am besten passen könnte oder die Sie allgemein interessiert. Zum Beispiel finden Sie diese auf der linken Seite unter der Kategorie YUI Components. Achtung Beachten Sie, dass die Entwicklung des YUI (wie die meisten Frameworks und Toolkits im AJAX-Umfeld) sehr dynamisch ist. So können laufend auch zu jeder Komponente Beispiele hinzukommen oder auch wieder entfernt werden. Auch kann sich der Aufbau der YUI- Webseite natürlich immer wieder ändern. 2. Dann analysieren Sie deren Verhaltensweise und Funktionalität. Am einfachsten sollte das mit einem der vorhandenen Standardbeispiele funktionieren, das Sie einfach ausprobieren entweder über Ihre lokale Installation des YUI oder direkt über die Webseiten von Yahoo!. Abbildung 3.6: Die Beispiele auf den YUI-Seiten sind voll funktional. 107

13 3 Das YUI Yahoo User Interface 3. Anschließend passen Sie mit der Dokumentation und den Beschreibungen bei dem Beispiel den Beispielcode den Sie meist sogar direkt aus den Yahoo!-Seiten kopieren können für Ihre Zwecke an. Abbildung 3.7: In den Quelltexten finden Sie die Details, wie die Beispiele funktionieren. Hinweis Diese Schrittfolge wollen wir nachfolgend selbstredend noch mit konkreten Beispielen durchspielen. Yahoo! selbst regt in der Anleitung zum YUI das Herantasten an das Toolkit über eine fünfstufige Vorgehensweise an: 4. Yahoo! empfiehlt für den ersten Kontakt mit dem YUI ausdrücklich eine Beschäftigung mit der DOM Collection und der Event Utility-Sammlung. Event und DOM sind wie schon erwähnt Teil des YUI Core (zusammen mit dem YAHOO Global Object) und stellen die wichtigsten Grundlagen für JavaScript-Entwickler bereit, die das YUI verwenden wollen. Sobald Sie diese fundamentalen Techniken angesehen und verstanden haben, empfiehlt Yahoo!, sich mit erweiterten Utilities wie Drag&Drop, Animation oder UI-Controls wie Button, Calendar und TabView zu beschäftigen und die verfügbaren Beispiele zu modifizieren. Und sofern Sie an den CSS-Komponenten des YUI interessiert sind, sollten Sie sich die Beispiele für 108

14 3.5 First contact die DOM Collection Reset, Base, Fonts und Grids (in dieser Reihenfolge) ansehen. 8 Sie finden also in den Standardbeispielen des YUI sowohl einfache Beispiele, die sich exzellent für erste Experimente eignen, als auch komplexere. Und insbesondere mit den Utilities zu Drag&Drop, AJAX, JSON etc. wird es auch für erfahrene JavaScript-Programmierer interessant. Und auf diese Auswahl an erweiterten Möglichkeiten wollen wir im Folgenden nach der grundsätzlichen Beschäftigung mit der DOM Collection und der Event-Utility-Sammlung samt Beispielen ebenfalls eingehen. 5. Beachten Sie, dass es für jede Komponente des YUI eine vollständige Benutzungsanleitung auf der entsprechenden Webseite gibt. Und dazu erhalten Sie natürlich noch eine hervorragende und durchsuchbare API-Dokumentation. Dies ist eine ideale Quelle für die Anwendung einer spezifischen Komponente. 6. Es gibt für jede Komponente sogenannte Spickzettel (cheat sheets), die über die verschiedenen Webseiten verfügbar sowie als kompletter Satz herunterzuladen sind. Diese beschreiben eine einfache Schrittfolge, wie Sie die Komponente verwenden und anpassen können. 7. Experimentieren Sie mit der Erstellung Ihrer eigenen Webseiten unter Verwendung des YUI. Sie können YUI-Skripte und CSS-Dateien respektive die zugehörigen Bibliotheken sowohl aus Ihrer lokalen YUI-Installation (aus dem Verzeichnis build) als auch direkt von den Servern von Yahoo! einbinden. Wenn Sie die Module nicht manuell einbinden wollen, unterstützt Sie das YUI Loader Utility dabei als ein clientseitiges Ladepaket, das dynamisch aufgrund der Verwendung im Quellcode alle benötigten YUI-Ressourcen liefert. Dabei ist es vollkommen gleichgültig, ob Sie die Ressourcen von Ihren eigenen Servern oder Servern von Yahoo! laden Und last but not least bietet es sich natürlich an, ein Mitglied der YUI-Community zu werden ( Dort finden Sie neben einem Blog (YUIBlog) u.a. ein Forum sowie in die Tiefe gehende Artikel, Videos und andere Inhalte über das YUI. 3.5 First contact die DOM Collection Wenn man sich heutzutage moderne Webseiten ansieht, zeigen diese allesamt ein dynamisches Verhalten. Dies gilt natürlich insbesondere für RIAs. So ein dynamisches Verhalten wird im Wesentlichen über die Manipulation des DOM erreicht entweder aufgrund eines Ereignisses oder nach einem vorgegebenen Algorithmus. Objekte dieser DOM-Struktur stellen diverse Eigenschaften wie style oder innerhtml 8 Darauf gehen wir wie gesagt nur am Rande ein, weil die Anwendung wirklich sehr einfach ist. 9 Die Anwendung des YUI Loader Utilities ist ziemlich einfach, da Sie für alle Ressourcen des YUI eine passende Skriptpassage in der Dokumentation finden, die Sie eigentlich nur in Ihre Webseiten kopieren müssen. Und wenn Sie nicht über die Anpassung dieser Beispiele gehen ist das Einzige, was Sie wissen müssen, der Name des interessierenden YUI Moduls. Und diese Informationen finden Sie unter 109

15 3 Das YUI Yahoo User Interface zur Verfügung, über die man via JavaScript das Aussehen und die Inhalte von Bestandteilen der Webseite ändern kann. So gesehen könnte das Leben eines Webentwicklers sehr einfach sein wenn es nicht die teilweise extrem unterschiedlichen Verhaltensweisen verschiedener Browser gäbe sowie den gelegentlich doch recht umständlichen Zugang zum DOM. Die DOM Collection des YUI verspricht die Bereitstellung einer Familie an einfach anzuwendenden Methoden, um den Zugang zum DOM sowohl zu erleichtern als auch konsistent in allen unterstützten Browsern zu gewährleisten. Die Möglichkeiten umfassen allgemeines DOM-Skripting inklusive der Positionierung von Elementen und der browser-neutralen Verwaltung von CSS-Stilregeln Die Einbindung der DOM Collection Zur Verwendung der DOM Collection binden Sie einfach die nachfolgenden Quelldateien über das script-tag in Ihrer Webseite ein: Listing 3.1: Die Referenzen auf die externen JavaScript-Dateien, die direkt von den Seiten von Yahoo! aus dem Internet eingebunden werden <!-- Dependencies --> <script src=" <!-- Source file --> <script src=" Sie sparen beim Laden der YUI-Ressourcen von den Yahoo!-Seiten natürlich Kapazität auf Ihrem eigenen Webserversystem. Dabei ist weniger der Speicherplatz als nennenswerte Ersparnis zu sehen als das eingesparte Datenvolumen. Und unter Umständen bewirkt das Laden von den Yahoo!-Servern sogar eine Steigerung der Performance Ihrer Applikation. Yahoo! verwendet zur Bereitstellung der YUI-Ressourcen ein schnelles und leistungsfähiges CDN. Hinweis CDN steht für Content Distribution Network oder Content Delivery Network und bezeichnet ein Netz lokal verteilter und über das Internet verbundener Server, mit dem größere Mengen an Inhalt möglichst ökonomisch und schnell ausgeliefert werden. Natürlich können Sie auch auf Ihre lokale Kopie auf dem eigenen Webserver verweisen. Dann verwenden Sie entweder den absoluten URL zu Ihrem Webserver oder einen relativen URL ab dem Verzeichnis build. 110

16 3.5 First contact die DOM Collection Achtung Sie sollten bei der Einbindung von externen JavaScript-Dateien des YUI die vorgegebene Reihenfolge unbedingt einhalten. Mit der ersten Referenz verweisen Sie auf das YAHOO Global Object. Darüber stehen Ihnen Namensräume, Utilities für JavaScript samt diverser Erweiterungen, Filter, Protokollmöglichkeiten etc. zur Verfügung. Diese Basis des gesamten YUI-Konzepts muss erst einmal dem Browser zur Verfügung stehen, bevor die eigentlich gewünschten Komponentenstrukturen verarbeitet werden können. Dies gilt für diverse Anwendungen des YUI (aber nicht alle beachten Sie immer die Dokumentation). YAHOO.util.Dom ist eine Klasse, die Sie nicht explizit instanzieren müssen. Sie können also einfach über die Klasse auf die benötigten Methoden zugreifen 10 (z.b. YAHOO.util.Dom.getXY("myElementId") oder YAHOO.util.Dom.getStyle("myElementId")). Tipp Wenn Sie mit dem YUI und der DOM Collection in der Praxis eine Gestaltung vornehmen, sollten Sie eine Einbindung der CSS-Bibliothek reset.css erwägen, um vorher alle browsereigenen Einstellungen zurückzusetzen. Und natürlich auch die anderen CSS-Bibliotheken berücksichtigen, wenn Sie ein komplexes Layout zuverlässig gestalten wollen. Wir werden das im Buch aber nicht machen Die Anwendung der DOM Collection Über die DOM Collection können Sie beispielsweise die Positionierung von HTML- Elementen konsistent und einfach vornehmen. Dazu gibt es entsprechend der modernen objektorientierten Programmierung Getter- und Setter-Methoden zum Zugriff auf Koordinatenangaben. 11 Diese Methoden vereinfachen den doch manuell sehr diffizilen und stark von der Position eines HTML-Elements abhängenden Zugriff erheblich. Über die Positionsmethoden setxy(), getxy(), setx() und so weiter erhalten Sie einen sicheren und in allen unterstützten Browsern funktionierenden Zugriff auf die Position. Das folgende Codefragment verwendet die Methode getxy(), um ein Array mit der X- und Y-Koordinate des HTML-Elements mit der ID meinele zurückzugeben. Umgekehrt kann man mit der Methode setxy() über ein Koordinatenarray ein Element positionieren. Listing 3.2: Zugriff auf Koordinaten im YUI var pos = YAHOO.util.Dom.getXY('meinEle'); YAHOO.util.Dom.setXY('meinEle', pos); 10 Mit anderen Worten es handelt sich um Klassenmethoden. 11 Solche Getter und Setter finden Sie auch an anderen Stellen im YUI konsequent umgesetzt. 111

17 3 Das YUI Yahoo User Interface Der Zugriff auf die weiteren CSS-Eigenschaften eines Elements erfolgt über die Methoden getstyle() zum Abfragen und setstyle() zum Setzen der Werte. 12 Damit haben Sie einen indirekten, gekapselten Zugriff auf die Eigenschaft style eines DOM- Objekts zur Verfügung. In dem nachfolgenden Codefragment sehen Sie, wie Sie über die Methode setstyle() die Transparenz zweier HTML-Elemente mit der ID meinele sowie der ID meinele2 auf den Wert 0.5 festlegen und die Transparenz des Elements mit der ID meinele3 über die Methode getstyle() abfragen. Listing 3.3: Zugriff auf die style-eigenschaft YAHOO.util.Dom.setStyle(['meinEle', 'meinele2'], 'opacity', 0.5); var opacity = YAHOO.util.Dom.getStyle('meinEle3', 'opacity'); Sie können mit setstyle() natürlich alle üblichen CSS-Werte für die Eigenschaft style angeben Ein erstes Beispiel mit der DOM Collection Schauen wir uns als erstes Beispiel für das YUI ein vollständiges Listing zur Arbeit mit der DOM Collection an (yiu_dom_collection.html): Listing 3.4: Zwei Elemente in einer Webseite werden mit der DOM Collection manipuliert. 01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 02 " 03 <html> 04 <head> 05 <meta http-equiv="content-type" 06 content="text/html; charset=iso " /> 07 <title>yui Dom Collection</title> 08 <!-- Dependencies --> 09 <script src= 10 " 11 </script> 12 <!-- Source file --> 13 <script src= 14 " 15 </script> 16 </head> 17 <body> 18 <h1 id="meinele">die YUI Dom Collection</h1> 19 <img src="b1.jpg" id="meinele2"/> 12 Das Setzen der Werte kann für mehrere Elemente gleichzeitig erfolgen, indem Sie als ersten Parameter ein Array mit IDs angeben. 112

18 3.5 First contact die DOM Collection 20 </body> 21 <script type="text/javascript"> 22 var pos = YAHOO.util.Dom.getXY('meinEle2'); 23 YAHOO.util.Dom.setXY('meinEle', pos); 24 YAHOO.util.Dom.setStyle('meinEle', 'opacity', 0.3); 25 YAHOO.util.Dom.setStyle('meinEle', 'color', 'red'); 26 </script> 27 </html> Sie sehen in diesem Beispiel eine einfache Webseite. Es gibt eine Überschrift mit einer ID (Zeile 18) sowie ein Bild, das ebenso über eine ID verfügt (Zeile 19). In dem Skript werden mit getxy() die Koordinaten des Bilds abgefragt (Zeile 22) und die Überschrift in Zeile 23 mit setxy() so positioniert, dass diese über dem Bild liegt. In Zeile 24 werden zudem mit der Methode setstyle() die Transparenz der Überschrift auf den Wert 0.3 und in Zeile 25 die Schriftfarbe auf Rot festgelegt. Abbildung 3.8: So sieht die Seite aus, wenn die CSS-Eigenschaften nicht über das YUI manipuliert wurden. 113

19 3 Das YUI Yahoo User Interface Abbildung 3.9: Das formatierte Aussehen der Webseite Achtung Ihnen sollte in dem Beispiel auffallen, dass der Skriptcontainer mit dem Zugriff auf die Elemente in der Webseite am Ende notiert wurde. Dies ist nicht unkritisch. Oder um es etwas genauer zu sagen Sie sollten so eigentlich nicht arbeiten, wenn Sie sich an die offiziellen Regeln des W3C halten wollen. Aber auch das YUI kann die bekannten Probleme verschiedener Browser beim Aufbau des DOM nicht mir nichts dir nichts beseitigen. Das bedeutet, wenn sich ein Element in einer Webseite befindet und vorher im Quelltext bereits mit einem JavaScript auf die DOM-Repräsentation des Elements zugegriffen wird, wurde von den meisten Browsern dieses Element im DOM noch gar nicht angelegt. Und das bedeutet, der Zugriff per 114

20 3.5 First contact die DOM Collection JavaScript auf eine Objektrepräsentation dieses Elements greift ins Leere. Die einzig mögliche Kompensierung für dieses Problem besteht bei händischer Programmierung, dass der Skriptzugriff erst dann erfolgt, wenn das Element in den DOM gerendert wurde. Und dies erreicht man nur dann zuverlässig für alle relevanten Browser, wenn der Skriptcontainer in der Webseite nach dem Element notiert wird, am besten ganz am Ende einer Webseite. Und dies ist nach den offiziellen Regeln des W3C nicht gewünscht. Dennoch entweder Sie ignorieren die Theoretiker des W3C oder Sie kämpfen gegen Windmühlen. Oder aber, Sie verwenden eine Technik des YUI, die Handler deferral genannt wird und zu einem der interessanten Features des YUI zählt (siehe Seite 121). Die DOM Collection stellt noch ein paar weitere Features zur Verfügung. Ein Ansichtsfenster ist zum Beispiel die sichtbare Breite und Höhe eines Dokuments. Mithilfe der DOM Collection können Sie über die Methoden getviewportwidth() und getviewportheight() diese Werte ermitteln. Verwaltung von Klassennamen im YUI Wie Sie mit etwas CSS-Background wissen, gibt es in CSS Klassen, die bestimmten Elementen in der Webseite zugeordnet werden können. Spannend an der DOM Collection ist, dass es eine gewisse Anzahl an Methoden gibt, um darüber dynamisch Klassennamen zu verwalten. Diese ergänzen die normalen DOM-Methoden und umfassen die nachfolgenden Methoden: Die Methode getelementsbyclassname(classname, tagname, rootnode) liefert ein Array mit Elementen, denen der angegebene Klassennamen zugeordnet ist. Die optionalen Parameter tagname und/oder rootnode können eine Einschränkung auf einen bestimmten Tag oder Wurzelknoten festlegen. Mit der Methode hasclass(element, classname) können Sie testen, ob ein Element einen ganz bestimmten Klassennamen zugeordnet hat. Über die Methode addclass(element, classname) ordnen Sie den angegebenen Klassennamen einem Element zu und mit der Methode removeclass(element, classname) entfernen Sie den Klassennamen von einem Element. Mithilfe der Methode replaceclass(element, oldclassname, newclassname) können Sie auf einfache Weise einen vorhandenen Klassennamen durch einen anderen Klassennamen für das angegebene Element ersetzen. 115