Översikt över ett JavaServer Faces-program

  • 5 minuter

I den här lektionen använder vi JavaServer Faces (JSF) som en "View"-teknik för att lära oss det grundläggande begreppet JSF.

Vad är JavaServer Faces?

JavaServer Faces antogs som en specifikation i Java-plattformen Enterprise Edition (Java EE) som en del av Java EE 5 (2006). Ursprungligen använde JSF Java Server Pages (JSP) för att återge HTML-sidor. Sedan version 2.0 har Facelets, som är närmare 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 när den returneras.

Grundläggande JSF-funktioner

JSF-program är ungefär 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 av XHTML. XHTML överensstämmer med den dokumenttypsdefinition (DTD) som definierats 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 lyssnare för värdeändring. I Java EE 6 implementerades backing beans med JSF-hanterade bönor. Sedan Java EE 7 har CDI-bönor (Contexts and Dependency Injection) använts 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 lättviktsbibliotek med en jar, noll konfiguration och inga nödvändiga beroenden. Du behöver bara ladda ned PrimeFaces, lägga till primefaces-{version}.jar till din klassökväg och importera namnområdet för att komma igång, som i xmlns:p="http://primefaces.org/ui".

Nu ska vi titta 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:

Skärmbild som visar ett JSF Facelets-exempel.

Stöd för PrimeFaces Ajax

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 från JSF. Du anger vilken komponent som ska uppdateras med dess mål-ID. I följande exempel läggs attributet update ="ajaxUpdateText" till i p:commandButton, så <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()}"/>

JSF-stödböna

Stödjande bönor är Java-klasser som implementerar bakgrundsbearbetningen som är associerad med en JSF-vy. I nästa exempel refererar vi till en backing bean, IndexController, som är länkad till tidigare XHTML. Vi använder @Named-annoteringar för att konfigurera vår JSF-applikation så att den kan refereras från våra JSF Facelets.

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

Om du skriver <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/>visas dessutom knappen HTML-. När knappen har valts anropas den submitButtonAction() metod som definierats i klassen IndexController.

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++;
    }
}

På så sätt tillåter JSF att vyn (Facelets) och kontrollern (backing bean) som utgör skärmen implementeras separat.

I den här lektionen introducerade vi JSF. I nästa lektion skapar vi ett JSF-program och kör det lokalt.