Viele Java-Entwickler im Web-Umfeld kennen wahrscheinlich das Problem, mit wenig Aufwand soll eine einfache aber auch hübsche Webanwendung erstellt werden.
Während man mit ein bisschen Wicket-Erfahrung schnell die notwendige Logik auf und zwischen den Webseiten programmiert hat, ist ein nettes Design nicht ganz so einfach zu erreichen. Natürlich möchten wir gerne diese Wohlfühl-Atmosphäre schaffen: abgestimmte Farben, weiche Farbverläufe, runde Ecken und schicke Effekte. Und diese stylischen Web2.0-Widgets wären ja auch toll: Autocompletion, Datepicker, Dialog, Accordion, Tabs, Slider, Progressbar…
Mit einer passenden JavaScript-Bibliothek kommen wir unserem Ziel auf jeden Fall näher. Hier mal einige Demos zu den verbreitesten Bibliotheken: JQuery-UI, Dojo, YUI, MooTools. Das Einbinden der vielen hübschen Widgets mit einer JavaScript-Bibliothek hat für Java-Entwickler den Nachteil, dass die Komplexität der Webanwendung erheblich steigt. Am liebsten würden die meisten Java-Entwickler natürlich alles mit Java-Code umsetzen (à la Swing) und müssen sich bei Wicket schon mit der Trennung von Java-Code und HTML-Code auseinandersetzen. Jetzt kommt auch noch JavaScript- und CSS-Code dazu.
Eine Alternative könnte Wicket-Extensions sein, das zusätzliche Komponenten, wie die oben erwähnten Web2.0-Widgets, enthält und den benötigten JavaScript- und CSS-Code mitbringt. Leider sehen die Komponenten nicht ganz so stylisch aus, sodass man mit CSS noch ein bisschen nachpolieren sollte. Eine bessere Alternative ist meiner Meinung nach WiQuery, das die Funktionalität von JQuery-UI in Wicket-Komponenten kapselt. Von den genannten Möglichkeiten bietet uns nur WiQuery alle der folgenden Vorzüge:
- zusätzliche Web2.0-Widgets
- schickes Design
- Kapselung des JavaScript- und CSS-Codes in Wicket-Komponenten
Bei dem nun folgenden einfachen Beispiel zeige ich das Aufhübschen von Links und Buttons zu JQuery-UI-Buttons, die Erstellung eines Accordions und die Verwendung eines Dialogs. Für das Beispiel benötigen wir installiertes JDK ab Version 1.5 und Maven. Zunächst einmal generieren wir uns mit Maven-Archetype ein Wicket-Projekt, wie es im Wicket-Quickstart erläutert wird:
mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.5.3 -DgroupId=de.bruns.example.wiquery -DartifactId=part1 -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false
Falls wir uns das erste Mal ein Wicket-Projekt mit Maven erzeugen lassen, wird Maven jetzt erstmal allerhand Bibliotheken aus dem Internet laden müssen. Anschließend haben wir dafür bei Erfolg ein fertiges Wicket-Projekt erstellt. Jetzt müssen wir in das generierte Verzeichnis wechseln (cd <artefactId>) und können dort den vorkonfigurierten Webserver Jetty starten (beenden später mit Strg+C):
mvn jetty:run
Wenn wir jetzt mit einem Browser http://localhost:8080 ansurfen, sollten wir die Startseite von Wicket sehen.
Als Nächstes müssen wir WiQuery einbinden. Da wir Maven benutzen, brauchen wir das natürlich nicht per Hand herunterzuladen, sondern müssen es lediglich in der pom.xml unter Dependencies deklarieren. Wir sollten keine feste WiQuery-Version eintragen, sondern den bereits definierten Versions-Platzhalter für Wicket nutzen ‚${wicket.version}‘, damit wir stets eine kompatible Version zu Wicket verwenden:
<dependency>
<groupId>org.odlabs.wiquery</groupId>
<artifactId>wiquery-jquery-ui</artifactId>
<version>${wicket.version}</version>
</dependency>
Leider ist WiQuery nicht im Standard-Repository von Maven verfügbar, sodass wir in der pom.xml unter Repositories noch einen Eintrag ergänzen müssen, aus welchem Repository sich Maven WiQuery runterladen kann.
<repository> <id>wiquery-maven-repo</id> <name>WiQuery repository</name> <url>https://wiquery.googlecode.com/svn/repo/</url> </repository>
Beim Herumstöbern im WiQuery-Repository fällt einem eventuell auf, dass nicht alle WiQuery-Artefakte in den gleichen Versionsnummern vorliegen. Wir benötigen lediglich das Artefakt ‚wiquery-jquery-ui‚ als Abhängigkeit und weitere WiQuery-Abhängigkeiten werden damit automatisch aufgelöst.
Wer sich mit Wicket auskennt, sollte die folgenden Code-Beispiele in einem eigenen Projekt einfach nachvollziehen können. Als lauffähiges Beispiel kann auch mein Projekt example-wiquery-part1 genommen werden, das die hier angesprochenen Widgets verwendet. Das Projekt zeigt eine OpenStreetMap-Karte mit den aktuell laufenden Atomkraftwerken. Wenn Git installiert ist, kann das Projekt folgendermaßen runtergeladen werden:
git clone git://github.com/me4bruno/example-wiquery-part1.git
Als einfachstes Beispiel können wir zunächst mal einen Link oder einen Button mit dem org.odlabs.wiquery.ui.button.ButtonBehavior ausstatten. Damit wird der Standard-Theme von JQuery-UI auf den Button angewendet.
Button myButton = new Button("my-button"); myButton.add(new ButtonBehavior());
Aufeinander folgende Header/Content-Paare lassen sich mit der Klasse org.odlabs.wiquery.ui.accordion.Accordion in ein Accordion verwandeln. Das Verhalten des Accordions kann übrigens noch ein bisschen angepasst werden – ein Blick in die API lohnt sich (z.B. accordion.setAutoHeight(boolean)). Bei einem Accordion benötigen wir lediglich eine Zeile Java-Code: new Accordion("vehicle-accordion"); . Im HTML-Code werden dann die genannten Header/Content-Paare nacheinander aufgelistet, beispielsweise:
<div wicket:id="vehicle-accordion"> <h3><a href="#">Fahrrad</a></h3> <div>Ein Fahrrad ist...</div> <h3><a href="#">Auto</a></h3> <div>Ein Auto ist...</div> <h3><a href="#">Bahn</a></h3> <div>Eine Bahn ist...</div> </div>
Als letztes Beispiel stelle ich das Erstellen eines Dialoges vor. Der HTML-Code besteht aus einem Button zum Öffnen des Dialogs und einem Element, das den Inhalt des Dialogs enthält. Im Java-Code erstellen wir einen normalen Button und mit der Klasse org.odlabs.wiquery.ui.dialog.Dialog den Dialog. Der Dialog bietet einige Konfigurationsmöglichkeiten, wie (nicht) modaler Dialog, Breite, Höhe, Z-Index oder Effekte beim Öffnen und Schließen.
Während bereits ein funktionierender Schließen-Button für den Dialog besteht, müsste für das Öffnen des Dialogs eigentlich JavaScript angewendet werden. Glücklicherweise ermöglicht es WiQuery mit Hilfe der Klasse org.odlabs.wiquery.core.events.WiQueryEventBehavior, den notwendigen Code auch in Java zu schreiben. Der Dialog liefert uns dabei den JavaScript-Code, den wir bei unserem ausgewählten Ereignis ausführen möchten. Ein AJAX-Roundtrip über den Server findet dabei nicht statt, sondern der gesamte Code wird clientseitig auf dem Browser per JQuery ausgeführt.
final Dialog myDialog = new Dialog("my-dialog");
myDialog.setTitle("My Title");
add(myDialog);
Button myButton = new Button("my-button");
myButton.add(
new WiQueryEventBehavior(
new Event(MouseEvent.CLICK) {
@Override
public JsScope callback() {
return JsScope.quickScope(myDialog.open().render());
}
}));
<button wicket:id="my-button">Dialog</button> <div wicket:id="my-dialog">Inhalt des Dialogs.</div>
Anhand dieser einfachen Beispiele sieht man schon, wie man mit WiQuery und ein wenig Java-Code seine Wicket-Anwendung aufhübschen kann. Das Beispiel kann man sich hier anschauen und der Code ist auch auf Github verfügbar. Natürlich kann man mit WiQuery nur die Widgets von JQuery-UI nutzen. Falls andere Widgets verwendet werden sollen, ist wohl doch handgestricktes JavaScript nötig.
Probleme können übrigens auftreten, wenn WiQuery in Verbindung mit händisch eingebundenem JQuery-UI verwendet wird. Eine Anpassung der org.odlabs.wiquery.core.WiQuerySettings ist dann nötig. Der folgende Link sollte dann helfen: http://code.google.com/p/wiquery/wiki/WiQuerySettings
Momentan nutzen wir den Standard-Theme ‚UI lightness‘ von JQuery-UI . Das sieht zwar schon nett aus, aber das können wir mit Hilfe des JQuery-UI Themerollers anpassen. Wir können uns dort vorgefertigte Themes herunterladen oder uns eigene Themes erstellen. Das Einbinden des neuen Themes kann anschließend mit der Klasse org.odlabs.wiquery.ui.themes.WiQueryCoreThemeResourceReference erfolgen.
Ich hoffe, dass ich mit diesem Artikel einige Leute auf WiQuery neugierig gemacht habe. WiQuery bietet nämlich noch einiges, wie zum Beispiel den Slider, der seine Werte per AJAX an den Server schickt. Das ist dann Stoff für einen weiteren Artikel zu WiQuery…