> Inhalt: Entwickeln von Web-Anwendungen mit Java-Server-Faces 

Tutorial: Einfache Benutzeroberfläche 

Tutorial:
Einfache Benutzeroberfläche mit JSF und Aufruf von Methoden eines EJB (Java_JSF_01) –
Ergebnisabhängige Web-Seiten

* Bitte beachten Sie die Hinweise und Bestimmungen bezüglich Urheberrecht, Haftungsausschluß und geschützte Marken oder Warenzeichen die für dieses Web-Dokument und möglicherweise auch für 'verlinkte' Dokumente gelten.

  • Der Betreiber dieser Web-Site (www.javascout.biz) ist nicht verantwortlich für den Inhalt von Web-Sites, die innerhalb dieses Web-Dokumentes oder anderer Dokumente von www.javascout.biz verlinkt sind.

  • Wenn dieses Web-Dokument oder andere Dokumente dieser Web-Site (www.javascout.biz) Rechte von Ihnen verletzen, oder sie glauben, daß Rechte Anderer (Dritter Personen) dadurch verletzt werden, informieren Sie bitte den Betreiber dieser Web-Site.
    Eine E-Mail können Sie ganz einfach durch anklicken des Symbols oder Textes im Frame rechts oben senden.

Dieses Dokument drucken.

 Letzte Bearbeitung dieses  Dokuments:
2009-07-22

Voraussetzungen für das Verständnis dieses Dokuments:

Grundkenntnisse im Schreiben von Dokumenten im HTML-Format.
Elementare Kenntnisse der Programmiersprache Java.

Ungefährer Zeitbedarf zum Durcharbeiten dieses Dokuments:

Arbeitszeit:
Ca. 40 bis 90 Minuten; abhängig von der bereits vorhandenen Routine im Umgang mit Eclipse und beim Edititeren von HTML-Dateien
.

In diesem Schritt des Tutorials wird die Web-Site um einige zusätzliche Seiten ergänzt und abhängig von Uhrzeit und gewählter Sprache wird die entsprechende Seite angezeigt.

Hier eine kurze schematische Darstellung des Ablaufs der Seiten-Anzeige:

 
Ausgehend von der in den vorigen Schritten entwickelten Seite mit dem Inhaltsverzeichnis ('index.html') wird die im vorigen Schritt entwickelte 'Einstiegs'-Seite ('page_step04.jsp') – diese wurde etwas verändert – aufgerufen.
Die Pfeile, die die Übergabe eines Steuer-Wertes (gewählte Sprache) und den Aufruf der gewählten Folge-Seite symbolisieren wurde bei den beiden untersten Dateien 'abgeschnitten'.
Der Datenaustausch und die Steuerung (Auswahl der anzuzeigenden Seite) erfolgt auch hier durch den JAS.

Abhängig von der gewählten Sprache ( Deutsch bzw. Englisch ) und der aktuellen Uhrzeit ( entscheidend ist die 'Zehner'-Stelle der Sekunden ) wird eine von vier weiteren Seiten (Dateien mit HTML- und JSF-Code) angezeigt.
Auf jeder dieser Folgeseiten kann wieder die Sprache ausgewählt werden und eine neue Abfrage der aktuellen Zeit ausgeführt werden.

Ziele dieses Tutorial-Schrittes sind:

Inhaltsverzeichnis:

Voriger Schritt: JSF-Code in der JSP-Datei verwenden und Java-Code in eigener Datei 

Vorbemerkung 
Vorbedingungen 

Einbindung der Libraries (Programm-Bibliotheken) für Java-Server-Faces in den Java Build Path 

Erstellen der Dateien mit den Dokumenten und integrierten JSF-Kommandos 
Verändern der Datei
index.html 

Erweitern der Datei mit der Java-Klasse (
JSFTutorial.java) 
Konfigurationsdatei
web.xml - bleibt fast unverändert 
Konfigurationsdatei
faces-config.xml erweitern 

'Packaging Configuration' für die Web-Archive- (WAR-) Datei – bleibt unverändert 

'Deploy' der WAR-Datei im Java Application Server (JAS) und Test 

Konfigurationsdatei
application.xml anpassen 
'Packaging Configuration' für die Enterprise-Archive- (EAR-) Datei – bleibt unverändert 
'Deploy' der EAR-Datei im Java Application Server (JAS) und Test 

Umbenennen der EAR-Datei und neuer Test 

Hinweise zur Fehlersuche 

Gesamter Code am Ende des Schrittes 
Datei
index.html 
Datei
page_step04.jsp 
Datei
page_step04_de_even.jsp 
Datei
page_step04_de_odd.jsp 
Datei
page_step04_en_even.jsp 
Datei page_step04_en_odd.jsp 
Datei
JSTutorial01.java 
Datei
web.xml 
Datei
faces-config.xml 
Datei
application.xml 

Weitere Schritte und verwandte Dokumentation 

Nächstes Tutorial: JSF zur Erfassung und Anzeige von Daten, dabei wird der Zugriff auf eine Datenbank implementiert.

Vorbemerkung

Obwohl Eclipse in 'deutscher Version' installiert werden kann, sind die Abbildungen in diesem Dokument mit der 'english Version' erstellt.
Grund ist, daß zum Zeitpunkt der Erstellung dieses Dokumentes (Oktober 2007) die Eclipse-Texte nur sehr unvollständig ins Deutsche übersetzt sind.
Damit ist (meiner Meinung nach)
1.) Eclipse in deutscher Version wesentlich schwerer verständlich ist als in englischer Version und
2.) wenn Eclipse weiter übersetzt wird, ist dieses Dokument stark abweichend von den dann vorhandenen deutschen Texten.

