Themen sind kein neues Konzept. Wahrscheinlich haben Sie schon einige mit Cascading Style Sheet (CSS)-Stilen und -Klassen entwickelt, um das Aussehen Ihrer Websites zu gestalten. Die Verwendung eines Frameworks standardisiert den Ansatz und verringert die Menge an Arbeit und Code, die geschrieben werden muss.

jQuery UI ist jetzt der Industriestandard für die Implementierung von Themen. Es gibt noch andere Möglichkeiten, wie Dojo (gekoppelt mit Dijit) oder Ext JS, aber jQuery UI kombiniert Themes mit der Verwendung von Widgets, also den Elementen, mit denen Benutzer interagieren, wie Datumsauswahlen oder Schaltflächen. Wenn man das Innenleben der Dateien, aus denen ein jQuery UI-Theme besteht, auseinander nimmt, findet man nichts weiter als CSS und JavaScript. Aber es ist der durchdachte Prozess und die Standardisierung, die in diese Verwendung von CSS und JavaScript eingeflossen sind, die jQuery UI zu einer hervorragenden Plattform für den Aufbau des Erscheinungsbildes einer Website macht.

jQuery UI-Themen

Die jQuery UI-Plattform besteht aus zwei Sub-Frameworks: einem Widget-Framework, das die Widget Factory und eine Reihe von häufig verwendeten Widgets enthält, und dem CSS-Framework. Die Widget Factory bildet die Grundlage für alle jQuery UI-Widgets, einschließlich der im Widgetset enthaltenen allgemeinen Widgets. Wenn Sie Widgets erstellen, verwenden Sie entweder eines der allgemeinen Widgets aus dem Satz als Ausgangspunkt oder erstellen Sie eines von Grund auf neu. Sobald Sie wissen, wo sich die gemeinsamen Widgets befinden, öffnen Sie eines davon in Ihrem bevorzugten Editor und sehen Sie sich den Code an. Von dort aus können Sie entweder diesen Code ändern und ein benutzerdefiniertes Widget erstellen (indem Sie eines der anderen Widgets als Ausgangspunkt verwenden) oder eines mit einer ähnlichen Struktur erstellen.

Die Ordnerstruktur der jQuery UI-Themen

Bevor Sie sich die verschiedenen Dateien und ihre Inhalte ansehen, laden Sie eines der Themen von der jQuery UI-Plattform herunter (siehe Verwandte Themen für einen Link). Die heruntergeladene ZIP-Datei enthält drei Ordner: css, js und development-bundle. Der Ordner „development-bundle“ enthält einen Ordner mit dem Namen „themes“, in dem die in Entwicklung befindlichen jQuery UI-Themen gespeichert werden. Der Ordner themes wiederum enthält einen Ordner mit dem Namen des ausgewählten/heruntergeladenen Themes (z. B. UI lightness) sowie einen Ordner namens base. Dieser Ordner enthält einen Ausgangspunkt für Ihre eigenen Themen. Er wird immer heruntergeladen, unabhängig vom gewählten Thema.

Der Ordner css enthält einen Ordner mit dem Namen des heruntergeladenen Themas. Dieser Themenordner enthält eine CSS-Datei, die das CSS-Markup für alle Komponenten oder Widgets enthält. Der Ordner „development-bundle“ enthält jedoch auch einen Ordner „themes/“ (in dem der tatsächliche Name des gewählten Themes steht), der die einzelnen CSS-Dateien für jede Komponente oder jedes Widget enthält. Diese Struktur macht es einfacher, die Änderungen in Ihren eigenen Themes zu finden und zu ändern. Abbildung 1 zeigt die Struktur des Themes-Ordners.

Abbildung 1. Struktur des Themes-Ordners

Bild in voller Größe anzeigen

