Přehled aplikace JavaServer Faces

5 min

V této lekci použijeme JavaServer Faces (JSF) jako technologii View k získání základního konceptu JSF.

Co je JavaServer Faces?

JavaServer Faces byl přijat jako specifikace v platformě Java, Enterprise Edition (Java EE), jako součást Java EE 5 (2006). Zpočátku JSF použil Java Serverové Stránky (JSP) k vykreslení stránek HTML. Od verze 2.0 se používá Facelets, který je blíže k běžnému HTML.

JSF je aplikační architektura založená na komponentách. Stav jednotlivých komponent se uloží v závislosti na interakci klienta. Stav se uloží při vyžádání nové stránky a při vrácení se obnoví.

Základní funkce JSF

Aplikace JSF jsou zhruba rozdělené na následující dvě funkce:

Facelets: Modul šablon založený na XHTML, který popisuje rozložení obrazovky
BackingBean: Třída Javy, která je svázaná s Facelets a nastavuje a zpracovává hodnoty

Facelets je modul šablon založený na XHTML, který popisuje rozložení obrazovky napsané XHTML. XHTML odpovídá definici typu dokumentu (DTD) definovanou ve W3C a je popsána jako soubor s příponou xhtml.

BackingBean je třída Java propojená se stránkou JSF. Obsahuje metody akcí, posluchače akcí a posluchače změn hodnot. V Java EE 6 byly backing beans implementovány pomocí JSF-managed beanů. Od Java EE 7 jsou kontexty a injektáž závislostí (CDI) použity jako implementace.

Vytvoření stránky JSF pomocí PrimeFaces

PrimeFaces je implementace JSF třetí strany, která usnadňuje vytváření webových komponent JSF. PrimeFaces je zjednodušená knihovna s jedním souborem JAR, nulovou konfigurací a bez požadovaných závislostí. Stačí stáhnout PrimeFaces, přidat primefaces-{version}.jar do cesty k třídám a importovat jmenný prostor, jak je uvedeno v xmlns:p="http://primefaces.org/ui".

Podívejme se na příklad. Na následující stránce PrimeFaces se k zobrazení popisků, vstupních polí a tlačítek používají značky p:outputLabel,p:inputTexta p:commandButton.

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

Když napíšete předchozí kód XHTML, zobrazí se následující obrazovka:

snímek obrazovky znázorňující ukázku JSF Facelets

Podpora pro PrimeFaces Ajax

JSF ve výchozím nastavení podporuje aplikace Ajax. Můžete dynamicky aktualizovat část obrazovky bez aktualizace obrazovky.

PrimeFaces využívá atribut update, který usnadňuje implementaci podpory Ajax poskytované JSF. Určíte, která komponenta by se měla aktualizovat pomocí jejího cílového ID. V následujícím příkladu je atribut update ="ajaxUpdateText" přidán do p:commandButton, takže <div id ="ajaxUpdateText"> část se aktualizuje při výběru tlačítka. Tady můžete zadat id pro libovolnou komponentu HTML.

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

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

JsF backing bean

Backing beans jsou třídy Java, které zajišťují zpracování na pozadí spojené s pohledem JSF. V dalším příkladu budeme odkazovat na backing bean, IndexController, propojený s předchozím XHTML. K konfiguraci aplikace JSF použijeme @Named poznámky, aby na ni bylo možné odkazovat z našich JSF Facelets.

Pokud do Facelets napíšete <p: inputText value ="#{indexcontroller.inputValue}"/>, zobrazí se na obrazovce pole Vstupní text. Zadaná hodnota je vázána na inputValue definované v třídě IndexController.

Pokud také napíšete <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/>, zobrazí se tlačítko HTML. Při výběru tlačítka vyvolá metodu submitButtonAction() definovanou ve třídě 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++;
    }
}

JSF tímto způsobem umožňuje implementovat zobrazení (Facelets) a Controller (backing bean), které tvoří obrazovku samostatně.