Översikt över en JavaServer Faces-app

5 minuter

I den här lektionen använder vi JavaServer Faces (JSF) som visningsteknik för att lära oss grunderna i JSF.

Vad är JavaServer Faces?

JavaServer Faces infördes som specifikation på Java-plattformen, Enterprise Edition (Java EE), som en del av Java EE 5 (2006). Från början användes Java Server Pages (JSP) i JSF för att rendera HTML-sidor. Från och med version 2.0 har Facelets, som är mer lik vanlig HTML, använts.

JSF är ett komponentbaserat programramverk. Varje komponents tillstånd sparas beroende på klientens interaktion. Tillståndet sparas när en ny sida begärs och återställs vid retur.

Grundläggande funktioner för JSF

JSF-program är grovt sett indelade i följande två funktioner:

Facelets: En XHTML-baserad mallmotor som beskriver skärmlayouter
BackingBean: En Java-klass som binder till Facelets och anger och bearbetar värden

Facelets är en XHTML-baserad mallmotor som beskriver skärmlayouter skrivna i XHTML. XHTML följer den dokumenttypsdefinition (DTD) som definierades i W3C och beskrivs som en fil med ett xhtml-tillägg.

BackingBean är en Java-klass som är länkad till en JSF-sida. Den innehåller åtgärdsmetoder, åtgärdslyssnare och värdeändringslyssnare. I Java EE 6 implementerades lagringsbönor med JSF-hanterade bönor. Från och med Java EE 7 används CDI-bönor (Context and Dependency Injection) som implementering.

Skapa en JSF-sida med PrimeFaces

PrimeFaces är en JSF-implementering från tredje part som gör det enkelt att skapa JSF-webbkomponenter. PrimeFaces är ett förenklat bibliotek med en JAR-fil och nollkonfiguration där inga beroenden krävs. Du behöver bara ladda ned PrimeFaces, lägga till primefaces-{version}.jar i din klassökväg och importera namnrymden för att komma igång, som i xmlns:p="http://primefaces.org/ui".

Låt oss ta en titt på ett exempel. På följande PrimeFaces-sida används taggarna p:outputLabel, p:inputTextoch p:commandButton för att visa etiketter, indatafält och knappar.

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" >
    <h:head>
        <title>Input Value Counter Sample</title>
    </h:head>
    <h:body>
        <h:form>
            <p:outputLabel value="Basic"/><br/>
            <p:inputText value="#{indexcontroller.inputValue}"/><br/>
            <p:commandButton value="Submit" action="#{indexcontroller.submitButtonAction()}"/><br/>
        </h:form>
    </h:body>
</html>

När du skriver den föregående XHTML-koden visas följande skärm:

Screenshot that shows a JSF Facelets sample.

PrimeFaces Ajax-stöd

JSF stöder Ajax-program som standard. Du kan uppdatera en del av skärmen dynamiskt utan att uppdatera skärmen.

PrimeFaces använder attributet update för att göra det enklare att implementera Ajax-stödet som tillhandahålls av JSF. Du anger vilken komponent som ska uppdateras med dess mål-ID. I exemplet nedan läggs attributet update ="ajaxUpdateText" till i p:commandButton, så att <div id ="ajaxUpdateText">-delen uppdateras när knappen väljs. Du kan ange id här för alla HTML-komponenter.

<div id="ajaxUpdateText">
...
</div>

<p:commandButton update="ajaxUpdateText" 
   value="Submit" action="#{indexcontroller.submitButtonAction()}"/>

”Backing bean” i JSF

Lagringsbönor är Java-klasser som implementerar den serverdelsbearbetning som är associerad med en JSF-vy. I nästa exempel kommer vi att referera till lagringsbönan IndexController, som är länkad till föregående XHTML. Vi använder @Named-anteckningar till att konfigurera vår JSF-app, så att den kan refereras från vår JSF Facelets.

Om du skriver <p: inputText value ="#{indexcontroller.inputValue}"/> i Facelets, visas fältet Inmatningstext på skärmen. Det angivna värdet är bundet till det inputValue som definierats i klassen IndexController.

Om du skriver <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/> visas HTML-knappen. När knappen väljs anropas submitButtonAction()-metoden som definieras i IndexController-klassen.

import java.io.Serializable;

import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;

@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable {

    private static final long serialVersionUID = 8485377386286855408L;

    @Setter @Getter
    private String inputValue;

    private int counter;

    public void submitButtonAction(){
        inputValue = inputValue + " : " + counter;
        counter++;
    }
}

Detta innebär att visningen (Facelets) och styrningen (lagringsbönan) som utgör skärmen kan implementeras separat med JSF.

I den här lektionen introducerade vi JSF. I nästa lektion ska vi skapa en JSF-app och köra den lokalt.

Fortsätt