Bildergallerie mit Apache Wicket, Teil 2
Am Freitag, 13. März 2009 veröffentlicht unter ProgrammierenIm vorherigen Teil haben wir uns mit der Verbindung zur Datenbank beschäftigt, jetzt wollen wir tatsächlich uns die Gallerieansicht vornehmen und erste Seiten mit Wicket dann darstellen, so dass am Ende von diesem Tutorial-Teil die Gallerie wie folgt ausschaut.
Zwischenergebnis Gallerie
Einheitliches Layout
Im Verlauf des Tutorials werden mehrere Seiten erstellt. Schön wäre es da, wenn man ein einheitliches Layout einfach produzieren könnte, so dass z.B. auch überall die selbe Navigation erscheint oder die selben CSS-Dateien eingebunden werden. In Wicket läuft dieser Prozess unter dem Namen “Markup Inheritance”.
Bei Wicket ist es so, dass zu jeder sichtbaren Seite eine Java-Klasse und eine HTML-Datei gleichen namens existieren müssen, die auch im selben Verzeichnis liegen, bei mir im Package page. Zudem muss die Klasse von WebPage erben, das ist die Standardklasse für Webseiten von Wicket.
Wir erstellen uns also zunächst eine abstrakte Layout-Klasse, die die Funktionalität zu Verfügung stellt, welche alle anderen Klassen von ihr erben sollen. Zunächst wollen wir nur, dass jede Seite einen Titel bekommt und in der Fusszeile das aktuelle Datum erscheint.
public abstract class Layout extends WebPage {
private String title = "Layout title";
private Date date;
public Layout() {
date = new Date();
add(new Label("title", new PropertyModel(this, "title")));
add(new Label("pageTitle", new PropertyModel(this, "title")));
add(new Label("date", new PropertyModel(this, "date")));
}
public void setTitle(String t) {
title = t;
}
public String getTitle() {
return title;
}Ein Label ist in Wicket einfach ein ganz normales Textobjekt, welches durch add() als sichtbar markiert wird und dann auch ein Äquivalent im HTML-Code besitzen muss. Generell benötigt jede Komponente, die man zu einer Seite hinzufügt, mindestens zwei Angaben. Erstens den Namen, über den das Objekt im HTML-Code referenziert wird (hier z.B. “title” oder “date”) und ein Model, von welchem der Inhalt der Komponente stammt. Über die Angabe von new PropertyModel(this, "title") wird ein PropertyModel erstellt, welches in dem aktuellen Objekt (this) eine Objektvariable mit dem Namen “title” sucht uns dieses dort einbindet. Genauso geht das mit dem Datum.
Ich habe gesagt, dass zu jeder Klasse, die von WebPage erbt, eine gleich benannte HTML-Datei existieren muss. Diese gucken wir uns nun an und schauen, wie wir ganz simpel Objekte, die per oben beschriebener add() Methode hinzugefügt wurden, im HTML-Quellcode referenzieren und einbinden können.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="pageTitle">Insert title here</title>
</head>
<body>
<div id="header"><h1 wicket:id="title">title here</h1></div>
<!-- Begin main -->
<div id="main">
<wicket:child />
</div>
<!-- End main -->
<div id="footer"><small wicket:id="date">date</small></div>
</body>
</html>Es ist zu erkennen, dass es sich bei der Layout.html um eine ganz normale HTML-Datei handelt. Das einzige bisschen mehr, was wir noch kennen müssen, um Wicket an entsprechender Stelle Inhalte einfügen zu lassen, ist der Zusatz wicket:id="{hier die entsprechende Bezeichnung}", die als Zusatz in jeden x-beliebigen HTML-Tag eingebaut werden kann. Es funktioniert so, dass man z.B. wie unten im Footer in den Small-Tag das aktuelle Datum rein generieren lassen möchte. So fügt man also wicket:id="date" hinzu. Dann wird automatisch beim Aufruf der Wert der add() Methode mit dem Bezeichner “date” hier eingebunden. Das date, was im HTML-Code schon zwischen dem Anfang- und Ende-Tag steht, dient nur als Platzhalter und zur besseren Übersicht, er kann auch weggelassen werden.
So simpel ist das! Interessant zu erwähnen ist noch der neue Wicket-Tag <wicket:child /> mit dem dann an entsprechender Stelle generierter Code aus einer anderen Wicket-Klasse eingefügt wird. Wie es genau funktioniert, wird später deutlich.
Letztes Update am 6.07.2009 10:02
