WTP-øveprogrammer - Øveprogram til JavaServer Faces-værktøjer
Oversigt
I denne øvelse skal du bygge og udføre et JavaServer Faces-program og gennemgå de funktioner, som JSF Tools
Project bidrager med.
Af Raghu Srinivasan, Oracle Corporation.
15. juni 2009
Introduktion
I denne øvelse skal du oprette og udføre et webprogram vha. JavaServer Faces-funktioner. WTP JSF Tools Project indeholder funktioner, der forenkler bygning, konfiguration og udførelse af programmer. Disse omfatter Websideeditor til visuel redigering af JSF-JSP-websider og syntaks- og semantikvalidering af en JSF-JSP-side samt Faces-konfigurationseditoren til redigering af programmets konfigurationsressourcefiler.
Du kan eventuelt besøge Building
and Running a Web Application, inden du går i gang med denne øvelse. Sidstnævnte dækker også konfiguration af serverforekomsten, hvilket denne øvelse ikke gør.
Konfiguration
Angiv Websideeditor som standardeditor for JSP-sider
Web Page Editor (WPE), som stilles til rådighed i JSF Tools Project, er IKKE
registreret som standardeditor for JSP-filer. Sådan gør du WPE til standardeditor
for JSP-filer:
- Navigér til Vindue -> Indstillinger... -> Generelt ->
Editorer -> Filtilknytninger.
- Vælg *.jsp i sektionen Filtyper.
- Vælg Websideeditor i sektionen Tilknyttede editorer.
- Klik på knappen Standard.
Opret et JavaServer Faces-projekt
Opret et nyt dynamisk webprogram med navnet JSFØvelse.
Angiv Apache Tomcat 6.0 som mål-runtime.
Vælg JavaServer Faces-projekt
v1.2 i sektionen Konfiguration. Spring de næste to skærmbilleder over for at hente siden JSF-muligheder.

Vælg Brugerbibliotek på listen Type for JSF-biblioteket på siden JSF-muligheder .

Klik på ikonen Overfør bibliotek.
Dialogboksen Overfør bibliotek viser listen over udbydere for JAR-filer til JSF-implementeringen. Vælg biblioteket fra Sun
Microsystem. Klik på Næste. Acceptér licensen, og klik på Afslut

Værktøjet overfører JAR-filerne, opretter et JDT-brugerbibliotek og tilføjer det til det aktuelle projekt. Markér afkrydsningsfeltet for det nye bibliotek, hvis det ikke er markeret. Vælg derefter ikonen Administrér biblioteker.
Opret et JDT-brugerbibliotek, som skal indeholde JAR-filen til JSTL. Klik på OK.
JSTL-biblioteket vises i dialogboksen JSF-muligheder. Vælg biblioteket, og klik på Afslut.
JSF-programmet er nu oprettet. Bemærk, at filen web.xml er opdateret med Faces-miniserveren og miniservertilknytningen, en stub JSF-programkonfigurationsfil (faces-config.xml) er oprettet, og byggestien er opdateret med jar-implementeringsfiler.

Hvis du har et eksisterende dynamisk webprogram, er det muligt at tilføje JSF-muligheder ved at benytte:
Projektegenskaber > Projektfacetter > Tilføj/Fjern projektfacetter…
Opret en JSF JSP-side
Brug guiden JSP-side til at oprette en side med navnet login.jsp
i det nye programs folder med webindhold. På siden Vælg skabeloner i guiden skal du vælge skabelonen Ny JSP(html).
Klik på Afslut. Siden åbnes i websideeditoren som illustreret nedenfor.