Für die JSF-Anweisungen innerhalb des HTML-Codes in der JSP-Datei und die Definitionen in den Dateien mit XML-Struktur kann keine Prüfung auf syntaktische Fehlerfreiheit durchgeführt werden.
Durch die teilweise kryptische Benennung von Variablen ist die Wahrscheinlichkeit von unerkannten Tippfehlern in diesen Dateien sehr hoch.
Diese Fehler führen oft zu schwer verständlichen Fehlermeldungen des Java Application Servers (JAS) oder verhindern ein korrektes Funktionieren des Ergebnisses ohne weitere Fehlermeldungen.

Hinweise zum Finden von Fehlern finden Sie im Abschnitt Hinweise zur Fehlersuche.

zum Inhaltsverzeichnis

Vorbedingungen:

zum Inhaltsverzeichnis

Einbindung der Libraries (Programm-Bibliotheken) für Java-Server-Faces in den Java Build Path

Für den Austausch von Listen oder Tabellen mit Werten zwischen der Web-Seite mit den JSF-Anweisungen und der dazu gehörenden Java-Klasse ist ein eigener Datentyp (javax.faces.model.SelectItem) vorgesehen der in der Datei 'jsf-api.jar' enthalten ist.
Bei meiner Java-Installation (1.6.0_03-b16) ist die Datei 'jsf-api.jar' nicht enthalten – und ich habe auch keine Information gefunden ob in Zukunft diese Bibliothek zum Auslieferungsumfang von Java gehören wird oder nicht.
Die Bibliotheks-Datei 'jsf-api.jar' wird mit den Java Application Servers (JAS) ausgeliefert und kann von deren Installation in den 'Java Build Path' von Eclipse eingebunden werden.

Falls Sie noch keinen JAS installiert haben können Sie die Datei 'jsf-api.jar' herunterladen wenn Sie diesem Link folgen.

Der Java Build Path ist in den 'Properties' (Eigenschaften) des Project definiert.

Um die Properties ansehen und ändern zu können, wird das Project mit der rechten Maustaste angeklickt, dann 'Properties' ausgewählt und mit der linken Maustaste angeklickt.

  
  

Im anschließend geöffneten Fenster wird im linken Teil Java Build Path ausgewählt und dann der Reiter Libraries angeklickt.

Um JAR-Dateien, die in einem Verzeichnis außerhalb von Eclipse liegen, einbinden zu können wird die Schaltfläche [ Add External JARs... ] angeklickt.

  
  

Im Beispiel, von dem der Screenshot stammt ist die heruntergeladene Datei mit der Programm-Bibliothek im Verzeichnis /usr/JS_Data/eclipse_workspaces/external_jars installiert.
Wenn bei Ihrer Installation ein anderes Verzeichnis verwendet wird, adaptieren Sie bitte den Verzeichnis-Namen in den folgenden Anleitungen.

Navigieren Sie bis zum Verzeichnis in dem sich die Datei mit der Programm-Bibliothek befindet (im Beispiel: '/usr/JS_Data/eclipse_workspaces/external_jars') und wählen Sie die Datei 'jsf-api.jar'.

Durch Anklicken der Schaltfläche [ OK ] wird die gewählte Datei in den Java Build Path aufgenommen.

  
  

Überprüfen Sie bitte, dass die in den Java Build Path aufgenommene Datei in der Liste aufscheint.

Nach dem Anklicken der Schaltfläche [ OK ] wird die Auswahl gespeichert.

zum Inhaltsverzeichnis

Erstellen der JSP-Dateien mit den Dokumenten und integrierten JSF-Kommandos

Das Erstellen von Verzeichnissen und Dateien wurde im Schritt 1 des Tutorials ausführlich beschrieben; in diesem Abschnitt beschränken sich die Beschreibungen auf eine Kurzfassung.

Die zu erstellenden Dateien haben die Namen page_step04.jsp, page_step04_de_even.jsp, page_step04_de_odd.jsp, page_step02_en_even.jsp und page_step02_en_odd.jsp und sind im gleichen Verzeichnis wie die Datei 'index.html'.

  • Zum Erstellen einer Datei wird das Stamm-Verzeichnis für die Web-Site (WebContent) mit der rechten Maustaste angeklickt und dann
    New > File ausgewählt.

  • Im anschließend geöffneten Fenster (New File) wird der Name der Datei festgelegt und das Fenster durch Anklicken des Schaltfläche [ Finish ] geschlossen.

  • Die erstellten Dateien sind im 'Package Explorer' von Eclipse gelistet.

Sofern nicht der unter Tutorial: Einfache Benutzeroberfläche mit JSF und Aufruf von Methoden eines EJB (Java_JSF_01) – Erstellen von HTML-Dateien und Packen in ein WAR (Web-Archive) > Möglicher Fehler beim Editieren von Dateien im HTML-Format und Umgehung des Fehlers beschriebene Fehler vorhanden ist, wurde die Datei zum Editieren geöffnet.


     
 

Der jeweilige HTML-Code mit integrierten Java-Anweisungen für diese Dateien ist unter Gesamter Code am Ende des Schrittes > Datei page_step04.jsp, Gesamter Code am Ende des Schrittes > Datei page_step04_de_even.jsp, Gesamter Code am Ende des Schrittes > Datei page_step04_de_odd.jsp, Gesamter Code am Ende des Schrittes > Datei page_step04_en_even.jsp, und Gesamter Code am Ende des Schrittes > Datei page_step04_en_odd.jsp dokumentiert und kann in die jeweils geöffnete Datei kopiert werden.

