IceFaces Tutorial Teil 4 - Eine einfache DataTable
In diesem Teil des Tutorials möchten wir uns mit der Klasse DataTable von IceFaces auseinandersetzen. Sie stellt eine Tabelle dar, in der wir Daten aus unserer Datenbank anzeigen lassen werden. Da wir bis jetzt noch keine Datenbankanbindung eingebaut haben, werden wir vorerst die Datensätze von Hand in den Quellcode der Tabelle hineinschreiben, damit wir ein funktionierendes Beispiel haben.
Dabei entstehen mehrere Dateien: Book.java, BookService.java und bookList.jspx. Diese Dateien wollen wir uns jetzt einmal ansehen. Beginnen wollen wir mit unserer Bean:
package de.myopac;
public class Book {
private int bookId;
private String title;
private String author;
private int pages;
public Book(int bookId, String title, String author, int pages) {
this.bookId = bookId;
this.title = title;
this.author = author;
this.pages = pages;
}
public Book() {
}
public int getBookId() {
return bookId;
}
public void setBookId(int bookId) {
this.bookId = bookId;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public int getPages() {
return pages;
}
public void setPages(int pages) {
this.pages = pages;
}
}
Die einzige Änderung ist der Konstruktor, den ich hinzugefügt habe (im Quellcode rot markiert). Diesen habe ich eingebaut, damit ich meine Bücherobjekte von Hand erstellen kann. Dies geschieht in der Datei BookService,java
package de.myopac;
import java.util.ArrayList;
public class BookService {
private static ArrayList<Book> bookList;
public BookService() {
bookList = new ArrayList<Book>();
bookList.add(new Book(1, "Der dunkle Turm 1 - Schwarz", "Stephen King", 336));
bookList.add(new Book(2, "Das Buch des Feuers", "James Clemens", 512));
bookList.add(new Book(3, "Das Druidentor", "Wolfgang Hohlbein", 558));
bookList.add(new Book(4, "Ritus", "Markus Heitz", 544));
bookList.add(new Book(5, "Unendlichkeit", "Alastair Reynolds", 766));
bookList.add(new Book(6, "Die Purpurinseln", "Thomas Finn", 384));
bookList.add(new Book(7, "Der Wahrträumer", "Bernhard Hennen", 512));
bookList.add(new Book(8, "Die Brandmauer", "Henning Mankell", 592));
bookList.add(new Book(9, "Der Hund der Baskervilles", "Arthur Conan Doyle", 286));
}
public ArrayList<Book> getBookList() {
return bookList;
}
public void setBookList(ArrayList<Book> bookList) {
BookService.bookList = bookList;
}
}
Diese Klasse wird sich später um den Datenzugriff kümmern. Momentan erstellt sie nur eine Liste mit den Büchern. Deswegen widmen wir uns nun der wirklich interessanten Datei, bookList.jspx.
<?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}"
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" />
</f:facet>
<ice:outputText value="#{row.title}" />
</ice:column>
<!-- Autor -->
<ice:column>
<f:facet name="header">
<h:outputText value="Autor"/>
</f:facet>
<ice:outputText value="#{row.author}" />
</ice:column>
<!-- Seitenanzahl -->
<ice:column>
<f:facet name="header">
<h:outputText value="Seitenanzahl"/>
</f:facet>
<ice:outputText value="#{row.pages}" />
</ice:column>
</ice:dataTable>
</ice:form>
</body>
</html>
</f:view>
</jsp:root>
Sie sieht nun etwas anders aus als unsere erste Testdatei. Sehen wir sie uns mal Schritt für Schritt an.
<ice:dataTable id="dataList"
border="1"
value="#{bookService.bookList}"
var="row"
rows="5" >
Hier beginnt die Tabelle vom Typ dataTable. Das Attribut border steuert die Dicke der Ränder, ähnlich wie bei HTML. Bei value sehen wir einen Ausdruck der Expression Language. Wir erinnern uns an das Kapitel über die ManagedBeans. Das heißt, wir benutzen den Rüclgabewert der Methode getBookList() der Klasse BookService. Das value-Attribut gibt an, welche Daten in der Tabelle angezeigt werden. Das rows-Attribut schließlich gibt an, wie viele Zeilen auf einer Seite angezeigt werden sollen. Sobald wir also jetzt mehr als fünf Datensätze haben, benötigen wir eine Komponente, die durch die Seiten blättert. Dazu jedoch später im Abschnitt "Paginator".
Der Vorteil dieser Komponente ist, dass wir nicht in einer Schleife jede einzelne Zeile abarbeiten müssen. Das erledigt IceFaces. Der benötigte HTML-Code mit der richtigen Anzahl Zeilen wird automatisch generiert. Die Methode muss also auf jeden Fall ein Objekt einer Listenklasse zurückgeben, in unserem Fall ArrayList.
Schließlich gibt es noch das Attribut var. Dieses deklariert eine Variable, über welche auf den Inhalt einer Zeile zugegriffen wird. In diesem Fall repräsentiert row also ein Objekt der Klasse Book.
Nun werden die einzelnen Spalten definiert. Wir betrachten die erste Spalte mit der Id, die anderen sind analog aufgebaut.
<ice:column id="columnId">
<f:facet name="header">
<ice:outputText value="Id"></ice:outputText>
</f:facet>
<ice:outputText value="#{row.bookId}" />
</ice:column>
Eine Spalte ist die Komponente <ice:column>. Mit <f:facet name="header"> wird eine Kopfzelle erstellt, in der wir einen Ausgabetext definieren. Dieser Text gibt die Beschriftung der Titelzelle an, in diesem Fall "Id". Bevor wir die Definition der Spalte beenden, müssen wir noch angeben, was genau in dieser Spalte angezeigt werden soll. Bis jetzt haben wir ihr ja nur einen Header gegeben, aber noch keine Daten. Da eine Zeile ein Objekt vom Typ Book ist, müssen wir nun noch angeben, welches Attribut von Book hier angezeigt werden soll.
<ice:outputText value="#{row.bookId}" />
In dieser Zeile sehen wir hinter dem Attribut value wieder einen Ausdruck aus der Expression Language. Sie sollten ihn inzwischen lesen können. Er bedeutet, dass von der Variable row, die ja ein Book ist, die bookId per Getter-Methode gelesen und angezeigt werden soll.
Somit ist die Definition dieser Spalte abgeschlossen. Wir haben einen Titel definiert und dann angegeben, welches Datum aus der Variable row angezeigt werden soll. Analog wird bei den anderen Spalten vorgegangen. Am Ende wird nur noch jedes offene Tag geschlossen und dann ist die Tabelle auch schon abschussbereit.
IceFaces Tutorial Teil 3 - Managed-Beans
IceFaces Tutorial Teil 5 - DataTable mit Paginator