Tento tag představuje obyčejné textové pole, se kterým jsme se už také setkali v naší první aplikaci (viz příklad 3.5 nebo obrázek 3.5). Z atributů zde můžeme zmínit readonly, který když nastavíme na true, hodnota pole nepůjde změnit. Atribut value zde přijímá buďto řetězec, nebo EL výraz odkazující na proměnnou backing beanu.

Podobný tag jako inputText, s tím rozdílem, že se nezobrazuje text, nýbrž hvězdičky. Používá se samozřejmě na hesla. Užitečný je atribut redisplay, který udává, zda si má komponenta udržovat svou hodnotu mezi požadavky či ne.

<tr>
    <td>Heslo:</td>
    <td><h:inputSecret id="heslo" value="#{user.heslo}" redisplay="false"/></td>
</tr>

Tento tag představuje vstupní pole pro delší víceřádkový text. Užitečné atributy jsou cols a rows, které udávají výšku a šířku pole. Jinak funguje taky stejně jako inputText.

<tr>
    <td>Vlastnosti:</td>
    <td><h:inputTextarea id="vlastnosti" value="#{user.vlastnosti}" cols="15" rows="6"/></td>
</tr>

Tento tag představuje nejjednodušší výstupní text. V základním tvaru generuje na HTML stránku čistý text, bez jakéhokoliv tagu. Pokud použijeme atribut style, vygeneruje se HTML tag span. Opět se můžete podívat na již zmíněný příklad 3.5.

Tag outputFormat umí vypsat text s parametry deklarovanými uvnitř svého těla pomocí tagů param z knihovny core tag library.

<h:outputFormat value="{0} má rád {1}.">
    <f:param value="Jirka"/>
    <f:param value="fotbal"/>
</h:outputFormat>

Uvedený příklad bude mít za následek vypsání textu "Jirka má rád fotbal".

U obou těchto tagů je poměrně důležitý atribut escape. Pokud je nastaven na true, automaticky se mění všechny znaky <, > a & na příslušné entity. Můžeme tak zabránit útokům typu cross-site scripting.

S tímto tagem jsme se také již setkali v naší první JSF aplikaci (viz příklad 3.5). Generuje klasické tlačítko pro potvrzení formulářových dat.^[31]

Tento tag funguje téměř stejně jako commandButton. Aby však mohl odkaz vyvolávat akce stejně jako tlačítko, je na HTML výstup generován klientský skript, který tuto možnost zajišťuje. Aktivní prvky, které slouží jako odkaz, musíme umístit do těla tagu. V následujícím příkladu může uživatel kliknout jak na text, tak i na obrázek. V obou případech se odkaz aktivuje.

<h:commandLink action="registrace">
    <h:outputText value="Registrovat"/>
    <h:graphicImage value="/registrace.jpg"/>
</h:commandLink>

Jak jsme již zmínili, jedná se o obyčejný odkaz, který nijak neovlivňuje JSF aplikaci. Atribut value zde slouží pro zadání URL, na kterou odkaz povede. Stejně jako u tagu commandLink umisťujeme aktivní prvky do těla tagu.

<h:outputLink value="http://www.google.com">
    <h:outputText value="Přejít na stránky Googlu"/>
</h:outputLink>

Toto je právě zmíněný tag pro binární volbu. Vytvoří jediný checkbox, který uživatel může buď zaškrtnout, nebo nechat prázdný. Atribut value musí odkazovat na proměnnou backing beanu, která je typu Boolean.

<h:selectBooleanCheckbox value="#{user.prijimatEmaily}"/>

Vytvoří listbox, ze kterého může uživatel vybrat libovolné množství položek. Jednotlivé položky se udávají buď v několika vnořených tazích selectItem, nebo v jednom tagu selectItems, jehož parametr value může odkazovat na kolekci, mapu, pole objektů či samostatný objekt typu SelectItem. Oba tyto tagy jsou z core tag library.

<h:selectManyListbox value="#{uzivatel.zaliby}">
    <f:selectItems value="#{user.seznamZalib}"/>
</h:selectManyListbox>

