Wird eine statische Webseite auf JSF-Komponenten umgestellt, kann die Seite samt CSS-Datei zunächst übernommen werden. Die darin
enthaltenen statischen Inhalte werden anschließend sukzessive ausgetauscht. Elemente, die sich - wenn überhaupt - wohl nur sehr selten
ändern, können natürlich statisch bleiben. Dazu zählen zum Beispiel der Titel der Seite und die Überschriften.
Anders ist das zum Beispiel bei der Anschrift: Diese Inhalte sollen zur Laufzeit aus einem Java-Objekt ausgelesen werden. Hierfür
verwendet man die bereits bekannte outputText-Komponente und eine neue Managed Bean Anschrift mit entsprechenden
Attributen und Default-Werten.
Im nächsten Schritt soll eine Artikeltabelle mit JSF-Komponenten programmiert werden. In der statischen Version muss jede Zeile manuell programmiert werden. Das bedeutet viel Arbeit, wenn sich ein Artikel ändert oder ein neuer Artikel hinzukommt. Deshalb stellen sich nun ganz besondere Anforderungen an die Funktionalität des JSF-Frameworks: Nicht nur, dass die Daten zu einem Artikel aus einem Java-Objekt ausgelesen werden sollen. Vielmehr soll gleich die gesamte Tabelle automatisch in Abhängigkeit eines serverseitig gespeicherten Sortiments geladen werden (z.B. aus einer Collection von Artikeln).
Tatsächlich stellt das JSF-Framework für diesen Zweck mit h:dataTable in Kombination mit
h:column zwei Komponenten bereit. Zu der Tabelle selbst müssen stets zwei Angaben gemacht werden. Erstens wird der Name
der Collection mit den aufzulistenden Objekten benötigt (hier: das Sortiment des Shops). Diese Angabe wird über das
value-Attribut von h:dataTable gemacht. Zweitens benötigt JSF einen Namen für das Objekt, über das
stellvertretend für alle Objekte die Spalten-Attribute definiert werden. Diese Angabe wird über das Attribut
var gemacht.
<h:dataTable var="einArtikel" value="#{shop.sortiment}">
... Spalten ...
</h:dataTable>
Innerhalb der Tabelle wird nun jede Spalte mithilfe der h:column-Komponente definiert. Deren Inhalt kann zum Beispiel mit
der h:outputText-Komponente ausgegeben werden, die sich ihrerseits dabei des Stellvertreter-Objekts bedient.
<h:dataTable var="einArtikel" value="#{shop.sortiment}">
<h:column><h:outputText value="#{einArtikel.nr}"/></h:column>
<h:column><h:outputText value="#{einArtikel.name}"/></h:column>
<h:column><h:outputText value="#{einArtikel.beschreibung}"/></h:column>
</h:dataTable>
Nachdem die benötigten Managed Beans Shop und Artikel definiert wurden, zeigt der Browser nun eine zwar noch
sehr schlichte, aber immerhin vollständig dynamisch aus einer Liste von Objekten erzeugte Tabelle mit Artikeln an.
Dieser Tabelle fehlen aber noch einige Elemente. Dazu zählen zum Beispiel der Tabellenkopf, passende Stilvorlagen sowie die Anzeige von
Artikel-Bildern. Der Tabellenkopf wird mit dem neuen Tag f:facet umgesetzt. Es steuert mit dem Attribut name, ob
der in dem Tag enthaltene Text zum Tabellenkopf ("header") oder zum Tabellenfuß ("footer") gehört. Weil
das Tag das neue Präfix "f:" verwendet, muss der dazu passende XML-Namensraum xmlns:f="http://xmlns.jcp.org/jsf/core" in
die html-Komponente aufgenommen werden. Der HTML-Code zu einer Tabellenspalte sieht nunmehr so aus:
<h:dataTable var="einArtikel" value="#{shop.sortiment}">
<h:column>
<f:facet name="header">Nr</f:facet>
<h:outputText value="#{einArtikel.nr}"/>
</h:column>
...
</h:dataTable>
Im nächsten Schritt soll die Tabelle mit einer ansprechenden CSS-Stilvorlage verknüpft werden. Die geraden und ungeraden Zeilen sollen
eine unterschiedliche Hintergrundfarbe haben, damit sie besser optisch voneinander unterschieden werden können. Außerdem sollen die
Spaltenüberschriften nicht wie in der Voreinstellung zentriert, sondern linksbündig ausgerichtet sein. Für diesen Zweck besitzt
die h:dataTable-Komponente zwei Attribute: Eine mit styleClass verknüpfte CSS-Klasse gilt für die
gesamt Tabelle, während die mit rowClasses verknüpften Klassen nur für die Zeilen gelten. Falls in
rowClasses mehr als eine Klasse angegeben wird, werden sie abwechselnd für die Zeilen angewendet. Die passenden
CSS-Stilvorlagen werden in folgender Abbildung gezeigt.
Im vorerst letzten Schritt der Einarbeitung in die JSF-Komponenten soll die fehlende Spalte für die Bilder hinzugefügt werden.
Es wird angenommen, dass die Pfade zu den serverseitig gespeicherten Bilddateien aus einer Datenbank ausgelesen werden können und im
Attribut bild jedes Artikel-Objekts bereitstehen werden. Es muss also lediglich die JSF-Komponente für Bilder mit dem Namen
h:graphicImage verwendet werden und der Pfad dynamisch aus dem Attribut befüllt werden. Laut Dokumentation ist das Tag
das JSF-Gegenstück zum img-Element aus dem HTML-Standard. Folgerichtig besitzt es auch die gleichen Attribute wie
url, alt, title usw. Damit die Größe der Bilder einheitlich festgelegt ist, wird eine CSS-Stilvorlage verwendet.
