V sobotu 2. listopadu proběhla mohutná oslava naší plnoletosti !!
Multimediaexpo.cz je již 18 let na českém internetu !!

Facelets

Z Multimediaexpo.cz

Broom icon.png Tento článek potřebuje úpravy. Můžete Multimediaexpo.cz pomoci tím, že ho vylepšíte.
Jak by měly články vypadat, popisují stránky Vzhled a styl a Encyklopedický styl. 		Broom icon.png

Facelets je open source webový framework, který slouží k tvorbě prezentační vrstvy ve webových aplikacích postavených na JavaServer Faces (JSF). Od verze JSF 2.0 plně nahrazuje technologii JavaServer Pages (JSP), která původně v JSF tuto funkci plnila.

Obsah

Vznik a vývoj

Při vzniku JSF se využití JSP jako hlavní prezentační technologie jevilo jako poměrně logický krok. JSP byla již dobře zavedená technologie, která navíc dovedla bez potíží spolupracovat s jazykem Expression Language (EL) a knihovnami tagů, např. JavaServer Pages Standard Tag Library (JSTL).

Toto spojení však postupem času začalo narážet na mantinely, které vyplývaly především z různých koncepcí obou technologií. JSP je jazyk pro generování dynamického obsahu na webové stránce. Taková stránka je zpracovávána odshora dolů a jejím jediným cílem je vygenerovat HTML odpověď pro uživatele. To se ve skutečnosti děje v servletu, který je z každého JSP souboru vygenerován. JSF má naproti tomu mnohem složitější životní cyklus, ve kterém v různých fázích dochází ke generaci stromu komponent, konverzi a validaci uživatelských vstupů, renderování komponent atd. Z těchto rozdílů je patrné, že starší JSP technologie, při jejímž vzniku se s podporou JSF nepočítalo, není schopna poskytnout dostatečně sofistikovanou funkcionalitu, aby byl využit veškerý potenciál JSF frameworku.

Tyto nekonzistence podnítily vznik technologie Facelets, která již byla vyvinuta záměrně jako součást JSF 2.0, a na rozdíl od JSP také podporuje veškerou jeho funkcionalitu. Facelety jsou založeny na standardu XML. Tato skutečnost znamená mimo jiné významné zkrácení doby potřebné pro zvládnutí JSF frameworku. Odpadá totiž nutnost učit se JSP a s tím související servlety a místo toho se stačí obeznámit s několika novými XML tagy, které Facelets technologie obsahuje. Samotný jazyk XML je mezi vývojáři již všeobecně známý a používá se ve spojení s mnoha jinými technologiemi.

Obsah Facelets

Obsah Facelets souborů je tedy klasický XHTML kód, ve kterém se mísí tagy z různých knihoven. Tagy jednotlivých knihoven jsou rozlišovány pomocí jmenných prostorů. Pokud tedy chceme ve faceletu používat nějakou knihovnu, musíme nejprve deklarovat příslušný jmenný prostor a jeho prefix. Následuje výčet knihoven, které lze ve faceletech použít a jejich URI.

Knihovna URI Zavedený prefix Popis
JSF Facelets Tag Library http://java.sun.com/jsf/facelets ui: Tagy pro tvorbu šablon
JSF HTML Tag Library http://java.sun.com/jsf/html h: Tagy komponent uživatelského rozhraní
JSF Core Tag Library http://java.sun.com/jsf/core f: Tagy s funkcionalitou nezávislou na RenderKitu
JSTL Core Tag Library http://java.sun.com/jstl/core c: Tagy jádra JSTL – cykly, podmínky atd.
JSTL Functions Tag Library http://java.sun.com/jstl/functions fn: Tagy JSTL pro funkce – např. toUpperCase atd.

V souvislosti s facelety je samozřejmě důležitá zejména první knihovna JSF Facelets Tag Library, která obsahuje tagy pro tvorbu templatů. Jedná se klíčový přínos technologie Facelets. Template je jakási šablona, která slouží jako základ pro ostatní webové stránky v aplikaci. Umožňuje minimalizovat duplicity v kódu, podporuje jeho znovupoužitelnost a pomáhá udržovat jednotný vzhled napříč celou aplikací.

Práce s templaty

Bývá zvykem, že webové aplikace mají uniformní vzhled, tzn. stejný design a rozmístění jednotlivých bloků (blokem rozuměj např. záhlaví, zápatí, menu, obsah atp.) napříč všemi stránkami aplikace. Facelety nám umožňují vytvořit jakýsi mustr (template), který definuje rozmístění těchto prvků a obsah, který je společný pro všechny stránky (všechny stránky mohou mít např. stejné záhlaví). Tento mustr pak využijeme při tvorbě konkrétních stránek, do kterých pouze doplníme specifický obsah do předpřipravených prvků.

Tvorba templatu

Při tvorbě templatu je nejprve zapotřebí, jako u každého jiného XHTML souboru, deklarovat tzv. doctype a používané jmenné prostory. Implementace Facelets je v souladu s XHTML Transitional DTD. Jmenné prostory se deklarují na základě toho, jaké tagy plánujeme na stránkách využít (viz tabulka). Zde, kromě nezbytného jmenného prostoru XHTML, využijeme knihovny JSF Facelets Tag Library a JSF HTML Tag Library. 