Anschließend eine kurze Erklärung der neuen Anweisungen für JSF; wenn Ihre Zeit knapp ist können Sie die Erklärung auch überspringen und gleich mit dem Abschnitt Verändern der Datei index.html fortsetzen.

zum Inhaltsverzeichnis

Verändern der Datei index.html

Damit die gerade erstellte JSP-Datei aufgerufen werden kann, muss in der Datei 'index.html' der passende Link gesetzt werden.
Weiters wird der Erklärungstext für diesen Schritt des Tutorials angepasst.
Der geänderte HTML-Code für diese Datei ist unter
Gesamter Code am Ende des Schrittes > Datei index.html dokumentiert und kann in die geöffnete Datei kopiert werden. .

zum Inhaltsverzeichnis

Erweitern der Datei mit der Java-Klasse (JSFTutorial01.java)

Die im Schritt 3 des Tutorials erstellte Datei (im Verzeichnis 'src/java') wird wieder geöffnet und ergänzt.
Der gesamte
Java-Code ist unter Gesamter Code am Ende des Schrittes > Datei JSFTutorial01.java dokumentiert und kann in die geöffnete Datei kopiert werden.

Anschließend eine kurze Erklärung der zusätzlichen Anweisungen; wenn Ihre Zeit knapp ist können Sie die Erklärung auch überspringen und gleich mit dem Abschnitt Konfigurationsdatei web.xml erstellen fortsetzen.

zum Inhaltsverzeichnis

Konfigurationsdatei web.xmlbleibt unverändert


Die in Schritt 3 dieses Tutorial erstellte Datei 'web.xml' wird für diesen Schritt unwesentlich verändert:

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app
id="JSFTutorial01d" version="2.4"
         xmlns
="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemalocation
="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <display-name>
JavaScout JSF Tutorial Step 04</display-name>
.....

Die Änderungen haben keine Auswirkungen auf die Steuerung des JAS sondern geben nur diesen Schritt dieses Tutorial wider.

zum Inhaltsverzeichnis

Konfigurationdatei faces-config.xml erweitern

Die im Schritt 3 des Tutorials erstellte Datei (im Verzeichnis 'WebContent/WEB-INFO') wird wieder geöffnet und ergänzt.
D
er Inhalt (XML-Anweisungen) ist unter Gesamter Code am Ende des Schrittes > Datei faces-config.xml dokumentiert und kann in die geöffnete Datei kopiert werden.

Anschließend eine kurze Erklärung der in diesem Schritt zusätzlich eingefügten XML-Elemente; wenn Ihre Zeit knapp ist können Sie die Erklärung auch überspringen und gleich mit dem Abschnitt Erstellen der 'Packaging Configuration' für die Web-ARchive- (WAR-) Datei fortsetzen.

zum Inhaltsverzeichnis

'Packaging Configuration' für die Web-ARchive- (WAR-) Datei – bleibt unverändert

Das Erstellen der Konfiguration und das Packen wurde im Schritt 1 des Tutorials ausführlich beschrieben.
Die in Schritt 3 dieses Tutorial festgelegte 'Packaging Configuration' wird auch für diesen Schritt verwendet.

Sie müssen allerdings ein neues 'Build Archive' ausführendie Anleitung dazu finden Sie in Schritt 3.

zum Inhaltsverzeichnis

'Deploy' der WAR-Datei im Java Application Server (JAS) und Test

Eine ausführliche Anleitung mit Screenshots für die Übergabe der Archiv-Datei ('deploy') an verschiedene JAS finden Sie im Schritt (Tutorial: Einfache Benutzeroberfläche mit JSF und Aufruf von Methoden eines EJB (Java_JSF_01) - Erstellen von HTML-Dateien und Packen in ein WAR (Web-ARchive) > 'Deploy' der WAR-Datei im Java Application Server (JAS) und Test).

Möglicherweise tritt bereits beim 'deploy' der Datei ein Fehler auf.
Bedingt durch die 'Architektur' von Java Server Faces kann keine Syntaxprüfung durchgeführt werden und Tippfehler führen meist zu kryptischen Fehlermeldungen beim 'deploy' oder beim Aufruf der Web-Seite.

Eine Anleitung zur Eingrenzung von möglichen Fehlern finden Sie im Abschnitt Hinweise zur Fehlersuche.



Nach dem Aufruf der 'Anwendung' in einem Web-Browser wird das abgebildete Fenster angezeigt.

Klicken Sie den Link zur Seite page_step04.jsp mit dem integrierten Java Code an um zur Seite mit dem integrierten Java Code zu gelangen.

 
 

Als Ergebnis sind jetzt (die variablen Werte) aktuelles Datum und Uhrzeit und die in der Combobox ausgewählte Sprache 'de - Deutsch' zu sehen.
Aktuelles Datum und Uhrzeit wurden in der durch die JSF-Anweisungen aufgerufenen Methoden der Java-Klasse JSFTutorial01 ermittelt.
Die ausgewählte Sprache in der Combobox ist durch den ersten Eintrag in der Liste der Werte, mit der die Combobox gefüllt wurde.
Die Liste der Werte wurde ebenfalls in der Java-Klasse JSFTutorial01 aufbereitet.

Von der gewählten Sprache und der Zehnerstelle der Sekunden des aktuellen Datums sind 4 nachfolgende Web-Seiten festgelegt (in der Datei 'faces-config.xml').

