Erstellen einer Pagination in Java Server Faces 2.2

In diesem Tutorial möchte ich beschreiben wie man eine Pagination in eine JavaServerFaces Tabelle implementiert.

Pagination in einer JSF DataTable
Pagination in einer JSF DataTable

Sicherlich kann man hierzu ein JSF Framework wie Primefaces zu Hilfe nehmen, jedoch bringt dieses für „nur“ die Funktion der Pagination einen sehr großen Overhead mit.

Als Basis dieses Tutorial nutze ich ein einfaches JSF Projekt mit einer Statischen Liste von Objekten (quasi ohne Datenbankanbindung). Das leere Projekt kannst du dir unter folgendem Link herunterladen oder folgst dem Tutorial Erstellen eines JavaServerFaces 2.2 Projektes mit Eclipse & Apache Maven, dort habe ich beschrieben wie du dir ein Projekt mit Apache Maven und Eclipse einrichten kannst.

 

JSF DataTable

Für die Darstellung einer Tabelle in JSF gibt es zwei Mögliche Komponenten, einmal das PanelGrid und einmal die DataTable. In diesem Tutorial verwende ich die Komponente DataTable.

Zunächst einmal benötigen wir eine kleine Seite welche unsere  DataTable anzeigen soll (und zusätzlich eine passende Überschrift). 

Die DataTable soll später Daten mit dem Server austauschen / Aktionen ausführen, daher muss diese in eine Form gekapselt werden.

Definieren der DataTable

Die DataTable wird mit dem JSF Tag h:datatable eingeleitet und geschlossen.

In dem Attribut „value“ wird die Liste mit den Objekten für die Tabelle hinterlegt und über das Attribut „var“ können wir dann beim rendern der Tabelle auf die Objekte zugreifen und durch ggf. weiteren Code die Tabelle manipulieren. 

Als nächsten Schritt definieren wir wieviele Zeilen in der Tabelle aufeinmal angezeigt werden sollen. Dieses erledigen wir indem das Attribut „rows“ verwendet wird. Nun könnte man als Wert einfach eine Zahl einfügen jedoch benötigen wir diesen Wert später für unsere Pagination daher ist es besser diese Zahl in einer Bean zu speichern.

Eigentlich ist diese Zahl fix und wir könnten daraus eine Konstante via „private static final“ machen, jedoch könnten wir dann nicht mehr auf diese in unsere XHTML zugreifen denn nach der Java Beans Konversation benötigen wir Getter und Setter. Und Getter und Setter an einer Konstante klingt nicht nur komisch sondern ist es auch. Daher wird dieses ein einfaches Feld in der Bean.

Nun fehlt noch das wichtige Attribut ab welchem Index diese Zeilenzahl gelten soll. Dieses wird über das Attribut „first“ gelöst. D.h. der Wert von „first“ repräsentiert den Index aus der Liste der Objekte.

Der Wert beginnt wie üblich bei der java.util.List bei 0.

Nun können wir die Tabelle aufbauen. Mein Testobjekt hat zwei Felder „ID“ und „Text“.

Mit dem JSF Tag „h:column“ wird eine Spalte definiert. Zusätzlich können wir mit ‚f:facet name=“header“‚ definieren wie der Spaltenkopf beschrieben ist. In diesem Beispiel steht nur der Text „ID“ im Spaltenkopf. In einer echten JSF Anwendung würde man nun diesen Text internationalisieren (mehrsprachig anbieten).

Der Wert der Zelle wird durch „#{tblEntry.<Feldbezeichnung>}“ eingeleitet. (Es ist nicht nötig den Wert in ein „h:outputText“ zu stecken.)

Tabellenfußzeile für die Pagination

Neben den Bereits genannten Tabellenkopf gibt es auch eine Fußzeile welche man definieren kann. Und genau in diese Zeile möchten wir unsere Pagination darstellen. Dazu müssen wir zunächst einmal diese Zeile wie folgt definieren.

