Moderní webové aplikace

Dovoluji si prilozit k nahlednuti mou bakalarku. Anotace je uvedena dale, prace je ke stazeni ve formatu PDF, mirne oklestena od smlouvy…

 

Dovoluji si prilozit k nahlednuti mou bakalarku. Anotace je uvedena dale, prace je ke stazeni ve formatu PDF, mirne oklestena od smlouvy…

 

Anotace

Tato práce se zabývá analýzou dostupných systémů pro správu dokumentů a obsahu, výběrem vhodného systému a realizací základní funkčnosti portálu pro správu multimediálních dat. V úvodní části se zabývá využívanými technologiemi a druhy systémů pro správu obsahu, v další části je provedeno srovnání používaných systémů a výběr vhodného kandidáta pro realizaci portálu pro uchování multimediálních dat, v závěrečné fázi části je popsána realizace základní funkčnosti komponent tohoto systému. Jedná se o součást Projektu MPO ČR evid. č. FT-TA3/121 „Výzkum a ověření systému pro záznam a dlouhodobou archivaci multimediálních dat s inteligentním vyhledáváním“.

Klíčová slova

CMS, DMS, Java, JSF, Alfresco, Portal, Multimedia

Abstract

The objectives of this project are to analyse systems for content or data managing, and to find suitable systém for realisation base functions of multimedia content portal. The project contains comparison of systems in use, selection of suitable candidate and parts of realization of this project – multimedia content portal. This portal is a part of Ministry of Industry and Trade of the Czech Republic project evid. nr. FT-TA3/121 „Research and verification system for record and longtime archiving multimedia data with intelligent searching“.

Keywords

CMS, DMS, Java, JSF, Alfresco, Portal, Multimedia

PDF ke stazeni

6 Použitá literatura

[1] GARRETT, Jesse James. Ajax: A new approach to Web Applications [online]. 2005-02-18.<http://www.adaptivepath.com/publications/essays/archives/000385.php> [2] ORT, Ed – BASLER, Mark. Ajax Design Strategise. Sun Developer Network [online]. 2006-09.<http://java.sun.com/developer/technicalArticles/J2EE/AJAX/DesignStrategies/> [3] TIM O'REILLY. What Is Web 2.0. O'Reilly Network [online]. 2005-09-30<http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html> [4] GEHTLAND, J. – GALBRAITH, B. – ALMAER, D. Pragmatic Ajax, The PragmaticBookshelf, 2006. ISBN 0976694085. [5] … Pokračovat ve čtení „6 Použitá literatura“

[1] GARRETT, Jesse James. Ajax: A new approach to Web Applications [online]. 2005-02-18.<http://www.adaptivepath.com/publications/essays/archives/000385.php>

[2] ORT, Ed – BASLER, Mark. Ajax Design Strategise. Sun Developer Network [online]. 2006-09.
<http://java.sun.com/developer/technicalArticles/J2EE/AJAX/DesignStrategies/>

[3] TIM O'REILLY. What Is Web 2.0. O'Reilly Network [online]. 2005-09-30
<http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html>

[4] GEHTLAND, J. – GALBRAITH, B. – ALMAER, D. Pragmatic Ajax, The Pragmatic
Bookshelf, 2006. ISBN 0976694085.

[5] JACOBI, J. – FALLOWS, J. R. Pro JSF and Ajax, Apres, 2006. ISBN 1590595807.

[6] ASLESON, R. – SCHUTTA, N. T. Foundations of Ajax, Apress, 2006. ISBN 1590595823.

[7] GROSS, CH. Ajax Patterns and Best Practices, Apress, 2006. ISBN 1590596161.

5 Závěr

Cílem tohoto projektu bylo nastudování dvou moderních a velice perspektivních technologií.
Jak Java Server Faces, tak i technologie AJAX mě velmi zaujaly, navíc jsem získal mnoho nových informací z oblasti vývoje webových aplikací, které v praxi vyvíjím. Stejně tak prostředí Java Studio Creator mě velice mile překvapilo a troufám si říci, že se jedná o velice komplexní a kvalitní nástroj pro vývoj tohoto druhu aplikací.

