LiveView mit jQuery UI

Im Vorfeld der kürzlichen Überarbeitung einer Kunden-Website, deren inhaltliche Strukturierung bei einigen Seiten den Einsatz von sog. AJAX – Registerkarten (Tabs) rechtfertigte, stand ich natürlich vor der Qual der Wahl: auf welcher der bekannten AJAX Libraries soll das Ganze denn basieren ?

In diesem Fall habe ich mich für den Einsatz der ziemlich umfangreichen jQuery UI – Library entschieden, die sich – salopp gesagt – aus einem schieren Wust an JavaScript- und CSS-Dateien zusammensetzt.

Diese Komplexität kann natürlich so manchen Entwickler trotz der exzellenten Dokumentation schnell zur Verzweiflung treiben, weil man bei der individuellen Anpassung diverser Design-Vorgaben (z.B. Hintergrundfarbe der Tabs) die Übersicht verlieren kann, was Fragen wie “in welcher der vielen CSS-Dateien kann ich denn bitteschön was definieren ?” aufwirft.

Dreamweaver bietet ab der Version CS4 ein ungemein praktisches Feature namens “zugehörige Dateien”: beim Öffnen eines HTML-Dokuments werden automatisch alle mit dieser Datei verlinkten JavaScript- und CSS-Dateien in einer Registerkarte angezeigt, was dem Anwender hilft, sich deutlich leichter orientieren zu können:

Dreamweaver CS5: Dokumentenfenster mit Anzeige der zugehörigen Dateien

Auch bei einer Einbindung der jQuery UI – Library verrät ein genauerer Blick auf diese Registerkarte auf Anhieb, mit welchen zusätzlichen CSS-Dateien man sich ggf. befassen darf, um das gewünschte Resultat zu erzielen:

Zoom

Und wo liegt das Problem ?

Die von Javascript-Libraries wie jQuery UI beigesteuerten Effekte und CSS-Stile werden traditionell auf “nackte” HTML-Strukturen angewendet und entfalten ihren Glanz & Gloria erst, wenn die betreffende Seite in einem geeigneten Browser aufgerufen wird.

Auch im konkreten Fall sieht der Entwickler in Dreamweavers Code-Fenster anstelle der Tabs nur eine reguläre Aufzählungsliste:

die nicht gestylte Aufzählungsliste

Vorteil:
unkundige Entwickler, die mit den stilistischen Standardvorgaben derartiger Libraries leben können und nicht vorhaben, diese individuell anzupassen, müssen auch nicht mehr großartig rumfrickeln und können auch eigentlich nichts kaputt machen ;-)

Nachteil:
Entwickler mit Neigung zur individuellen Anpassung der Stilvorgaben müssen sich normalerweise in die Library ihrer Wahl “einarbeiten”, was beispielsweise erfordert, die jQuery UI – Referenz zu konsultieren und ihr zu entnehmen, welcher CSS-Stil bei welcher “Aktion” (z.B. Mausbewegung über einen nicht aktiven Tab) zur Anwendung kommt.

Wie Dreamweaver helfen kann:
Mit den in Dreamweaver CS4 eingeführten “Live View” und “Live Code” – Features verfügt der Entwickler endlich über Tools, die ihm selbst in derart kniffeligen Fällen eine vollständige und einfach handhabbare Kontrolle solch “dynamischer” Vorgänge ermöglichen — und dies, ohne die betreffende Seite in einem externen Browser aufrufen zu müssen.

Was passiert denn hier ?

der Live Code - Button
der Live Code - Button

Mit einem Klick auf den Live Code – Button werden gleich 2 Fliegen mit einer Klappe geschlagen: Dreamweaver wird in eine Art “interne Vorschau” – Modus mit einem geteilten Screen umgeschaltet.

Live View: Die rechte Screenhälfte zeigt die aktuelle Seite als “ich simuliere einen echten Browser” – Vorschau an und erlaubt demzufolge auch typische User-Interaktionen wie z.B. das Überfahren eines Links mit der Maus (auch “hover” genannt),

Live Code: Wirklich interessant für den Entwickler wird´s in der linken Screenhälfte: der hier angezeigte Quellcode wird – wie im folgenden Screenshot zu sehen ist – um eine Aufführung diverser von jQuery UI beigesteuerte CSS-Stile erweitert. Nebenbei gesagt:: diese Informationen würden Sie nicht erhalten, wenn Sie die jeweilige Seite mit einem externen Browser laden und dessen “Quellcode anzeigen” – Feature bemühen würden.

die Split-Ansicht

Eine sehr interessante Information: endlich erfährt man, dass einem aktuell nicht aktiven (sprich: der entsprechende Seiteninhalt wird gegenwärtig nicht angezeigt) AJAX-Tab im laufenden Betrieb die beiden CSS-Klassen “ui-state-default” sowie “ui-corner-top” zugeordnet werden.

Dies wird dem ambitionierten Entwickler natürlich nicht genügen, denn er möchte natürlich auch noch herausfinden, welche ihm bis dato noch unbekannte CSS-Klasse dafür zuständig sein wird, die Hintergrundfarbe einer Registerkarte zu ändern, wenn der Besucher diese mit der Maus “hovert”.

Nichts leichter als das: schnell mal eben in der rechten Fensterhälfte über das betreffende Element hovern, und – voilá – der entsprechende Code in der linken Hälfte zeigt prompt die zusätzliche Klasse “ui-state-hover” an:

der aktualisierte Code bei MouseOver

Und nun ?

Da jetzt der Klassenname “ui-state-hover” bekannt ist, kann man wie wie gewohnt fortfahren und diese Klasse in Dreamweavers “CSS Styles” – Fenster ausfindig machen bzw. nach Belieben bearbeiten:

die ui-state-hover - Klasse in Dreamweavers CSS Styles - Fenster

Fazit

Mit diesem Feature hat die Dreamweaver – Entwicklercrew insbesondere den ambitionierten Anwendern einen riesigen Gefallen getan, welcher in der “Community” entsprechend honoriert wird und meines Wissens auch noch nicht kritisiert wurde ;-)

Die meines Wissens bis dato einzige brauchbare Alternative für Entwickler ist die Firefox – Extension Firebug — eine wirklich exzellente Erweiterung mit ähnlichen Features, welche (jedenfalls für mich) den Nachteil hat, dass sie zwangsläufig an den Firefox-Browser gebunden ist und sich bei Weitem nicht so intuitiv bedienen lässt wie Dreamweavers Live View / Live Code – Features.

Wie dem auch immer sei, ich hoffe, dieses Tutorial hilft besonders denjenigen Dreamweaver-Anwendern weiter, die sich mit bislang weniger vertrauten JavaScript – Libraries befassen möchten und ein konkretes “was bringt mit Dreamweaver hierbei” – Beispiel benötigen.

In diesem Sinne ;-)

Tutorial-Kommentar
Ihre Emailadresse wird nicht veröffentlicht