IceFaces Tutorial Teil 5 - DataTable mit Paginator
Jetzt stellen wir uns mal ganz dumm und fragen: "Was ist ein Paginator?"
Ich bin mir sicher, dass jeder von ihnen schon einen gesehen hat. Er zeigt Daten über die Seiten und die Seitenanzahl an. Im folgenden Bild sehen Sie unsere Tabelle mit zwei Paginatoren, die ich rot eingekreist habe. Wie Sie diese beiden Paginatoren programmieren, werde ich im Folgenden zeigen.
Schauen wir uns den Quelltext der bookList.jspx an, die um die beiden Paginatoren erweitert wurde. Selbstverständlich sind die beiden hier gezeigten Paginatoren unabhängig voneinander. Sie müssen nicht beide auf der Seite einbauen, aber sie ergänzen sich gut.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root version="1.2"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<jsp:directive.page contentType="text/html;charset=ISO-8859-1" pageEncoding="ISO-8859-1"/>
<f:view>
<ice:outputDeclaration doctypeRoot="HTML" doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN" doctypeSystem="http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<title><ice:outputText value="MyOpac - Buecherverwaltungssystem" /></title>
</head>
<body>
<ice:form partialSubmit="true" >
<ice:dataTable id="dataList"
border="5"
value="#{bookService.bookList}"
var="row"
rows = "5">
<!-- ID -->
<ice:column id="columnId">
<f:facet name="header">
<ice:outputText value="Id"></ice:outputText>
</f:facet>
<ice:outputText value="#{row.bookId}"></ice:outputText>
</ice:column>
<!-- Titel -->
<ice:column id="columnTitle">
<f:facet name="header">
<ice:outputText value="Titel"></ice:outputText>
</f:facet>
<ice:outputText value="#{row.title}"></ice:outputText>
</ice:column>
<!-- Autor -->
<ice:column>
<f:facet name="header">
<h:outputText value="Autor"/>
</f:facet>
<ice:outputText value="#{row.author}"></ice:outputText>
</ice:column>
<!-- Seitenanzahl -->
<ice:column>
<f:facet name="header">
<h:outputText value="Seitenanzahl"/>
</f:facet>
<ice:outputText value="#{row.pages}"></ice:outputText>
</ice:column>
</ice:dataTable>
<br />
<!-- Paginator -->
<ice:dataPaginator id="dataPaginator1" for="dataList" paginator="true" fastStep="3" paginatorMaxPages="4">
<f:facet name="first">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-first.gif"
style="border:none;"
title="First Page"/>
</f:facet>
<f:facet name="last">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-last.gif"
style="border:none;"
title="Last Page"/>
</f:facet>
<f:facet name="previous">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-previous.gif"
style="border:none;"
title="Previous Page"/>
</f:facet>
<f:facet name="next">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-next.gif"
style="border:none;"
title="Next Page"/>
</f:facet>
<f:facet name="fastforward">
<ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-ff.gif"
style="border:none;"
title="Fast Forward"/>
</f:facet>
<f:facet name="fastrewind">
<ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-fr.gif"
style="border:none;"
title="Fast Backwards"/>
</f:facet>
</ice:dataPaginator>
<br />
<ice:dataPaginator id="dataPaginator2" for="dataList"
rowsCountVar="rowsCount"
displayedRowsCountVar="displayedRowsCount"
firstRowIndexVar="firstRowIndex"
lastRowIndexVar="lastRowIndex"
pageCountVar="pageCount"
pageIndexVar="pageIndex">
<ice:outputFormat
styleClass="standard"
value="{0} Buecher gefunden, angezeigt werden {1} Buecher, von {2} bis {3}. Seite {4} / {5}.">
<f:param value="#{rowsCount}"/>
<f:param value="#{displayedRowsCount}"/>
<f:param value="#{firstRowIndex}"/>
<f:param value="#{lastRowIndex}"/>
<f:param value="#{pageIndex}"/>
<f:param value="#{pageCount}"/>
</ice:outputFormat>
</ice:dataPaginator>
</ice:form>
</body>
</html>
</f:view>
</jsp:root>
Der erste Teil ist vollkommen identisch zu unserer letzten Datei. Interessant wird es ab der Zeile, die rot markiert ist. Sehen wir uns ab dieser Stelle die Paginator-Komponenten einmal Schritt für Schritt an.
<ice:dataPaginator id="dataPaginator1" for="dataList" paginator="true" fastStep="3" paginatorMaxPages="4">
Es ist wichtig, dass der Tabelle eine Id verpasst wurde, denn über das for-Attribut wird nun eine Verbindung zwischen dem Paginator und der Tabelle hergestellt, indem die Id der Tabelle eingetragen wird. Außerdem muss bei der Tabelle ein Wert im rows-Attribut stehen. Das Attribut paginator der Paginator-Komponente muss auf true gesetzt werden, damit die Kontrollfelder angezeigt werden.
Dann existiert da noch das Attribut fastStep. Im Paginator gibt es Schaltflächen namens fastfoward und fastrewind. Das Attribut fastStep legt fest, wie viele Seiten bei der Benutzung dieser Schaltflächen vor bzw. zurück gesprungen werden soll.
Das Attribut paginatorMaxPages schließlich gibt an, wie viele Seiten maximal angezeigt werden sollen. Was bedeutet das? Wenn wir uns noch einmal das Bild oben ansehen, sehen wir Seitenzahlen als Links. Das Attribut paginatorMaxPages gibt an, wie viele Seiten über diese Links maximal erreichbar sein sollen. Momentan haben wir nur zwei Seiten, also sind auch nur zwei Seiten erreichbar. Haben wir jedoch acht Seiten, werden nur vier als Links dargestellt. Will der Benutzer andere Seiten betrachten, muss er zuerst einmal mit HIlfe der Schaltflächen weiterklicken. Dieses Prinzip kennen Sie auch von vielen anderen Seiten im Internet.
<f:facet name="first">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-first.gif"
style="border:none;"
title="First Page"/>
</f:facet>
Hier definieren wir die erste Schaltfläche, nämlich "First". Das bedeutet, die erste Seite wird angezeigt, wenn der Benutzer darauf klickt. Es wird ein Bild festgelegt, durch das die Schaltfläche repräsentiert wird. Im Attribut title geben Sie einen Tooltiptext an, der dem Benutzer angezeigt wird, wenn er die Maus über die Schaltfläche bewegt.
Analog dazu sehen die anderen Schaltflächen aus. Es gibt noch weitere Typen, die optional verwendet werden können:
- first: erste Seite
- last: letzte Seite
- previous: vorherige Seite
- next: nächste Seite
- fastfoward: schnell nach vorne, Anzahl der Seiten definiert in fastStep
- fastrewind: schnell rückwärts blättern, Anzahl der Seiten definiert in fastStep
Damit ist unsere erste Paginator-Komponente bereits abgeschlossen.
Wie Sie oben gesehen haben, kann man mit dem Paginator aber noch mehr bewerkstelligen. Wir wollen uns nun einen zweiten Paginator definieren, mit dessen Hilfe Informationen über die Seiten angezeigt werden können.
Die Tabelle lässt sich natürlich noch um viele Funktionen erweitern, beispielsweise einen Paginator. Dieser ermöglicht es, die Datensätze in mehrere Seiten aufzuteilen, wie man es aus dem Internet kennt, oder Informationen zu den Seiten anzuzeigen.
In die Tabelle wird noch die Eigenschaft rows eingetragen, welche angibt, wie viele Zeilen auf einer Seite angezeigt werden sollen. Daraus berechnet der Paginator die Anzahl der Seiten. Die Paginator-Eigenschaft paginatorMaxPages gibt an, wie viele Seiten maximal als Zahlen angezeigt werden sollen.
<ice:dataPaginator id="dataPaginator2" for="dataList"
rowsCountVar="rowsCount"
displayedRowsCountVar="displayedRowsCount"
firstRowIndexVar="firstRowIndex"
lastRowIndexVar="lastRowIndex"
pageCountVar="pageCount"
pageIndexVar="pageIndex">
Dazu muss das Attribut paginator auf false gesetzt werden (Standardwert). Sie können nun verschiedene Variablen an die DataTable binden:
- rowsCountVar: Anzahl der Zeilen in der Tabelle
- displayedRowsCountVar: Anzahl der Zeilen, die im Moment angezeigt werden
- firstRowIndexVar: Index der ersten Zeile, die angezeigt wird
- lastRowIndexVar: Index der letzten Zeile, die angezeigt wird
- pageCountVar: Anzahl der Seiten
- pageIndexVar: Nummer der aktuell angezeigten Seite
<ice:outputFormat
styleClass="standard"
value="{0} Buecher gefunden, angezeigt werden {1} Buecher, von {2} bis {3}. Seite {4} / {5}.">
Hier wird schließlich die Anzeige festgelegt. Im Attribut value des outputFormat geben Sie einen anzuzeigenden Text an. Ihnen fallen die Zahlen in geschweiften Klammern auf. Diese sind Platzhalter für die unten definierten Variablen. {0} ist die erste Variable, {1}, die zweite, usw.
<f:param value="#{rowsCount}"/>
<f:param value="#{displayedRowsCount}"/>
<f:param value="#{firstRowIndex}"/>
<f:param value="#{lastRowIndex}"/>
<f:param value="#{pageIndex}"/>
<f:param value="#{pageCount}"/>
Dies sind die Variablen, die in dem Text verwendet werden. Der Wert der Variable rowsCount (haben wir oben definiert) wird in {0} gespeichert, der Wert von displayedRowsCount in {1}, usw.
Nun beenden wir alle Komponenten und fertig ist unser zweiter Paginator!
Sie sehen, dass es sich hierbei um eine einfach zu handhabende, aber sehr mächtige Komponente handelt, die eine ganze Menge Programmierarbeit ersparen kann.
Zu guter Letzt möchte ich noch zeigen, dass der Benutzer den Paginator auch selbst beeinflussen - und zwar mit Hilfe von ManagedBeans. Der Benutzer soll in diesem Beispiel eingeben können, wie viele Zeilen er pro Seite sehen möchte.
Dazu benötigen wir eine weitere Bean, die DataTableBean.
public class DataTableBean {
/**
* Anzahl der Datensätze, die auf einer Seite angezeigt werden sollen.
*/
private int showRows;
public int getShowRows() {
return showRows;
}
public void setShowRows(int showRows) {
this.showRows = showRows;
}
}
Momentan ist sie noch sehr überschau, aber in den nächsten Teilen des Tutorials wird sie noch ausgebaut. Im Moment besteht sie lediglich aus einem Attribut, welches angibt, wie viele Zeilen angezeigt werden sollen. In der Datei faces-config.xml können wir einen Initialwert festlegen, wie im dritten Teil des Tutorials erklärt ( IceFaces Tutorial Teil 3 - Managed-Beans) Dort ist auch erklärt, wie die neue Bean für IceFaces registriert wird.
Nun müssen wir nur in der DataTable diese Property im Attribut rows angeben:
<ice:dataTable id="dataList"
border="1"
value="#{bookService.bookList}"
rows="#{dataTableBean.showRows}"
var="row" >
Nun benötigen wir nur noch ein Eingabefeld, in dem der Benutzer angeben kann, wie viele Datensätze pro Seite angezeigt werden sollen.
<ice:inputText value="#{dataTableBean.showRows}" size="3" />
<ice:commandButton value="Ok" />
Das Eingabefeld ist an die Property showRows gebunden. So kann der Benutzer die Anzahl der anzuzeigenden Seiten beeinflussen.
Im Folgenden sehen Sie noch einmal die komplette jspx-Seite mit dieser Änderung:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root version="1.2"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<jsp:directive.page contentType="text/html;charset=ISO-8859-1" pageEncoding="ISO-8859-1"/>
<f:view>
<ice:outputDeclaration doctypeRoot="HTML" doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN" doctypeSystem="http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<title><ice:outputText value="MyOpac - Buecherverwaltungssystem" /></title>
</head>
<body>
<ice:form partialSubmit="true" >
<ice:dataTable id="dataList"
border="1"
value="#{bookService.bookList}"
rows="#{dataTableBean.showRows}"
var="row" >
<!-- ID -->
<ice:column id="columnId">
<f:facet name="header">
<ice:outputText value="Id"></ice:outputText>
</f:facet>
<ice:outputText value="#{row.bookId}"></ice:outputText>
</ice:column>
<!-- Titel -->
<ice:column id="columnTitle">
<f:facet name="header">
<ice:outputText value="Titel"></ice:outputText>
</f:facet>
<ice:outputText value="#{row.title}"></ice:outputText>
</ice:column>
<!-- Autor -->
<ice:column>
<f:facet name="header">
<h:outputText value="Autor"/>
</f:facet>
<ice:outputText value="#{row.author}"></ice:outputText>
</ice:column>
<!-- Seitenanzahl -->
<ice:column>
<f:facet name="header">
<h:outputText value="Seitenanzahl"/>
</f:facet>
<ice:outputText value="#{row.pages}"></ice:outputText>
</ice:column>
</ice:dataTable>
<!-- Paginator -->
<ice:dataPaginator id="dataPaginator1" for="dataList" paginator="true" fastStep="3" paginatorMaxPages="4">
<f:facet name="first">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-first.gif"
style="border:none;"
title="First Page"/>
</f:facet>
<f:facet name="last">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-last.gif"
style="border:none;"
title="Last Page"/>
</f:facet>
<f:facet name="previous">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-previous.gif"
style="border:none;"
title="Previous Page"/>
</f:facet>
<f:facet name="next">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-next.gif"
style="border:none;"
title="Next Page"/>
</f:facet>
<f:facet name="fastforward">
<ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-ff.gif"
style="border:none;"
title="Fast Forward"/>
</f:facet>
<f:facet name="fastrewind">
<ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-fr.gif"
style="border:none;"
title="Fast Backwards"/>
</f:facet>
</ice:dataPaginator>
<ice:dataPaginator id="dataPaginator2" for="dataList"
rowsCountVar="rowsCount"
displayedRowsCountVar="displayedRowsCount"
firstRowIndexVar="firstRowIndex"
lastRowIndexVar="lastRowIndex"
pageCountVar="pageCount"
pageIndexVar="pageIndex">
<ice:outputFormat
styleClass="standard"
value="{0} Buecher gefunden, angezeigt werden {1} Buecher, von {2} bis {3}. Seite {4} / {5}.">
<f:param value="#{rowsCount}"/>
<f:param value="#{displayedRowsCount}"/>
<f:param value="#{firstRowIndex}"/>
<f:param value="#{lastRowIndex}"/>
<f:param value="#{pageIndex}"/>
<f:param value="#{pageCount}"/>
</ice:outputFormat>
</ice:dataPaginator>
<br />
<br />
<ice:outputLabel value="Anzahl anzuzeigender Datensaetze:"></ice:outputLabel>
<ice:inputText value="#{dataTableBean.showRows}" size="3"></ice:inputText>
<ice:commandButton value="Ok"></ice:commandButton>
<ice:messages />
</ice:form>
</body>
</html>
</f:view>
</jsp:root>
Das war der Teil des Tutorials zum Thema Paginator. Im nächsten Teil wollen wir uns sortierbaren Tabellen widmen.
IceFaces Tutorial Teil 4 - Eine einfache DataTable