In diesem Beitrag möchte ich erläutern wie man ein JavaServerFaces 2.2 Projekt mit Apache Maven und Eclipse einrichtet.
Ihr benötigt folgende Tools:
Wie man Apache Maven einrichtet, habe ich bereits im Tutorial Maven: Einrichten von Apache Maven erläutert. Wichtig ist das die Umgebungsvariable „JAVA_HOME“ zu einem Oracle Java JDK verweist.
Inhaltsverzeichnis
Einrichten von Eclipse
Nachdem Eclipse heruntergeladen und in einen beliebigen Ordner entpackt wurde, kann das Programm über „eclipse.exe“ gestartet werden.
Troubleshooting
Sollte beim Starten die Fehlermeldung mit dem Fehlercode 13 erscheinen so muss in der Datei „eclipse.ini“ der Pfad zur javaw.exe gesetzt werden.
Die Datei „eclipse.ini“ liegt im selben Ordner wie die Datei „eclipse.exe“ und wird mit einem beliebigen Texteditor geöffnet.
Es muss nun nach der Wert „-startup“ folgende Zeile eingefügt werden:
-vm C:/Program Files/Java/jdk1.8.0_152/bin/javaw.exe
Auf meinem System ist Oracle Java unter dem oben genannten Pfad installiert sollte dieses bei euch anders sein muss dieser Pfad natürlich angepasst werden.
Erstellen eines Workspaces
Eclipse arbeitet mit Workspaces, in diese Verzeichnisse werden die Einstellungen sowie die Projekte abgelegt. Man kann beliebig viele Workspaces anlegen.
Einrichten von Apache Maven (in Eclipse)
Als ersten Schritt wollen wir Apache Maven einrichten. Ich setze voraus das Apache Maven, entpackt und die Umgebungsvariable JAVA_HOME auf ein JDK zeigt.
Navigieren wir also über das Hauptmenü „Window“ > „Preferences“ zu den Einstellungen. Dort öffnen wir im Baum den Pfad „Maven“ (1) > „Installations“ (2). Es sollte hier die Vorauswahl „EMBEDDED“ markiert sein (der Haken ist gesetzt).
Wählen wir also nun die Schaltfläche „Add“ (3). Und im neuen Dialog „Directory…“
Nun navigiert man zu dem entpackten Apache Maven und wählt dort den Ordner aus, der Dialog wird mit der Schaltfläche „Ordner auswählen“ bestätigt. Und der Dialog „New Maven Runtime“ mit der Schaltfläche „Finish“ verlassen. Es muss im letzten Schritt noch der Haken bei der neu hinzugefügten Maven Version gesetzt werden und dann die Einstellungen mit „Apply and Close“ übernommen und geschlossen.
Erstellen eines Web-Projektes mit Apache Maven
Wollen wir nun unser Web-Projekt mit Apache Maven erstellen, dazu navigieren wir über „File“ > „New“ > „Maven Project“. In diesem Dialog setzen wir den Haken bei „Create a simple project …“ (1) und wählen die Schaltfläche „Next >“ (2).
Im nächsten Dialog werden die Metadaten zu dem neuen Maven Projekt gesetzt.
- die „Group Id“ ist eine Id für das Projekt und folgt den Regeln für die Beschreibung von Packages,
- die „Artifact Id“ wird für die Benennung des Projektes verwendet, des Weiteren wird dieser Bezeichner für das Erstellen eines JAR’s bzw. unserer WAR Datei verwendet,
- aus der Auswahlliste „Packaging“ wird der Eintrag „war“ ausgewählt
- als „Name“ wird der gleiche Wert gewählt wie auch die „Artifact Id“
Die gesetzten Werte werden mit der Schaltfläche „Finish“ bestätigt und Eclipse wird das Projekt erstellen und bauen.
Nachdem das Projekt erstellt und gebaut wurde, wird ein Fehler und einige Warnungen angezeigt.
Als Erstes kümmern wir uns um den Fehler.
Um diesen Fehler zu beheben, muss man in den „Project Facets“ einige Einstellungen setzen. Dabei ist die Reihenfolge sehr wichtig.
Als Erstes wird der Haken bei „Dynamic Web Module“ entfernt und die Schaltfläche „Apply“ betätigt, danach wird nun der Haken wieder gesetzt und erneut die Schaltfläche „Apply“ betätigt“.
Es wurde nun der Ordner „WebContent“ erzeugt. In diesen neuen Ordner wird, wie der Name es erahnen lässt, die Dateien für die Webansicht abgelegt.
Nun werden noch die Einstellungen für JavaServerFaces 2.2 gesetzt, dazu wird aus der Auswahlliste für die „Configuration“ der Eintrag „JavaServer Faces v2.2 Project“.
Es werden nun automatisch die Einstellungen für ein JSF 2.2 Projektes gesetzt. Für ein JSF Projekt wird die Datei „faces-config.xml“ benötigt, diese können wir anlegen lassen in dem wir die Hinweismeldung im unteren Bereich des Dialoges bestätigen.
Nach einem klick auf diesen Link wird der Dialog „Modify Faceted Project“ geöffnet.
Als „Type“ wählen wir „Disable Library Configuration“ (1) und bestätigen diese Auswahl mit der Schaltfläche „OK“ (2).
Des Weiteren muss nun noch die Java Version auf 1.8 gesetzt werden.
Zum Abschluss wird die Auswahl mit „Apply and Close“ bestätigt und die Warnungen und Fehler sollten nicht mehr sichtbar sein.
Einrichten der JavaServerFaces Resourcen
Wir haben im Schritt zuvor die Auswahl einer JavaServerFaces Implementation abgelehnt, daher muss nun manuell eine hinzugefügt werden. Da das Projekt mit Apache Maven gebaut wird, werden wir diese als Abhängigkeiten zu diesem Projekt hinzufügen.
Um diese Bibliotheken als Abhängigkeiten hinzuzufügen, muss die Datei „pom.xml“ wie folgt erweitert werden:
<dependencies> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.2.18</version> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.2.18</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>org.glassfish.web</groupId> <artifactId>el-impl</artifactId> <version>2.2</version> </dependency> </dependencies>
Bevor man jedoch das Projekt neu bauen kann und somit die Abhängigkeiten aus dem Internet geladen und lokal abgelegt werden, muss ein Plugin hinzugefügt werden. Dieses Plugin dient zum Bauen der WAR Datei.
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <configuration> <webXml>WebContent\WEB-INF\web.xml</webXml> </configuration> </plugin> </plugins> </build>
Es muss hier der Pfad zur Datei „web.xml“ eingerichtet werden, Apache Maven erwartet diese Datei eigentlich unter dem Pfad „src“ > „main“ > „webapp“ > „WEB-INF“.
Setzen der Startseite
In der Datei web.xml wird die Startseite des Web-Projektes benannt. Hier können beliebig viele Dateien benannt werden (was wenig Sinn ergibt, aber möglich ist).
<welcome-file-list> <welcome-file>index.xhtml</welcome-file> </welcome-file-list>
Zusätzlich müssen wir ein Servlet-Mapping erstellen damit der Server „weiß“ mit welchen Dateien dieser im JSF Kontext arbeiten soll.
<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping>
Hier könnte man sich eine beliebige Dateiendung ausdenken und verwenden.
Erstellen der Datei index.xhtml
Damit das Web-Projekt aufgerufen werden kann, muss es eine Startseite geben. Diese Datei wird zumeist mit „index“ bezeichnet und trägt für dieses JSF Projekt das Suffix „.xhtml“.
Es wird nun eine leere Datei in dem Ordner „WebContent“ erstellt und mit index.xhtml benannt.
Als Erstes wollen wir eine „normale“ HTML Datei erstellen mit einem einfachen Grundgerüst.
<html>
<body>
<h2>Hello World!</h2>
</body>
</html>
Einrichten von Apache Tomcat
Damit wir unser Web-Projekt „HelloWorld“ ausführen können, benötigen wir einen Applikationsserver. Der wohl bekannteste Vertreter ist Apache Tomcat. Und kann kostenfrei unter https://tomcat.apache.org/download-70.cgi heruntergeladen werden.
Nachdem Download und dem entpacken des Zip Archives wird der Server in Eclipse eingerichtet.
Als erstes öffnet man den Reiter „Servers“.
Sollte dieser Reiter nicht sichtbar sein, so kann dieser über „Window“ > „Show View“ > „Servers“ eingeblendet werden.
Um nun einen neuen Server einzurichten, muss auf den Hyperlink „No servers are available….“ geklickt werden. Es wird nun der Dialog „New Server“ angezeigt.
Aus diesem Dialog kann man einen Server wählen und ggf. herunterladen und installieren.
Es muss nun aus dem Baum der Knoten „Apache“ geöffnet werden (1) und den Eintrag „Tomcat v7.0 Server“ (2) auswählen, diese Auswahl wird mit der Schaltfläche „Next >“ (3) bestätigt.
Im nächsten Schritt muss nun die zuvor heruntergeladene Installation von Apache Tomcat über die Schaltfläche „Browse“ (1) ausgewählt werden, diese Auswahl wird mit der Schaltfläche „Finish“ (2) bestätigt.
Alternativ kann man hier auch einen Apache Tomcat herunterladen und installieren (blau markierte Schaltfläche).
Starten von Apache Tomcat aus Eclipse
Nachdem nun das Web-Projekt und der Applikationsserver Tomcat eingerichtet wurde können wir diesen erstmalig starten. Dazu klicken wir im Kontextmenü des Projektes auf „Run As“ > „Run on Server“ und wählen dort einen Applikationsserver aus.
Eclipse Web-Projekt starten, Server auswahl
Troubleshooting
Sollte beim Starten des Web-Projektes der Fehler „ClassNotFoundException: javax.faces.webapp.FacesServlet“ in der Console erscheint, so muss in den „Deployment Assembly“ Einstellungen zu dem Projekt das lokale Maven Repository hinzugefügt werden.
Als Erstes wird nun im Menübaum der Eintrag „Deployment Assembly“ ausgewählt (1) danach die Schaltfläche „Add…“ (2) betätigt.
Im neuen Dialog wählen wir den Eintrag „Java Build Path Entries“ (1) und bestätigen diese Auswahl mit der Schaltfläche „Next >“ (2).
In nächsten Dialog wird nun der Eintrag „Maven Dependencies“ (1) ausgewählt und die Auswahl mit der Schaltfläche „Finish“ (2) bestätigt. Danach muss diese neue Einstellung mit der Schaltfläche „Apply and Close“ übernommen werden (der Dialog wird zusätzlich geschlossen).
Nun muss der Server gestoppt und neu gestartet werden.
Ansicht des Web-Projektes im Browser
Wenn das Web-Projekt ohne Fehler im Apache Tomcat deployt wurde, so kann dieses Projekt über die Adresse http://localhost:8080/HelloWorld aufgerufen werden.
Bisher haben wir jedoch keine JSF Funktionalität implementiert. Dieses wollen wir nun ändern.
JSF Namespace einrichten
Nachdem das Web-Projekt eingerichtet und erfolgreich gestartet wurde, wollen wir die JSF Funktionalität implementieren.
Als Erstes stellen wir das HTML Grundgerüst auf JSF um, dieses wird später benötigt damit wir Java Beans benutzen können.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <meta charset="ISO-8859-1"></meta> <title>Insert title here</title> </h:head> <h:body> <h2>Hello World!</h2> </h:body> </html>
Es gibt neben den HTML Komponenten auch Funktionen (Schleifen, bedingte Anweisungen usw.) welche man in dieser Datei verwenden kann. Hierzu muss man zusätzlich die JSTL (Java Standard Tag Library) implementieren.
xmlns:c="http://java.sun.com/jsp/jstl/core"
Mit den JSTL Funktionen können wir nun unseren Text „Hello World!“ mehrfach ausgeben:
<c:forEach begin="0" end="10"> <h2>Hello World!</h2> </c:forEach>
Eine Java Bean erstellen
Nun wollen wir eine Java Bean erstellen aus welcher wir eine einfache Begrüßung erzeugen möchten.
Eine Java Bean ist eine „normale“ Klasse, jedoch mit einer zusätzlichen Annotation „@ManagedBean“.
Diese Annotation sorgt dafür das unsere Bean über den JSF Kontext verwaltet wird.
package de.draegerit.helloworld;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class HelloBean {
private String greeting;
public String getGreeting() {
return greeting;
}
public void setGreeting(String greeting) {
this.greeting = greeting;
}
}
Es ist wichtig auf den Java Beans Konvention zu achten, d.h. es müssen zu dem Feld getter & setter bestehen. Diese Methoden können in Eclipse fast automatisch erstellt werden.
Nun können wir in der XHTML Datei dieses Feld befüllen und auslesen.
Setzen der Begrüßung
Wir haben nun eine JavaBean „HelloBean“ erzeugt und dort das Feld „greeting“ mit gettern & settern.
Nun können wir in der Datei index.xhtml ein Eingabefeld erzeugen und eine „Verbindung“ von der Bean zu diesem herstellen.
Es gibt den HTML Tag „input“ diesem kann man als Typ den Wert „text“ übergeben, und erhält dann ein Eingabefeld für Text.
<input type="text" />
In JSF gibt es die Komponenten auch, jedoch werden diese über den zuvor definierten Namespace deklariert.
<h:inputText />
Der Wert in dem Eingabefeld wird dann per Value Expression über die getter & setter Methoden aufgerufen.
Ein solcher Aufruf startet immer mit einer Raute „#“ gefolgt von einer geschweiften Klammer „{“ und wird mit einer geschweiften Klammer beendet.
<h:inputText value="#{helloBean.greeting}"></h:inputText>
Gibt man keinen Namen bei der Annotation @ManagedBean ein, so wird der Name der Klasse verwendet, jedoch wird der erste Buchstabe kleingeschrieben.
Man kann jedoch einen beliebigen Namen vergeben, hierzu muss der Annotation nur ein Parameter „Name“ übergeben werden.
@ManagedBean(name="irgendeinNameBean")
Aus HTML kennen wir bereits den Tag „form“ damit lassen sich Formulardaten übersenden und eine Aktion auf dem Server aufrufen.
Damit wir im Folgenden einen Seitenwechsel erzeugen können benötigen wir zusätzlich einen Button
<h:commandButton action="greeting" value="Klick mich!"></h:commandButton>
Das Attribut „action“ trägt den Namen der Seite zu welcher gewechselt werden soll.
Wollen wir nun eine neue Seite „greeting.xhtml“ erzeugen um den Text / Namen aus der Seite „index.html“ dort anzeigen zu lassen.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta charset="ISO-8859-1"></meta>
<title>Insert title here</title>
</h:head>
<h:body>
<h2>Hallo #{helloBean.greeting}</h2>
</h:body>
</html>
Das Ergebnis ist nun das auf der neuen Seite das Wort „Hallo“ und zusätzlich unser Text aus der vorherigen Seite steht.
Fazit & Ausblick
Wir haben nun einen Applikationsserver eingerichtet und unsere erste sehr kleine JSF Anwendung geschrieben.
Als Nächstes wollen wir nun eine kleine Businessanwendung schreiben in der wir eine Timeline mit Beiträgen (ähnlich wie Twitter) anzeigen lassen können.
3 Kommentare