Åbn oversigten Egenskaber. Højreklik med musen på designerlærredet, og vælg Vis->Egenskaber på kontekstmenuen. Vent på, at dialogboksen "Læser egenskaber" forsvinder.
Tilføj en kommandoknap til lærredet.
- Klik på sektionen JSF HTML i paletoversigten for at få vist listen over komponenter.
- Træk kommandoknappen, og placér den på lærredet. Bemærk, at editoren indpakker kommandoknappen i koden <f:view> og <h:form>.
- Klik på Hurtigredigering i egenskabsoversigten.
- Indstil attributten Value til Login.
- Indstil attributten Action til login.
Tilføj et skærmbilledgitter
- Træk skærmbilledgitteret fra paletoversigten til lærredet. Bemærk feedbacken på målet.
- Placér skærmbilledgitteret før kommandoknappen, men inden for Form-koden. Skærmbilledgitteret oprettes med et foruddefineret sæt outputtekstkomponenter.
Revidér komponenterne i skærmbilledgitteret
- Klik på outputteksten Element2, og klik derefter på Slet.
- Tilføj en InputText-kode (Tekstinput i paletoversigten) efter Element1 og inden Element3
- Slet outputteksten Element4
- Tilføj en kode af typen InputSecret (hemmeligt input i paletoversigten) efter Element3
- Klik på outputteksten Element1. Revidér dens værdi i kildeoversigten til Name
- Klik på outputteksten Element3. Revidér dens værdi i kildeoversigten til Password
- Klik på skillebladet Vis resultat for at få se siden gengivet i en browser
- Klik på InputText-koden ud for Name. Indstil value-attributten til #{loginBean.name} i egenskabsoversigten.
- Gem siden. Editoren viser en advarsel om, at variablen loginBean ikke kan fortolkes.
Udvid noden JSFØvelse->WebContent i Project Explorer.
Dobbeltklik på faces-config.xml. Det starter Faces-konfigurationseditoren. Klik på skillebladet Administreret bean.
Klik på knappen Tilføj. Derved startes guiden Ny administreret bean. Vælg indstillingen Opret en ny Java-klasse. I det næste skærmbillede i guiden skal du angive pakken com.tutorial og navnet på klassen som LoginBean. Klik på knappen Afslut.
Herved oprettes og registreres Java-klassen som en administreret bean. Gem Faces-konfigurationseditoren. Klik på hyperlinket Administreret bean på siden Administreret bean for at redigere Java-klassen som illustreret nedenfor. Herved startes Java-editoren.
Redigér Java-klassen com.tutorial.LoginBean. Tilføj følgende kode, og gem den.
Højreklik på JSP-siden login.jsp i oversigten Project Explorer, og vælg Validér på kontekstmenuen. Bemærk, at siden bør være gyldig nu.
På siden Kilde i Websideeditor skal du tilføje JSF-koden <h:inputSecret value="#{}"></h:inputSecret>. Tryk på Ctrl+mellemrum med markøren inden for
parenteserne. Der vises et pop op-vindue med en liste over alle implicitte objekter samt den administrerede bean, der er defineret ovenfor. Vælg den administrerede bean loginBean.
Angiv navnet på en egenskab, f.eks. x, som ikke er defineret i den administrerede bean, og gem ændringen. Editoren viser en advarsel om, at egenskaben ikke kan fortolkes.
Slet den ugyldige egenskab. Tryk på Ctrl+mellemrum
efter '.'
i bean-navnet. Der vises et pop op-vindue med en liste over de egenskaber, der er defineret i den administrerede bean. Vælg kodeord på menuen.
Opret en Java-klasse, com.tutorial.validatePassword, som implementerer grænsefladen Validator, og gem den.
Udvid noden JSFØvelse->WebContent i Project Explorer.
Dobbeltklik på faces-config.xml. Det starter Faces-konfigurationseditoren. Klik på skillebladet Komponent. Udvid sektionen Validatorer.
Klik på knappen Tilføj. Vælg knappen Gennemse, der er knyttet til feltet Validatorklasse, og vælg klassen com.tutorial.ValidatePassword. Gem ændringerne.
Tilføj JSF-koden <f:validator id=""></f:validator > . Med markøren placeret inden for anførselstegnene skal du trykke på Ctrl+mellemrum. Der vises et pop op-vindue med en liste over alle standardvalidatorer samt dem, der er registreret i Faces-konfigurationsfilen. Vælg Validér kodeord.
Nu skal du flytte de statiske strenge, du har brugt på siden, til et ressourcebundt. Det gør du ved at tilføje en fil med navnet messages.properties
til folderen com.tutorial. Definér egenskaberne som vist nedenfor, og gem filen.
Tilføj JSF-koden loadBundle som vist nedenfor. Du kan trække og placere koden fra sektionen JSF - kerne i oversigten Palet.
Slet strengen Name
i value-attributten til koden outputLabel. Placér markøren inden for parenteserne, og tryk på Ctrl+mellemrum. Der vises et pop op-vindue med en liste over bl.a. variablen msg, som du definerede i koden loadBundle. Markér den.
Indtast et punktum efter msg, og tryk på Ctrl+mellemrum. Der vises et pop op-vindue med en liste over de egenskaber, der er defineret i filen messages.properties. Vælg egenskaben navn.
Udfyld logonsiden som angivet nedenfor.
Opret en ny JSF-side, welcome.jsp, som angivet nedenfor.
Faces-konfigurationsressourceeditor
JSF Tools Project indeholder en særlig editor til brug for Faces-konfigurationsressourcefiler. Følgende afsnit indeholder en kort introduktion til editoren. Der kommer snart et omfattende øveprogram med en detaljeret beskrivelse af alle editorens funktioner.
Dobbeltklik på filen faces-config.xml
for at starte Faces-konfigurationseditoren. Skift til skillebladet Navigation.
- Tilføj login.jsp og welcome.jsp til skillebladet Navigation. Vælg kontrollen Side i Palet, og placér den på skillebladet Navigation. Vælg siden i dialogboksen Vælg JSP-fil, som opstår.
- Forbind de to sider. Klik på kontrollen Link i Palet, vælg siden login, og træk en linje til
siden welcome. Vælg linjen på skillebladet Navigation i egenskabsoversigten, indstil værdien for from-outcome til login.
Test af JSF JSP-siden
1) Nu skal du udføre siden over for Apache Tomcat-serveren.
Vælg Udfør på server vha. kontekstmenuen, mens du vælger siden
login.jsp i navigatoren.

2) Vælg Apache Tomcat-serveren, og konfigurér den, hvis det ikke allerede er gjort.
3) Klik på Afslut. Fra konsoloversigten burde du kunne se, at Tomcat-serveren starter og loginsiden udføres som vist i webbrowseren nedenfor.

Klik på knappen Logon. Du skal navigere til siden Velkommen.
Tillykke! Du har oprettet og udført dit første JavaServer Faces-program vha. de nye Eclipse WTP JSF-værktøjer.