Die entsprechende Folge-Seite wird angezeigt wenn Sie die Schaltfläche [ Folgeseite anzeigen ] anklicken.

 
 

Durch Auswahl einer Sprache aus der Combobox und Anklicken der Schaltfläche [ Folgeseite anzeigen ] bzw. [ Show date/time ] wird eine Folgeseite aufgerufen und aktuelles Datum und Uhrzeit angezeigt.

 
 
 
 
 

zum Inhaltsverzeichnis

Konfigurationsdatei application.xml anpassen

Die in Schritt 2 des Tutorials (Ergänzen mit einer JSP-Datei und Packen in ein EAR (Enterprise-Archive) > Konfigurationsdatei application.xml erstellen) erstellte Datei (im Verzeichnis 'META-INF') wird wieder geöffnet und adaptiert.

In der Datei werden die markierten Teile angepasst:

<?xml version="1.0" encoding="UTF-8"?>
<application>
  <display-name>
JavaScout JSF-Tutorial 01, Schritt 4</display-name>
    <module>
      <web>
        <web-uri>
Java_JSF_01.war</web-uri>
        <context-root>
JSFTutorial01d</context-root>
      </web>
    </module>

</application>

Hier ist der gesamte Inhalt der Datei dokumentiert; der Textblock oberhalb kann direkt in die geöffnete Datei 'application.xml' kopiert werden.

zum Inhaltsverzeichnis

'Packaging Configuration' für die Enterprise-ARchive- (EAR-) Datei – bleibt unverändert

Die Konfiguration und das Packen ist gleich wie im vorigen Schritt des Tutorials (Ergänzen mit einer JSP-Datei und Packen in ein EAR (Enterprise-Archive) > Erstellen der 'Packaging Configuration' für die Enterprise-ARchive- (EAR-) Datei) beschrieben; deswegen sind keine Änderungen notwendig.

zum Inhaltsverzeichnis

'Deploy' der EAR-Datei im Java Application Server (JAS) und Test

Eine ausführliche Anleitung mit Screenshots finden Sie im Schritt 2 des Tutorials (Tutorial: Einfache Benutzeroberfläche mit JSF und Aufruf von Methoden eines EJB (Java_JSF_01) – Ergänzen mit einer JSP-Datei und Packen in ein EAR (Enterprise-Archive) > 'Deploy' der EAR-Datei im Java Application Server (JAS) und Test).

Beachten Sie bitte, dass bei Glassfish die Datei 'Java_JSF_01.war' 'undeployed' werden muss bevor die Datei 'Java_JSF_01.ear' 'deployed' werden kann !

Möglicherweise tritt bereits beim 'deploy' der Datei ein Fehler auf.
Bedingt durch die 'Architektur' von Java Server Faces kann keine Syntaxprüfung durchgeführt werden und Tippfehler führen meist zu kryptischen Fehlermeldungen beim 'deploy' oder beim Aufruf der Web-Seite.

Eine Anleitung zur Eingrenzung von möglichen Fehlern finden Sie im Abschnitt Hinweise zur Fehlersuche.



Das im Web-Archive enthaltene 'Anwendungsprogramm' wird aufgerufen in dem in einem Webbrowser URL die TCP/IP-Adresse (im Beispiel: 192.168.0.99), der Port (Standardwert nach der Installation: 8080 für den Glassfish-JAS) und als 'Verzeichnis' JSFTutorial01d eingeben werden.
Dieser Wert wurde in der Datei 'application.xml' im XML-Element
<context-root> festgelegt.

Sie sehen die Startseite der in diesem Schritt erstellten Web-Anwendung.

Klicken Sie den Link zur Seite page_step04.jsp mit dem integrierten Java Code an um zur Web-Seite mit den integrierten JSF- (Java Server Faces-) Kommandos zu gelangen.

Der weitere Test verläuft wie im Abschnitt 'Deploy' der WAR-Datei im Java Application Server (JAS) und Test beschrieben.

 
 
 
 
 
 



zum Inhaltsverzeichnis

Umbenennen der EAR-Datei und neuerlicher Test

Mit diesem Schritt ist das Tutorial, das das (Eclipse-)Project 'Java_JSF_01' verwendet, beendet.
Um eine Konsistenz in der Namensgebung beizubehalten wird die EAR-Datei entsprechend den Konventionen in den vorigen Schritten ebenfalls umbenannt.

Das Umbenenen der Datei wird gestartet indem in Eclipse die Datei mit dem Web-Archiv mit der rechten Maustaste angeklickt wird.

Aus dem angezeigten Kontext-Menu wird Refactor > Rename ausgewählt.

  
 

Es erscheint ein neues Fenster ('Rename Resource') in dem der neue Dateiname festgelegt werden kann.
Die Änderung des Dateinamens wird durch Anklicken der Schaltfläche [ OK  ] bestätigt.

  
 


Das 'deploy' ist abhängig vom verwendeten Java Application Server (JAS).

Beschreibungen mit Abbildungen finden Sie im vorherigen Schritt des Tutorials (Einfache Benutzeroberfläche mit JSF und Aufruf von Methoden eines EJB (Java_JSF_01) – JSF-Code in der JSP-Datei verwenden und Java-Code in eigener Datei > Umbenennen der EAR-Datei und neuer Test).
Beachten Sie bitte, dass Sie die bestehende Archivdatei 'JSF_Java_01.ear' vorher aus dem jeweiligen JAS löschen müssen !

Das Testen erfolgt wie im Abschnitt 'Deploy' der EAR-Datei im Java-Application-Server (JAS) und Test beschrieben.

zum Inhaltsverzeichnis