Nicht alle Dateien des Ordners sind in Abbildung 1 aufgeführt, aber die wichtigen sind hier zu finden. Die Datei jquery.ui.all.css importiert die Dateien jquery.ui.base.css und jquery.ui.theme.css, so dass es einfach ist, die Dateien nur mit der Datei jquery.ui.all.css zu importieren. Die Datei jquery.ui.base.css importiert die Datei jquery.ui.core.css und alle anderen Komponenten- und Widget-Dateien aus demselben Ordner (in Abbildung 1 nicht dargestellt). Die Datei jquery.ui.core.css enthält gemeinsame Klassen, die von allen Widget-Dateien genutzt werden. Sie enthält die Basis-CSS-Klassen für alle jQuery UI-Widgets (innerhalb des Themas) sowie die gemeinsame Sichtbarkeit und Positionierung der Widgets. Die letzte wichtige Datei ist die jquery.ui.theme.css-Datei, die das gemeinsame Aussehen und Verhalten aller Widgets im Thema sowie das Thema selbst bereitstellt.

Die Datei jquery.ui.theme.css hat drei verschiedene Arten von Stilen:

• Container – Dieser Stil definiert das Container-Thema, wie ui-widget, ui-widget-content oder ui-widget-header.
• Zustände – Dieser Stiltyp wird von jQuery UI-Widgets verwendet, um das Aussehen des Widgets zu definieren, wenn der Benutzer mit ihm interagiert. Zu den Klassen gehören ui-state-default, ui-state-hover und ui-state-active.
• Cues – Wenn etwas in der Anwendung passiert (nicht durch die Aktion des Benutzers), ändern diese Klassen das Aussehen des Widgets. Zu den Klassen gehören ui-state-highlight, ui-state-error und ui-state-disabled.

Gemeinsame Widgets

In diesem Abschnitt wird ein Beispielcode betrachtet, der einige gängige Widgets verwendet, um eine Beispielanwendung zu erstellen. Dieses Beispiel enthält ein Schieberegler-Widget, eine Schaltfläche, die ein Dialogfeld öffnet, und ein Dialogfeld, das bei jedem Öffnen den aktuellen Wert des Schiebereglers anzeigt. Abbildung 2 zeigt einen Schnappschuss der Anwendung.

Abbildung 2. Eine Beispielanwendung mit gemeinsamen Widgets

Bild in voller Größe anzeigen

Liste 1 enthält die HTML-Indexdatei.

Liste 1. Beispielanwendung mit gemeinsamen Widgets

Liste 2 zeigt die zugehörige JavaScript-Datei (index.js).

Liste 2. Die zugehörige JavaScript-Datei für die Beispielanwendung

Die Ersteinrichtung erfolgt im Header mit folgendem Code:

Nach dem Einbinden des CSS werden die JavaScript-Dateien eingebunden.

Die drei Widgets in dieser Anwendung werden größtenteils mit <div>-Anweisungen definiert (mit Ausnahme der Schaltfläche, die bereits einen Tag in HTML hat). Diese Widgets sind in folgendem Code definiert:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Schließlich wird die eigentliche Konstruktion der Widgets im JavaScript-Code verzögert, bis die Seite vom Browser vollständig geladen wurde, wie in Listing 3 gezeigt.

Listing 3. Aufbau der Widgets

Jedes der bereits erwähnten Widgets wird mit diesem Code aufgebaut. Dem Dialogfeld und der Schaltfläche sind jeweils Funktionen für bestimmte Ereignisse zugeordnet. Zum Beispiel wird dem Klick-Ereignis der Schaltfläche mitgeteilt, dass sie das Dialogfeld öffnen soll, wenn sie angeklickt wird. Das Dialogfeld wird angewiesen, seinen Text zu ändern, um den aktuellen Wert des Schiebereglers anzuzeigen, was bei jedem Öffnen geschieht.

Es gibt zwei Möglichkeiten, das Aussehen eines Widgets zu ändern. Sie können Werte an den Konstruktor übergeben, zusammen mit allen erforderlichen Konstruktorparametern für das Widget. Zum Beispiel:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Oder Sie können Methoden für das Widget aufrufen, nachdem es erstellt wurde, wie folgt.

