Erste Schritte mit JavaServer Faces und MyEclipse. Allgemeines. Erstellen eines JavaServer Faces Projektes

Transkript

1 Erste Schritte mit JavaServer Faces und MyEclipse Dieses Tutorial soll den Einstieg in das noch recht neue Framework, JavaServer Faces (JSF), erleichtern. Es wird Schritt für Schritt eine Beispiel-Anwendung (eine Bibliothek) erstellt, die den Umgang mit verschiedenen Elementen des Frameworks aufzeigt. Die Beispielanwendung soll folgende Funktionalität bieten: Ausgabe einer Bücherübersicht (Liste aller Bücher) Hinzufügen, bearbeiten und löschen von Büchern Allgemeines Autor: Sascha Wolski Sebastian Hennebrüder Tutorials für Struts, EJB, xdoclet und eclipse. Datum: December, Source code: Die Sourcen enthalten keine Projektdateien oder irgendwelche Libraries. Erstelle ein neues Projekt, wie im Tutorial erklärt, füge die Libraries hinzu, gleichfalls wie im Tutorial erklärt und kopiere die Sourcen in Dein neues Projekt. PDF Version des Tutorials: Development Tools Eclipse 3.x MyEclipse plugin 3.8 (Ein kostengünstige, leistungsfähige Erweiterung für die Entwicklung von Web Anwendungen und EJB Applikationen, Testversion gibt es bei MyEclipse.) Database PostgreSQL 8.0 Beta Application Server Jboss You may use Tomcat here if you like. Erstellen eines JavaServer Faces Projektes Erstelle ein neues Web-Projekt mit File > New > Project.

2 Gib deinem Projekt einen geeigneten Namen und füge die JSTL Bibliotheken hinzu.

3 Füge dem Projekt die JavaServer Faces Unterstützung hinzu. Rechte Maustaste auf das Projekt, MyEclipse > Add JSF Capabilities.

4

5 Die Klasse Book Lege ein neues Package de.laliluna.tutorial.library an und erstelle eine neue Klasse Book. Öffne die Klasse und füge folgende private Eigenschaften hinzu: id author title available

