Overzicht van een JavaServer Faces-toepassing

Voltooid

In deze eenheid gebruiken we JSF (JavaServer Faces) als een weergavetechnologie om kennis te maken met het basisconcept van JSF.

Wat is JavaServer Faces?

JavaServer Faces is als een specificatie opgenomen in het Java-platform EE (Java Enterprise Edition), als onderdeel van Java EE 5 (2006). In eerste instantie maakte JSF gebruik van Java Server Pages (JSP) om HTML-pagina's weer te geven. Vanaf versie 2.0 wordt Facelets, dat meer op het gewone HTML lijkt, gebruikt.

JSF is een app-framework dat op onderdelen is gebaseerd. De status van elk onderdeel wordt opgeslagen, afhankelijk van de interactie van de client. De status wordt opgeslagen wanneer een nieuwe pagina wordt aangevraagd en wordt hersteld wanneer deze wordt geretourneerd.

JSF-basisfunctionaliteit

JSF-apps zijn grofweg onderverdeeld in de volgende twee functies:

  • Facelets: Een XHTML-sjabloonengine die schermindelingen beschrijft
  • BackingBean: een Java-klasse die is gekoppeld aan Facelets en waarden instelt en verwerkt

Facelets is een XHTML-sjabloonengine waarmee schermlay-outs worden beschreven, geschreven in XHTML. XHTML is in overeenstemming met de DTD (documenttypedefinitie) die is gedefinieerd in W3C, en wordt beschreven als een bestand met de extensie xhtml.

BackingBean is een Java-klasse die is gekoppeld aan een JSF-pagina. Het bevat actiemethoden, actielisteners en listeners voor waardewijzigingen. In Java EE 6 werden backing beans geïmplementeerd met in JSF beheerde beans. Vanaf Java EE 7 worden CDI-beans (Contexts and Dependency Injection) gebruikt als de implementatie.

Een JSF-pagina maken met PrimeFaces

PrimeFaces is een JSF-implementatie van derden waarmee u eenvoudig JSF-webonderdelen kunt maken. PrimeFaces is een lichtgewicht bibliotheek met één jar, hoeft niet te worden geconfigureerd, en heeft geen vereiste afhankelijkheden. U hoeft alleen PrimeFaces te downloaden, het bestand primefaces-{version}.jar toe te voegen aan het klassepad, en de naamruimte te importeren om aan de slag te gaan, zoals in xmlns:p="http://primefaces.org/ui".

We kijken naar een voorbeeld. Op de volgende PrimeFaces-pagina worden de tags p:outputLabel,p:inputText en p:commandButton gebruikt om labels, invoervelden en knoppen weer te geven.

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

Wanneer u de voorgaande XHTML-code schrijft, wordt het volgende scherm weergegeven:

Screenshot that shows a JSF Facelets sample.

Ondersteuning voor PrimeFaces Ajax

JSF biedt standaard ondersteuning voor Ajax-apps. U kunt een deel van het scherm dynamisch bijwerken zonder het scherm te vernieuwen.

PrimeFaces maakt gebruik van het kenmerk update zodat het implementeren van de Ajax-ondersteuning die wordt geboden door JSF wordt vereenvoudigd. U geeft met de doel-id op welk onderdeel moet worden bijgewerkt. In het volgende voorbeeld wordt het kenmerk update ="ajaxUpdateText" toegevoegd aan p:commandButton, zodat het onderdeel <div id ="ajaxUpdateText"> wordt bijgewerkt wanneer de knop is geselecteerd. U kunt hier id opgeven voor elk HTML-onderdeel.

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

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

Backing bean van JSF

Backing beans zijn Java-klassen waarmee de back-endverwerking die is gekoppeld aan een JSF-weergave, wordt geïmplementeerd. In het volgende voorbeeld verwijzen we naar een backing bean, IndexController, die is gekoppeld aan de vorige XHTML. We gebruiken de @Named-aantekeningen om de JSF-toepassing te configureren, zodat hiernaar kan worden verwezen vanuit de JSF Facelets.

Als u <p: inputText value ="#{indexcontroller.inputValue}"/> schrijft in Facelets, verschijnt het veld Invoertekst op het scherm. De ingevoerde waarde is gebonden aan de inputValue die is gedefinieerd in de klasse IndexController.

Daarnaast verschijnt de knop HTML als u <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/> schrijft. Wanneer de knop is geselecteerd, wordt de methode submitButtonAction() aangeroepen die is gedefinieerd in de klasse 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++;
    }
}

Zo kunt u met JSF de weergave (Facelets) en de controller (backing bean) die het scherm vormen, afzonderlijk implementeren.

In deze eenheid hebben we JSF geïntroduceerd. In de volgende eenheid gaat u een JSF-toepassing maken en lokaal uitvoeren.