JavaServer Faces 2.1

JavaServer Faces 2.1

Vrijwel alle namen van software- en hardwareproducten die in deze cursus worden genoemd, zijn tegelijkertijd ook handelsmerken en dienen dienovereenkomstig te worden behandeld. Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar worden gemaakt in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de auteur. De enige uitzondering die hierop bestaat, is dat eventuele programma’s en door de gebruiker te typen voorbeelden mogen worden ingevoerd opgeslagen en uitgevoerd op een computersysteem, zolang deze voor privé-doeleinden worden gebruikt, en niet bestemd zijn voor reproductie of publicatie. Correspondentie inzake overnemen of reproductie kunt u richten aan: Noël Vaes Roode Roosstraat 5 3500 Hasselt België Tel: +32 474 38 23 94 [email protected]

www.noelvaes.eu Ondanks alle aan de samenstelling van deze tekst bestede zorg, kan de auteur geen aansprakelijkheid aanvaarden voor eventuele schade die zou kunnen voortvloeien uit enige fout, die in deze uitgave zou kunnen voorkomen. 06/07/2015

Copyright© 2015 Noël Vaes

Inhoudsopgave Hoofdstuk 1.Inleiding...........................................................3 1.1.Design patterns............................................................................................................3 1.1.1.Model 1 Architectuur.............................................................................................3 1.1.2.Model 2 Architectuur (MVC)..................................................................................4 1.2.Frameworks..................................................................................................................5 1.3.JavaServer Faces.........................................................................................................6

Hoofdstuk 2.Installatie & Configuratie................................7 2.1.Installatie van JavaServer Faces..................................................................................7 2.2.Een JSF project maken................................................................................................8

Hoofdstuk 3.JSF Overzicht.................................................19

3.1.MVC algemeen........................................................................................................... 19 3.2.De JSF architectuur....................................................................................................19 3.2.1.FacesServlet.......................................................................................................20 3.2.2.Facelets.............................................................................................................. 21 3.2.3.Managed Beans..................................................................................................23 3.3.Mijn eerste JSF-pagina...............................................................................................23 3.4.De JSF levenscyclus .................................................................................................27

Hoofdstuk 4.Managed Beans.............................................31 4.1.Inleiding...................................................................................................................... 31 4.2.Backing beans............................................................................................................ 31 4.3.De scope van een managed bean..............................................................................32 4.4.Expression language..................................................................................................33 4.4.1.Literals................................................................................................................ 34 4.4.2.Operatoren.......................................................................................................... 34 4.4.3.Scope-objecten...................................................................................................35 4.4.4.Voorgedefinieerde objecten................................................................................36 4.4.5.Methoden oproepen............................................................................................36 4.5.Configuratie van een managed bean..........................................................................37 4.6.Afhankelijkheden tussen managed beans..................................................................39

Hoofdstuk 5.Navigatie........................................................43

5.1.Inleiding...................................................................................................................... 43 5.2.Statische navigatie......................................................................................................43 5.3.Dynamische navigatie.................................................................................................48 5.4.Koppelingen................................................................................................................ 52 5.5.View parameters.........................................................................................................52

Hoofdstuk 6.Standard JSF tags.........................................57 6.1.Inleiding...................................................................................................................... 57 6.2.Core Tags................................................................................................................... 57 6.3.HTML Tags................................................................................................................. 59 6.3.1.Algemene attributen............................................................................................59 6.3.2.Formulieren.........................................................................................................60 6.3.3.Tekstvelden en tekstgebieden............................................................................63 6.3.4.Teksten en afbeeldingen tonen...........................................................................64 6.3.5.Knoppen en koppelingen....................................................................................64 6.3.6.Selecties............................................................................................................. 65 6.3.7.Scripts en stylesheets.........................................................................................69 6.3.8.Panels................................................................................................................. 69 6.3.9.Gegevenstabellen...............................................................................................73 6.3.10.HTML-tags en HTML-editors.............................................................................81 Copyright© 2015 Noël Vaes

-1-

www.noelvaes.eu

Hoofdstuk 7.Internationalisation (I18N)............................83 7.1.Inleiding...................................................................................................................... 83 7.2.Het Locale object........................................................................................................83 7.3.JSF Message Bundles................................................................................................84

Hoofdstuk 8.Conversie en validatie...................................87

