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í.

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.

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.