$("#dlg_popup").dialog({ draggable: false });

Die meisten gängigen Widgets haben viele zugehörige Optionen, die eingestellt werden können. Wenn Sie sich entscheiden, diese Optionen zu ignorieren, setzen die Widgets sie auf Standardwerte, so dass Sie sie nach Bedarf einstellen und ändern können.

Widget-Ereignisse

Da Widgets grundsätzlich JavaScript-Objekte sind, können sie mit Ereignissen ausgestattet werden, die während der Lebensdauer der Website-Anwendung ausgelöst werden. Wenn diese Ereignisse ausgelöst werden, werden sie entweder durch den JavaScript-Code Ihrer Website abgefangen oder innerhalb der Widgets behandelt (Standard).

Die Implementierung des Standardverhaltens aller Widgets ist vom jQuery UI-Team für jedes gängige Widget gut dokumentiert. Sie können jedoch Ihren eigenen Code einfügen, um eines oder mehrere der Ereignisse eines ausgewählten Widgets zu behandeln. Hier ein Beispiel für einen Code, der den Empfang eines Ereignisses einrichtet:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Dieses Beispiel greift auf das Ereignis drag zurück, das ausgelöst wird, wenn das Dialogfeld gezogen wird. Die im Beispiel gezeigte Ellipse (…) ist der Ort, an dem individueller Code platziert werden kann, um den Code für das Ereignis zu behandeln und zu implementieren.

Widget-Methoden

Methoden sind (wie in jeder vertrauten Sprache) mit dem Widget verknüpft und ermöglichen die Ausführung von zuvor geschriebener Funktionalität für ein bestimmtes Widget, um es eine bestimmte Aktion ausführen zu lassen. Hier ein Beispiel für den Aufruf der Methode eines Widgets:

$("#dlg_popup").dialog("moveToTop");

Konzeptionell sind Optionen und Methoden unterschiedlich. Beachten Sie jedoch, dass der Wert einer Option mithilfe einer methodenähnlichen Implementierung geändert oder abgerufen werden kann, wie im folgenden Beispiel gezeigt.

$("#dlg_popup").dialog("option", "autoOpen", false);

Umschalten von Themen

In HTML- und JavaScript-Dateien kann Code eingefügt werden, der es ermöglicht, mit Hilfe eines Dropdown-Menüs das Thema zu wechseln. Listing 4 zeigt die Änderungen am HTML-Quellcode, um eine solche Änderung vorzunehmen.

Listing 4. Wechseln von Themen während der Laufzeit

Listing 5 zeigt den JavaScript-Quellcode.

Listing 5. JavaScript-Quellcode für den fliegenden Wechsel von Themes

$(document).ready(function(){ $('#switcher').themeswitcher();...});

Abbildung 3 zeigt die Beispielanwendung nach diesen Änderungen.

Abbildung 3. Die Beispielanwendung nach den Code-Änderungen

Bild in voller Größe anzeigen

Rufen Sie die HTML-Seite erneut in Ihrem Browser auf und betrachten Sie die Ergebnisse. Sie können nun auf die Dropdown-Liste klicken, um das Thema zu ändern. Das ausgewählte Thema wird bei Bedarf im Hintergrund heruntergeladen.

Das Tool zum Wechseln des Themas eignet sich zwar gut für nicht produktive Sites (zum Testen und Anzeigen der Ergebnisse), ist aber keine gute Idee für produktive Sites. Das Tool verlässt sich auf den Server eines Drittanbieters, um die Themen zu hosten, und Sie können nicht sicher sein, welche Ergebnisse der Benutzer sieht.