Cílem tohoto projektu bylo nastudování dvou moderních a velice perspektivních technologií.
Jak Java Server Faces, tak i technologie AJAX mě velmi zaujaly, navíc jsem získal mnoho nových informací z oblasti vývoje webových aplikací, které v praxi vyvíjím. Stejně tak prostředí Java Studio Creator mě velice mile překvapilo a troufám si říci, že se jedná o velice komplexní a kvalitní nástroj pro vývoj tohoto druhu aplikací.
Výhodou tohoto řešení je především dobrá dokumentace a podpora jak ze strany Sunu, tak i komunity, které vyvíjejí množství knihoven s otevřeným kódem, tak i aplikací, odkud je možné čerpat inspiraci a poučení. Dalším velkým kladem je platformová nezávislost Javy, která je základním kamenem technologie Java Server Faces a samozřejmě možnost generování výstupu na základě požadavků uživatele. Prakticky tedy není problém využívat služeb tohoto řešení na mobilních telefonech, PDA či jakýchkoliv jiných zařízeních.
Pokud vezmeme v úvahu, jak vypadaly webové aplikace v poměrně nedávné době a jak je tomu teď, kdy společnosti jako Google tlačí směr vývoje směrem kupředu v podobě webových kancelářských balíků, poštovních klientů kvalitnějších než standardní desktopové nástroje, připojíme takřka neomezenou kapacitu prostoru na webu a zvyšující se kapacity přípojek koncových uživatelů je jasné, že tuto oblast čeká další velký vývoj.

4 Ukázková aplikace

Jako ukázku práce s použitými technologiemi se pokusím projít část aplikace, jíž jsem spoluřešitelem. Tuto aplikaci vyvíjím pomocí nástroje Sun Java Studio Creator s interně distribuovanými knihovnami komponent a balíčkem ICEfaces, jedná se tedy o předposlední výše uvedenou strategii vývoje – „Použití knihoven Java Scriptu“.

Jako ukázku práce s použitými technologiemi se pokusím projít část aplikace, jíž jsem spoluřešitelem. Tuto aplikaci vyvíjím pomocí nástroje Sun Java Studio Creator s interně distribuovanými knihovnami komponent a balíčkem ICEfaces, jedná se tedy o předposlední výše uvedenou strategii vývoje – „Použití knihoven Java Scriptu“.

4.1 Prostředí nástroje Sun Java Studio Creator

Sun Java Studio Creator (konkrétně mnou požívaná verze 2 update 1) je velice komfortní RAD (Rapid Application Development) vývojové prostředí pro vývoj webových aplikací založených na technologii JSF. Prostředí je velice intuitivní, skládá se z hlavního editačního okna a roletek s komponentami vlevo a menu s vlastnostmi vložených komponent vpravo; každá editovaná webová stránka má tři režimy editace: jednak design mód, kdy je zobrazena mřížka, na kterou jsou ukotvovány jednotlivé komponenty, druhak JSP kód editované stránky, kde je možné ručně upravovat JSF tagy a v neposlední řadě mód umožňující editaci Javového zdrojového kódu příslušného backing beanu.
Součástí distribuce je i Sun Java System Application Server, já však jako webový kontejner využíval Apache Tomcat, kam stačilo nahrát distribuční adresářovou strukturu projektu (případně vytvořený .war archiv, který Java Studio Creator umí rovněž vytvořit).

Free Image Hosting at www.ImageShack.us

Obr.5: Prostředí Sun Java Studio Creatoru

 

4.2 ICEfaces – Objekt Tree