Objekt typu SelectItem má dvě hlavní vlastnosti - value a label. Label je popisek typu String, value však může být libovolného typu, neboť přijímá typ Object (viz příklad níže). Z datového typu, který si zde zvolíte, musíte následně vycházet při volbě datového typu, do kterého budete ukládat výsledek uživatelského výběru. Tato proměnná se udává v atributu value tagu selectManyListbox (viz příklad výše - #{uzivatel.zaliby}). V našem příkladu máme položky označené čísly, proměnná zaliby tedy musí být typu Integer respektive int. A jelikož se jedná o selekci s možností vícenásobného výběru, musí se jednat o pole. Samozřejmě musí být přítomen getter a setter. U selekcí bez možnosti vícenásobného výběru by se jednalo o obyčejnou proměnnou. Tento princip funguje ve všech následujících kolekcích

private int[] zaliby;
...
private SelectItem[] polozkyZalib = {
    new SelectItem(1, "sport"),
    new SelectItem(2, "četba"),
    new SelectItem(3, "zahrádkářství")
};

Funguje stejně jako tag selectManyListbox, jen místo listboxu vykresluje checkboxy, ze kterých se rovněž dá vybrat více hodnot. Užitečný je atribut layout, který říká v jakém směru se budou prvky seznamu vykreslovat. Může nabývat dvou hodnot - lineDirection (vykresluje prvky horizontálně) a pageDirection (vykresluje prvky vertikálně). V tomto příkladu jsme pro naplnění seznamu položkami použili několik tagů selectItem.

<h:selectManyCheckbox value="#{uzivatel.barvy}" layout="pageDirection">
    <f:selectItem itemValue="1" itemLabel="červená"/>
    <f:selectItem itemValue="2" itemLabel="modrá"/>
    <f:selectItem itemValue="3" itemLabel="bílá"/>
</h:selectManyCheckbox>

Opět funguje naprosto stejně jako předchozí dva tagy. Vykresluje combobox s možností vícenásobného výběru. Tento tag se v praxi příliš nepoužívá a některé prohlížeče mají s jeho zobrazováním problémy. Proto doporučuji používat raději selectManyListbox.

Vykresluje skupinu radiobuttonů, ze kterých lze vybrat právě jednu položku. Jinak funguje stejně jako předchozí tagy. Stejně jako u tagu selectManyCheckbox i zde lze uplatnit atribut layout.

Stejná funkce jako selectManyListbox s tím rozdílem, že lze vybrat pouze jedinou položku.

Vykresluje combobox, ze kterého lze vybrat právě jednu položku. Jinak funguje stejně jako předchozí tagy.

Tento tag vykreslí pouze jednu zprávu vztahující se ke konkrétní komponentě. Tu určíme pomocí atributu for, do kterého zadáme id komponenty.

<h:message for="jmeno" style="color: red;"/>

Tag messages vykreslí veškerý seznam zpráv, které FacesContext během celého životního cyklu nakumuloval. Pomocí atributu layout, který může nabývat buď hodnoty list, nebo table, určíme, zda se mají zprávy vykreslit v HTML tabulce či HTML seznamu.

 <h:messages style="color: red;" layout="list"/>

K definici layoutu používá obyčejnou tabulku. Pomocí atributu columns můžeme určit počet sloupců (defaultní hodnota je 1). Dovnitř tagu následně vkládáme komponenty, které se řadí na řádku zleva doprava a po sloupcích shora dolů. Počet řádků tedy není třeba určovat. Nastaví se automaticky podle počtu komponent, které do tagu vložíme.

<h:panelGrid columns="2">
    <h:outputText value="#{msgs.namePrompt}:"/>
    <h:inputText id="jmeno" value="#{user.jmeno}" required="true"/>
    <h:outputText value="#{msgs.agePrompt}:"/>
    <h:inputText size="3" value="#{user.vek}"/>
</h:panelGrid>

Tag panelGroup seskupí několik prvků do jedné skupiny. Používá k tomu buďto HTML tag div, či span, v závislosti na hodnotě atributu layout.

<h:panelGroup layout="block">
    <h:inputText id="jmeno" value="#{user.jmeno}">
    <h:message for="jmeno"/>
</h:panelGroup>

Velice jednoduchý tag, který vykreslí obrázek pomocí HTML tagu img. Atribut value udává cestu k souboru obrázku.

<h:graphicImage value="obr1.png"/>

Smysluplný popis možností JSF tabulky by byl pro tuto práci příliš rozsáhlý. Proto se pro více informací o tabulkách podívejte např. do [8] či [3].