Eine weitere Möglichkeit, jQuery UI-Themes zu testen, ist die Verwendung des ThemeRoller-Tools, das nur für Mozilla Firefox verfügbar ist (siehe Verwandte Themen für einen Link). Nachdem Sie das Tool installiert haben (als Bookmarklet in Firefox), öffnen Sie die Galerie und wählen Sie die Themes aus, um sie zu betrachten. Wählen Sie ein Thema aus und klicken Sie auf den Download-Link. Nach dem Herunterladen extrahieren Sie den Theme-Ordner, legen ihn in Ihrem jQuery UI-Ordner ab und verweisen auf Ihre HTML-Dateien.

Dieses Tool ist jedoch viel nützlicher als nur zum Wechseln von Themes. Es ermöglicht Ihnen auch, benutzerdefinierte Themen einfacher zu erstellen, als wenn Sie sie von Hand ausrollen müssten.

Eigene Themes erstellen

Mit Hilfe der ThemeRoller-Website (die in den meisten gängigen Browsern läuft; einen Link finden Sie unter Verwandte Themen) können Änderungen an einem bestehenden jQuery-Theme (als Ausgangspunkt) vorgenommen werden, um ein eigenes Theme zu erstellen. Dadurch entfällt die Notwendigkeit, das Thema von Grund auf neu zu erstellen. Außerdem sind keine CSS-Kenntnisse erforderlich, und das Tool ermöglicht es Ihnen, Änderungen an bestehenden Themes und Widgets während des Betriebs anzuzeigen. Abbildung 4 zeigt die ThemeRoller-Website (nicht zu verwechseln mit dem ThemeRoller-Bookmarklet, das in Firefox läuft).

Abbildung 4. Die ThemeRoller-Seite

Bild in voller Größe anzeigen

Mit einem Klick auf die Galerie können Sie eines der vorhandenen Themen auswählen. Dadurch werden die CSS-Stile und Bilder, die von den Beispiel-Widgets verwendet werden, entsprechend der Änderung geändert. Wenn Sie auf die Schaltfläche „Bearbeiten“ eines Themas klicken, gelangen Sie zur Registerkarte „Eigene Gestaltung“, auf der Sie Änderungen an den CSS-Stilen des Themas vornehmen können. Wenn Sie kein Thema zum Bearbeiten auswählen und auf der Registerkarte „Eigene Gestaltung“ ohne ausgewähltes Thema beginnen, erstellen Sie einfach ein neues Thema.

Schließlich können Sie durch Klicken auf „Thema herunterladen“ das ausgewählte Thema als benutzerdefiniertes Thema herunterladen, das alle Ihre Themenänderungen enthält. Beachten Sie, dass jQuery UI und seine Themes viele CSS3-Funktionen unterstützen, was bedeutet, dass alle wichtigen Browser unterstützt werden (mit Ausnahme früherer Versionen des Windows Internet Explorer).

Die Registerkarte „Roll Your Own“ von ThemeRoller ist gut organisiert, so dass Sie schnell finden und ändern können, wonach Sie suchen. Die Registerkarte enthält u.a. die folgenden wichtigen Abschnitte:

• Schrifteinstellungen – Ermöglicht allgemeine Änderungen an der Schriftart, die im gesamten Thema verwendet wird.
• Eckenradius – Steuert die Abrundung (oder das Fehlen) von Ecken für verschiedene Widgets.
• Kopfzeile/Symbolleiste – Stellt das Aussehen und die Handhabung für Kopfzeilen in den verschiedenen Widgets zur Verfügung.
• Content – Bietet Einstellungen, um den Hauptteil der Widgets zu steuern.
• Clickable – Steuert verschiedene Zustände, die die Widgets verwenden.

Wenn Sie sich durch die Optionen klicken, werden Sie ein paar interessante Dinge über den Aufbau dieser Themen bemerken. Zum Beispiel nutzen jQuery UI-Themen die Vorteile von Texturen. Um zu sehen, wie sie verwendet werden, klicken Sie in ThemeRoller auf Header/Toolbar. Klicken Sie dann auf die farbige Schaltfläche in der Mitte. Es wird eine Dropdown-Palette mit Mustern angezeigt, aus der Sie wählen können. Die ausgewählte Textur wird mit der von Ihnen gewählten Hintergrundfarbe kombiniert, um das Muster zu erzeugen, das in den Kopfzeilen und Symbolleisten verwendet wird. Dies ist nur ein Beispiel für die Verwendung von Texturen. Es gibt noch weitere in jQuery UI-Themen. Ändern Sie zum Beispiel die Textur in „Clickable: default state“, um zu sehen, wie sich die Änderung auf Schaltflächen im ausgewählten Thema auswirkt.