Damit wir später die Schaltflächen und die Auswahlliste sauber ausrichten können müssen wir diese in ein „h:panelGrid“ stecken. Dieses bewirkt das wir in unsere Fußzeile eine zusätzliche Tabelle erhalten welche über die gesamte Breite der äußeren Tabelle geht.

Schaltflächen Weiter & Zurück

Für die einfache Seitennavigation reichen schon die zwei Schaltflächen „Weiter“ & „Zurück“ aus.

Für die Darstellung der Schaltflächen benötigen wir 2 Attribute einmal „value“ für den Text und einmal für die Sichtbarkeit „rendered“. Das Attribut „action“ definiert eine Methode in unserer Java Bean welche ausgeführt werden soll wenn die Schaltfläche betätigt wird.

Auswahlliste für die Seiten

Um jedoch auch auf bestimmte Seiten zuzugreifen benötigen wir zusätzlich zbsp. eine Auswahlliste welche zwischen den beiden Schaltflächen angezeigt werden soll.

Für die Darstellung einer Auswahlliste benötigen wir das JSF Tag „h:selectOneMenu“.

Dieser enthält ähnlich wie die DataTable das Attribut „value“ jedoch ist dieses nicht eine Liste sondern der ausgewählt Wert aus der Liste!

Die Einträge in dieser Liste werden entweder selber mit „f:selectItem“ oder „f:selectItems“ definiert

Da wir ggf. eine undefinierte Liste von Werten haben benötigen wir den zuletzt genannten Tag „f:selectItems“.

In dem Attribut „value“ wird unsere java.util.List mit den Seitennummern stecken und das bereits bekannte Attribut „var“ enthält einen Index auf den aktuellen Wert.
Die Attribute „itemLabel“ für das sichtbare Textfeld in der Auswahlliste und „itemValue“ für den Wert welcher später in der Java Bean verarbeitet werden soll, werden aus dem Wert der aktuellen Iteration befüllt.

Damit die Änderung beim auswählen eines Eintrages sofort sichtbar werden benötigen wir eine Aktion dieses wird durch „f:ajax“ realisiert. Das Attribut „listener“ enthält eine Methode in der Java Bean welche ausgeführt wird. Nach Abschluss dieser Aktion soll dann die Komponente im Attribut „render“ aktualisiert werden, der Wert „@form“ definiert das die äußere Form sich aktualisieren soll und somit alle darin befindlichen Komponenten (Tabelle, Schaltfläche, Auswahlliste etc.).

CSS Style 

Für das Styling von HTML Komponenten benötigen wir eine CSS Datei diese Datei wird in JSF im Pfad „webapp\resources\css\“ abgelegt und im Kopfbereich der XHTML Datei wiefolgt eingebunden:

DataTable

Damit wir nicht nur eine platte Tabelle erhalten, können wir der DataTable einige Attribute setzen damit die Datenzeilen der Tabelle abwechselnd eingefärbt werden.

Des Weiteren setzen wir der Tabelle ein generelles inneres Padding damit die Zahlen und vorallem die Schaltflächen nicht so dicht an den Linien anliegen.

Tabellenfuß ausrichten

Die Komponenten im Tabellenfuß sind per Standard linksbündig, dieses wollen wir nun mit einem CSS Style manipulieren. Der Tabellenfuß wird in dem HTML Tag „tfoot“ gerendert. Nun kann man relativ simple in der CSS Datei definieren das alle Tabellenfüße in der Anwendung diesen Style haben.

Sollte es also nun mehr als eine Tabelle in der Anwendung geben muss hier mit einer zusätzlichen ID oder einem XPath gearbeitet werden.

Schaltflächen & Auswahlliste

Für etwas mehr Abstand zwischen den Komponenten definieren wir folgendes zusätzliche CSS Style

Dieser CSS Style sorgt dafür das links und rechts neben den Schaltflächen ein Abstand von 5 Pixel eingerichtet wird.

