Egy JavaServer Faces-alkalmazás áttekintése

5 perc

Ebben a leckében a JavaServer Faces (JSF) „megtekintési” technológiaként való használatával ismertetjük a JSF alapszintű fogalmait.

A JavaServer Faces bemutatása

A JavaServer Faces a Java EE 5-ös (2006) Java-platform, Enterprise Edition (Java EE) specifikációja. A JSF eredetileg a Java Server Pages (JSP) segítségével renderelt HTML-lapokat. A 2.0-ás verzió óta a Faceletset használja, amely közelebb áll a hagyományos HTML-hez.

A JSF egy összetevő-alapú alkalmazás-keretrendszer. Minden összetevő állapotát az ügyfélinterakcióktól függően menti. Az állapotot akkor menti, amikor valaki egy új lapot kér, majd helyreállítja a visszaadáskor.

A JSF alapszintű funkciói

A JSF-alkalmazásokat az alábbi két funkció szerint csoportosíthatjuk:

Facelets: XHTML-alapú sablonmotor, amely a képernyőelrendezéseket ismerteti
BackingBean: Egy Java-osztály, amely faceletekhez kötődik, értékeket állít be és dolgoz fel

A Facelets XHTML-ben írt HTML-alapú sablonmotor, amely képernyő-elrendezéseket ismertet. Az XHTML megfelel a W3C-ben definiált dokumentumtípus-definíciónak (DTD), és egy xhtml kiterjesztésű fájlként írható le.

A BackingBean egy JSF-laphoz csatolt Java-osztály. Műveletmetódusokat, művelethallgatókat és értékmódosítási hallgatókat tartalmaz. A Backing Beans a Java EE 6-ban JSF által kezelt beanként van implementálva. A Java EE 7 óta az implementálás Context and Dependency Injection (CDI) típusú beaneket használ.

JSF-oldal létrehozása a PrimeFaces-zel

A PrimeFaces külső JSF-implementáció, amellyel könnyen létrehozhatók JSF-webösszetevők. A PrimeFaces egy egyszerű könyvtár egy Jar-fájllal, konfiguráció és kötelező függőségek nélkül. A kezdéshez töltse le a PrimeFaces-t, adja hozzá a primefaces-{version}.jar fájlt az osztályútvonalhoz, majd importálja a névteret, ahogy itt: xmlns:p="http://primefaces.org/ui".

Let's look at an example. Az alábbi PrimeFaces-oldalon a p:outputLabel, p:inputTextés p:commandButton címkék címkéket, beviteli mezőket és gombokat jelenítenek meg.

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

Az előző XHTML-kód írásakor a következő képernyő jelenik meg:

Screenshot that shows a JSF Facelets sample.

PrimeFaces – Ajax-támogatás

A JSF alapértelmezés szerint támogatja az Ajax-alkalmazásokat. A képernyő részei dinamikusan frissíthetők a képernyő frissítése nélkül.

A PrimeFaces az update attribútummal könnyíti meg a JSF Ajax-támogatásának implementálását. A célazonosítóval adhatja meg, hogy melyik összetevőt szeretné frissíteni. Az alábbi példában az update ="ajaxUpdateText" attribútum lett hozzáadva a p:commandButton elemhez, a gomb választásakor így az <div id ="ajaxUpdateText"> rész frissül. Itt adhatja meg az id összes HTML-összetevőt.

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

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

JSF – háttérbean

A háttérbeanek olyan Java-osztályok, amelyek egy JSF-nézettel társított háttérbeli feldolgozást valósítanak meg. A következő példában a fenti XHTML-hez csatolt korábbi IndexController háttérbeanre hivatkozunk. A @Named jegyzetekkel konfiguráljuk a JSF-alkalmazásokat, hogy azokra a JSF Faceletsből is hivatkozni lehessen.

Ha a Faceletsbe beírja a(z) <p: inputText value ="#{indexcontroller.inputValue}"/> szöveget, a bemeneti szöveg mezője jelenik meg a képernyőn. A beírt érték az IndexController osztályban definiált inputValue elemhez van kötve.

A(z) <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/> kifejezés megjeleníti a HTML gombot. A gomb választásakor az meghívja az IndexController osztályban definiált submitButtonAction() metódust.

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

A JSF így lehetővé teszi, hogy a képernyőt kitöltő nézet (Facelets) és a vezérlő (háttérbean) külön legyen implementálható.

Ebben a leckében ismertettük a JSF-et. A következőben létrehozunk és helyileg futtatunk egy JSF-alkalmazást.

Folytatás