Ein interessantes Merkmal von jQuery UI Themes ist die Verwendung von Hervorhebungen und Fehlern (auch bekannt als visuelle Hinweise). ThemeRoller bietet vollständige Kontrolle darüber, wie diese visuellen Hinweise dem Benutzer angezeigt werden. Die Textur, die Hintergrundfarbe, die Umrandungsecken, die Textfarbe und sogar die Farbe des Icons können geändert werden (wenn ein Icon im Cue angezeigt wird). Die Namen dieser Stile werden im ThemeRoller angezeigt, so dass Sie diese Namen einfach in Ihren eigenen Websites verwenden können, um diese Stile nach Bedarf auf den Text anzuwenden, der den Benutzern angezeigt wird.

Wenn Sie Änderungen an den verschiedenen Einstellungen vornehmen, ändert sich die URL in Ihrem Browser. Listing 6 zeigt eine URL als Beispiel.

Listing 6. Beispiel ThemeRoller URL

Speichern Sie diese URL und stellen Sie sie später wieder her, um weitere Änderungen an den Einstellungen vorzunehmen. Kopieren Sie zum Beispiel die URL, nachdem Sie Änderungen vorgenommen haben, und fügen Sie sie irgendwo ein, um sie aufzubewahren. Schließen Sie nun Ihren Browser (bzw. den Browser-Tab mit der ThemeRoller-Seite) und öffnen Sie ihn erneut mit der kopierten URL. Wie Sie sehen können, sind alle Ihre Änderungen wieder da und können weiter bearbeitet werden.

Abschluss

Viel mehr kann über die Interna von jQuery UI gesagt werden, aber Sie sollten die Grundlagen haben, um mit den Themes von jQuery UI zu experimentieren. Sie haben die Struktur der Ordner und Dateien kennengelernt, die es Ihnen ermöglichen, ein Thema zu ändern. Sie können diese Dateien ansehen oder als Ausgangspunkt für die Erstellung eigener Themes verwenden, wenn Sie bereit sind.

Dieser Artikel behandelte auch den ThemeRoller und die zugehörigen Webseiten, die die Änderung bestehender Themen sowie die Erstellung neuer Themen von Grund auf unterstützen. Schließlich haben Sie den Prozess des Speicherns und Wiederherstellens von Theme-Modifikationen auf der ThemeRoller-Website untersucht.

Herunterladbare Ressourcen

• PDF dieses Inhalts

• jQuery UI Plattform: Laden Sie jQuery UI zum Testen herunter und folgen Sie diesem Artikel und den darin enthaltenen Beispielen.
• ThemeRoller: Besuchen Sie die ThemeRoller-Website, die es Ihnen ermöglicht, vorhandene Themen der jQuery UI-Plattform zu testen, vorhandene Themen anzupassen oder eigene Themen zu erstellen.
• developerWorks Web development zone: Hier finden Sie Artikel zu verschiedenen webbasierten Lösungen. In der technischen Bibliothek für die Webentwicklung finden Sie eine breite Palette an technischen Artikeln und Tipps, Tutorials, Standards und IBM Redbooks.
• IBM Produktevaluierungsversionen: Laden Sie sich Tools für die Anwendungsentwicklung und Middleware-Produkte von DB2, Lotus, Rational, Tivoli und WebSphere herunter und lernen Sie sie kennen.
• developerWorks auf Twitter: Melden Sie sich noch heute an, um den Tweets von developerWorks zu folgen.