Nachdem wir nun das Frontend definiert und entwickelt haben wollen wir uns als nächstes mit dem Backend beschäftigen.

Java Beans – Backend mit Businesslogik für die Pagination

Zunächst einmal benötigen wir eine Java Bean (im weiteren nur als Bean bezeichnet) welche unsere Daten halten soll.

Da die Pagination für andere Seiten / Beans verwendet werden kann werde ich diese Logik in eine eigene Abstrakte Klasse auslagern.

Zunächst einmal benötigen wir eine Liste mit Elementen für unsere Tabelle.

Diese Liste befüllen wir in der Methode „doRefresh“.

Da die Methode „loadContent“ abstrakt ist muss diese in unserer „WelcomeBean“ ausprogrammiert werden.

Für dieses Tutorial verwende ich ein eine Liste von 100 Einträgen.

Die Aktionen für die Schaltflächen „Weiter“ & „Zurück“ manipulieren das Feld für den aktuellen Index der Liste.

Des Weiteren müssen wir noch beim erreichen des Endes und dem Anfang der Liste die Schaltfläche „Weiter“ bzw. „Zurück“ ausblenden.Hierzu erzeugen wir uns die Methode „handlePagination“.

Diese Methode müssen wir bei jedem aufrufen der Schaltflächen ausführen.

Somit haben wir die beiden Schaltflächen implementiert und können nun den ersten Test starten.

Auswahlliste implementieren

Als nächsten Schritt wollen wir nun eine Auswahlliste implementieren welche die Möglichkeit bietet eine bestimmte Seite anzusteuern. Zunächst einmal benötigen wir eine Liste für die Seiten. Und eine Logik welche diese Liste befüllt.

Zuerst haben wir eine Liste mit den Werten für die Tabelle erzeugt diese benötigen wir um die Liste mit den Seitenzahlen zu erzeugen. Hier müssen wir die Anzahl der Einträge durch die maximale Anzahl der Tabelle dividieren und dieses auf die nächst höhere ganze Zahl aufrunden.

Zusätzlich müssen wir die bereits bestehende Methode „handlePagination“ um das Handling der Seitenzahl erweitern, denn sonst wird die Auswahlliste beim betätigen der Schaltflächen nicht aktualisiert.

Nun noch die Methode implementieren welche beim Auswählen einer Seite in der Auswahlliste aufgerufen werden soll.

Da Einträge in einer java.util.List mit dem Index 0 beginnen müssen wir von der Seitenzahl -1 rechnen!

Download

Hier nun das fertige Projekt zum Download

 

Troubleshooting

Eventuell kann es beim einrichten des Eclipseprojektes geschehen das die „Deployment Assembly“ zu den Maven Dependencies „verloren“ gehen. Hier muss man dann auf das Projekt klicken und im Kontextmenü „Properties“ wählen.

Eclipse Projekteigenschaften - hinzufügen der Maven Dependencie (Schritt 1)
Eclipse Projekteigenschaften – hinzufügen der Maven Dependencie (Schritt 1)

In dem neuen Dialog wird dann der Eintrag „Deployment Assembly“ ausgewählt (1). Ist hier nun kein Eintrag „Maven Dependencies“ vorhanden müssen wir diesen über die Schaltfläche „Add..“ hinzufügen (2).

Eclipse Projekteigenschaften - hinzufügen der Maven Dependencie (Schritt 2)
Eclipse Projekteigenschaften – hinzufügen der Maven Dependencie (Schritt 2)

Im nächsten Schritt wird nun der Eintrag „Java Build Path Entries“ gewählt (1) und die Schaltfläche „Next >“ betätigt (2).

Eclipse Projekteigenschaften - hinzufügen der Maven Dependencie (Schritt 3)
Eclipse Projekteigenschaften – hinzufügen der Maven Dependencie (Schritt 3)

 

 

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.