Pro Javu existuje velké množství webových frameworků. Můžeme mít různá kritéria pro výběr toho nejlepšího frameworku pro náš projekt, ale podle mého názoru je jedním z hodně důležitých kritérií rozumná integrace JavaScriptu a Ajaxu. Pojďme se podívat, jaká je situace v oblíbeném frameworku Apache Wicket.

JavaScript

Apache Wicket je serverový framework, takže jsme omezeni možnostmi HTML/CSS. Můžeme si ovšem pomoci JavaScriptem a obrovským množstvím různých komponent, frameworků a knihoven, které pro něj byly v posledních letech vytvořeny. Typickým případem užití javascriptu ve Wicketu je rozšíření serverové wicketové komponenty klientským  javascriptovým kódem.

Následující kód naznačuje, jak vytvořit HTML WYSIWYG editor jako komponentu Wicketu. Řešení je jednoduché – použijeme existující komponentu, která vykresluje HTML tag <TEXTAREA> a rozšíříme ji o volání javascriptové metody, která zavolá inicializaci TinyMCE editoru.


public class HTMLEditor extends TextArea<string>{
@Override
protected void onAfterRender() {
super.onAfterRender();
getResponse().write(JavascriptUtils.SCRIPT_OPEN_TAG);
getResponse().write("makeTinyMCE('" + getMarkupId() + "');");
getResponse().write(JavascriptUtils.SCRIPT_CLOSE_TAG);
}
}

Omezení

Výše uvedený kód bude fungovat jen s některými frameworky. Problém je v tom, že HTML tag bude vytvořen na serveru a javascriptový kód tento tag nesmí znovu vytvořit, ale jen ho obalit vlastními HTML tagy. Jinými slovy javascriptový kód musí být navržen jako nevtíravý. Některé javascriptové frameworky a jejich komponenty s Wicketem fungovat můžou, například jQuery nebo YUI, u jiných může být integrace velmi problematická, například u ExtJS.

Ajax

Použití Ajaxu je ve Wicketu přímočaré, pojďme rovnou k ukázkovým kódům. Mějme ve stránce dvě komponenty, políčko, které zobrazuje aktuální (serverový) čas a odkaz, který umožňuje čas aktualizovat.


Label clockLabel=new Label("clock", new AbstractReadOnlyModel</string><string>() {
public String getObject() {
SimpleDateFormat fmt=new SimpleDateFormat("d.M. hh:mm:ss");
return fmt.format(new Date());
}
};
add(clockLabel);

Kód aktualizační odkazu:


add(new AjaxLink<void>("refresh") {
@Override
public void onClick(AjaxRequestTarget target) {
target.addComponent(clockLabel);
target.addJavascript("window.defaultStatus='"+Runtime.getRuntime().freeMemory()+"'");
}
};

Z pohledu wicketového programátora je aktualizační odkaz jednoduchý – po clicku se do ajaxové odpovědi vykreslí komponenta s datumem a (klientský) javascriptový kód, který nastaví nápis do statusového řádku. A co se děje na pozadí?

  1. Při přístupu na stránku Wicket vykreslí běžné HTML fragmenty – statický text a odkaz.
  2. Na odkazu bude nastavená událost, kterou si obslouží wicket tak, že po clicku zavolá server ajaxem.
  3. Na serverové straně dojde k namapování události na instanci wicketové komponenty a v ní se zavolá událost onClick().
  4. V obsluze události může aplikační programátor doplnit do připravované ajaxové odpovědi sadu komponent a javascriptových kódů.
  5. Ajaxovou odpověď Wicket z paměťové struktury převede na XML stream a odešle ji na klienta.
  6. Klientská část Wicketu (malá javascriptová knihovna) zpracuje XML stream – vymění HTML kód komponent za nově příchozí a vykoná došlý javascriptový kód.

Tato posloupnost operací je na první pohled složitá, ale ve skutečnosti je před aplikačním programátorem skrytá a práce s Ajaxem je pro programátora velmi příjemná. A to není vše, dostaneme i několik dalších bonusů:

  • Vykreslování komponenty při prvním přístupu na stránku a do ajaxové odpovědi se děje stejným kódem, nemusíme nic programovat dvakrát, což je někdy nezbytné při použití MVC frameworku.
  • Na server můžeme přenést nejen aplikační logiku, ale i „drobné detaily“ jako třeba (grafické) modifikace komponenty a jejiho chování (editovatelnost, validace, zobrazení nevalidního vstupu atp.).

Omezení

Praktické použití Ajaxu má také svá omezení. Jak jsme si řekli výše, Wicket obnovuje fragmenty HTML (tj. komponenty), ale problém je v tom, že javascriptové frameworky nepočítají s tím, že se jim může HTML kód „pod rukama“ změnit. Záleží na tom, jak je ta která javascriptová komponenta napsána – některé fungují bez problémů, někdy je potřeba volání jejiho konstruktoru podpořit vlastním kódem (to je i případ TinyMCE), některé javascriptové komponenty jsou nepoužitelné.

Závěr

Integraci JavaScriptu a Ajaxu do Wicketu považuji za velmi dobrou, dokonce tak dobrou, že předurčuje Apache Wicket jako framework pro vývoj RIA aplikací. Pro spoustu aplikací může být Apache Wicket vhodným prostředkem, jak vytvořit uživatelsky přívětivou moderní aplikaci a přitom programovat především serverově a za pomoci serverových prostředků.