Hinweise zur Fehlersuche

Im Gegensatz zum Codieren in Java kann bei den JSF-Anweisungen keine Syntax-Überprüfung durchgeführt werden.
Ein – vielleicht leicht zu übersehender – Tippfehler führt dazu, dass die Web-Seite nicht wie erwartet funktioniert oder schon beim 'deploy' an den JAS eine kryptische Fehlermeldung auftritt.

Als LeserIn dieses Tutorials haben Sie vermutlich überhaupt keine Erfahrung mit der Eingrenzung eines Fehlers – deswegen folgen leicht auszuführende Schritte zur Eingrenzung des Fehlers.

Prüfen des Java Application Server (JAS) mit fertigen WAR- und EAR-Dateien

Es ist nicht ausgeschlossen, dass die Installation oder Konfiguration des JAS das korrekte Verarbeiten von WAR- oder EAR-Dateien verhindert.
Um diese Fehlermöglichkeit auszuschliessen, können Sie folgende Dateien Herunterladen und zum Testen verwenden:
Java_JSF_01d.war  
Java_JSF_01d.ear  

Diese Dateien wurden mit der JBoss Version 5.0.1.GA und Glassfish Version 2.1 getestet – für andere JAS kann leider keine Garantie übernommen werden.
Beschreibungen für das 'deploy' und das erwartete Ergebnis finden Sie in den Abschnitten
'
Deploy' der WAR-Datei im Java Application Server (JAS) und Test bzw. 'Deploy' der EAR-Datei im Java Application Server (JAS) und Test.

Prüfen auf Tippfehler wenn Sie die Dateien nicht aus diesem Tutorial kopiert haben

Wenn Sie die Dateien selbst getippt und vielleicht gleich Modifikationen vorgenommen haben ist es sehr wahrscheinlich, dass ein oder mehrere Tippfehler der Grund für das Nicht-Funktionieren sind.
Bei den JSF-Anweisungen und den darin verwendeten Referenzen auf Java-Klassen und deren Methoden ist die Übereinstimmung von Groß- und Kleinschreibung wichtig !

Eine Liste möglicher Ursachen finden Sie im Dokument Mögliche Fallstricke bei der Entwicklung von Anwendungen mit JSF (Java Server Faces).

Kopieren Sie die Dateien aus diesem Tutorial und Prüfen Sie die jeweiligen 'Packaging configurations'

Wenn Sie bis jetzt die Ursache für den Fehler nicht gefunden haben empfehle ich folgendes Vorgehen:

zum Inhaltsverzeichnis

Gesamter Code am Ende des Schrittes

Datei index.html

Zusätzlich zum Code in Schritt 3 wird jetzt auf den Schritt 4 des Tutorials verwiesen und ein 'Link' zur zusätzlichen JSP-Datei hinzugefügt.

<html>
<head><title>
JavaScout :: Java-Server-Faces (JSF) Tutorial</title></head>
<body>
<h1>
Willkommen beim Schritt 4 des Tutorials zur Verwendung von Java-Server-Faces (JSF) !</h1>
<br>
Ziel dieses Schrittes ist, abh&auml;ngig von der gew&auml;hlten Sprache und der Uhrzeit eine von 4 m&ouml;lichen Folgeseiten aufzurufen.<br>
<br>
Das ist die
<i>index.html</i> Datei.<br>
<br>
<a href="sub_directory_1/sub_page_1.html">Link zur Seite <i>sub_page_1.html</i> im Verzeichnis <i>sub_directory_1.html</i>.</a><br>
<br>
<a href="sub_directory_2/sub_page_2.html">Link zur Seite <i>sub_page_2.html</i> im Verzeichnis <i>sub_directory_2.html</i>.</a><br>
<br>

<a href="page_step02.jsp">Link zur Seite <i>page_step02.jsp</i> mit dem integrierten Java-Code.</a><br>
<br>

<a href="page_step03.jsf">Link zur Seite <i>page_step03.jsp</i> mit Anweisungen f&uuml;r JSF (Java Server Faces).</a><br>
<br>
<a href="page_step04.jsf">Link zur Seite <i>page_step04.jsp</i> mit Aufruf f&uuml;r JSF-Folgeseiten.</a><br>
<b>Bitte beachten:</b><br>
Die in der Referenz zum Link angegebene Dateierweiterung muss
<b>.jsf</b> sein, auch wenn die Dateierweiterung der Datei .js<b>p</b> ist.
</body></html>

zum Inhaltsverzeichnis

Datei page_step04.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<f:view>
<html>
<head>
  <title>
JavaScout :: Java-Server-Faces (JSF) Tutorial / Schritt 4</title>
</head>
<body>
    <h1>
Willkommen beim Schritt 4 des Tutorials zur Verwendung von Java-Server-Faces (JSF) !</h1><br>
    <br>
    
Ziel dieses Schrittes ist, eine Folgeseite anzuzeigen die abh&auml;ngig von der gew&auml;hlten Sprache und der Uhrzeit ist.<br>
    <br>
    
Das ist die <i><b>page_step04.jsp</b></i> Datei.<br>
    <br>
    <font
color="blue">Aktuelles Datum und Zeit des Servers ist:<br>
    <h:outputText
value="#{SymbolicBeanName.dateTimeFormatted}"/>. </font><br>
    <br>
    <h:form
id="Step04Form">
      
Bitte w&auml;hlen Sie eine Sprache: 
      <h:selectOneMenu
id="Step04LanguageList" value="#{SymbolicBeanName.selectedDisplayedLanguage}">
        <f:selectItems
