Acht stappen voor JSF

Acht stappen voor JSF Inleiding In deze tutorial zullen we JSF (Java server faces) installeren. Wat we niet beschrijven is hoe te werken met JSF, over dit onderwerp zijn er genoeg boeken en internetsites aanwezig (zie recources aan het einde van deze tutorial). Wat is JSF: Java Server faces is een gestandaardiseerde specificatie voor het bouwen van webapplicaties met behulp van Java. JSF heeft de volgende kenmerken: Pagina navigatie Gestandaardiseerde gebruikersinterface zoals inputvelden, knoppen en links Gebruikers invoer validatie Foutafhandeling Java bean management Event afhandeling Ondersteuning voor internationalisatie

Gebruikte producten binnen deze tutorial Eclipse 3.1: Eclipse 3.1 is een IDE (integrated development environment) om Java programma s mee te maken. Binnen het basisprogramma kunnen we zogenaamde plugins toevoegen. Zo zullen wij in deze tutorial gebruik gaan maken van een plugin om binnen Eclipse een webserver te gebruiken. Tomcat 5.5.11: JSF applicaties zijn gelijk aan Servlet applicaties. Deze applicaties hebben een Web container nodig om in te draaien. In principe kunnen we elke Servlet 2.3 of Servlet 2.4 container gebruiken. In deze tutorial werken we met Tomcat van de Apache Software Foundation(http://jakarta.apache.org/tomcat). Tomcat is een open source webserver gebaseerd op het Java platform die de Servlet en JSP specificatie ondersteunt. Eclipse Tomcat plugin: Deze Eclipse plugin maakt het mogelijk om binnen Eclipse te werken met Tomcat. De mogelijkheden van deze plugin zijn onder andere: Tomcat binnen Eclipse opstarten, Tomcat project aanmaken, Een Tomcat project omzetten naar een war (web archive file) file.

Stap 1: Download JSF. 1. Om JSF te kunnen gebruiken moeten wij deze downloaden bij Sun. Start de webbrowser en type het volgende adres in http://java.sun.com/j2ee/javaserverfaces/download.html 2. Klik op de knop download onder JavaServer Faces v1.1.01 Reference Implementation 3. Nadat we dit zip bestand hebben binnen gehaald gaan we dit uitpakken met bijvoorbeeld Winzip (http://www.winzip.com). Winzip zal vragen waar we de JSF geïnstalleerd willen hebben. Binnen deze tutorial noemen we deze directory JSFINSTALLATIE. Stap 2: Directory beschrijving JSF. De in stap 1 geïnstalleerde JSF applicatie heeft de volgende directory structuur. 1. Docs directory: Binnen deze directory staat een index.html, dubbelklik op deze file en de web browser zal opstarten. Op deze pagina vinden we een aantal keuzes, we zullen en hiervan twee toelichten. 1. De hyperlink Javadoc API documentation (javax.faces.*) beschrijft de API (application program interface) JSF. 2. De hyperlink TLD documentation beschrijft de TLD(tag library documentation) van JSF. Voor meer informatie over wat TLD s browse naar.http://java.sun.com/developer/technicalarticles/xml/webappdev3/inde x.html 2. Lib directory: Binnen de lib(library) directory vinden we benodige Java programma s om te kunnen gaan werken met JSF, deze programma s zijn ingepakt en heten *.jar

files. De beschrijving(javadoc) van deze Java programma s kunnen we vinden onder de hierboven beschreven hyperlink Javadoc API documentation (javax.faces.*). 3. Samples directory: Binnen deze directory staan een viertal voorbeeld applicaties. Van deze samples zullen wij gebruiken guessnumber. De directory s javadocs, tlddocs en renderkitdocs zijn ook te vinden onder de index. html in de directory docs. Stap 3: Installeren van een JSF applicatie binnen Tomcat. 1. Om JSF te kunnen gebruiken hebben we de zogenaamde Servlet container nodig. De container (Web server) die wij binnen deze tutorial gaan gebruiken is Tomcat. Voor installatie instructies van Tomcat zie bijlage (Installeren Tomcat) 2. Kopieer de file jsf-guessnumber.war vanuit de JSFINSTALLATIE/samples/ jsfguessnumber.war naar TOMCATINSTALLATIE/webapps 3. Start/herstart Tomcat. Bij het starten van Tomcat zal deze de in de vorige stap gekopieerde war file uitpakken klaar maken voor gebruik. 4. Start de webbrowser en type in de adres balk het volgende adres. http://localhost:8080/jsf-guessnumber/ de webbrowser maakt nu contact met Tomcat en deze zal het volgende resultaat geven. 5. Indien er een foutmelding optreed herhaal dan de vorige stappen of zie bijlage (Foutmeldingen). Stap 4: GuessNumber applicatie binnen Eclipse. 1. Voor het werken met JSF en de bijbehorende codes hebben we een IDE nodig (Zie Gebruikte producten binnen deze tutorial). In dit geval Eclipse. Voor een quickguide voor Eclipse ga met de internetbrowser naar het volgende adres https://eclipsetutorial.dev.java.net/eclipse-tutorial/part1.html 2. Open een nieuw Tomcat project zie bijlage(tomcat plugin)en noem deze JSFTutorial 3. Binnen dit project hebben we nu de standaard directory structuur voor het maken van een webapplicatie.

4. Om de in JSF bijgeleverde voorbeeld applicaties te gaan gebruiken importeren wij deze in Eclipse. 5. Klik met de rechtermuisknop op het zojuist aangemaakte project JSFTutotrial en kies import. 6. Binnen de window kunnen we nu kiezen uit een aantal mogelijkheden.dubbelklik op Archive file. 7. Binnen de window kunnen we nu gaan zoeken.druk op browse. 8. Ga naar de directory JSFINSTALLATIE/samples. 9. Onderaan dit scherm vinden we bestandtypen, selecteer het formaat *.*, dit om de jsf-guessnumber.war te kunnen selecteren. 10. Dubbelklik op jsf-guessnumber.war, het volgende scherm wordt zichtbaar. 11. Druk op finish.

Stap 5: Het toevoegen van de source code van GuessNumber 1. In het in stap 5 geimporteerde war file bevinden zich geen sources. Daar wij deze wel nodig hebben zullen wij deze toevoegen. 2. Klik met de rechtermuisknop op het zojuist aangemaakte project JSFTutotrial en kies import. 3. Binnen de window kunnen we nu kiezen uit een aantal mogelijkheden.dubbelklik op File system 4. Binnen de window kunnen we nu gaan zoeken. Druk op browse. 5. Ga naar de directory JSFINSTALLATIE/samples/guessnumber/src/java. 6. Klik op java en dan ok. 7. Binnen de window selecteer java en druk op finish. 8. De projectindeling binnen Eclipse heeft de volgende layout. 9. Omdat we nog geen library s hebben toegevoegd meldt Eclipse een aantal compilatie fouten. Dit gaan we in de volgende stap. Stap 7: Toevoegen library files. 1. Om met JSF te kunnen werken hebben we een aantal library s nodig. Dit zijn Java programma s ingepakt met de *.jar extentie. Eclipse biedt ons de mogelijkheid om deze binnen ons project toe te voegen 2. Klik met de rechtermuisknop(in Eclipse) op het project JSFTutorial en kies properties. 3. In het scherm zijn een aantal keuzemogelijkheden. Wij dubbelklikken op Java Build Path. Het volgende scherm wordt zichtbaar.

4. Klik op de knop Add External JARs. 5. Binnen dit scherm kunnen we zoeken in onze bestandsstructuur. Ga naar JSFINSTALLATIE/lib en selecteer alle daar aanwezige files. 6. Druk op openen, de library files zijn nu toegevoegd aan ons project. Klik op ok.. Stap 8: Draaien van de applicatie binnen Eclipse. 1. Start/herstart Tomcat binnen Eclipse (zie bijlagetomcat plugin) 2. Start de webbrowser en type in de adres balk het volgende adres. http://localhost:8080/jsftutorial/ de webbrowser maakt nu contact met met Tomcat en deze zal het volgende resultaat geven zoals het plaatje in stap 2 3. Indien er een foutmelding optreed herhaal dan de vorige stappen of zie bijlage(foutmeldingen)

Bijlage Bijlage 1.0: Installeren Tomcat 1. De binnen deze tutorial gebruikte webserver is Tomcat. Dit is op dit moment de meest gebruikte web-server. 2. Download Tomcat. Start de webbrowser en type in de adres balk het volgende adres http://jakarta.apache.org/site/downloads/downloads_tomcat-5.cgi 3. Extract de zip file naar de root van de C schijf(meestal C:\) 4. De directory die aangemaakt wordt heeft de naam jakarta-tomcat-5.5.11, dit kan afwijken indien we een latere versie hebben gedownload Bijlage 2.0: Installeren Tomcat plugin voor Tomcat 1. Om binnen Eclipse te kunnen werken met Tomcat zijn er een aantal plugins voorradig. Dit geeft ons o.a. de mogelijkheid om Tomcat te starten en te stoppen zonder Eclipse te verlaten. Een andere mogelijkheid is een zogenaamd Tomcat project aan te maken. 2. Download de Tomcat plugin. Start de webbrowser en type in de adres balk het volgende adres http://www.sysdeo.com/eclipse/tomcatplugin 3. Extract de in stap twee gedownloade zip file. Deze zal een directory aanmaken met naam com.sysdeo.eclipse.tomcat_3.1.0.. 4. Deze directory(en de bestanden daarin) heeft Eclipse nodig om de plugin te herkennen.kopieer daarom deze directory naar c:\eclipse\plugins. Indien de Eclipse onder een andere naam staat kopieer dan naar deze directory. 5. start/herstart Eclipse Bijlage 3.0: Configureren Eclipse voor de Tomcat plugin 1. Binnen Eclipse moeten we de programma s Eclipse en Tomcat aan elkaar koppelen. 2. Download de Tomcat plugin. Start de webbrowser en type in de adres balk het volgende adres http://www.sysdeo.com/eclipse/tomcatplugin 3. Extract de zojuist verkregen Zip file, het resultaat is een directory met de naam com.sysdeo.eclipse.tomcat_3.1.0.beta. Kopieer deze directory naar c:\eclipse\plugin. Start/herstart Tomcat. 4. Ga binnen Eclipse naar Windows/preferences/Tomcat. Zie plaatje

5. Klik op de knop Browse en zoek naar de locatie waar de Tomcat installatie staat. Druk op apply. 6. Ga naar Tomcat manager App(Zie plaatje). En geef een user name en password. Druk op OK 7. Binnen Eclipse kunnen we nu Tomcat starten/stoppen/herstarten met behulp van de zojuist verkregen knoppen op de taak. Zie plaatje 8. We kunnen nu binnen Eclipse een Tomcat project aanmaken.ga naar file/new/project/java/tomcat Project. Geef nu een naam voor dit project zeg xxxproject. 9. Binnen de configuratie file server.xml in Tomcat is nu verwijzing aangemaakt naar dit project zodat we deze nu op kunnen starten met de naam van het project. 10. Het nieuwe project heeft de standaard j2ee directory web structuur en het is direct te benaderen via http://localhost:8080/xxxproject Bijlage 4.0: Foutmeldingen

1. Binnen de stappen van de in deze tutorial beschreven acties kunnen een aantal fouten onstaan. Helaas is het niet mogelijk deze alle te beschrijven maar de meest voor de hand liggende zullen wij hier behandelen. 2. In stap 3 Installeren van een JSF applicatie binnen Tomcat kan in de browser de volgende foutmelding staan. 3. De tekst The requested resource (/jsf-guessnumber) is not available betekend dat in Tomcat deze applicatie niet bekend is: Oplossing zet de jsf-guessnumber.war file in de directory TOMACT/webapps. 4. Start Tomcat: de volgende filestructuur moet hetzelfde zijn 5. Eerst de jsf-guessnumber.war file kopiëren. Bij start/herstart wordt dan de directory jsf-guessnumber aangemaakt.

Bijlage 4.0: Recources Tutorials voor JSF: http://www.javaworld.com/javaworld/jw-07-2004/jw-0719-jsf.html http://java.sun.com/j2ee/javaserverfaces/index.jsp http://www.laliluna.de/first-java-server-faces-tutorial.html http://www.exadel.com/tutorial/jsf/jsftutorial-guessnumber.html Tomcat: http://jakarta.apache.org/tomcat/ http://www.coreservlets.com/apache-tomcat-tutorial/ http://scitec.uwichill.edu.bb/cmp/online/cs36l/tutorials/tomcatintroduction/tomcatintroindex.html Tomcat plugin: http://www.sysdeo.com/eclipse/tomcatplugin http://www.keyboardsamurais.de/mt/archives/000053.html