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í?
- Při přístupu na stránku Wicket vykreslí běžné HTML fragmenty – statický text a odkaz.
- Na odkazu bude nastavená událost, kterou si obslouží wicket tak, že po clicku zavolá server ajaxem.
- Na serverové straně dojde k namapování události na instanci wicketové komponenty a v ní se zavolá událost onClick().
- V obsluze události může aplikační programátor doplnit do připravované ajaxové odpovědi sadu komponent a javascriptových kódů.
- Ajaxovou odpověď Wicket z paměťové struktury převede na XML stream a odešle ji na klienta.
- 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ů.
15.6.2011 at 08:32
Myslím, že Wicket framework daleko překračuje ostatní. Tedy při správném využití – klasický web doplňený Ajaxem. Pravě na tomto příkladu je vidět jak je práce s tímto frameworkem „jednoduchá“ a hlavně intuitivní. Ve srovnání s JSF Ajax nadstavbou ICEFaces jsou komponenty ve Wicket o poznání jednodušší. Vytvořit obyčejnou komponentu v ICEFaces (JSF) je poměrně peklo. Nehledě na nutnost registrace komponenty do cca 3 XML souborů. Wicket Ajax je opravdu paráda, akorát si nejsem úplně jistý využitím na RIA aplikace. Tam bych viděl mírnou potřebu vytvořit vlastní „nadstavbu“ nad Wicket aby byla práce trochu snazší. Ve Wicket 1.5 má být Ajax a Javascript přepracován a vylepšen. Docela se na to těším.
21.6.2011 at 22:05
S Wicket delam uz od verze 1.2 a je to opravdu primocare a produktivni reseni. Doporucuju. Na rozdil od JSF. S tim jsem delal jeste v nejakem SUN Creator-u v1 a nic moc uz tehdy, ten navrh se mne nelibi.