Øveprogram til JSF Tools - byg et JSF 2.0-program

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.

Introduktion

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.


Konfiguration

Konfigurér forekomst af Apache Tomcat-server

Konfigurér en forekomst af Apache Tomcat-serveren vha. oplysningerne i konfigurationsafsnittet i dette øveprogram Byg og udfør et webprogram.

Opret et JavaServer Faces-projekt

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.



Nyt dynamisk webprogram Projektfacetter

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 JSF 2.0 (Mojarra). 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

Klik på knappen Afslut for at oprette JavaServer Faces-programmet. Du kan blive bedt om at angive J2EE-perspektivet, når du er færdig. Klik på OK.

JSF-programmet er nu oprettet.


Opret facelets-skabelonsider

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.

Opret facelets-skabelon

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.



BasicTemplate.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">
<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.



Facelets-skabelon

Opret en JSF-side

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>


Validering af facelets-kode og indholdsassistance

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



Validering af attribut for facelets-kode

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



Indholdsassistance til attribut for facelet-kode


Udfyld JSF-siden

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.



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="/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>

Konfigurér den administrerede bean

Udvid noden >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.
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.java

/**
 * 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;
    }
}

Tilføj endnu en side

Opret en ny HTML-side, welcome.xhtml, i webindholdet med følgende indhold:


welcome.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:outputLabel value="Velkommen #{loginBean.name}"></h:outputLabel>
    </ui:define>
</ui:composition>
</html>

Konfigurér regler for sidenavigation

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.

Tilføj sider til navigationsreglen

Klik på linkværktøjet i paletten til højre. Træk nu en pil fra login.xhtml til welcome.xhtml som vist.

Sammenkæd sider til navigationsreglen

Klik nu på pilen, og åbn oversigten Egenskaber. Klik på knappen med ellipsen ud for feltet “Fra resultat”

Angiv en funktion for navigationsreglen

Vælg “Logon” i denne dialogboks. Klik på OK.

Vælg en funktion til navigationsreglen

Vores navigationsregel er nu konfigureret.

Udfør JSF-faceletsiden

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.