Ice Faces Tutorial Teil 1 - Einführung
Ich möchte eine kleine Bibliotheksverwaltung implementieren, MyOpac. Diese kleine Anwendung wird um mehrere Komponenten von IceFaces und eine Datenbankanbindung über Hibernate erweitert. In diesem Zusammenhang werde ich dann auch die Grundlagen von Hibernate erklären.
Für Anregungen und konstruktive Kritik bin ich offen. Nutz en Sie dazu oder für Fragen bitte die Kommentarfunktion. Dann wollen wir starten mit dem ersten Teil des IceFaces-Tutorials.
Was ist IceFaces?
IceFaces basiert auf JavaServer Faces (JSF), bei dem es sich um ein Framework zur Erstellung grafischer Oberflächen für Internetseiten handelt. JSF ist etwa vergleichbar mit Swing in der Javawelt. Es geht dabei darum, die Benutzeroberflächen eines Webprojekts und den Ablauf zwischen den Seiten zu managen.Dazu stellt JSF viele Hilfsmitteln bereit. Zum Beispiel unterstützt es den Entwickler bei der Einhaltung des MVC (Model-View-Controller)-Entwurfsmusters, bei dem die Daten (Model), die Ansicht (View) und die Steuerung (Controller) voneinander getrennt sind. Es gibt in JSF verschiedene Mechanismen wie beispielsweise die managed beans, welche das MVC-Konzept unterstützen.
Außerdem gibt es wie in Swing auch in JSF ein Eventhandlung, d.h. bestimmte Ereignisse können abgefangen werden, damit das Programm angemessen reagieren kann. Ereignisse sind z.B. die Änderung eines Wertes in einem Steuerelement oder der Klick auf eine Schaltfläche. JSF soll es dem Entwickler ermöglichen, innerhalb kurzer Zeit mit möglichst wenig Aufwand eine möglichst moderne und stabile Webanwendung zu entwickeln.
Welche Rolle spielt nun IceFaces dabei?
IceFaces basiert auf JSF und erweitert diese um viele neue Komponenten. Es werden JavaScript-Funktionalitäten verwendet, deren Code von IceFaces generiert wird. Der Entwickler muss folglich kein JavaScript mehr programmieren. Zu den vielfältigen neuen Komponenten, die IceFaces zur Verfügung stellt, gehören zum Beispiel sortierbare Tabellen, Menüs und Registerblätter.
Mit einer Einarbeitung in IceFaces muss man auch JSF lernen. Damit schlägt quasi zwei Fliegen mit einer Klappe.
IceFaces und die benötigte Software installieren
In diesem Abschnitt installieren wir erst einmal alle für dieses Tutorial benötigten Programme. Ich verwende die Entwicklungsumgebung Eclipse, für die es ein schönes IceFaces-Plugin gibt. Dieses Plugin enthält eine kleine WYSIWYG-Funktion für die IceFaces-Komponenten. Allerdings erspart es dem Programmierer nicht, den entstandenen Quelltext zu verstehen. Hier möchte ich kurz die Installation erläutern. Ein Kapitel über das Plugin wird es noch geben, dann werde ich nicht mehr näher darauf eingehen. So ist es auch denjenigen, die nicht Eclipse und das Plugin verwenden möchten, möglich dem Tutorial zu folgen.Wer Eclipse noch nicht installiert hat, kann es hier herunterladen: http://www.eclipse.org/downloads/ Sie brauchen das Eclipse für Java EE Entwickler (ganz oben in der Liste). Wer ein normales Eclipse auf dem Rechner hat, installiert sich bitte noch das WTP-Plugin, zu erhalten hier: http://www.eclipse.org/webtools/
Das IceFaces-Plugin finden Sie auf dieser Seite: http://www.icefaces.org/main/downloads/os-downloads.iface
Hier stehen auch Plugins für andere Entwicklungsumgebungen wie beispielsweise NetBeans bereit. In dem Archiv, das Sie dort herunterladen können, finden Sie ein Installationsanweisung, in der auch die ersten Schritte mit dem Plugin erklärt sind.
Und schließlich brauchen Sie noch einen Server. Ich benutze Tomcat 6, aber Sie können natürlich auch einen anderen Webserver wie zum Beispiel JBoss verwenden. Tomcat finden Sie hier: http://tomcat.apache.org/ Für Windows gibt es eine Installationsdatei, welche die Installation unglaublich einfach macht.
Wenn alles installiert ist, kann es auch schon losgehen.
Die erste Seite
Eine IceFaces-Anwendung ist aufgebaut wie jede andere Webanwendung auch. Die jsp- bzw. jspx-Dateien in Icefaces befinden sich im Hauptordner, die Deskriptoren in /WEB-INF und in diesem Ordner befindet sich das Verzeichnis /src. Dort wird der Java-Quellcode abgelegt.
Jetzt habe ich ein böses Wort genannt: Deskriptoren. Was zum Teufel ist das?
Dabei handelt es sich um xml-Dateien, die wichtige Informationen für die Webanwendung bereit halten. Der wichtigste Deskriptor, den es immer geben muss, ist die web.xml. Das Plugin erstellt uns diese Datei selbstständig mit allen Informationen, die für die Entwicklung mit IceFaces von Bedeutung sind. Alle, die kein Plugin installiert haben, finden im Folgenden den Quellcode:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>Library</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>MyOpac</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.jspx</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.enableRestoreView11Compatibility</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>To allow multiple windows for a single application. See Concurrent DOM Views in Chapter 3. of Developer Guide.</description>
<param-name>com.icesoft.faces.concurrentDOMViews</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>Turn on/off application-wide synchronous or asynchronous updates. See Synchronous and Asynchronous Updates in Chapter 3. of Developer Guide.</description>
<param-name>com.icesoft.faces.synchronousUpdate</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>A Google Maps API key is required if gMap component is used. Sign up for an API key from http://code.google.com/apis/maps/signup.html.</description>
<param-name>com.icesoft.faces.gmapKey</param-name>
<param-value>ABQIAAAADlu0ZiSTam64EKaCQr9eTRTOTuQNzJNXRlYRLknj4cQ89tFfpxTEqxQnVWL4k55OPICgF5_SOZE06A</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.uploadDirectory</param-name>
<param-value>upload</param-value>
</context-param>
<context-param>
<param-name>com.icesoft.faces.uploadMaxFileSize</param-name>
<param-value>4048576</param-value>
</context-param>
<servlet>
<servlet-name>Persistent Faces Servlet</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.PersistentFacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Persistent Faces Servlet</servlet-name>
<url-pattern>*.iface</url-pattern>
<url-pattern>*.jspx</url-pattern>
<url-pattern>/xmlhttp/*</url-pattern>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Blocking Servlet</servlet-name>
<servlet-class>com.icesoft.faces.webapp.xmlhttp.BlockingServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Blocking Servlet</servlet-name>
<url-pattern>/block/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>uploadServlet</servlet-name>
<servlet-class>com.icesoft.faces.component.inputfile.FileUploadServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>uploadServlet</servlet-name>
<url-pattern>/uploadHtml</url-pattern>
</servlet-mapping>
<listener>
<listener-class>com.icesoft.faces.util.event.servlet.ContextEventRepeater</listener-class>
</listener>
</web-app>
Speichern Sie diesen Code in der Datei /WEB-INF/web.xml. Die einzigen Änderungen, die Sie noch vornehmen müssen, sind kosmetischer Natur. Schauen Sie sich den Inhalt der Tags <displayName> und <servletName> an (oben rot markiert). Wenn Sie Ihnen nicht gefallen, änderen Sie sie.
Bei IceFaces gibt es noch einen zweiten Deskriptor, die faces-config.xml. Im Gegensatz zur web.xml werden wir an dieser Datei sehr häufig Veränderungen durchführen müssen, aber in diesem ersten Teil des Tutorials wollen wir sie uns noch nicht ansehen.
Von dem Plugin können wir uns nun eine erste Seite erzeugen lassen. Wir nennen sie welcome.jspx. Im Folgenden sehen Sie den Quelltext:
<?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 - Willkommenseite" /></title>
<ice:outputStyle href="./xmlhttp/css/xp/xp.css" />
</head>
<body>
<ice:outputText value="Willkommen bei MyOpac." />
<br />
<ice:outputText value="Ich wünsche viel Spaß." />
<ice:form partialSubmit="true" >
<ice:messages />
</ice:form>
</body>
</html>
</f:view>
</jsp:root>
Sehen wir uns die Datei einmal näher an. Im oberen Teil befinden sich einige Deklarationen, die für IceFaces von Bedeutung sind.
<f:view>
In JSF und damit in IceFaces werden die Komponenten in einer hierarchischen Baumstruktur dargestellt. <f:view> ist die Wurzel dieses Baumes und kommt somit auf jeder jspx-Seite genau einmal vor.
<ice:outputDeclaration doctypeRoot="HTML" doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN" doctypeSystem="http://www.w3.org/TR/html4/loose.dtd"/>
Erzeugt eine DOCTYPE-Deklaration, die am Anfang des Dokuments untergebracht wird.
<head>
<title><ice:outputText value="MyOpac - Willkommenseite" /></title>
<ice:outputStyle href="./xmlhttp/css/xp/xp.css" />
</head>
<body>
Diese Zeilen kennt man als Webentwickler sehr gut. Sie sind der Beginn einer HTML-Seite mit Titel. Interessant ist der Tag im <title>. Hierbei handelt es sich um ein Element von IceFaces: <ice:outputText value="MyOpac - Willkommenseite" />. ice:outputText ist ein einfacher Ausgabetext. Mit dem Attribut value legen Sie fest, welcher Text ausgegeben werden soll. Mit dem Tag <ice:outputStyle> wird ein Stylesheet für das Dokument festgelegt. Dieses wird mit dem Attribut href referenziert, wie man es von HTML her kennt.
<ice:outputText value="Willkommen bei MyOpac."
<br />
<ice:outputText value="Ich wünsche viel Spaß." />
Im Body stehen wieder zwei Ausgabefelder. Wie bei gewöhnlichem HTML können sie durch das <br />-Tag Einen Zeilenumbruch hinzufügen.
<ice:form partialSubmit="true" >
Hier beginnt ein Formular ähnlich wie man es von HTML her kennt. Neu ist das Attribut partialSubmit. Wenn dies aktiviert ist, bedeutet das, dass das Formular automatisch partiell übertragen wird, wenn eine bestimmte Aktion durch den Benutzer erfolgt. Dies kann auch für jede Komponente speziell eingestellt werden, falls es nicht für das gesamte Formular gewünscht ist.
Das hat den Vorteil, dass bei Eingaben zum Beispiel direkt vailidiert wird. Dadurch erhält man sofort eine Rückmeldung, falls es sich um eine Falscheingabe handelt. Die Vorteile werden im Laufe dieses Tutorials noch weiter erläutert.
<ice:messages />
Dieser Tag gibt an, dass Fehlermeldungen im unteren Teil der Seite ausgegeben werden. Auch hier gibt es weitere Möglichkeiten, die wir uns im Kapitel über Dateneingaben näher ansehen
</ice:form>
</body>
</html>
</f:view>
</jsp:root>
Mit diesen Zeilen wird das Formular beendet und schließlich auch das Dokument. Damit ist unsere erste jspx-Seite beendet. Mit folgender Adresse rufen Sie die Seite auf: http://localhost:8080/myopac/welcome.jspx. Damit wir nicht immer die Seite mit angeben müssen, müssen wir eine Index-Seite erstellen. Dazu reicht eine einfache index.jsp mit einer Weiterleitung zu unserer welcome.jspx.
<html>
<head>
<title></title>
</head>
<body>
<jsp:forward page="test.jspx"/>
</body>
</html>
Nun kann das Projekt über folgende Adresse aufgerufen werden: http://localhost:8080/myopac.
Im zweiten Teil werde ich kurz auf das das Eclipse-Plugin eingehen. Und im dritten Teil kann es dann richtig losgehen.