value="#{SymbolicBeanName.selectableLanguages}"/><br>
      </h:selectOneMenu>
      <br>
      <h:commandButton
action="#{SymbolicBeanName.nextPage}" value="Folgeseite anzeigen"/><br>
    </h:form>
    <br>
    <a
href="index.html">Zur&uuml;ck zum Inhaltsverzeichnis durch Anklicken dieser Zeile.</a>
</body>
</html>
</f:view>

zum Inhaltsverzeichnis

Datei page_step04_de_even.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<f:view>
<html>
<head>
  <title>
JavaScout :: Java-Server-Faces (JSF) Tutorial / Schritt 4, deutsch gerade Zehnerstelle der Sekunden</title>
</head>
<body>
    <font
color="blue">
    
Seite f&uuml;r die Ausgabe in deutscher Sprache bei <u>gerader Zehnerstelle</u> der Sekunden der aktuellen Zeit.<br>
    <br>
    
Das ist die <i><b>page_step04_de_even.jsp</b></i> Datei.<br>
    <br>
    
Aktuelles Datum und Zeit des Servers ist:<br>
    <h:outputText
value="#{SymbolicBeanName.dateTimeFormatted}"/>. <br>
    <br>
    <h:form
id="Step04Form">
      
Bitte w&auml;hlen Sie eine Sprache: 
      <h:selectOneMenu
id="Step04LanguageList" value="#{SymbolicBeanName.selectedDisplayedLanguage}">
        <f:selectItems
value="#{SymbolicBeanName.selectableLanguages}"/><br>
      </h:selectOneMenu>
      <br>
      <h:commandButton
action="#{SymbolicBeanName.nextPage}" value="Datum/Zeit anzeigen"/><br>
    </h:form>
    <br>
    <a
href="index.html">Zur&uuml;ck zum Inhaltsverzeichnis durch Anklicken dieser Zeile.</a>
    </font>

</body>
</html>
</f:view>

zum Inhaltsverzeichnis

Datei page_step04_de_odd.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<f:view>
<html>
<head>
  <title>
JavaScout :: Java-Server-Faces (JSF) Tutorial / Schritt 4, deutsch, gerade Zehnerstelle der Sekunden</title>
</head>
<body>
    <font
color="brown">
    
Seite f&uuml;r die Ausgabe in deutscher Sprache bei <u>ungerader Zehnerstelle</u> der Sekunden der aktuellen Zeit.<br>
    <br>
    
Das ist die <i><b>page_step04_de_odd.jsp</b></i> Datei.<br>
    <br>
    
Aktuelles Datum und Zeit des Servers ist:<br>
    <h:outputText
value="#{SymbolicBeanName.dateTimeFormatted}"/>. <br>
    <br>
    <h:form
id="Step04Form">
      
Bitte w&auml;hlen Sie eine Sprache: 
      <h:selectOneMenu
id="Step04LanguageList" value="#{SymbolicBeanName.selectedDisplayedLanguage}">
        <f:selectItems
value="#{SymbolicBeanName.selectableLanguages}"/><br>
      </h:selectOneMenu>
      <br>
      <h:commandButton
action="#{SymbolicBeanName.nextPage}" value="Datum/Zeit anzeigen"/><br>
    </h:form>
    <br>
    <a
href="index.html">Zur&uuml;ck zum Inhaltsverzeichnis durch Anklicken dieser Zeile.</a>
    </font>

</body>
</html>
</f:view>

zum Inhaltsverzeichnis

Datei page_step04_en_even.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<f:view>
<html>
<head>
  <title>
JavaScout :: Java-Server-Faces (JSF) Tutorial / Step 4, english, even decade of seconds</title>
</head>
<body>
    <font
color="blue">
    
Page for the display in english language at an <u>even decade</u> of seconds of actual server-time.<br>
    <br>
    
That is file <i><b>page_step04_en_even.jsp</b></i>.<br>
    <br>
    
Actual date and time of the server:<br>
    <h:outputText
value="#{SymbolicBeanName.dateTimeFormatted}"/>. <br>
    <br>
    <h:form
id="Step04Form">
      
Choose a language, please: 
      <h:selectOneMenu
id="Step04LanguageList" value="#{SymbolicBeanName.selectedDisplayedLanguage}">
        <f:selectItems
value="#{SymbolicBeanName.selectableLanguages}"/><br>
      </h:selectOneMenu>
      <br>
      <h:commandButton
action="#{SymbolicBeanName.nextPage}" value="Show date/time"/><br>
    </h:form>
    <br>
    <a
href="index.html">Click onto this line to go back to the index.</a>
    </font>

</body>
</html>
</f:view>

zum Inhaltsverzeichnis

Datei page_step04_en_odd.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<f:view>
<html>
<head>
  <title>
JavaScout :: Java-Server-Faces (JSF) Tutorial / Step 4, english, odd decade of seconds</title>
</head>
<body>
    <font
color="brown">
    
Page for the display in english language at an <u>odd decade</u> of seconds of actual server-time.<br>
    <br>
    
That is file <i><b>page_step04_en_odd.jsp</b></i>.<br>
    <br>
    
Actual date and time of the server:<br>
    <h:outputText
value="#{SymbolicBeanName.dateTimeFormatted}"/>. <br>
    <br>
    <h:form
id="Step04Form">
      
Choose a language, please: 
      <h:selectOneMenu
id="Step04LanguageList" value="#{SymbolicBeanName.selectedDisplayedLanguage}">
        <f:selectItems
value="#{SymbolicBeanName.selectableLanguages}"/><br>
      </h:selectOneMenu>
      <br>
      <h:commandButton
