Oversigt
I dette øveprogram vil vi bygge og udføre et JSF 2.0-webprogram og fremhæve de funktioner, som JSF Tools-projektet indeholder.
JSF Tools-projektet indeholder værktøjer, som gør det nemmere at bygge JSF 2.0-webprogrammer. Det omfatter en forbedret HTML-kildeeditor, der leverer indholdsassistance og validering til JSF-koder. I dette øveprogram opretter og udfører vi et JSF 2.0-webprogram. På siden Nyt og bemærkelsesværdigt vises alle de værktøjsfunktioner, som kan understøtte udvikling af et JSF 2.0-webprogram.
Opret et nyt dynamisk webprogram med navnet JSFFaceletsTutorial.
Angiv Apache Tomcat 6.0 som mål-runtime.
Klik på knappen Revidér i afsnittet Konfiguration, og vælg facetten “JavaServer Faces 2.0”. Spring næste skærmbillede over, så du får vist 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 JSF 2.0 (Mojarra). Klik på Næste.
Acceptér licensen, og klik på Afslut
JSF-programmet er nu oprettet.
Du skal nu oprette en facelets-skabelonside. Opret en folder med navnet templates under folderen WEB-INF. Brug HTML-guiden til at oprette en skabelonside med navnet BasicTemplate.xhtml under denne folder. Højreklik på folderen templates, vælg Ny » HTML for at starte HTML-guiden. Vælg Ny facelet-skabelon på siden Vælg skabeloner i guiden. Klik på Afslut.
Redigér skabelonfilien i henhold til vejledningen i skabelonen. Du skaloprette og inkludere top- og bundtekstskabeloner. Den endelige skabelonfil skal se ud som eksemplet herunder.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Facelets-øveprogram</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
Opret top- og bundtekstskabelonerne under folderen template vha. guiden Ny HTML som beskrevet ovenfor. Vælg de tilsvarende skabelonfiler på siden Vælg skabelon i guiden, Ny facelet-toptekst og Ny facelet-bundtekst. Foretag ændringer af skabelonerne som vist nedenfor.
Opret en JSF-side med facelets-koder, der skal bruge den skabelon, som er oprettet i forrige trin. Brug guiden HTML-side til at oprette en side med navnet login.xhtml i det nye programs folder med webindhold. Vælg Ny facelet-kompositionsside på siden Vælg skabeloner i guiden. Klik på Afslut.
login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="">
<ui:define name="header">
Tilføj topteksten her, eller slet for at bruge standarden
</ui:define>
<ui:define name="content">
Tilføj indholdet her, eller slet for at bruge standarden
</ui:define>
<ui:define name="footer">
Tilføj bundteksten her, eller slet for at bruge standarden
</ui:define>
</ui:composition>
</html>
JSF Tools-projektet tilføjer understøttelse af validering af attributter for facelets-koder og leverer også indholdsassistance til dem. Bemærk advarslen på attributten template for koden <ui:composition>.
Placér markøren mellem de dobbelte anførselstegn for attributten template, og tryk på Ctrl + Mellemrum for at få indholdsassistance. Du bør få vist en pop op med de biblioteker, der findes under folderen WebContent. Vælg /WEB-INF/templates/BasicTemplate.xhtml
Slet <ui:define>-koderne for top- og bundtekst. Siden henter top- og bundtekst fra skabelonen. Tilføj koderne til logon i afsnittet content som vist nedenfor. Bemærk, at den aktuelle release af JSF Tools-projektet ikke understøtter visuel gengivelse af en XHTML-side i JSF-websideeditoren. Men alle de produktivitetsfunktioner, som findes på kildesiden i websideeditoren til redigering af en JSP-side, er tilgængelige i HTML-kildeeditoren ved oprettelse af en JSF-faceletside i XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Navn"></h:outputText>
<h:inputText value="#{loginBean.name}"></h:inputText>
<h:outputText value="Kodeord"></h:outputText>
<h:inputSecret value="#{loginBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton value="Logon" action="login"></h:commandButton>
</h:form>
</ui:define>
</ui:composition>
</html>
/**
* LoginBean.java
*
*/
package com.tutorial;
public class LoginBean
{
private String name;
private String password;
public String getName() {
return name;
}
public void setName (final String name)
{
this.name = name;
}
public String getPassword ()
{
return password;
}
public void setPassword (final String password)
{
this.password = password;
}
}
Opret en ny HTML-side, welcome.xhtml, i webindholdet med følgende indhold:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:outputLabel value="Velkommen #{loginBean.name}"></h:outputLabel>
</ui:define>
</ui:composition>
</html>
Dobbeltklik på faces-config.xml for at åbne editoren Faces-konfiguration. Klik på skillebladet Navigationsregel. Træk nu filerne login.xhtml og welcome.xhtml fra Project Explorer til gitteret Navigationsregel som vist.
Klik på linkværktøjet i paletten til højre. Træk nu en pil fra login.xhtml til welcome.xhtml som vist.
Klik nu på pilen, og åbn oversigten Egenskaber. Klik på knappen med ellipsen ud for feltet “Fra resultat”
Vælg “Logon” i denne dialogboks. Klik på OK.
Vores navigationsregel er nu konfigureret.
Du skal nu udføre siden login.xhtml på Apache Tomcat-serveren. Vælg Udfør på server vha. kontekstmenuen, mens du vælger siden login.xhtml i navigatoren. Vælg din Apache Tomcat-server, og konfigurér den som påkrævet, hvis du ikke allerede har gjort det. Klik på Afslut. Fra konsoloversigten burde du kunne se, at Tomcat-serveren starter og loginsiden udføres som vist i webbrowseren nedenfor.
Tillykke! Du har oprettet og udført dit første JSF-facelets-program.