<?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:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html">
</html>

Všimněte si jmenných prostorů s předponou ui a h (viz tabulku s knihovnami, jejich identifikátory a předponami).

Tvorba rozvržení (layoutů)

Dále je třeba definovat a rozmístit bloky, do kterých se bude později vkládat konkrétní obsah. Pro vytvoření rozvržení se používají běžné XHTML značky jako např. div. Pro označení místa, do kterého chceme na různých stránkách vkládat různý obsah, se používá tag z Facelets knihovny ui:insert. Tento tag používá pro svou identifikaci atribut name, na jehož hodnotu se odkazujeme při tvorbě konkrétní stránky (viz dále). Dovnitř tagu můžeme umístit implicitní obsah, který se použije v případě, že nebude přepsán explicitně vloženým obsahem. Takový obsah může mít buď podobu běžného XHTML kódu nebo lze použít tag ui:include, který vkládá předpřipravený obsah z externího souboru. Jedná se o obdobu JSP instrukce jsp:include. 

<?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:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html">
 
  <h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
    <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
    <title>Facelets Template</title>
  </h:head>
 
  <h:body>
    <div id="top">
      <ui:insert name="top">Top</ui:insert>
    </div>
    <div id="content" class="center_content">
      <ui:insert name="content">Content</ui:insert>
    </div>
    <div id="bottom">
      <ui:insert name="bottom">
        <ui:include src="footer.xhtml" />
      </ui:insert>
    </div>
  </h:body>
 
</html>

Všimněte si tagů ui:insert, které jsou rozmístěny ve třech blocích. Tyto bloky reprezentují záhlaví, obsah a zápatí stránky. V zápatí jsme využili také tag ui:include, pomocí kterého vkládáme implicitní obsah ze souboru footer.xhtml.

Dále si všimněte, že místo klasických XHTML tagů body a head jsme použili jejich ekvivalenty z knihovny JSF HTML Tag Library. Kdybychom použili klasické tagy, na funkcionalitu by to vliv nemělo. Pokud však využijeme těchto alternativ, bude to mít pozitivní vliv na tvorbu stromu komponent, který je pro práci JSF zásadní. Proto je dobré využívat JSF ekvivalenty běžných tagů všude, kde je to možné.

Použití šablony

Když nyní chcete vytvořit stránku založenou na vytvořené šabloně, musíte použít tag ui:composition, jehož atribut template obsahuje relativní cestu k souboru šablony. Následně dovnitř tohoto tagu vložíte sekvenci ui:define tagů, které obklopují kód, jenž chcete vložit do jednoho z předpřipravených bloků v šabloně. Blok, do kterého má být kód na místo implicitního kódu vložen, definujete atributem name tagu ui:define. Pokud chcete v některém z bloků ponechat implicitní kód, stačí nezadat žádný ui:define tag, který se na daný blok odkazuje. 

<?xml version='1.0' encoding='UTF-8' ?>
 
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<ui:compositionxmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  template="template.xhtml">
 
  <ui:define name="top">
 
    <h1> <h:outputText value="Vytvořit novou knihu“ /></h1>
 
  </ui:define>
 
  <ui:define name="content">
 
    <table border="0">
 
      <tr>
        <td>ISBN:</td>
        <td><h:inputText value="#{Bean.isbn}" /></td>
      </tr>
 
      <tr>
        <td>Název:</td>
        <td><h:inputText value="#{Bean.nazev}" /></td>
      </tr>
 
      <tr>
        <td>Cena:</td>
        <td><h:inputText value="#{Bean.cena}" /></td>
      </tr>
 
    </table>
 
    <h:commandButton value=“Vytvořit“ action=“submit“ />
 
  </ui:define>
 
</ui:composition>

Všimněte si tagu ui:composition a jeho atributu template, který odkazuje na soubor s šablonou. Tento tag obklopuje celý soubor, vše co je vně, je ignorováno. Přesto však můžete narazit na případ, kdy je i tag ui:composition ohraničen běžnými html a body tagy. Je to jen z toho důvodu, aby bylo možno zobrazit soubor ve webovém prohlížeči.

Dále si všimněte dvou tagů ui:define. Do prvního jsme vložili nadpis a atributem name se odkazujeme na horní blok stránky (čili záhlaví). Názvem top jsme si totiž v šabloně pojmenovali horní blok. Do nejdůležitějšího obsahového bloku jsme vložili jednoduchý formulář. Tag pro třetí spodní blok, zápatí, není přítomen a bude tedy použit implicitní obsah, který jsme definovali v šabloně.

Takových stránek bychom na základě původní šablony mohli vytvořit libovolné množství a všechny by měly jednotný vzhled. Navíc pokud bychom chtěli provést změnu designu, stačilo by modifikovat pouze šablonu. Výsledný vzhled stránek by samozřejmě záležel také na CSS stylech, které byste stránce přiřadili.

Související články

Externí odkazy


Citováno z „http://ww2000w.multimediaexpo.cz/mmecz/index.php/Facelets“