Při vytváření aplikace jsem využil aplikační framework ICEfaces, jehož knihovny tagů je možné importovat přímo do Java Studio Creatoru (na Obr.5 je vidět část komponent v okně Palette).
V této části práce bych se chtěl zmínit především o dynamicky generované adresářové struktuře, která využívá komponentu ICEfaces – Tree.
Požadavkem bylo zobrazit stromovou strukturu adresářů pouze do úrovně, kterou má uživatel otevřenou jako nejnižší. Struktura každého dalšího otevíraného adresáře musí být načtena v reálném čase přímo ze serveru a to bez nutnosti znovunačtení stránky, případně změně / uzavření jiných větví stromu.

4.2.1 Vytvoření BackingBeans

Jak jsem uvedl výše, použil jsem komponentu Tree. Každá větev tohoto stromu je objekt (TreeObject), který rozšiřuje třídu IceUserObject. Tato třída je zodpovědná za vytváření, mazání a kopírování sebe sama, zároveň drží některé informace o svém předku a v mé implementaci objekt s informacemi o adresáři, příznak rozbalení větve a příznak ooznačení.
Tyto větve jsou uloženy v TreeBeanu, což je upravený SessionBean. V tomto Beanu je zároveň definován objekt DefaultTreeModel, což je proměnná, na kterou je navázána komponenta Tree.

 

<managed-bean>
<managed-bean-name>tree</managed-bean-name>
<managed-bean-class>icefacewebapplication1.TreeBean</managedbean-
class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Tab. XXII: Definice beanu

 

Strom je vytvářen v Session Beanu, kde je objekt TreeBeanu definován a naplněn. Nejprve je načtena částečná adresářová struktura – kořen adresářového stromu a bezprostřední podadresáře – z databáze, potom jsou tato data postupně vkládána do vytvořeného stromu.

 

 

// vytvoreni roota a nacteni bezprostrednich podadresaru
Directory rootDir = thcSession.tHCClassFactory.getRoot();
this.directoryTreeBean.RenameRoot(rootDir);
List rootSubdirs = rootDir.getSubDirectories();
// vytvoreni bezprostrednich podadresaru roota
Directory tempDir;
for(int i = 0; i < rootSubdirs.size(); i++){
tempDir = (Directory)rootSubdirs.get(i);
this.directoryTreeBean.getRootTreeNode(). add(this.directoryTreeBean.CreateNode(tempDir));
}

Tab. XXIII: Vytvoření kořenového adresáře a bezprostředních podadresářů

Stejným způsobem jsou vytvářeny i všechny další podadresáře, ovšem pouze v případě klepnutí na konkrétní větev (a nenastaveného příznaku Explored).

4.2.2 Vytvoření komponenty a její napojení

Komponenta Tree je přímo napojena na DefaultTreeModel, což je objekt definovaný v TreeBeanu a předáván skrze BackingBean zobrazované stránky – Page1.jsp.

Free Image Hosting at www.ImageShack.us

Obr.6: Napojení komponenty na proměnnou s daty – dialog

<ice:tree binding="#{Page1.tree1}" id="tree1"
value="#{Page1.tree1Model}" var="item">

</ice:tree>

Tab. XXIV: Napojení komponenty na datový model – zápis v JSP

V takto nadefinovaném těle stromu jsou umístěny jednotlivé položky, treeNodes. A sice se jedná o grafickou ikonku se složkou (graphicImage) a text s názvem adresáře, což je vlastně odkaz (ovšem negenerující žádný case identifikátor pro navigační strom) – commandLink – který má definovánu jednak akci, při které jsou vytvářeny příslušné další větve (SessionBean1.nodeClicked) a jednak actionListener, jehož obslužná rutina je přímo v konkrétním objektu – TreeObject, který je volaný ještě před voláním vlastní akce, a v podstatě nedělá nic jiného, než nastaví v Session Beanu danou větev jako aktivní (přímo v Session Beanu se tato akce provést nedá).

 