8.1.Inleiding...................................................................................................................... 87 8.2.Conversie................................................................................................................... 88 8.2.1.Ingebouwde conversie........................................................................................88 8.2.1.1.Conversie van getallen................................................................................88 8.2.1.2.Conversie van datums en tijden..................................................................93 8.2.2.Aangepaste conversie.........................................................................................93 8.3.Validatie...................................................................................................................... 96 8.3.1.Ingebouwde validators........................................................................................96 8.3.1.1.Verplichte velden.........................................................................................96 8.3.1.2.De lengte van een veld................................................................................97 8.3.1.3.Getalbegrenzingen......................................................................................97 8.3.1.4.Reguliere uitdrukkingen...............................................................................98 8.3.2.Aangepaste validators.........................................................................................98 8.3.3.Validatie door een backing bean.......................................................................100 8.3.4.Gecombineerde validatie door een backing bean.............................................102 8.3.5.Conversie en validatie overslaan.......................................................................104 8.3.6.Parameters doorgeven aan converters en validators........................................105 8.3.7.Bean validation (JSR-303)................................................................................107

Hoofdstuk 9.Event Handling.............................................113

9.1.Inleiding.................................................................................................................... 113 9.2.Value Change Events...............................................................................................114 9.3.Action Events............................................................................................................ 117 9.4.PropertyActionListener.............................................................................................119

Hoofdstuk 10.JSF & Ajax.................................................126

10.1.Inleiding.................................................................................................................. 126 10.2.XmlHttpRequest.....................................................................................................126 10.3.JSF en Ajax............................................................................................................ 128

Hoofdstuk 11.Templates..................................................134 11.1.Inleiding.................................................................................................................. 134 11.2.UI-tags voor gebruik in templates...........................................................................135 11.3.Andere UI-tags.......................................................................................................138


-2-

www.noelvaes.eu

Inleiding

Hoofdstuk 1. Inleiding 1.1. Design patterns Java Servlets en Java Server Pages (JSP) hebben het mogelijk gemaakt dynamische websites te ontwikkelen op basis van de Java-technologie. Dergelijke webapplicaties beantwoorden aan het WORA-principe: Write Once Run Anywhere. Servlets bieden de mogelijkheid om programmatorisch pagina's realtime te genereren. Servlets hebben echter het nadeel dat de volledige HTML-code programmatorisch gegenereerd moet worden. HTML-pagina's bestaan echter voor het grootste gedeelte uit statische gegevens. Het gebruik van servlets is daarom vrij omslachtig. Een wijziging van de website vergt een wijziging van de Java-code Bovendien moet de webdesigner de Javaprogrammeertaal machtig zijn. Hij moet zowel programmeur als grafisch ontwerper zijn. Sommige van deze problemen werden opgelost met Java Server Pages (JSP). Dit was een makkelijke manier om een servlet te genereren. De rollen werden hierbij omgekeerd. JSP pagina's bestaan gewoon uit HTML-syntax waardoor het makkelijk is de statische inhoud van de pagina te genereren en te onderhouden. De dynamische gegevens worden hieraan toegevoegd d.m.v. scriptlets en custom tags. De webcontainer zorgt voor de omzetting van de JSP-pagina naar een servlet. Een JSP-pagina is daarom ook niet meer dan een makkelijke manier om een servlet te genereren. Met de introductie van JSP werden niet alle problemen opgelost. De JSP pagina's verworden al snel tot een onleesbare en moeilijk onderhoudbare mengeling van statische HTML-code en scriptlets. Als er bovendien ook nog (clientside) JavaScript code aan wordt toegevoegd, wordt de verwarring nog groter. Ook hier moet de webontwikkelaar zowel ontwerper als programmeur zijn. Dit soort problemen heeft geleid tot het ontstaan van een aantal design patterns voor de ontwikkeling van webapplicaties. Een design pattern is een beproefde manier of patroon om een bepaald soort problemen adequaat op te lossen. Design patterns ontstaan in de gemeenschap van (web)-ontwikkelaars doordat ze allen dezelfde problemen tegenkomen en hiervoor oplossingen zoeken. Deze oplossingen worden uitgewisseld, getest en bijgestuurd tot ze een zekere maturiteit bekomen. Bij web-ontwikkeling zijn er allerhande design patterns. Wij zullen hier twee gangbare design patterns bespreken: de Model 1 Architectuur en de Model 2 Architectuur. Deze laatste is beter bekend als de Model View Controller architectuur.

