shmoulův blog

Pro vývojáře existuje mnoho možností, jak zahrnout podporu AJAXu do aplikace [2].
Může se jednat o kompletně vlastní kód na straně klienta i serveru, o využití existujících knihoven JavaScript kódu, kompletních frameworků se zabudovanou podporou AJAXu, či možnosti vývojových prostředí, které obsahují „kompilátor“ jazyka Java do JavaScriptu. Při návrhu aplikace je nutné zvážit všechna pro i proti jednotlivých metod, ne každá je vhodná pro řešení daného problému.
V této kapitole se pokusím nastínit vlastnosti jednotlivých metod, včetně jejich dobrých i špatných vlastností a uvést příklady knihoven či aplikací, které jsou na nich založeny.

3.6.1 Vlastní

Touto metodou se rozumí napsání všech částí aplikace ručně: tedy vytvořením DOM s CSS a napojením na JavaScript s ošetřením XMLHttpRequest počínaje a obslužnými rutinami pro zachytávání požadavků, jejich zpracování a vytváření odpovědí na straně serveru konče.
Nevýhody tohoto řešení jsou dobře viditelné: především je to ohled na bezpečnost – je nutné do aplikace vnést zabezpečovací mechanizmy a především dobře ošetřit neočekávané vstupy jak na straně serveru, tak klienta. Stejně tak je potřebná velmi dobrá znalost všech použitých technologií, protože veškerý kód bude nutné psát ručně (snad s výjimkou generování DOM a CSS). Další nevýhodou je optimalizace kódu pro funkčnost ve více prohlížečích a ošetření používání tlačítka zpět.
Na stranu druhou výhodou toho řešení je dokonalý přehled nad všemi částmi projektu a výborná kontrola nad vším, co se v aplikaci děje.

3.6.2 Použití knihoven JavaScriptu

Díky využití existujících knihoven JavaScriptu je možné skrýt nízkoúrovňové operace s objektem XMLHttpRequest. Klientská strana aplikace se také stane bezpečnější (JavaScriptový kód v knihovně je ověřen mnoha uživateli a vývojáři, na rozdíl od vlastního nízkoúrovňového kódu).
Knihovny JavaScriptu přináší také další, nepřímé, možné výhody: jsou jimi např. jednodušší operace s objekty v DOM, efekty zpříjemňující uživateli práci.
Jednotlivá řešení jsou také optimalizovaná alespoň na nejpoužívanější prohlížeče, není tedy nutné tento problém řešit, případně alespoň částečně pokrývají i možné použití tlačítka zpět, či požadavek o uložení stránky mezi oblíbené (v daném rozložení).
Mezi nevýhody může patřit potřeba využití více různých knihoven zároveň, když jedna nepokrývá všechny potřebné oblasti. Stejně tak se vývojář musí orientovat v JavaScriptu, i když základní nízkoúrovňová volání pokrývají knihovny, stále je potřeba propojit objekty v DOM s událostmi a akcemi.
Mezi známější knihovny patří Dojo toolkit (AFD, BSD licence), Prototype (MIT licence), Script.aculo.us (MIT licence) a Rico (Apache 2.0 licence).

3.6.3 Použití frameworku

