Facelet

A Facelet technológia egy nyílt forráskódú web sablon rendszer, amelyet a JavaServer Faces keretrendszerben a megjelenítő oldalak leírására használnak. A Faceletek szabványos XML alapú dokumentumok. Leírhatóak vele a JSF felhasználói felületet reprezentáló komponensek, így felépíthető a nézet oldalt tükröző JSF komponensfa.

Kezdetben a Faceletek egy alternatív nézet leíró nyelvként szolgáltak, a JSF korábbi változatai a JSP-t használták a megjelenítésre. A JSF 2 már a Faceleteket használja alapértelmezetten.

A Faceletek nagyban támogatják a tartalom újrafelhasználását. A lehetőségek között megtalálható a külső lap beemelése, saját elemek, összetett komponensek készítése. Emellett sablonozás is lehetséges.

A Faceletek lehetőségei

Sablonozás

A Faceletek lehetőséget nyújtanak a sablonozásra.^[1] Ezt azt jelenti, hogy egy oldalon elhelyezhetünk helyőrző elemeket, amelyekhez egy másik oldalon definiálhatunk tartalmat.

A következő példa bemutatja a sablonok használatát:

templates/layout.xhtml

<?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://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<div id="header">
		<ui:insert name="header">
			Alapértelmezett fejléc
		</ui:insert>
	</div>
	<div id="content">
		<ui:insert name="content">
			A fő tartalom helye
		</ui:insert>
	</div>
</h:body>
</html>

Az <ui:insert> elemek helyőrzők a tartalom számára. A nyitó és záró tag közötti rész akkor kerül megjelenítésre, ha a sablont felhasználó kliens lap nem definiálja a megfelelő tartalmat.

sablon-kliens.xhtml

<ui:composition template="/templates/layout.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:define name="content">
        Ez a szöveg kerül a fő tartalom helyére.
    </ui:define>
</ui:composition>

A fenti sablon kliens lap saját tartalmi részt definiál. Erre a <ui:define> elemek használhatóak. A definíciókat nyitó és záró <ui:composition> elemek között kell elhelyezni, az ezen kívüli részek nem lesznek megjelenítve. A példában a header rész nem lesz kicserélve, hiszen azt a sablon kliens nem definiálta.

Fájl beemelése

A sablonozás mellett lehetőség van már megírt Faceletek tartalmát egy egyszerű hivatkozással hozzáadni az oldalhoz. Ezt a <ui:include> elemmel lehet megtenni. A hivatkozott fájl nevét az src attribútum értékeként kell megadni.

include-pelda.xhtml

<?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://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<div id="header">
		<ui:insert name="header">
			<ui:include src="/templates/default-header.xhtml" />
		</ui:insert>
	</div>
	<div id="content">
		<ui:insert name="content">
			A fő tartalom helye
		</ui:insert>
	</div>
</h:body>
</html>

A példa az előző sablon példa módosítása: az alapértelmezett fejlécet egy külön fájl tartalmazza és ezt emeljük be.

Saját tagek

Lehetőség van saját tagek létrehozására is. Ezeket külön lapon kell megírni, a megvalósítást <ui:composition> és </ui:composition> közé írva. Egy taglib XML fájlban lehet hozzárendelni őket egy XML névtérhez.

Egy ilyen taglib XML felépítését mutatja a következő példa. Tegyük fel, hogy a regisztrálandó saját tag a mytag.xhtml fájlban van megírva.

mytag.taglib.xml

<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib 
     xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibary_2_0.xsd"
     version="2.0">
     <namespace>http://example.com/my</namespace>
     <tag>
          <tag-name>mytag</tag-name>
          <syntaxhighlight>mytag.xhtml

    </tag>

</facelet-taglib> </syntaxhighlight>

A <namespace> jelöli a kívánt névteret, a <tag-name> pedig azt, hogy milyen néven akarunk a tagre hivatkozni. A <syntaxhighlight> pedig a taget tartalmazó fájl elérési útja. Egy példa a tag használatára:

mytag-pelda.xhtml

<!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://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:sajat="http://example.com/my">
    <h:body>
         Itt használjuk a taget: 
         <sajat:mytag>
    </h:body>
</html>

Összetett komponensek

A Faceletek további lehetősége az összetett komponensek létrehozása.^[2] Az összetett komponenseket egy előre meghatározott, resources nevű könyvtárban kell elhelyezni (ezen belül hozhatunk létre alkönyvtárakat is). A komponens automatikusan kap nevet és XML névteret. A névtér http://java.sun.com/jsf/composite, utána írva az esetleges a könyvtár nevét. Az elem neve megegyezik az .xhtml fájl nevével kiterjesztés nélkül.

resources/sajat/udv.xhtml

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:cc="http://java.sun.com/jsf/composite">
    <cc:interface>
    	<cc:attribute name="nev" />
    </cc:interface>
    <cc:implementation> 
        <h:outputText value="Üdvözöllek, #{cc.attrs.nev}!"/>
    </cc:implementation>
</ui:composition>

A példán is látható, hogy a komponens megadása két részre osztható: az interfészre és az implementációs részre. Az interfészben adhatunk meg attribútumokat, amelyek értékét a komponenst felhasználó oldal határozza meg. Ezekre az attribútumokra az implementációs részben a cc.attrs.ATTRIBUTUM_NEVE módon hivatkozhatunk.

Egy példa a használatra:

udv-pelda.xhtml

<!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:ui="http://java.sun.com/jsf/facelets" 
    xmlns:my="http://java.sun.com/jsf/composite/sajat">
    <my:udv nev="Teszt Elek" />
</html>

Jegyzetek

További információk

Facelet hivatalos honlap Archiválva 2012. április 13-i dátummal a Wayback Machine-ben
Fejlesztői dokumentáció Archiválva 2012. június 5-i dátummal a Wayback Machine-ben

Informatikai portál • összefoglaló, színes tartalomajánló lap

[1] ttps://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/ui/tld-summary.html

[2] ttps://docs.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/composite/tld-summary.html

[1]

[2]