1.1.1. Model 1 Architectuur Bij de Model 1 Architectuur worden alle pagina's gegenereerd door JSP pagina's. Er wordt hier geen gebruik gemaakt van pure servlets. Om echter te vermijden dat dergelijke JSP-pagina's overladen worden met allerlei scriptlets wordt de JAVA-code afgezonderd in JavaBeans en/of Custom Tags. Deze architectuur bestaat uit twee componenten:

1. View-component: Deze is verantwoordelijk voor de presentatie aan de gebruiker. 2. Model-component: Deze bevat de logica van de applicatie. Op die manier krijgen we een scheiding tussen programmatie-logica en presentatie-logica en tevens een scheiding van de verantwoordelijkheden in de ontwikkeling van de webCopyright© 2015 Noël Vaes

-3-

www.noelvaes.eu

Inleiding

applicatie: enerzijds zijn er de webdesigners die zich vooral bezig houden met de layout van de webapplicatie (presentation logic); en anderzijds zijn er de programmeurs die zich bezighouden met de achterliggende logica (business logic) van de applicatie. Hierbij hoort meestal ook de toegang tot databases en andere componenten. Met de voorziene JSP-tags kunnen de designers de JavaBeans aanspreken en zo de functionaliteit van de applicatie oproepen.

Webcontainer JSP

JavaBean

(view)

(model)

DB

Model 1 Architectuur

Deze architectuur is een eerste stap naar een gestructureerde opbouw van een webapplicatie. Nadeel is echter nog steeds dat er verschillende JSP-pagina's zijn die door de gebruiker afzonderlijk opgeroepen kunnen worden. Dit vormt een probleem indien het werken met zo'n webapplicatie volgens een bepaalde volgorde moet gebeuren. Een controle van de status van de gebruiker in iedere JSP-pagina zou de oplossing kunnen zijn. Voorts moet de flow van de applicatie voorzien worden in de afzonderlijke JSP-pagina's. Problemen kunnen hier ook optreden wat de beveiliging en de gewenste taal betreft. Deze gegevens zouden in iedere servlet getest moeten worden. Filters zouden evenwel dit euvel kunnen verhelpen. Tenslotte zijn de mogelijkheden om vanuit een JSP-pagina gebruik te maken van JavaBeans eerder beperkt. Custom Tags bieden hier wel meer mogelijkheden.

1.1.2. Model 2 Architectuur (MVC) De Model 2 Architectuur gaat een stap verder en introduceert een servlet die als controller functioneert. Het verzoek van de browser gaat steeds via deze servlet. De servlet onderneemt afhankelijk van de status van de applicatie de nodige acties. Meestal worden de acties uitbesteed aan andere componenten zoals JavaBeans. Hierbij worden de nodige gegevens gegenereerd of aangepast. Na het uitvoeren van de acties wordt het verzoek doorgestuurd naar de JSP pagina die enkel dient om het resultaat van de actie terug aan de gebruiker te tonen. De servlet geeft de nodige informatie aan de JSP-pagina door d.m.v. JavaBeans die gekoppeld worden aan een van de scope-objecten. De gegevens van de JavaBeans kunnen immers met de voorziene tags eenvoudig opgenomen worden in de opmaak van de pagina. Deze architectuur noemt met doorgaans de Model-View-Controller architectuur (MVC). Deze bestaat uit drie componenten:

1. Controller: Deze component staat centraal in de applicatie. Alle acties van de gebruiker (verzoeken van de browser) komen hier samen. Naargelang het verzoek zal de controller de nodige acties ondernemen of andere componenten de opdracht geven acties te ondernemen. De controller houdt de status van de gebruiker bij en bepaalt de flow van de applicatie door het verzoek door te sturen naar de juiste JSP-pagina. Copyright© 2015 Noël Vaes

-4-

www.noelvaes.eu

Inleiding