<ice:treeNode binding="#{Page1.treeNode1}" id="treeNode1">
<f:facet name="icon">
<ice:panelGroup binding="#{Page1.panelGroup1}" id="panelGroup1">
<ice:graphicImage binding="#{Page1.graphicImage1}"
id="graphicImage1" value="#{item.userObject.icon}"/>
</ice:panelGroup>
</f:facet>
<f:facet name="content">
<ice:panelGroup>
<ice:commandLink action="#{SessionBean1.nodeClicked}"
actionListener="#{item.userObject.nodeClicked}"
binding="#{Page1.commandLink1}" id="commandLink1"
value="#{item.userObject.text}"/>
</ice:panelGroup>
</f:facet>
</ice:treeNode>

Tab. XXV: Definice větve stromu

Daný action Listener je metoda třídy TreeObject, která jako parametr vyžaduje předaný objekt ActionListener, který je při klepnutí na odkaz generován.

public void nodeClicked(ActionEvent event) {
treeBean.setSelectedNodeObject(this);
}

Tab. XXVI: Metoda volaná při stisku tlačítka – Action Listener

Stejně tak je definovaná metoda akce, ovšem tato je ve tříde SessionBean, nemá žádné parametry a vrací typ string, což je case identifikátor pro navigační strom, tedy v mém případě vrací null.

public String nodeClicked() {
// Jestlize jeste neni vetev prozkoumana…
if(!directoryTreeBean.getSelectedNodeObject().isNodeExplored()){
// Nacteni podadresaru vybraneho adresare z databaze

// vytvoreni bezprostrednich vetvi ve stromu

}
return null;
}

Tab. XXVII: Metoda volaná při stisku tlačítka – Action

 

4.3 Zhodnocení projektu

Projekt vytvářený v Java Studio Creatoru je možné vytvořit doslova několika klepnutími myši. Komponenty je možné vkládat pomocí myši, většina kódu je generována automaticky, stejně tak proměnné pro beany – vkládají se pomocí kontextového menu, gettery a settery jsou generovány automaticky.
Troufám si říci, je Java Studio Creator je silný nástroj pro tvorbu aplikací založených na JSF, před který je velice rychle pochopitelný i pro člověka, který se s touto technologií nikdy nesetkal a který neovládá ani jazyk Java. Velice rychle se s ním naučí pracovat a stejně tak rychle pronikne i do jazyka Java.

Free Image Hosting at www.ImageShack.us

Obr.7:Výsledná podoba komponenty – nerozbalený a rozbalený strom

 

3.6 Strategie návrhu

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.

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

Poslední z možností (poslední z hlediska členění odstavců této práce) je použití frameworku Google Web Toolkit (opensource produkt společnosti Google pod licencí Apache 2.0). Jedná se o balík obsahující Java-To-JavaScript kompilátor, prohlížeč (upravený Mozilla Firefox), knihovnu emulující JRE a knihovnu vlastních UI komponent.
Výhoda tohoto řešení spočívá v tvorbě aplikace čistě v jazyce Java. Díky tomu je možné využít jakékoliv vývojové prostředí pro vývoj a odladění Java aplikace s podporou GWT a poté aplikaci zkompilovat kompilátorem J2JS a nechat běžet jako čistě HTML/JavaScript aplikaci (tzv. Web mode) např. ve webovém kontejneru, nebo program přeložit do Java Bajtkódu a nechat běžet v Java Virtual Machine (tzv. hosted mode), kdy je možno využít možnosti ladění v rámci prostředí, včetně nastavení breakpointů a krokování aplikace.
Zřejmě jedinou nevýhodou tohoto řešení je, že veškerý JavaScript kód je generován J2JS kompilátorem, čili hledání případné chyby či nestandartního chování může být poměrně náročné.

public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, AJAX");
}
});
RootPanel.get().add(b);
}
}

Tab. XXI: Příklad jednoduché aplikace založené na GWT

3.5 Anatomie činnosti AJAXu

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.

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();“ />

