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:

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. 

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.

Eclipse Fehlercode 13
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:

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
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
Einrichten von Apache Maven

Wählen wir also nun die Schaltfläche „Add“ (3). Und im neuen Dialog „Directory…“ 

Einrichten Apache Maven in Eclipse
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)
Erstellen eines Apache Maven Projektes (Schritt 1)

Im nächsten Dialog werden die Metadaten zu dem neuen Maven Projekt gesetzt.

  1. die „Group Id“ ist eine Id für das Projekt und folgt den Regeln für die Beschreibung von Packages,
  2. 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,
  3. aus der Auswahlliste „Packaging“ wird der Eintrag „war“ ausgewählt
  4. als „Name“ wird der gleiche Wert gewählt wie auch die „Artifact Id“
setzen der Metadaten zum neuen Apache Maven Projekt
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
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
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
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"
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
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:

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. 

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).

Zusätzlich müssen wir ein Servlet-Mapping erstellen damit der Server „weiß“ mit welchen Dateien dieser im JSF Kontext arbeiten soll.

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
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"
Eclipse Reiter „Servers“

Sollte dieser Reiter nicht sichtbar sein, so kann dieser über „Window“ > „Show View“ > „Servers“ eingeblendet werden.

Eclipse Reiter "Server" einblenden
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)
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
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

Eclipse Web-Projekt starten, Server auswahl

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
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
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
Web-Projekt „HelloWorld“ im Browser

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.

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.

Mit den JSTL Funktionen können wir nun unseren Text „Hello World!“ mehrfach ausgeben:

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.

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.

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.

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 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.

 

 

 

 

 

Ein Gedanke zu „Erstellen eines JavaServerFaces 2.2 Projektes mit Eclipse & Apache Maven

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.