Do této kategorie spadají především řešení, kde základním kamenem je použití technologie JSF. Silný základ v podobě knihoven komponent, spolu s obslužným kódem, běžící na straně serveru je dále rozšiřován o propojení aplikační logiky pomocí JavaScriptu pro jednotlivé komponenty na straně klienta. Samozřejmostí je možnost vytváření nových komponent, případně úprava již stávajících pro vlastní potřebu.
Snad největší výhodou je možnost využití vizuálního nástroje pro tvorbu takovéto aplikace – například Sun Java Studio Creator, kde je možné tvořit aplikaci metodou drag-and-drop, čímž odpadá požadavek dokonale se orientovat v jednotlivých použitých technologiích (alespoň teoreticky). Výhodou je také znovupoužitelnost vytvořených komponent, díky jejich „balíčkování“.
Využití specializovaného vývojového nástroje pro tvorbu tohoto druhu aplikace dále přináší možnost krokování kódu, tedy větší možnosti pro ladění aplikace.
Možné nevýhody mohou být snížená orientace v kódu, protože velkou část generuje vývojové prostředí automaticky, případně při tvorbě vlastních komponent je nutná opět velmi dobrá znalost používaných technologií, nutnost ošetřování nekompatibility jednotlivých prohlížečů, ukládání do záložek a ošetření tlačítka zpět.
Mezi nejznámější frameworky užívající tuto strategii patří ICEFaces (Mozilla Public 1.1 licence i komerční řešení), Ajax4jsf (Common Development and Distribution licence), Java Blueprints (BSD licence) a částečně i Google Web Toolkit (Apache 2.0 licence).

3.6.4 Generování z jazyka Java

Webové stránky využívající AJAX jsou stránky zapsané pomocí značkovacího jazyka HTML, nebo XHTML (mohou být samozřejmě generované na straně serveru, např. pomocí JSP).
Výhodou Javy na straně serveru (konkrétně Java Platform, Enterprise Edition) je přímá podpora validace dat, správa identity uživatele a především perzistentnost. Díky tomu je programátor ušetřen vytváření vlastních rutin pro tyto akce.

Obr.4: Model klasické webové aplikace a model aplikace postavené na AJAXu (převzato z [1] )

3.5.1 Generování události

Funkce JavaScriptu jsou volány důsledkem události vyvolané uživatelem. Je možné tedy namapovat funkci na event např. onClick na tlačítku. Pokud je tlačítko stisknuto, je volána tato metoda a stránka nadále zůstavá beze změny.

<input type=“button“ value=“Odeslat“ onClick=“odesli();“ />

3.5.2 Vytvoření objektu XMLHttpRequest

V závislosti na typu prohlížeče je vytvořen objekt XMLHttpRequest, je ověřen a provázán s obsluhou události návratu – callback() funkce. Pro otevření spojení jsou potřeba tři parametry: http metoda (v tomto případě POST či GET), adresu komponenty na straně serveru, která bude požadavek zpracovávat a boolovskou příznak, zda bude požadavek zpracováván asynchronně.

3.5.3 Připojení na server

Odeslání požadavku je realizováno funkcí xmlhttp.send(content). Pokud je pro
spojení použitá metoda GET (tu je vhodné použít v případě, že pro stejný odesílaný obsah je očekáván pokaždé stejná odpověd), u které může být obsah ponechán prázdný, jsou data připojena jako parametr k url. V důsledku toho je limitována velikost (délka řetězce) těchto dat.
Pokud jsou data odesílaná metodou POST (ta se využívá v případě, že odesílaná data zasáhnou do stavu serverové aplikace), je nutné připojit hlavičku Content-type. V tomto případě není velikost odesílaných dat nijak omezena (snad jenom možným vypršením časového limitu na straně serveru).

Validace – je možno ji definovat pro kteroukoliv vstupní komponentu. Po specifikované akci (typicky odeslání dat z formuláře) jsou zadaná data ověřena, pokud splňují danou podmínku. Pokud ano, pokračuje se ve zpracovávání přijatých dat; pokud ne, je generována případná definovaná chybová hláška a zpracování formuláře je ukončeno.

<ui:textField binding=“#{Page1.textField1}“ id=“textField1″
validator=“#{Page1.longRangeValidator1.validate}“/>

Tab. III: Navázání validátoru na komponentu TextField

<ui:message binding=“#{Page1.message1}“ id=“message1″
for=“textField1″/>

