Společnost Oracle v tomto roce představila novou sadu JSF komponent, které podporují koncept AJAX (Asynchronous JavaScript and XML). JSF komponenty jsou k dispozici v rámci vývojového nástroje JDeveloper 11g Technology Preview, který navíc dovoluje pracovat s těmito komponentami ve WYSIWYG módu.

Jak na AJAX aplikaci?

V případě, že se programátor rozhodne postavit AJAX aplikaci „na zelené louce", musí nutně vyřešit následující úlohy :

  • „odchycení" uživatelem vyvolané události
  • asynchronní komunikace klienta / prohlížeče a serveru
  • dynamické překreslení části HTML stránky

V principu má programátor před sebou dvě volby. Vše si naprogramovat sám a mít tak naprostou kontrolu nad během webové aplikace. Tento přístup je vykoupen delší dobou programování a navíc vyžaduje dobrou znalost technologií - JavaScript, XMLHttpRequest, DOM atp.

Druhou variantou je využití předpřipravených komponent, které veškeré AJAX implementační detaily skryjí a dovolí programátorovi zaměření na podstatu aplikační logiky. Na trhu je v současné době k dispozici celá řada AJAX komponent. Je na programátorovi, které knihovně dá přednost. Tento článek popisuje přístup programátorů společnosti Oracle a jejich způsob řešení, jakým způsobem se dají komponenty využívat a konfigurovat v rámci implementace AJAX aplikace.

Jak se programuje AJAX v JSF komponentách?

JSF komponenty umožňují běh jak klasickém režimu tak i v AJAX módu. AJAX mód se aktivuje u komponent nastavením následujících atributů

  • partialSubmit - přepínající mezi synchronní a asynchronní komunikací prohlížeče a web serveu
  • partialTriggers - deklarativním způsobem definovaná závislost komponenty na dalších komponentách umístěných na stránce
  • autoSubmit - povoluje automatické asynchronní zasílání vyplňovaných dat na server

Uvedené atributy dovolují určovat, jak má probíhat částečné překreslení stránky tzv. Partial Page Rendering (PPR). Atribut partialSubmit se typicky vyskytuje u tlačítek a odkazů (links) a změnou hodnoty na „true" se přepíná synchronní komunikace na komunikaci asynchronní. Prohlížeč asynchronně komunikuje se serverem a uživatel není blokován při další práci. V okamžiku, kdy server vrátí odpověď, prohlížeč překreslí vybrané části (komponenty) stránky.

Překreslující se komponenty stránky se určují staticky nebo dynamicky během zpracování uživatelem vyvolané události. Pro staticky definovanou závislost se využívá atributu partialTriggers, kde je hodnotou seznam identifikátorů komponent, na kterých je komponenta závislá. Komponenta je tedy vždy překreslena, pokud alespoň jedna z komponent v seznamu změnila svůj stav (např. stisk tlačítka, změna hodnoty v editačním poli, změna vybraného řádku tabulky).

Pro lepší představu vysvětlíme princip na příkladě stránky, která obsahuje několik komponent včetně komponenty inputText (editační pole) a komponenty commandButton (tlačítko). Hodnota atributu partialTriggers komponenty inputText obsahuje identifikátor komponenty commandButton. Komponenta commandButton má hodnotu atributu partialSubmit nastavenu na true. Při této konfiguraci se JSF stránka zobrazená v prohlížeči chová tak, že jakmile uživatel stiskne tlačítko, je proveden asynchronní dotaz na server, v rámci kterého dojde také k překreslení komponenty inputText. Ostatních komponent se tato uživatelova interakce nijak nedotkne.

V některých případech není programátor schopen staticky (ve fázi implementace) definovat závislost komponent na sobě respektive by takto definovaná závislost zbytečně zpomalovala běh aplikace (zbytečné překreslování a větší objem přenášených dat). V těchto případech je možné dynamicky definovat komponenty, které mají být překresleny v rámci zpracování uživatelem vyvolané události. Postup je jednoduchý, stačí v metodách, které obsluhují událost volat metodu addPartialTarget() jejíž argumentem je identifikátor komponenty, která má být v rámci zpracování události překreslena.

Atribut autoSubmit dovoluje automaticky reagovat na změnu hodnot v editačních polích. Můžeme tímto způsobem například ve formuláři aktualizovat věk uživatele na základě vyplněné hodnoty datumu narození.

Více informací o PPR včetně konkrétních příkladů najdete na URL http://myfaces.apache.org/trinidad/devguide/ppr.html .

Jaké typy komponent jsou k dispozici po instalaci nástroje JDeveloper 11g?

Instalace JDeveloper 11g obsahuje dvě základní sady AJAX/JSF komponent. První sada nese označení ADF Faces RC a druhá sada je označována jako ADF Data Visualization.

ADF Faces RC obsahuje více jak 100 JSF komponent založených na AJAX konceptu. Komponenty se dají rozdělit do následujících skupin

  • formulářové prvky (textové, číselné, datumové pole, výběr z více položek, ...)
  • logické členění stránky / aplikace (záložky, regiony, oddělovače, dialogy, lišty, ...)
  • navigační prvky (menu, tlačítka, linky, ...)
  • grafické prvky (loga, obrázky, ikony, ...)
  • tabulky (tabulka, stromová struktura, ...)
  • validatory (interval - číselný, datumový, délka textu, regulární výraz, ...)
  • drag & drop (source, target, ...)

 

ajax1

 

ADF Data Visualization představuje sadu grafických a tabulkových komponent, které dělíme do následujících skupin

  • grafy - více jak 50 typů grafů (sloupcový, 3D, koláčový, čárový, rozptylový, .. ) podporující více variant vykreslení (PNG, SVG, Flash) a podporující uživatelovu interakci (časová okna, modifikace rozsahu os, ...)
  • ukazatele - grafické prvky upozorňující na aktuální stav či varování
  • geografické mapy - dovolují kombinovat zobrazení podnikových dat a zobrazení geografických map
  • kontingentní tabulky - dovoluje provádět různé analytické úlohy, automatická drag & drop funkcionalita
  • gantt diagramy - slouží pro účely plánování a evidence zdrojů

 

ajax2

 

Co umí a neumí ADF Faces komponenty?

Pro první seznámení s komponetami je ideální vyzkoušet „ADF Faces Rich Client Components Demo". Jedná se o živou ukázku komponent včetně možnosti online změny atributů komponent a samozřejmostí je odkaz na zdrojový kód. Pro vyzkoušení stačí stáhnout WAR soubor a nasadit ho na aplikační server nebo ho otevřít v prostředí JDeveloperu. Více informací naleznete na URL http://www.oracle.com/technology/products/adf/adffaces/11/doc/demo/adf_faces_rc_demo.html .