4.2. Renderování UI komponent

V předchozí sekci jsme zmínili, že UI komponenty v JSF mají striktně oddělenou logiku od prezentace. Zatímco funkcionalita je definována ve třídách, které jsme vypsali výše, prezentaci komponenty zajišťují naprosto nezávislé třídy zvané renderery.

Renderer má za úkol převod JSF tagů na vhodný značkovací jazyk, který je srozumitelný pro dané výstupní zařízení, přičemž nejsme při výběru výstupního jazyka ničím omezováni. Je možné napsat si renderery pro HTML, WML, SVG, XUL aj. Sada rendererů, které mají stejný výstupní jazyk, se pak nazývá RenderKit. Referenční implementace JSF obsahuje pouze tzv. Standart HTML RenderKit,[29] který, jak z názvu vyplývá, umí převádět tagy pouze do HTML. Další RenderKity mohou být obsažený v jiných implementacích JSF nebo si je můžeme napsat sami. Tvorba vlastních rendererů je však bohužel mimo rozsah této práce. Pro bližší informace o tvorbě vlastních rendererů viz např. [5].

Tento model přináší vývojářům několik výhod. Jednou z nejzásadnějších je to, že celou aplikaci můžeme napsat pouze jednou a s využitím několika RenderKitů může fungovat na více výstupních zařízeních. Bez využití JSF by muselo být napsáno několik dílčích aplikací.

Architektura aplikace s a bez využití JSF (zdroj: vlastní; inspirován )

Obrázek 4.1. Architektura aplikace s a bez využití JSF (zdroj: vlastní; inspirován [5])


UI komponenty je možno nejen prezentovat na různá zařízení, ale i prezentovat různými způsoby na jednom zařízení. Jinými slovy, každá třída UI komponenty může mít v jednom RenderKitu přiřazeno více než jeden renderer a každý z těchto rendererů ji může prezentovat jiným způsobem. Jako příklad můžeme uvést třídu UI komponenty UICommand, která má v HTML RenderKitu přiřazeny dva renderery - Button a Link. Třída UICommand tak může být na HTML stránce prezentována buď jako tlačítko nebo jako hypertextový odkaz.

Dva způsoby zobrazení třídy UIColumn na HTML stránce (zdroj: )

Obrázek 4.2. Dva způsoby zobrazení třídy UIColumn na HTML stránce (zdroj: [8])


Page author tak může měnit vzhled stránky volbou různých JSF tagů, aniž by se muselo zasahovat do kódu logiky. Každý JSF tag tedy představuje jednu konkrétní kombinaci třídy UI komponenty a rendereru. To se odráží také v pojmenování tagů. Na obrázku 4.2 si všimněte, že název tagu je složen ze dvou částí - první část udává třídu UI komponenty (command) a druhá část třídu rendereru (Button respektive Link). V příloze D naleznete souhrnný výpis tříd UI komponent[30] a k nim přiřazených rendererů z HTML RenderKitu. Tabulka obsahuje pro lepší představu i obrázky.



[29] Pro více informací o Standard HTML RenderKit viz [9].

[30] V tomto výpise nenajdete všechny třídy UI komponent, které jsme uvedli v sekci 4.1 – „Základní principy UI komponent modelu“. Důvodem je fakt, že některé komponenty nemá smysl na stránce renderovat, neboť mají pouze řídící funkci. Např. třída UIViewRoot, zastoupena tagem view slouží pouze jako kořen pomyslného stromu komponent, třída UIParam zase pouze deklaruje proměnnou v rámci svého rodiče atp.

Creative Commons License
Uvedená práce (dílo), jejímž autorem je Bc. David Hanel, podléhá licenci Creative Commons Uveďte autora-Neužívejte dílo komerčně-Zachovejte licenci 3.0 Česko.