2. Model: Deze component stelt het business-model van de applicatie voor. Hierin zit de applicatie-logica en eventueel de persistente objecten. In een eenvoudige applicatie kunnen dit een reeks Java-klassen (POJO's: Plain Old Java Objects) of JavaBeans zijn; in een grotere 4-tier applicatie, wordt hier gebruik gemaakt van o.a. Enterprise JavaBeans (EJB). 3. View: Deze component genereert de layout van de applicatie en maakt hierbij gebruik van de gegevens die door het model gegenereerd zijn en hem door de controller worden re quest

Co ntro ler ( Servl t) Ja va Bea ns

M delo (DB)

forwa rd

re spone

View(JSP)

CustomTag

aangereikt. De MVC-architectuur maakt het beheer en ontwikkelen van complexe applicaties makkelijker. Zo kan de beveiliging, het bijhouden van de applicatie-status en de flow van de applicatie centraal beheerd worden. Strikt genomen is het in de MVC-architectuur mogelijk meerdere controllers te hebben die elk verantwoordelijk zijn voor een deel van de applicatie. Het design pattern Front Controller plaatst echter één centrale servlet aan de ingang van de web applicatie. Van daaruit worden alle verzoeken doorgestuurd naar de verschillende componenten. De Model View Controller en Front Controller zijn twee design patterns die makkelijk samen gebruikt en geïntegreerd kunnen worden. Dit is o.a. het geval bij JavaServer Faces.

1.2. Frameworks De MVC-architectuur is in de loop der jaren een veel toegepast design pattern geworden. Als men gebruik wil maken van dit pattern heeft men wel een goede manier om een webapplicatie op te bouwen, maar men is nog steeds verplicht de nodige componenten volgens dit pattern te ontwikkelen. Gelukkig zijn er intussen allerlei frameworks gemaakt die ons helpen een web-applicatie te ontwikkelen. Een framework is niet meer dan een reeks klassen en interfaces die op een abstracte en generieke wijze bepaalde functionaliteit aanbieden waarmee we onze eigen (web)-applicatie gestalte kunnen geven. Applicaties worden als het ware boven een framework gebouwd waarbij het framework zorgt voor de onderliggende functionaliteit die gemeenschappelijk is voor alle applicaties. Zo zijn er inmiddels ook frameworks die het MVC-pattern voor webapplicaties implementeren en waarboven een concrete webapplicaties gebouwd kan worden. De fundamentele code die zorgt voor het MVC-mechanisme wordt daarbij door het framework geleverd zodat de programmeur/webdesigner zich kan toeleggen op datgene wat specifiek is voor zijn applicatie.


-5-

www.noelvaes.eu

Inleiding

Webapplicatie Framework JEE (Servlets - JSP - Custom Tags) JSE Platform

Populaire frameworks zijn Struts, Cocoon, Tapestry, Tiles, Spring MVC enz ... Sommige zijn open source, andere daarentegen closed source.

1.3. JavaServer Faces Al deze frameworks hebben hun eigen manier van werken en zijn niet compatibel. De keuze voor zo'n framework impliceert doorgaans ook dat men helemaal gebonden is aan dit product. In het verleden zijn al meermaals allerlei frameworks ontstaan die na een tijdje een stille dood stierven en niet verder ontwikkeld werden. De keuze voor dergelijke frameworks houdt daarom ook altijd een risico in. Vanuit de noodzaak aan een meer gestandaardiseerd framework is JavaServer Faces (JSF) ontstaan. JSF is immers geen concrete implementatie van een framework maar een specificatie die deel uitmaakt van de omvattende JEE-specificatie. Voor de concrete implementatie van deze specificatie moeten we beroep doen op de producten die door leveranciers aangeleverd worden. Producenten van JEE webservers of applicatieservers voorzien deze concrete implementatie in hun product. Door het feit dat ze allemaal aan dezelfde specificatie moeten voldoen, bestaat de garantie dat de toepassingen die ontwikkeld worden met JSF tevens compatibel zijn met verschillende concrete applicatieservers. Hierdoor is men niet gebonden aan één concrete leverancier; hetgeen het risico op lange termijn vermindert. Van JSF zijn er intussen verschillende versies die gebruikt worden in de JEE specificatie: JEE 5: JSF 1.2 JEE 6: JSF 2.0 (JSF 2.1 is een maintenance release) In deze cursus behandelen we JSF 2.1 en maken we gebruik van een webcontainer (Tomcat 7) die de JEE 6 specificaties ondersteunt: Servlet 3.0 en JSP 2.2


-6-

www.noelvaes.eu

Installatie & Configuratie

Hoofdstuk 2. Installatie & Configuratie 2.1. Installatie van JavaServer Faces JSF maakt deel uit van de JEE-specificatie. Producenten van JEE-gecertifieerde applicatieservers dienen een concrete implementatie van JSF in hun product te voorzien. Dit is bijvoorbeeld het geval bij Glassfish, JBoss, Websphere, Weblogic e.a. In dit geval is een extra installatie van een JSF-implementatie niet nodig. In deze cursus maken we gebruik van de open source webserver Tomcat 7.0. Dit is echter een webcontainer die enkel de JSP/servlet-specificatie ondersteunt; en dus niet de volledige JEE 6 specificatie. JSF is dan ook standaard niet geïnstalleerd. Daarom moeten we bij Tomcat deze module extra toevoegen. Dit wil eigenlijk zeggen dat we een concrete implementatie van JSF aan de webserver moeten toevoegen. Zoals reeds gezegd is JSF enkel een specificatie en bestaan er dus verschillende implementaties hiervan. We kunnen voor een concrete implementatie terecht bij de verschillende producenten. In de open source wereld is de Apache Software Foundation een gekende speler met allerlei interessante producten, waar ook Tomcat ontwikkeld wordt. We gaan daarom gebruik maken van de JSF-implementatie MyFaces genaamd. Deze is te vinden op volgende website: http://myfaces.apache.org/ Daarnaast hebben we ook nog de Java Standard Taglib (JSTL) nodig en dienen we die ook toe te voegen aan Tomcat. We gebruiken hiervoor een implementatie uit de Maven repository van java.net: http://download.java.net/maven/1/jstl/jars/jstl-1.2.jar 1 Deze JAR-bestanden moeten we toevoegen aan het classpath van onze web-applicatie (WEB-INF/lib). Indien we gebruik maken van Maven hoeven we enkel volgende dependencies aan de POM toe te voegen: <dependency> javax <artifactId>javaee-api 6.0 jar <scope>provided <dependency> org.apache.myfaces.core <artifactId>myfaces-impl 2.1.9 jar <scope>compile <dependency> javax.servlet <artifactId>jstl 1.2 jar <scope>compile 1 Vaak wordt gebruik gemaakt van de Apache Jakarta implementatie van de JSTL. Versie 1.2 is echter op het moment van dit schrijven nog niet voltooid. Het gebruik van JSTL 1.1 geeft onvoldoende compatibiliteit met JSF. Copyright© 2015 Noël Vaes

-7-

www.noelvaes.eu


2.2. Een JSF project maken JSF is gewoon gebouwd op de standaard technieken van een Java web-applicatie. Een JSFproject is daarom hetzelfde als elk ander web-project. Een gewone Java web-applicatie dient volgende structuur te hebben: .\WEB-INF +-- classes +-- lib +-- tags +-- web.xml Het bestand web.xml is de deployment descriptor waarin de web-applicatie geconfigureerd wordt. De map classes bevat gecompileerde klassen die opgenomen moeten worden in het classpath van de web-applicatie. De map lib bevat JAR-bestanden met gecompileerde klassen die ook toegevoegd worden aan het classpath. De map tags bevat tag-bestanden. We kunnen dergelijk web-project manueel opzetten maar de meeste IDE's hebben hiervoor de nodige wizards aan boord.

Opdracht 1: Een JSF webproject opzetten in Eclipse In deze opdracht gaan we een JSF-webproject maken in Eclipse. Hierbij zullen we gebruik maken van de plugins uit het Web Tools Platform (WTP) dat standaard geïntegreerd is in de versie voor Java EE Developers. Indien je gebruik maakt van Maven sla je deze opdracht over en ga je naar de volgende opdracht.

 Maak een nieuw project via New->Other


-8-

www.noelvaes.eu


 Selecteer WEB/Dynamic Web Project en klik op Next

 Geef het project de naam jsf. Copyright© 2015 Noël Vaes

-9-

www.noelvaes.eu


 Selecteer Apache Tomcat v7.0 bij Target runtime.  Selecteer bij Configuration JavaServer Faces v2.0 Project  Klik op tweemaal op Next.

 Selecteer de optie Generate web.xml deployment descriptor.  Gebruik als Context root: jsf en klik op Next


- 10 -

www.noelvaes.eu


 Selecteer via het icoontje rechts Download library..


- 11 -

www.noelvaes.eu


 Kies Apache Myfaces JSF Core-2.0 en klik op Next


- 12 -

www.noelvaes.eu


 Selecteer Apache MyFaces Klik op Finish om het project te genereren.  Voeg het webproject toe als module aan de Tomcat server configuratie.  Start Tomcat op.


- 13 -

www.noelvaes.eu

JavaServer Faces 2.1

Recommend Documents