Tab. XIV: JSP kód pro komponentu button s propojením na obsluhu události

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

if(window.XMLHttpRequest)
var xmlhttp = new XMLHttpRequest;
else if(window.ActiveXObject)
var xmlhttp = new ActiveXObject („Microsoft.XMLHTTP“);
else
return false;
xmlhttp.open(metoda, url, typ);
xmlhttp.onreadystatechange = function() {
obsluha(xmlhttp);
};

Tab. XV: Příklad vytvoření požadavku

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

xmlhttp.setRequestHeader(„Content-Type“,
„application/x-www-form-urlencoded“);
xmlhttp.send(content);

Tab. XVI: Odeslání požadavku na server

3.5.4 Zpracování požadavku serverem

Na straně serveru je volána obslužná rutina, spojená s daným URI. V jazyce Java se jedná o třídu dědící z třídy HttpServlet. Tato rutina zpracuje požadavek, provede příslušné akce a odešle zpět odpověď.

public class SomeActionServlet extends HttpServlet {
private ServletContext context;
public void init(ServletConfig config) throws ServletException {
super.init(config);
this.context = config.getServletContext();
}
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException {
String parametr = request.getParameter(„parametr“);
if (parametr != null) {
response.setContentType(„text/xml“);
response.setHeader(„Cache-Control“, „no-cache“);
response.getWriter().write(„<odpoved>zpracovano</odpoved>“);
} else {
response.setContentType(„text/xml“);
response.setHeader(„Cache-Control“, „no-cache“);
response.getWriter().write(„<odpoved>chyba</odpoved>“);
}
}

Tab. XVII: Jednoduchý příklad zpracování požadavku a odeslání odpovědi

3.5.5 Zpracování odpovědi objektem XMLHttpRequest

Klientská aplikace (prohlížeč) volá přidruženou callback funkci vždy, když dojde ke změně stavu atributu readyState objektu XMLHttpRequest. V této funkci je testován stav a pokud odpověď dorazila v pořádku (http status 200), je možné přečíst odpověď.

function obsluha(xmlhttp) {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var odpoved =
xmlhttp.responseXML.getElementsByTagName(‚odpoved’);

Tab. XVIII: Zpracování odpovědi – kontrola stavu HTTP odpovědi

3.5.6 Aktualizace HTML DOM reprezentace

Objekt v DOM, který bude měněn musí být identifikován jednoznačným ID, pomocí kterého JavaScript rozpozná, kde v dokumentu má provést změny.


<div id=“co_zmenit_id“> Obsah, který bude přepsán </div>

Tab. XIX: Identifikace objektu, který bude měněn
Obsah tohoto objektu (to, co je uzavřené mezi těmito tagy) je potom přepsán doručenou odpovědí, případně chybovým hlášením (v případě http status rozdílného stavu 200).

document.getElementById(‚co_zmenit_id‘).innerHTML = odpoved;

Tab. XX: Funkce měnící obsah specifikovaného objektu

2.4 Prostředky pro kontrolu vstupu od uživatele

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.

 

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.

Java Studio Creator umožňuje přidání tří typů validátorů: Double Precision Range Validator kontroluje, zda hodnota leží v zadaném intervalu pro typ float), Length Validator (ověřuje délku řetězce) a Long Precision Range Validator (kontrola intervalu pro typ long). Dále umožňuje použití dalšího validátoru, který je svázaný přímo s konkrétní komponentou: Requied (boolová hodnota, zda je potřeba tuto vlastnost vyplnit).

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

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

Generování chybové hlášky probíhá pomocí komponenty message z knihovny ui.
Komponenta message je svázána s komponentou, pro niž generuje chybovou hlášku pomocí atributu for.
<ui:message binding=“#{Page1.message1}“ id=“message1″
for=“textField1″/>
Tab. IV: Svázání chybové hlášky s komponentou, jejímuž validátoru je určena
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í.
Obr.2: Konvertory
<ui:textField binding=“#{Page1.textField1}“
converter=“#{Page1.dateTimeConverter1}“ id=“textField1″/>
Tab. V: Navázání konvertoru na komponentu Text Field

3 AJAX

3.1 Historie

Asynchronous JavaScript and XML (AJAX) je souhrnné označení technologie pro vývoj interaktivních webových aplikací. Dřívější webové stránky byly čistě statické, případně generovaly dynamický obsah pouze v případě znovunačtení celé stránky

3.1 Historie

Asynchronous JavaScript and XML (AJAX) je souhrnné označení technologie pro vývoj interaktivních webových aplikací. Dřívější webové stránky byly čistě statické, případně generovaly dynamický obsah pouze v případě znovunačtení celé stránky (pomocí skriptovacích jazyků jako např. PHP, ASP, CGI…), mírná dynamičnost byla možná díky použití JavaScriptu, případně DHTML pro vizuální efekty, ale především se jednalo o synchronní přístup – uživatel provedl akci (např. vyplnil formulář) a na základě této akce byly odeslány data na server, ten je nějakým způsobem zpracoval a vygeneroval znovu celou HTML stránku, kterou webový prohlížeč na straně klienta zobrazil.
Pomocí technologie AJAX je možné načíst pouze část stránky (typicky např. data v tabulce, případně obsah elementu DIV či SPAN), stejně tak odeslat pouze část dat na pozadí bez nutnosti překreslovat celou stránku. Tato vlastnost ostatně není žádná novinka – komunikaci se serverem na pozadí umožňoval už např. Macromedia Flash od verze 4, stejně tak mezi první průkopníky základu této technologie je možné považovat společnosti Microsoft a Netscape, které ve svých prohlížečích definovaly tagy IFRAME (Microsoft Internet Explorer 3) a LAYER (Netscape Communicator 4). V Microsoft Internet Exploreru 4 (a Netscape Communicatoru 4) bylo také možné používat Java applet běžící v prohlížeči, který na pozadí komunikoval se serverem. Za průlom se dá považovat až objekt XMLHttpRequest, který byl zaveden v prohlížeči Microsoft Internet Explorer.
Termín AJAX použil poprvé až v únoru roku 2005 Jesse James Garret ve článku Ajax: A new approach to web applications [1]. V té době již tuto technologii aktivně využívala společnost Google pro některé své služby, především Gmail, Suggest… Od té doby nastal doslova boom této technologie a dnes je součástí tzv. Web 2.0, na němž, jakožto nepsaném standardu je založena převážná většina moderních webových aplikací.

3.2 WEB 2.0

Podle WIKIpedie může za vznik pojmu Web 2.0 nakladatelství O’Reilly (konkrétně se jedná o článek Tima O’Reillyho „What is web 2.0“ [3]), který jej definovalo jako „druhou generaci internetových služeb, která lidem umožňuje spoluvytvářet a sdílet informace novým způsobem – například sociální sítě, stránky využívající wiki, komunikační nástroje a folksonomie“. Také konference „Web 2.0“, která proběhla v roce 2005 měla velké ohlasy.
Na jednu stranu se může zdát, že Web 2.0 je označením pro souhrn velice progresivních technologií, na stranu druhou již většina technologií, které do tohoto souhrnu spadají existuje delší dobu a weby, které tyto technologie využívají „označovány nálepkou“ Web 2.0 nejsou. Spíše než o revoluci se tedy jedná o pouhou evoluci, z důvodu poptávky po novějších technologiích – zvyšují se kapacity přípojek koncových uživatelů, počty uživatelů internetu rostou, místo obrázků jsou maily posílány videa, roste potřeba sdílení multimediálního obsahu… Jak bylo napsáno výše, jedná se o souhrn moderních technologií, které mohou být (při správném použití) velkým přínosem pro vývojáře a stejně tak dobrým pomocníkem pro uživatele.
Jak jsem napsal výše, Web 2.0 slučuje některé moderní technologie, do kterých patří zejména:
  • Na AJAXu založené Rich Internet Aplikace
  • Rich Internet Aplikace bez použití AJAXu
  • Kaskádové styly
  • Semanticky správné XHTML značkování
  • Informační kanály (RSS a Atom)
  • Sociální sítě (Folksonomie, weblogy, wiki…)
  • Sdružování služeb nabízených na různých webech na jedno místo (mohou sem spadat i uvedené RSS)
  • Representation State Transfer
  • Programová rozhraní webových služeb (SOAP)

3.3 Používané technologie

V úvodu jsem napsal, že AJAX je technologie, což není úplná pravda. AJAX je jakési zastřešení několika různých technologií, které jako celek tvoří mocný nástroj.
  • Definice dokumentu pomocí XHTML – prakticky se jedná o Document Object Model (DOM) reprezentující zobrazení webové stránky zapsaný jako stromová struktura
  • Definice stylů stránky pomocí Cascading Style Sheets (CSS)
  • Propojení zobrazené stránky za pomocí XML jazyka (je možné použít i jakýkoliv jiný formát, např. HTML, čistý text, či JavaScript Object Notation, XML je ovšem z hlediska rozšířenosti nástrojů pro parsování tohoto typu nejvhodnější)
  • Asynchronní metoda pro získávání dat – XMLHttpRequest
  • Rutiny v JavaScriptu umožňující spojení se serverem na pozadí a upravující nebo modifikující DOM stránky

3.4 Příklady praktického použití AJAXu

Technologie AJAX je ideální například pro následující činnosti:

  • Validace položek formulářů v reálném čase – v praxi se využívá např. pro ověření správnosti seriového čísla, neexistence loginu nově vytvářeného uživatele…
  • Autokompletace – v češtině se vžil pojem „našeptávač“ – při psaní do pole uživatel má možnost vybíraz z odpovídajích možností, aby nemusel vypisovat celou frázi
  • Načítání na vyžádání – načtení konkrétní části stránky na pozadí a vložení do existujícího DOM
  • Sofistikované komponenty – dynamicky generované stromové struktury, menu tabulky…
  • Serverem vynucená změna obsahu – aktualizování objektů na stránce bez zásahu uživatele – měnové kurzy, kurzy sázek, hlasování
  • Částečné odeslání – odeslání dat bez nutnosti překreslení celé stránky

2.8 Navigace mezi stránkami

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.

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>

Tab. XI: Příklad jednoduchého navigačního pravidla

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“/>

Tab. XII: Definice tlačítka v JSP

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

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

Obr.3: Navigace

2.7 Vytvoření JSP

Každá JSP stránka je definována XML strukturou, která obsahuje jednotlivé komponenty. Rozložení jednotlivých tagů je velice podobné struktuře HTML stránky, samotný HTML kód je generován dynamicky v případě požadavku na jeho zobrazení. Tagy obsahují tedy i mapování jednotlivých komponent na datový model.

Každá JSP stránka je definována XML strukturou, která obsahuje jednotlivé komponenty. Rozložení jednotlivých tagů je velice podobné struktuře HTML stránky, samotný HTML kód je generován dynamicky v případě požadavku na jeho zobrazení. Tagy obsahují tedy i mapování jednotlivých komponent na datový model.
Ke každé JSP stránce je přidružen PageBean. V této třídě jsou obsaženy definice jednotlivých komponent a jejich inicializační kód, stejně tak inicializační rutiny pro jednotlivé beany (metody getBean) a zachytávací rutiny pro události vyvolané akcí uživatele.
private TextField textField1 = new TextField();

public TextField getTextField1() {
return textField1;
}

public void setTextField1(TextField tf) {
this.textField1 = tf;
}
Tab. X: Část beanu stránky – obsluha komponenty TextField1