Moderní webové aplikace

Moderní webové aplikace

0

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

0

[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

0
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

0

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

0

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
Go to Top