Erstellen eines JavaServerFaces 2.2 Projektes mit Eclipse & Apache Maven
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:
Oracle Java 8 JDK
Eclipse IDE for Java EE Developers
Apache Maven
Apache Tomcat 7.0
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.
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.
Eclipse Fehlercode 13
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.
Eclipse - erstellen eines Workspaces
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).
Einrichten von Apache Maven
Wählen wir also nun die Schaltfläche "Add" (3). Und im neuen Dialog "Directory..."
Einrichten Apache Maven in Eclipse
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).
Erstellen eines Apache Maven Projektes (Schritt 1)
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"
setzen der Metadaten zum neuen Apache Maven Projekt
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.
Eclipse - Fehler und Warnungen nach dem ersten Bauen
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".
Auswahl der Konfiguration für ein JSF 2.2 Projekt
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.
Hinweismeldung zur Konfiguration von JSF
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).
Dialog "Modify Project Facets"
Des Weiteren muss nun noch die Java Version auf 1.8 gesetzt werden.
Project Facets setzen der Java Version auf 1.8
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" wiefolgt erweitert werden:
com.sun.faces
jsf-api
2.2.18
com.sun.faces
jsf-impl
2.2.18
javax.servlet
jstl
1.2
javax.servlet
servlet-api
2.5
org.glassfish.web
el-impl
2.2
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.
org.apache.maven.plugins
maven-war-plugin
WebContent\WEB-INF\web.xml
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).
index.xhtml
Zusätzlich müssen wir ein Servlet-Mapping erstellen damit der Server "weiß" mit welchen Dateien dieser im JSF Kontext arbeiten soll.
Faces Servlet
*.jsf
Faces Servlet
*.faces
Faces Servlet
*.xhtml
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.
erstellen einer neuen Datei im Ordner WebContent
Als erstes wollen wir eine "normale" HTML Datei erstellen mit einem einfachen Grundgerüst.
Einrichten von Apache Tomcat
Damit wir unserer Web-Projekt "HelloWorld" ausführen können, benötigen wir einen Applicationserver. 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".
Eclipse Reiter "Servers"
Sollte dieser Reiter nicht sichtbar sein, so kann dieser über "Window" > "Show View" > "Servers" eingeblendet werden.
Eclipse Reiter "Server" einblenden
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.
Eclipse Apache Tomcat als Server einrichten (Schritt 1)
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.
Eclipse - Tomcat Server installation wählen
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 Applicationserver 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 Applicationserver aus.
Eclipse - Web-Projekt starten
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.
Eclipse - Deployment Assembly
Im neuen Dialog wählen wir den Eintrag "Java Build Path Entries" (1) und bestätigen diese Auswahl mit der Schaltfläche "Next >" (2).
Eclipse - neuen Java Build Path Eintrag hinzufügen
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.
Web-Projekt "HelloWorld" im Browser
Bisher haben wir jedoch keine JSF Funktionalität implementiert. Dieses wollen wir nun ändern.
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.
Insert title here
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:
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.
In JSF gibt es die Komponenten auch, jedoch werden diese über den zuvor definierten Namespace deklariert.
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.
Gibt man keinen Namen bei der Annotation @ManagedBean ein so wird der Name der Klasse verwendet, jedoch wird der erste Buchstabe klein geschrieben.
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
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.
Insert title here
Hallo #{helloBean.greeting}
Das Ergebnis ist nun das auf der neuen Seite das Wort "Hallo" und zusätzlich unser Text aus der vorherigen Seite steht.
Wir haben nun einen Applicationserver 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.
Read the full article