Eclipse-artikel

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:

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.

Nyt dynamisk webprogram


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

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

Siden JSF-muligheder


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.

Siden JSF-muligheder



Opret et JDT-brugerbibliotek, som skal indeholde JAR-filen til JSTL. Klik på OK.

Siden JSF-muligheder



JSTL-biblioteket vises i dialogboksen JSF-muligheder. Vælg biblioteket, og klik på Afslut.

Siden JSF-muligheder



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.


Websideeditor


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


Kommandoknappen WPE-Add


Tilføj et skærmbilledgitter
Revidér komponenterne i skærmbilledgitteret


Skærmbilledgitteret WPE-Add


Udvid noden JSFØvelse->WebContent i Project Explorer. Dobbeltklik på faces-config.xml. Det starter Faces-konfigurationseditoren. Klik på skillebladet Administreret bean.

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

Ny administreret bean

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.

Faces-konfigurationseditor - skillebladet Administreret bean


Redigér Java-klassen com.tutorial.LoginBean. Tilføj følgende kode, og gem den.

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

Validér bean-egenskaber i EL

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.

Validér bean-egenskaber i EL

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.

Indholdsassistance

Opret en Java-klasse, com.tutorial.validatePassword, som implementerer grænsefladen Validator, og gem den.

Validator
Udvid noden JSFØvelse->WebContent i Project Explorer. Dobbeltklik på faces-config.xml. Det starter Faces-konfigurationseditoren. Klik på skillebladet Komponent. Udvid sektionen Validatorer.

Skillebladet for komponenten Faces-konfigurationseditor

Klik på knappen Tilføj. Vælg knappen Gennemse, der er knyttet til feltet Validatorklasse, og vælg klassen com.tutorial.ValidatePassword. Gem ændringerne.

Faces-konfigurationseditor - registrér validator

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.

Indholdsassistance for validatorer


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.

Indholdsassistance for ressourcebundt

Tilføj JSF-koden loadBundle som vist nedenfor. Du kan trække og placere koden fra sektionen JSF - kerne i oversigten Palet.

Indholdsassistance for ressourcebundt

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.

Indholdsassistance for ressourcebundt

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.

Indholdsassistance for ressourcebundt


Udfyld logonsiden som angivet nedenfor.

Udfyld logonside

Opret en ny JSF-side, welcome.jsp, som angivet nedenfor.

Udfyld logonside

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.

Faces-konfigurationseditor



Faces-konfigurationseditor

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.