Zu den bekanntesten Komponentenbibliotheken gehört die PrimeFaces-Komponentenbibliothek. Sie wird seit 2008 von PrimeTek als Open-Source-Framework entwickelt und angeboten.
Der für die PrimeFaces-Komponenten definierte Namensraum lautet http://primefaces.org/ui. Es muss daher eine weitere
Namensraumdeklaration zum umfassenden <html>-Element hinzugefügt werden. Mittels xmlns:p= vergibt man
das Kürzel p, um im Anschluss die neuen Tags in einer View benutzen zu können.
Als erste PrimeFaces-Komponente soll die Kalenderkomponente verwendet werden. Man fügt sie mittels
<p:calendar/> zu einer View hinzu (siehe folgende Abbildung). Die Kalenderkomponente muss stets in einem
<h:form>-Element eingebettet sein, damit das ausgewählte Datum für eine weitere Verwendung mit an den Server
gesendet wird.
Wird die neue View im Browser aufgerufen, bekommt man eine komplexe funktionsfähige Kalenderkomponente präsentiert (siehe folgende
Abbildung). Man kann die einzelnen Kalenderblätter mit den Schaltflächen weiterschalten, die Komponente aktualisiert die Darstellung
entsprechend. Nach einem Klick auf ein Datum erscheint eine textuelle Repräsentation im Eingabefeld.
Die Kalenderkomponente soll nun dazu verwendet werden, um für die Artikel im Online-Shop ein Verfügbarkeitsdatum einzutragen. Auf
diese Weise könnte man Artikel in den Shop aufnehmen, ohne dass sie den Besuchern sofort präsentiert werden. Es ist daher die
Modell-Klasse Artikel anzupassen und um ein Attribut für das Verfügbarkeitsdatum zu ergänzen. Die folgende
Abbildung fasst die vorgenommenen Änderungen zusammen. Als Standardwert für das Verfügbarkeitsdatum wird ein Zeitpunkt weit
zurück in der Vergangenheit gewählt (new Date(0)).
Als Nächstes wird die bisherige View erweitert, um das neue Attribut mittels der PrimeFaces-Kalenderkomponente in der
Übersichtstabelle Artikel darzustellen. Die folgende Abbildung zeigt, wie der Attributwert mittels eines UEL-Ausdrucks mit der
Kalenderkomponente verknüpft wird. Die notwendige Konvertierung von einem Datum in eine Zeichenkette führt PrimeFaces
selbstständig durch.
Nach diesen Anpassungen wird für jeden Artikel das jeweilige Verfügbarkeitsdatum eingeblendet (siehe folgende Abbildung). Das
mit new Date(0) initialisierte Datum wird als 01.01.70 angezeigt.
Die Formatierung des Datums lässt sich anpassen. Man verwendet dazu das Formatierungsattribut pattern der
Kalenderkomponente, um das Jahr bei der Datumsangabe voll auszuzeichnen. Die folgende Abbildung zeigt, wie man die für die Formatierung
von Date-Objekten bekannten Kürzel verwendet.
Die Kalenderkomponente lässt sich so frei konfigurieren.
Die Kalenderkomponente ist eine von mehreren Eingabekomponenten, mit denen sich Daten auf Webseiten darstellen und verändern lassen.
PrimeFaces bietet darüber hinaus eine Editorkomponente an, mit der sich Text nicht nur in Reinform eintippen, sondern gleich auch
formatieren lässt. Die folgende Abbildung zeigt die entsprechende <p:editor>-Komponente in einer View.
Als Beispiel soll man in der Editorkomponente nur Text eingeben, einfache Formatierungen (fett gedruckt, kursiv) vornehmen, Listen erstellen
und Links erzeugen können. Die Editorkomponente bietet aber in der Grundeinstellung noch weitere Möglichkeiten. Mittels des
controls-Attributs lässt sich exakt einstellen, welche Funktionen sichtbar sind. Die Einstellung
controls="bold italic bullets numbering link unlink" sorgt dafür, dass nur ein Teil der Gestaltungsmöglichkeiten im
Editor sichtbar sind.
Die Editorkomponente lässt sich noch weiter konfigurieren. Die dafür notwendigen Attribute findet man in der entsprechenden Online-Dokumentation.
Für die Eingabe von Zahlenwerten, die in einem bestimmten Wertebereich liegen, bietet PrimeFaces die Komponenten
p:slider und p:spinner. Über die Attribute dieser Elemente legt man den Wertebereich und die Schrittgröße
bzw. Genauigkeit der auszuwählenden Zahl fest. Wie in der folgenden Abbildung gezeigt verwenden wir einen Spinner und einen Slider
für die Auswahl einer Jahreszahl. Ein solcher Slider eignet sich auch besonders für Werte mit Nachkommastellen, da man sie wie an
einem Zalenstrahl mit nur einem Klick auswählen kann.
Um Elemente auf einer Seite zu gruppieren und zusammenzufassen, bietet PrimeFaces die sogenannten Panels. Mittels Panels werden
Komponenten gruppiert, sodass sie gemeinsam auf der Oberfläche positioniert werden können. Die folgende Abbildung zeigt ein Panel,
das zwei weitere Komponenten aufnimmt und mit einem Rahmen versehen darstellt.
Besondere Panel-Arten sind das TabView und das AccordionPanel. Sie gruppieren, genau wie das normale Panel, eine Menge von
Elementen, erlauben aber zusätzlich das Umschalten per Mausklick zwischen verschieden Gruppierungen. TabView und AccordionPanel
unterscheiden sich weiterhin in der Darstellung. Das TabView zeigt für jede umschaltbare Gruppe einen Tab an und ordnet die Tabs
horizontal. Das AccordionPanel stellt die Gruppen vertikal geordnet dar. Die folgende Abbildung zeigt die beiden Ansichten und den
entsprechenden Quellcode in der Übersicht.
PrimeFaces bietet eine <p:dataTable>-Komponente, die die aus JSF bekannte DataTable um weitere Funktionalität ergänzt.
Sie ist ebenfalls an eine Collection geknüpft und erzeugt für jedes einzelne Element der Collection eine eigene Tabellenzeile. In
der folgenden Abbildung wird die Tabelle an ein Shop-Sortiment gebunden. Über <facet>-Elemente steuert man die
Anzeige von Tabellen- und Spaltenüberschriften.