6 Generiere für jede Eigenschaft der Klasse eine Getter- und Setter-Methode. Desweiteren soll ein Konstruktor hinzugefügt werden, der es erlaubt die Eigenschaften der Instanzvariable beim Initialisieren zu setzen. Der folgende Quelltext zeigt die Klasse Book. public class Book implements Serializable { // Properties private long id; private String author; private String title; private boolean available; // Constructors public Book(){ public Book(long id, String author, String title, boolean available){ this.id = id; this.author = author; this.title = title; this.available = available; // Getter and setter methods public String getauthor() { return author; public void setauthor(string author) { this.author = author;

7 public boolean isavailable() { return available; public void setavailable(boolean available) { this.available = available; public long getid() { return id; public void setid(long id) { this.id = id; public String gettitle() { return title; public void settitle(string title) { this.title = title; Füge noch einen Getter- und Setter für die Klasse hinzu. * * Set the properties book public void setbook(book book){ this.setid(book.getid()); this.setauthor(book.getauthor()); this.settitle(book.gettitle()); this.setavailable(book.isavailable()); * book object public Book getbook(){ return new Book(this.getId(), this.getauthor(), this.gettitle(), this.isavailable()); Die Datenbank Klasse Wir verzichten in diesem Tutorial auf die Anbindung einer Datenbank und stellen einige Testdaten mit einer Klasse bereit. Lade dir das Beispiel-Projekt zu diesem Tutorial herunter und kopiere die Klasse SimulateDB.java aus dem Verzeichnis src/de/laliluna/tutorial/library/ in das Package de.laliluna.tutorial.library. Die BookList Klasse Erstelle eine weitere Klasse BookList im Package de.laliluna.library. Diese Klasse beinhaltet eine Eigenschaft books,welche ein Liste aller Bücher darstellt. Erstelle für die Eigenschaft books eine Getter- und Setter-Methode und ändere die Getter-Methode wie folgt ab. public class BookList { // Properties Collection books; // Getter and Setter *

8 collection of books public Collection getbooks(){ SimulateDB simulatedb = new SimulateDB(); Holt sich die Session auf dem Externen Context Map session = FacesContext.getCurrentInstance().getExternalContext ().getsessionmap(); Lies alle Bücher auf der simulierten Datenbank aus books = simulatedb.getallbooks(session); return books; * books The books to set. public void setbooks(collection books) { this.books = books; Dein Package Explorer sollte wie folgt aussehen. Action Listener Methoden Damit der Benutzer später ein Buch hinzufügen, bearbeiten oder löschen kann, muss noch die entsprechende Funktionalität abgebildet werden. Diese werden in sogenannte Action Listener Methoden / Klassen implementiert. Eine Action Listener Methode / Klasse wird beim Eintreten eines Ereignisses (zbsp.:benutzer klickt auf einen Link) aufgerufen und abgearbeitet. Öffne die Klasse Book und erstelle vier Methoden für die folgende Funktionalität abbilden. Initialisieren eines Buches Auslesen eines Buches zum Bearbeiten Speichern eines Buches Löschen eines Buches

9 Initialisieren eines Buches * * Initialisiert die Eigenschaften der Klasse mit null event public void initbook(actionevent event){{ * Eigenschaften initialisieren this.setbook(new Book()); Auslesen eines Buches zum Bearbeiten * * Liest das zu bearbeitende Buch aus * und weisst es dem Bean zu * event public void selectbook(actionevent event){ SimulateDB simulatedb = new SimulateDB(); * Holt sich die Session auf dem Externen Context Map session = FacesContext.getCurrentInstance().getExternalContext(). getsessionmap(); * Such die UIParameter Komponente anhand des Ausdrucks UIParameter component = (UIParameter) event.getcomponent().findcomponent ("editid"); * Parse den Value der UIParameter Komponente long id = Long.parseLong(component.getValue().toString()); * Ließ das Buch anhand der id aus und setze die lokalen Eigenschaften this.setbook(simulatedb.loadbookbyid(id, session)); Speichern eines Buches * * Legt oder aktualisiert ein Buch in der simulierten Datenbank * Wenn die id des Buches nicht gesetzt ist wird das Buch * angelegt, ansonsten wird das Buch aktualsiert. * event public void savebook(actionevent event){ SimulateDB simulatedb = new SimulateDB(); * Holt sich die Session auf dem Externen Context Map session = FacesContext.getCurrentInstance().getExternalContext().

10 getsessionmap(); * Fügt hinzu oder aktualisiert das Buch in der * simulierten Datenbank simulatedb.savetodb(this.getbook(), session); Löschen eines Buches * * Löscht ein Buch aus der simulierten Datenbank * event public void deletebook(actionevent event){ SimulateDB simulatedb = new SimulateDB(); * Holt sich die Session auf dem Externen Context Map session = FacesContext.getCurrentInstance().getExternalContext(). getsessionmap(); * Such die UIParameter Komponente anhand des Ausdrucks UIParameter component = (UIParameter) event.getcomponent().findcomponent ("deleteid"); * Parse den Value der UIParameter Komponente long id = Long.parseLong(component.getValue().toString()); * Lösche das Buch anhand der seiner id simulatedb.deletebookbyid(id, session);

11 Die Datei faces-config.xml Die faces-config.xml ist die zentrale Konfigurationsdatei für JavaServer Faces. Wir definieren hier den Ablauf unserer Anwendung (auf welche Aktion wird welche Seite verarbeitet), die vom JSF zu verwaltenden Bean Klassen und einiges mehr. Der Ablauf der Bibliotheken-Anwendung sieht wie folgt aus. Wir definieren dafür die sogenannten Navigationsregeln. Öffne die Datei faces-config.xml und füge folge Konfiguration hinzu. <faces-config> <!-- Navigation rules --> <navigation-rule> <description>list of books</description> <from-view-id>/listbooks.jsp</from-view-id> <navigation-case> <from-outcome>editbook</from-outcome> <to-view-id>/editbook.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <description>add or edit a book</description> <from-view-id>/editbook.jsp</from-view-id> <navigation-case> <from-outcome>listbooks</from-outcome> <to-view-id>/listbooks.jsp</to-view-id> <redirect/> </navigation-case> </navigation-rule> </faces-config> <navigation-rule> Definiert eine Navigationregel <from-view-id>/listbooks.jsp</from-view-id> Gibt die JSP Datei an, für die diese Navigationregel zutrifft. <navigation-case> Definiert einen Navigationsfall <from-outcome>editbook</from-outcome> Definiert einen Namen für den Navigationsfall <to-view-id>/listbooks.jsp</to-view-id> Verweist auf die angegebene JSP Datei <redirect/> Wenn dieser Tag gestetzt wird, werden die Parameter die sich im Request befinen nicht mit übertragen.

12 Damit wir in den JSP Dateien auf unsere Bean Klassen zugreifen können, müssen wir diese in der faces-config.xml registrieren. Füge folgenden Quelltext hinzu. <!-- Managed beans --> <managed-bean> <description> Book bean </description> <managed-bean-name>bookbean</managed-bean-name> <managed-bean-class>de.laliluna.tutorial.library.book</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <managed-bean> <description> BookList Bean </description> <managed-bean-name>booklistbean</managed-bean-name> <managed-bean-class>de.laliluna.tutorial.library.booklist</managed-beanclass> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <managed-bean> Definiert eine zu verwaltendes Bean. <managed-bean-name>bookbean</managed-bean-name> Vergibt einen Namen für das zu verwaltende Bean. Dieser Name wird in der JSP Datei genutzt. <managed-bean-class>de.laliluna.tutorial.library.book</managed-bean-class> Gibt die Klasse die das Bean darstellt an. <managed-bean-scope>request</managed-bean-scope> Definiert in welchem Scope das zu verwaltende Bean gespeichert werden soll. Erstellen der JSP Dateien Wir erstellen im ersten Schritt eine JSP Datei index.jsp, die den Benutzer auf die Bücherübersicht weiterleitet. index.jsp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <jsp:forward page="/listbooks.faces" /> </body> </html> Im zweiten Schritt erstellen wir die Bücherübersicht. listbooks.jsp page language="java" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <% String path = request.getcontextpath(); String basepath = request.getscheme()+"://"+request.getservername() +":"+request.getserverport()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

13 <head> <base href="<%=basepath%>"> <title>list of books</title> </head> <body> <f:view> <h:form id="booklist"> <h:datatable id="books" value="#{booklistbean.books" var="book" border="1"> <h:column> <f:facet name="header"> <h:outputtext value="author"/> </f:facet> <h:outputtext value="#{book.author" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="title"/> </f:facet> <h:outputtext value="#{book.title" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="available"/> </f:facet> <h:selectbooleancheckbox disabled="true" value="#{book.available" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="edit"/> </f:facet> <h:commandlink id="edit" action="editbook" actionlistener="#{bookbean.selectbook"> <h:outputtext value="edit" /> <f:param id="editid" name="id" value="#{book.id" /> </h:commandlink> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="delete"/> </f:facet> <h:commandlink id="delete" action="listbooks" actionlistener="#{bookbean.deletebook"> <h:outputtext value="delete" /> <f:param id="deleteid" name="id" value="#{book.id" /> </h:commandlink> </h:column> </h:datatable> <h:commandlink id="add" action="editbook" actionlistener="#{bookbean.initbook"> <h:outputtext value="add a book" /> </h:commandlink> </h:form> </f:view> </body> </html>

14 taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> Mit der Direktive taglib werden die JSF eigenen Tag Bibliotheken geladen <f:view> Definiert einen View-Komonente, alle weiteren JSF Tags müssen sich innerhalb dieses Tags befinden. <h:form id="booklist"> Definiert eine HTML Form <h:datatable id="books" value="#{booklistbean.books" var="book" border="1"> Definiert eine HTML Table. Der Tag wird genutz um über Listen zu laufen und die Daten dieser Liste auszugeben, vergleichbar mit einer for Schleife. Mit dem Parameter value weist man eine Liste von Daten zu, in unserem Falle die Liste der vorhanden Bücher unserer Bibliothek. Mit dem Parameter var definieren wir eine Variable mit der wir innerhalb des Tags (Loops) auf das aktuelle Element (ein Buch) der Liste zugreifen können. <h:column> <f:facet name="header"> <h:outputtext value="author"/> </f:facet> <h:outputtext value="#{book.author" /> </h:column> Definiert eine Spalte mit einem Spaltenkopf. <f:facet name="header"> Definiert den Spaltenkopf <h:outputtext value="author"/> gibt den Wert Author im Spaltenkopf aus. <h:outputtext value="#{book.author" /> bezieht sich auf die Eigenschaft author unserer Book Klasse. <h:commandlink id="edit" action="editbook" actionlistener="#{bookbean.selectbook"> Definiert einen HTML Link, der beim Aufruf das Formular abschickt. Der Parameter action gibt an welcher Navigationsfall nach dem Abschicken abgearbeitet werden soll. In diesem Fall greift der Navigationsfall editbook, den wir zuvor in der faces-config.xml angegeben haben. Mit dem Parameter actionlistener weisen wir dem Link die Action Listener Methode selectbook unseres Book Beans zu. Nach dem Abschicken des Formulars wird die Listener Methode aufgerufen und abgearbeitet. Die letzte JSP Datei, beinhaltet ein Formular zum Anlegen und Bearbeiten eines Buches. editbook.jsp page language="java" %> taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> <% String path = request.getcontextpath(); String basepath = request.getscheme()+"://"+request.getservername() +":"+request.getserverport()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basepath%>"> <title>add / Edit a book</title> </head> <body> <f:view>

15 <h:form> <h:inputhidden id="id" value="#{bookbean.id"/> <h:panelgrid columns="2" border="1"> <h:outputtext value="author:" /> <h:inputtext id="author" value="#{bookbean.author"> </h:inputtext> <h:outputtext value="title:" /> <h:inputtext id="title" value="#{bookbean.title"> </h:inputtext> <h:outputtext value="available:" /> <h:selectbooleancheckbox id="available" value="#{bookbean.available" /> </h:panelgrid> <h:commandbutton value="save" action="listbooks" actionlistener="#{bookbean.savebook" /> </h:form> </f:view> </body> </html> <h:inputhidden id="id" value="#{bookbean.id"/> Definiert ein HTML Hidden Element mit dem Wert der Eigenschaft id unserer Book Klasse. Value bezieht sich hier auf das Managed Bean bookbean, welches in der faces-config.xml angegeben ist. <h:panelgrid columns="2" border="1"> Definiert eine HTML Table mit zwei Spalten, wobei column die Anzahl der Spalten angibt. <h:inputtext id="author" value="#{bookbean.author"> Definiert ein HTML Textfeld mit dem Wert der Eigenschaft author unserer Book Klasse. <h:commandbutton value="save" action="listbooks" actionlistener="#{bookbean.savebook" /> Erstellt einen HTML Submit Button mit dem Value Save und der Action listbooks. Die Action Listener Methode savebook wird nach dem Abschicken des Formulars aufgerufen. Testen der Anwendung Starte den Jboss und Deploye das Projekt als Packaged Archive Rufe danach das Projekt auf