action="#{SymbolicBeanName.nextPage}" value="Show date/time"/><br>
    </h:form>
    <br>
    <a
href="index.html">Click onto this line to go back to the index.</a>
    </font>

</body>
</html>
</f:view>

zum Inhaltsverzeichnis

Datei JSFTutorial01.java

Die in diesem Schritt neu eingefügten Kommandos haben einen gelben Hintergrund.

package js_jsf01;
/*
 * package util enthält die Klasse für internes Datum und Zeit. */

import java.util.*;
/*
 * package und Klasse für sprachabhängige Anzeige von Datum und Zeit. */

import java.text.DateFormat;
/*
 * package und Klasse für die Übertragung eines Auswahlwertes einer Combobox
 * aus einer JSF-Anweisung in einem HTML-Dokument. */

import javax.faces.model.SelectItem;
/*
 * Deklaration der Klasse; diese muss 'public' sein sonst
 * können die Methoden der JSF-Klassen nicht darauf zugreifen. */
public class JSFTutorial01 {
/*
 * Deklaration der Variablen für den Namen der auf der Web-Seite eingegeben und
 * wieder angezeigt wird. Als 'private' deklariert weil über die JSF-Klassen der Zugriff darauf
 * nur über die get- und set-Methoden möglich ist.
 * Der Anfangswert wird zugewiesen um zu demonstrieren, dass dieser Wert auch bei der
 * anfänglichen Anzeige der Web-Seite angezeigt wird. */
  
private String Name = "FreundIn von JSF";
/*
 * Deklaration der Variablen für die Anzeige von Datum und Zeit. */
  
private String DateTimeFormattiert;
/*
 * Deklaration der Variablen für den in der Combobox angezeigten Text für
 * die Sprach-Auswahl. Diesen Wert aufzuheben ist notwendig weil dieser Wert
 * gebraucht wird, um die Auswahl wieder vorzugeben. */
  
private String LanguageStringDisplayed;
/*
 * Deklaration der Variablen für den ISO-Code der ausgewählten Sprache. */
  
private String LanguageCode;
/*
 * Variable für die Kennzeichnung ob die Zehnerstelle der Sekunden gerade oder
 * ungerade ist. */
  
private String strEvenOrOddSecondDecade;
/*
 * Methode zum Übertragen des auf der Web-Seite eingegebenen Namens in die Variable dieser Klasse. */
  
public void setPersonName(String parmName) {
    
Name = parmName;
  
}
/*
 * Methode zum Übertragen des Namens in der Variable dieser Klasse auf das passende Feld der Web-Seite. */
  
public String getPersonName() {
    
return Name;
  
}
/*
 * Methode zum Übertragen der Zeichenkette mit Datum und Zeit in der Variable dieser
 * Klasse auf das passende Feld der Web-Seite.
 * Vor dem 'zurückliefern' der Zeichenkette wird der aktuelle Wert ermittelt und passend formattiert.
 * 
 * Dieser Wert wird nur vom Objekt dieser Klasse auf das passende Feld der Web-Seite übertragen -
 * deswegen ist keine zugehörige 'set'-Methode definiert. */
  
public String getDateTimeFormatted() {
/*
 * 'Holen' der aktuellen Zeit vom Computer auf dem der Java Application Server (JAS) ausgeführt wird. */

    Date DateTimeNow =
new Date();
/*
 * 'Herausfiltern' der Sekunden aus dem aktuellen Datum.
 * Das ist über die Klasse 'Calendar' möglich. */

    Calendar CalendarNow = Calendar.getInstance();
    CalendarNow.setTime(DateTimeNow);
    
int SecondNow = CalendarNow.get(Calendar.SECOND);
/*
 * Ermitteln ob die Zehnerstelle der Sekunden der aktuellen Zeit eine gerade oder ungerade Zahl ist. */

    
if (SecondNow%20 <= 9) strEvenOrOddSecondDecade = "even";
    
else strEvenOrOddSecondDecade = "odd";
/*
 * Als Standard wird die Zeichenkette mit Datum und Zeit in Englischer Sprache und 'langem' Format erstellt. */

    
DateTimeFormattiert = DateFormat.getDateTimeInstance(
        DateFormat.
FULL, DateFormat.LONG, Locale.ENGLISH).format(DateTimeNow);
/*
 * Prüfen ob ein gültiger Wert für den Sprachcode verfügbar ist;
 * anschließend abhängig vom Sprachcode Datum und Zeit in passender Sprache und 'langem' Format erstellen. */

    
if (LanguageCode != null) {
      
if (LanguageCode.equalsIgnoreCase("de")) {
/*
 * Bilden einer Zeichenkette mit Datum und Zeit in dem in Deutsch üblichen Format.
 * Dabei werden Datum und Zeit in der längsten möglichen Form (mit der meisten Information) angezeigt. */

        
DateTimeFormattiert = DateFormat.getDateTimeInstance(
            DateFormat.
FULL, DateFormat.LONG, Locale.GERMAN).format(DateTimeNow);
      }
    
}
/*
 * 'Zurückliefern' der Zeichenkette mit formatiertem Datum und Zeit. */

    
return DateTimeFormattiert;
  
}
/*
 * Methode zum Übertragen der auf der Web-Seite ausgewählten Sprache auf die Variable dieser Klasse. */
  
public void setSelectedDisplayedLanguage(String parmDisplayedLanguage) {
    
LanguageStringDisplayed = parmDisplayedLanguage;
/*
 * Für die Bildung des 'Steuerungscodes' für die nachfolgende Web-Seite in der Methode 'nextPage()'
 * wird sofort der ISO-Code der Sprache extrahiert. */

    
if (parmDisplayedLanguage != null) {
      
int intDelimiterPosition = parmDisplayedLanguage.indexOf('-');
      
if (intDelimiterPosition > 0)
          
LanguageCode = (parmDisplayedLanguage .substring(0, intDelimiterPosition)).trim();
    
}
  
}
/*
 * Methode zum Übertragen der gewählten Sprache in der Variable dieser Klasse auf die Combobox der Web-Seite. */
  
public String getSelectedDisplayedLanguage() {
    
return LanguageStringDisplayed;
  
}
/*
 * Methode zum Füllen der Combobox der Web-Seite mit den auswählbaren Sprachen. */
  
public List<SelectItem> getSelectableLanguages() {
/*
 * Variable für die Liste erstellen. */

    List<SelectItem> listLanguages =
new ArrayList<SelectItem>();
/*
 * Liste mit den Auswahlmöglichkeiten füllen. */

    listLanguages.add(
new SelectItem("de - Deutsch"));
    listLanguages.add(
new SelectItem("en - English"));
/*
 * Liste mit den enthaltenen Sprachen für die Auswahl zurück liefern. */

    
return listLanguages;
  
}
/*
 * Methode, die bei einem Klick auf die 'action'-Schaltfläche der Web-Seite aufgerufen wird.
 * In dieser Methode wird der Steuerungscode für den Aufruf der nachfolgenden Web-Seite gebildet. */
  
public String nextPage() {
/*
 * Methode zum Abfragen der aktuellen Zeit und Ermitteln ob gerade oder ungerade Zehnerstelle der Sekunden
 * aufrufen. */

    getDateTimeFormatted();
/*
 * Zeichenkette mit dem Steuerungscode für die Weiterverarbeitung durch die Datei 'faces-config.xml' zurück liefern. */

    
return LanguageCode + "_" + strEvenOrOddSecondDecade;
  
}
}