Konverze – nejen z důvodu potřeby interpretovat data srozumitelně pro člověka, který bude aplikací pracovat zavádí JSF konvertory. Díky nim, když je ve vrstvě Model používán např. Timestamp, ve vrstvě View je automaticky převeden a zobrazen jako řetězec – Datum – a ne jako počet sekund uplynulych od roku 1900. Navíc je možné nadefinovat konkrétní časovou zónu, pro kterou se má datum zobrazit, nebo třeba místní národní nastavení, takže se datum zobrazí dle zvyklostí v místě použití.

<ui:textField binding=“#{Page1.textField1}“
converter=“#{Page1.dateTimeConverter1}“ id=“textField1″/>

Tab. V: Navázání konvertoru na komponentu Text Field

Málokterá webová aplikace je tvořená pouze jedinou stránkou, většinou se jedná spíše o soustavu JSP stránek, které jsou vzájemně propojeny. Toto propojení není tvořeno statickými odkazy, jako v případě HTML dokumentu. Navigace je definována opět v XML struktuře (soubor navigation.xml), jako soustava navigačních pravidel, tzv. navigation-case elementů, ze kterých se vybírá na základě výsledku prováděné akce.

<navigation-rule>
<from-view-id>/Page1.jsp</from-view-id>
<navigation-case>
<from-outcome>prejdi</from-outcome>
<to-view-id>/Page2.jsp</to-view-id>
</navigation-case>
</navigation-rule>

Touto akcí může být například stisknutí tlačítka pro odeslání formuláře, čili přímé aktivování komponenty typu UICommand, nebo se může jednat o návratovou hodnotu některé metody, která mohla být vyvolána na základě nějaké předchozí akce. V praxi se jedná o návratovou hodnotu typu string, která je porovnávána s jednotlivými navigation-case elementy a na jejich základě může zobrazit další stránku (definovanou pomocí emelentu to-view-id).

<ui:button action=“#{Page1.buton1_action}“
binding=“#{Page1.button1}“ id=“button1″ text=“Přejít“/>

public String button1_action() {
return „prejdi“;
}

Tab. XIII: Handler zpracovávající událost stisku tlačítka

Datový model je definován Java Beany. Jedná se o standardní třídy jazyka Java, jejichž proměnné nejsou veřejné. K vlastnostem těchto proměnných se přistupuje pomocí tzv. getterů a setterů, čili metod, které mají prefix getNazevProměnné a setNázevProměnné, případně setAnoNe a isAnoNe pro proměnné typu boolean. Návratová hodnota (případně parametr) této metody musí samozřejmě odpovídat datovému typu této proměnné, nebo se musí postarat o konverzi a správnou interpretaci (tato konverze nemá nic společného s konvertory z knihoven tagů).
Tyto třídy musí mít neparametrický konstruktor (vzhledem k inicializaci pomocí konfiguračního souboru, viz. níže), případně být bez konstruktoru – překladač vytvoří výchozí bezparametrický konstruktor.

public class UserBean{
private Integer vek;
private String jmeno;

public UserBean(){
vek = new Integer();
jmeno = new String();
}

public Integer getVek(){
return this.vek;
}

public void setVek(Integer vek){
this.vek = vek;
}

public String getJmeno(){
return this.jmeno;
}

public void setJmeno(String jmeno){
this.jmeno = jmeno;
}
}

Tab. VI: Ukázka jednoduchého Beanu

Součástí distribuce Java Server Faces verze 1.2 a výše jsou základní knihovny html a core. V knihovně html jsou obsaženy komponenty pro tvorbu objektů zobrazených na HTML stránkách, v knihovně core jsou speciální komponenty, jako např. výše uvedené validátory a konvertory. Java Studio Creator dále přidává knihovny JSP-Page (vlastnosti stránky) a ui (rozšíření knihovny html).

<jsp:root version=“1.2″
xmlns:f=“http://java.sun.com/jsf/core“
xmlns:h=“http://java.sun.com/jsf/html“
xmlns:jsp=“http://java.sun.com/JSP/Page“
xmlns:ui=“http://www.sun.com/web/ui“
>

<ui:staticText binding=“#{Page1.staticText1}“ id=“staticText1″ />