zum Inhaltsverzeichnis

Datei web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app
id="JSFTutorial01d" version="2.4"
         xmlns
="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemalocation
="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <display-name>
JavaScout JSF Tutorial Step 04</display-name>

  <servlet>
    <servlet-name>
JSFTutorial01 Faces Servlet</servlet-name>
    <servlet-class>
javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>
1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>
JSFTutorial01 Faces Servlet</servlet-name>
    <url-pattern>
*.jsf</url-pattern>
  </servlet-mapping>


</web-app>

Für JBoss (getestet mit Version 5.0.1) ist das Weglassen der Anweisung xmlns="http://java.sun.com/xml/ns/j2ee" notwendig:
<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app
id="JSFTutorial01c" version="2.4"
         xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemalocation
="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <display-name>
JavaScout JSF Tutorial Step 03</display-name>

  <servlet>
    <servlet-name>
JSFTutorial01 Faces Servlet</servlet-name>
    <servlet-class>
javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>
1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>
JSFTutorial01 Faces Servlet</servlet-name>
    <url-pattern>
*.jsf</url-pattern>
  </servlet-mapping>


</web-app>

zum Inhaltsverzeichnis

Datei faces-config.xml

Die in diesem Schritt neu eingefügten XML-Elemente haben einen gelben Hintergrund.

<faces-config
  
xmlns="http://java.sun.com/xml/ns/javaee"
  
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
  
version="1.2">

  <managed-bean>
    <managed-bean-name>
SymbolicBeanName</managed-bean-name>
    <managed-bean-class>
js_jsf01.JSFTutorial01</managed-bean-class>
    <managed-bean-scope>
request</managed-bean-scope>
  </managed-bean>

  <navigation-rule>
    <from-view-id>
/page_step03.jsp</from-view-id>
    <navigation-case>
      <from-outcome>
getDateTime</from-outcome>
      <to-view-id>
/page_step03.jsp</to-view-id>
    </navigation-case>
  </navigation-rule>

  <navigation-rule>
    <from-view-id>
*</from-view-id>
    <navigation-case>
      <from-outcome>
de_even</from-outcome>
      <to-view-id>
/page_step04_de_even.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
      <from-outcome>
de_odd</from-outcome>
      <to-view-id>
/page_step04_de_odd.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
      <from-outcome>
en_even</from-outcome>
      <to-view-id>
/page_step04_en_even.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
      <from-outcome>
en_odd</from-outcome>
      <to-view-id>
/page_step04_en_odd.jsp</to-view-id>
    </navigation-case>
  </navigation-rule>


</faces-config>

zum Inhaltsverzeichnis

Datei application.xml

<?xml version="1.0" encoding="UTF-8"?>
<application>
  <display-name>
JavaScout JSF-Tutorial 01, Schritt 4</display-name>
    <module>
      <web>
        <web-uri>
Java_JSF_01.war</web-uri>
        <context-root>
JSFTutorial01d</context-root>
      </web>
    </module>

</application>

zum Inhaltsverzeichnis

Weitere Schritte und verwandte Dokumentation

Dokument

Inhalt

Tutorial: JSF zur Erfassung und Anzeige von Daten  

Im nächsten Tutorial wird das in Tutorial: Session Bean mit Daenbank-Zugriff, EJB-Standard (Java_EJB_07) implementierte EJB (Enterprise Java Bean) verwendet um über eine Web-Oberflche Daten zu erfassen, auf der Datenbank zu speichern und wieder auf der Web-Oberfläche anzuzeigen.

zum Inhaltsverzeichnis