}w!"#$%&'()+,-./012345<ya

}w!"#$%&'()+,-./012345<ya MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY Vývoj e-learningové aplikace webu 2.0 s pomocí nástroje GWT BAKALÁŘSKÁ PRÁCE Michal Meloun Brno, podzim 2007

Prohlášení Prohlašuji, že tato bakalářská práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj. Vedoucí práce: RNDr. Tomáš Pitner, Ph.D. ii

Shrnutí Obsahem této práce je praktická ukázka vývoje webové aplikace pomocí nástroje GWT, včetně popisu použitých technologií. Výsledná aplikace je určena pro vytváření testů, které se skládají ze standardních testových otázek. Tyto testy jsou dále nabízeny k řešení ostatním uživatelům a vytvořená aplikace podporuje služby obvyklé pro web 2.0. Kromě vývoje samotného a popisu použitých technologií je obsahem práce analýza systému, uživatelský návod a administrátorská příručka. iii

Klíčová slova GWT, AJAX, webová aplikace, e-learning, web 2.0, MySQL iv

Obsah 1 Úvod............................................. 1 1.1 Předmět bakalářské práce.............................. 1 1.2 Struktura........................................ 1 1.3 Důležité pojmy použité v práci........................... 2 1.3.1 AJAX...................................... 2 1.3.2 Web 2.0..................................... 2 1.3.3 E-learning................................... 3 2 Technologie a prostředky použité k implementaci.................. 5 2.1 Google Web Toolkit.................................. 5 2.2 MySQL......................................... 6 2.3 Apache Tomcat.................................... 6 2.4 IntelliJ IDEA...................................... 7 3 Analýza aplikace...................................... 8 3.1 Požadavky....................................... 8 3.2 Tvorba a správa testů................................. 8 3.3 Řešení testů...................................... 8 3.4 Štítky.......................................... 8 3.5 Model užití aplikace................................. 9 3.6 Datový model..................................... 9 3.6.1 Tabulka Categories.............................. 9 3.6.2 Tabulka Users................................. 10 3.6.3 Tabulka Tests................................. 10 3.6.4 Tabulka Questions.............................. 11 3.6.5 Tabulka Answers............................... 12 3.6.6 Tabulka Comments.............................. 12 3.7 Technické požadavky................................. 12 4 Vývoj aplikace....................................... 13 4.1 Struktura GWT projektu............................... 13 4.2 Klientská část aplikace................................ 15 4.2.1 Uživatelské rozhraní............................. 15 4.2.1.1 Rozvržení objektů na stránce................... 16 4.2.1.2 Internacionalizace......................... 17 4.2.2 Systém sekcí aplikace a správa historie.................. 18 4.3 Data........................................... 19 4.4 Volání aplikační logiky................................ 19 4.4.1 Asynchronní komunikace.......................... 19 4.4.2 Definice služeb................................ 20 4.4.3 Volání služeb na straně klienta....................... 21 4.5 Zapojení aplikace................................... 22 5 Uživatelská příručka.................................... 25 v

5.1 Registrace a přihlášení uživatele.......................... 25 5.2 Tvorba a úprava testů................................ 26 5.3 Vyhledávání testů................................... 28 5.4 Řešení testu...................................... 30 5.5 Export a import testu................................. 31 6 Administrátorská příručka................................ 33 6.1 Vytvoření databáze.................................. 33 6.2 Zapojení aplikace................................... 34 6.3 Správa aplikace.................................... 35 7 Závěr............................................. 37 A Příloha............................................ 39 Literatura............................................. 40 vi

Kapitola 1 Úvod 1.1 Předmět bakalářské práce Cílem této práce je poskytnout praktickou ukázku, jak pomocí nástroje GWT (Google Web Toolkit) vyvíjet webovou aplikaci používající netriviální data, a vytvořený produkt zdokumentovat. Webové aplikace jsou populární především pro všudypřítomnost webového prohlížeče jako klienta a schopnost aktualizovat a spravovat je bez nutnosti šířit a instalovat software na potenciálně tisíce uživatelských počítačů. Doba, kdy byl web stavěn pouze na statických HTML (Hypertext Markup Language) stránkách, je již minulostí a dnes existuje mnoho technik a technologií pro vývoj webových aplikací, které generují dynamicky sérii webových stránek ve standardním formátu HTML/XHTML (Extensible Hypertext Markup Language). Velmi časté je používaní skriptování na straně klienta, zvláště pro vytvoření dojmu interaktivity bez nutnosti znovunačtení stránky, což řada uživatelů shledává rušivým. V poslední době se začínají používat technologie, které umožňují spolupráci skriptů na klientské straně se serverovou částí aplikace. Jedním z příkladů je AJAX (Asynchronous JavaScript and XML), což je technika vývoje webu využívající kombinaci HTML, JavaScriptu a rozhraní XMLHttpRequest, které umožňuje načítat klientským skriptům informace ze serveru, aniž by bylo třeba obnovovat celou stránku. Tato technika bude níže podrobněji popsána. Vývojářský nástroj GWT usnadňuje vývoj webových aplikací postavených na výše zmíněné technice AJAX. Byl uvolněn v květnu roku 2005 a existuje nemalé množství návodů a ukázek, jak s ním pracovat. Vývoj je ve většině případů demonstrován na poměrně triviálních aplikacích, což není vůbec na škodu. Smyslem této práce je pokusit se přiblížit práci s GWT při vývoji rozsáhlejšího projektu. Pro tento účel bude vyvinuta aplikace etesting sloužící pro podporu e-learningu a podporující služby obvyklé pro web 2.0. 1.2 Struktura Práce je rozdělena do několika kapitol. V rámci úvodní kapitoly je, kromě tohoto úvodu a seznámení s použitými prostředky, stručně popsáno pár pojmů, které souvisí s touto prací, a je potřeba znát je pro orientaci v problematice. Druhá kapitola se zabývá podrobnějším popisem technologií, které byly použity při vývoji a jsou nezbytné pro chod aplikace. Dále následuje kapitola věnující se analýze vyvíjené aplikace. Je zde popsáno, co se od ní očekává, jakým způsobem s ní budou uživatelé pracovat, jak bude aplikace ukádat data. Poté je pro- 1

1.3. DŮLEŽITÉ POJMY POUŽITÉ V PRÁCI stor věnován samotnému vývoji. Tato část je rozdělena do pěti podkapitol. První z nich se zabývá strukturou projektu. Smyslem druhé podkapitoly je seznámit se s prostředky, které nabízí GWT pro tvorbu klientské části aplikace. Další podkapitola se věnuje práci s daty. V následující části jsou popsány mechanizmy pro volání aplikační logiky, čili je zde přiblížena komunikace mezi klientskou částí aplikace a serverem. Poslední z těchto podkapitol se zabývá zprovozněním aplikace na Java aplikačním serveru. Obsahem zbylých dvou kapitol jsou informace pro uživatele a správce aplikace. Nutno poznamenat, že v rámci této práce nebudou podrobně vysvětlovány základní principy fungování GWT, a proto k jejich plnému pochopení je vhodné si tyto principy nastudovat. Dostačující může být například článek 1 od Romana Pichlíka, který byl publikován na serveru Interval.cz. 1.3 Důležité pojmy použité v práci 1.3.1 AJAX Termín AJAX se poprvé veřejně objevuje v dubnu roku 2005 v článku Jasse Jamese Garreta nazvaném Ajax: A New Approach to Web Applications. Myšlenky, na kterých je AJAX založen, jsou však výrazně starší. AJAX není technologie sama o sobě, ale jedná se o termín, který popisuje nový přístup k použití mnoha existujících technologií dohromady, včetně HTML či XHTML, CSS, JavaScriptu, DOM, XML, XSLT a XMLHttpRequest. Pomocí těchto technologií je možné inkrementálně aktualizovat uživatelské rozhraní webové aplikace bez obnovování celé prohlížené stránky. Aplikace je pak rychlejší a lépe reaguje na aktivitu uživatelů. Mezi nevýhody patří hlavně změny v používání paradigmatu webu, nebot webové stránky se chovají jako plnohodnotné aplikace se složitou vnitřní logikou, nikoli jako posloupnost stránek, mezi kterými se lze navigovat pomocí tlačítek Zpět a Další. Moderní aplikace založené na techince AJAX jsou však schopny funkce těchto tlačítek obnovit za použití různých technik, jak bude i v této práci ukázáno. Problémem může být i sít ová latence. Pokud není uživateli jasně signalizováno, že aplikace zpracovává jeho požadavek, pak jediné, co zaregistruje, je zpožděná reakce. Další nevýhodou je nutnost používat moderní grafické prohlížeče, které podporují potřebné technologie. V současné době je již k dispozici celá řada 2 rozhraní pro programování aplikací, které jsou založeny právě na technice AJAX. 1.3.2 Web 2.0 Tento termín označuje to, co někteří považují za další fázi vývoje webu, včetně jeho architektury a aplikací. Těžko popsat web 2.0 přesnou definicí, avšak tato další fáze rozvoje webu se vyznačuje několika rysy. Jedná se o změnu hypertextových stránek z izolovaných úložišt informací na zdroje obsahující informace i funkcionalitu, čímž se stávají platformou posky- 1. <http://interval.cz/clanky/google-web-toolkit/> 2. <http://ajaxpatterns.org/ajax_frameworks> 2

1.3. DŮLEŽITÉ POJMY POUŽITÉ V PRÁCI Obrázek 1.1: Porovnání modelu klasické webové aplikace s modelem webové aplikace založené na technice AJAX tující webové aplikace koncovému uživateli. Zároveň jde o sociální fenomén, nebot tvorba a distribuce webového obsahu je dostupná komukoliv, komunikace je otevřená, panuje snaha o decentralizaci autorit, sdílení a znovuvyužití. Důležitým rysem je více organizovaný a setříděný obsah s propracovanější hyperlinkovou strukturou. Je ale třeba upozornit, že se nejedná ani tak o revoluci, jako spíše evoluci, tedy postupný vývoj webu. 1.3.3 E-learning Tento pojem označuje vzdělávací proces využívající informační a komunikační technologie k tvorbě kursů, k distribuci studijního obsahu, komunikaci mezi studenty a pedagogy a k řízení studia. E-learning v sobě zahrnuje řadu dílčích aktivit, které mohou být propojené do uceleného systému, ale také nemusejí. Může se jednat o rozsáhlé kurzy plně distančního charakteru a propracované nástroje kolaborativního učení, naopak ale může jít jen o doplnění prezenční výuky. Vhodných ICT (Information and Communication Technology) nástrojů je řada. Jmenovat lze například vystavení studijních materiálů na internetu nebo intranetu, nabídku k nim vztažených autotestů, komunikaci prostřednictvím diskusních fór, emailů a dalších synchronních nebo asynchronních komunikačních nástrojů. Všechny uvedené ná- 3

1.3. DŮLEŽITÉ POJMY POUŽITÉ V PRÁCI stroje je vhodné integrovat a pro tyto účely proto slouží specializované aplikace pro řízení procesu vzdělávání. Těchto systémů je řada a kromě několika desítek nejznámějších existují stovky systémů s nejrůznějším rozsahem. 4

Kapitola 2 Technologie a prostředky použité k implementaci 2.1 Google Web Toolkit Již zadání této práce vyžaduje pro tvorbu aplikace použití nástroje GWT, jelikož smyslem práce je vývoj aplikace pomocí tohoto nástroje přiblížit. Konkrétně byla využita verze 1.4.10 pro operační systém Windows, což však není podstatné. K dispozici jsou také verze pro operační systémy Mac OS a Linux. Jak bylo uvedeno v úvodu, Google Web Toolkit 1 je vývojářský nástroj, který usnadňuje vývoj webových aplikací postavených na technice AJAX. Jedná se o produkt s otevřeným zdrojovým kódem od společnosti Google Inc., uvolněný v květnu roku 2005. Výhoda tohoto nástroje spočívá hlavně v tom, že se snaží JavaScript nahradit jazykem Java úplně, čili i na straně klienta. Dynamickou část aplikace je možno napsat v Javě a tento kód je poté GWT kompilátorem pro finální stránky přeložen do JavaScriptu. Toto nahrazení Javou je výhodné z hlediska vývoje, kdy se jedná o klasickou Java aplikaci, kterou je možno ladit a testovat. Emulace Java platformy představuje jednak podporu syntaxe a konstruktů jazyka na úrovni verze 1.4 a jednak části základního API (Application Programming Interface) z balíčku java.lang a java.util. Zmíněné Java API, například java.lang.string, je tedy reimplementováno v JavaScriptu. Díky tomu kód napsaný v Javě a přeložený do JavaScriptu může běžet v prostředí prohlížeče. Důležité také je, že při vývoji není nutné starat se o kompatibilitu mezi prohlížeči. Kompatibilní JavaScritptový kód generuje GWT kompilátor. Systém Google Web Toolkit se skládá celkem z pěti stavebních kamenů. Kromě zmíněného kompilátoru z jazyka Java do JavaScriptu a emulace Javy platformy mezi ně patří: vlastní komponenty pro tvorbu uživatelského rozhraní vývojový shell způsob asynchronní implementace vzdáleného volání Dále GWT poskytuje další užitečné funkce, které usnadňují tvorbu aplikací. Konkrétně je vhodné zmínit tyto: vlastní prostředky pro správu historie v aplikaci 1. <http://code.google.com/webtoolkit/> 5

2.2. MYSQL způsob řešení internacionalizace možnost skládání uživatelského rozhraní a stylování pomocí CSS nástroje pro vygenerování kostry aplikace a projektových souborů pro import do vývojového prostředí Eclipse JUnit integraci podporu rozhraní JSNI (JavaScript Native Interface) Výhodou vývoje aplikací pomocí tohoto systému by měla být hlavně jednoduchost a rychlost, kvalitní dokumentace, rostoucí komunita uživatelů, podpora od společnosti Google a podpora Java platformy. 2.2 MySQL Pro ukládání dat je použit databázový systém MySQL 2. Jedná se o produkt vytvořený švédskou firmou MySQL AB a je považován za úspěšného průkopníka dvojího licencování. K dispozici je jak pod bezplatnou licencí GPL (General Public Licence), tak pod komerční placenou licencí. Komunikace s touto databází probíhá pomocí jazyka SQL, avšak podobně jako u ostatních SQL databází se jedná o dialekt tohoto jazyka s některými rozšířeními. Tento systém byl od počátku optimalizován především na rychlost, a to i za cenu některých zjednodušení. Má jen jednoduché způsoby zálohování a donedávna nepodporoval pohledy, triggery a uložené procedury. Tyto vlastnosti jsou doplňovány teprve v posledních letech, kdy začaly nejčastějším uživatelům produktu již poněkud scházet. Pro potřeby vyvíjené aplikace je však tento systém plně dostačující. Od verze 3.23.23 navíc tento databázový systém podporuje fulltextové vyhledávání, které bylo pro vyhledávání na základě štítků v aplikaci použito. 2.3 Apache Tomcat Apache Tomcat 3 je relativně jednoduchý Servlet/JSP (JavaServer Pages) kontejner, který ve verzi 5.5 implementuje specifikace Servlet 2.4 a specifikaci JSP 2.0. Obsahuje ještě další nástroje, které umožňují vývoj a nasazení webových aplikací a webových služeb. Určitou zajímavostí může být fakt, že Tomcat je referenční implementací J2EE Servlet/JSP, což znamená, že pokud budou JSP stránky fungovat pod tímto serverem, budou fungovat také ve všech J2EE certifikovaných serverech na všech jejich platformách. 2. <http://www.mysql.com/> 3. <http://tomcat.apache.org/> 6

2.4. INTELLIJ IDEA 2.4 IntelliJ IDEA Aplikace byla vyvíjena v prostředí IntelliJ IDEA 6.0 4 od společnosti JetBrains. První verze tohoto vývojového prostředí byla uvolněna v lednu roku 2001 a brzy stala velmi populární. Jednalo se o první Java IDE (Integrated Development Environment) obsahující nástroje pro úpravu existujícího kódu za účelem zvýšení jeho kvality, aniž by tím utrpělo jeho vnějši chování. IntelliJ IDEA je inteligentní vývojové prostředí, které se zaměřuje hlavně na produktivitu programátora. Jedná se o velmi zdařilý produkt a podstatný je fakt, že toto IDE poskytuje mnoho užitečných nástrojů pro tvorbu GWT projektů a celkově vývoj značně usnadňuje. Nevýhodou může být skutečnost, že IntelliJ IDEA není bezplatně šířitelný produkt a nemusí být dostupný každému. Avšak ani příznivci jiných vývojových prostředí nemusí být zklamáni, nebot již byly vytvořeny přídavné moduly pro populární NetBeans i Eclipse. Konkrétně se jedná o moduly gwt4nb 5 a Cypal Studio for GWT 6. 4. <http://www.jetbrains.com/idea/> 5. <https://gwt4nb.dev.java.net/> 6. <http://www.cypal.in/> 7

Kapitola 3 Analýza aplikace 3.1 Požadavky Webová aplikace etesting umožní uživatelům vytvářet testy skládající se ze standardních testových otázek a jejich odpovědí. Takto vytvořené testy budou poté volně nabízeny k řešení dalším uživatelům. Tyto testy budou sloužit k procvičování látky z různých oborů. Nejedná se tedy o aplikaci, která by uchovávala rozsáhlé statistiky o bodových ziscích jednotlivých uživatelů z jednotlivých testů, a už vůbec nebude určena k ostrému testování. Aplikace bude podporovat služby obvyklé pro Web 2.0. 3.2 Tvorba a správa testů Možnost vytvářet testy bude mít každý uživatel přihlášený do systému, k čemuž bude stačit vyplnění registračního formuláře a samotné přihlášení. Test bude uživatel vytvářet pomocí formuláře, který bude k dispozici. Vytvořený test se bude skládat z testových otázek. Každá testová otázka by měla obsahovat text otázky, možné odpovědi v textové formě a informaci o správné odpovědi, která bude vždy právě jedna. Systém hodnocení bude pro všechny testy shodný. Testy, které uživatel vytvoří, bude mít možnost nadále upravovat. Dále bude možno testy exportovat a importovat ve formátu XML. 3.3 Řešení testů Vytvořené testy budou nabízeny k řešení všem uživatelům. Testy budou rozděleny do kategorií, které budou v systému vytvořeny. Uživatel si bude moci nechat seřadit testy dle různých kritérií. U každého testu bude uložen nejvyšší, nejnižší a průměrný bodový zisk. Na základě těchto hodnot bude moci každý řešitel svůj bodový zisk porovnat. Bude-li se řešiteli testu zdát, že vyhodnocení otázky je chybné, bude mít možnost tuto otázku označit jako chybně zadanou. Mimoto bude umožněno ohodnotit test známkou a přidat k němu komentář. 3.4 Štítky V rámci vytváření testů bude možno každou otázku či celý test označit pomocí štítků. Štítek je heslovitý údaj vztahující se k danému testu (dané otázce). Pomocí těchto štítků bude 8

3.5. MODEL UŽITÍ APLIKACE možno testy i samotné otázky seskupovat. To umožní jednak třídění testů dle vybraných štítků, ale nabídne to i zajímavou možnost sestavit si test z otázek vybraných z různých testů na základě vybraného štítku. Takto pak bude možné sestavit si test skládající se z otázek, které se budou vztahovat ke konkrétnějšímu tématu. 3.5 Model užití aplikace Funkční struktura aplikace je zobrazena na obrázku 3.1. Samotní uživatelé aplikace jsou zde dále rozděleni do dvou skupin na uživatele přihlášené do systému a uživatele nepřihlášené. správce úkolem správce je aplikaci zprovoznit a spravovat data uložená v databázi nepřihlášený uživatel má přístup ke všem testům, může je řešit a hodnit, může vyjádřit nesouhlas se zadáním otázky přihlášený uživatel má stejná práva jako uživatel nepřihlášený, navíc může k testům přidávat komentáře, vytvářet a spravovat testy vlastní 3.6 Datový model Pro způsob ukládání dat je navržen jednoduchý datový model, který je popsán na obrázku 3.2. Je vhodné pozastavit se na tomto místě nad způsobem ukládání štítků, které je v aplikaci možno přidat jednotlivým testům a otázkám. Seznam těchto štítků je u testu (otázky) uložen jako textový řetězec, kde jednotlivé štítky jsou odděleny mezerou. Tento způsob narušuje normalizaci databáze, avšak je vhodný pro implementaci fulltextového vyhledávání v MySQL databázi, proto jsou štítky v databázi ukládány právě tímto způsobem. 3.6.1 Tabulka Categories Tato tabulka slouží k ukládání kategorií, které jsou testům přiřazeny. Každému testu musí být přiřazena právě jedna kategorie. category_id jednoznačný identifikátor kategorie category_text název dané kategorie 9

3.6. DATOVÝ MODEL Obrázek 3.1: Model užití aplikace 3.6.2 Tabulka Users V této tabulce jsou uloženy uživatelé aplikace. user_id jednoznačný identifikátor uživatele aplikace name jméno daného uživatele password heslo uživatele šifrované algoritmem MD5 email email daného uživatele 3.6.3 Tabulka Tests V této tabulce se nachází informace o vytvořených testech. test_id jednoznačný identifikátor uloženého testu category_id identifikační číslo kategorie, která je testu přiřazena user_id identifikační číslo autora testu 10

3.6. DATOVÝ MODEL Obrázek 3.2: Datový model aplikace name název daného testu created datum uložení testu tags řetězec štítků testu max_score nejvyšší bodový zisk z daného testu min_score nejnižší bodový zisk z daného testu average_score datum uložení testu solved_counter řetězec štítků testu average_rating nejvyšší bodový zisk z daného testu ratings_counter nejnižší bodový zisk z daného testu 3.6.4 Tabulka Questions Tato tabulka je určena k ukládání jednotlivých otázek z vytvořených testů. question_id jednoznačný identifikátor dané otázky test_id identifikační číslo testu, do kterého otázka patří text text dané otázky 11

3.7. TECHNICKÉ POŽADAVKY tags řetězec štítků otázky objections_counter hodnota udávající, kolik uživatelů označilo danou otázku jako chybnou 3.6.5 Tabulka Answers V této tabulce se nachází odpovědi na uložené otázky. answer_id jednoznačný identifikátor dané odpovědi question_id identifikační číslo otázky, které odpověd patří text text dané odpovědi correct identifikátor správnosti dané odpovědi 3.6.6 Tabulka Comments Tato tabulka slouží pro ukládání komentářů, které jsou přidány jednotlivým testům. comment_id jednoznačný identifikátor daného komentáře test_id identifikační číslo testu, ke kterému byl komentář přidán user_id identifikační číslo autora komentáře added datum vložení komentáře text text daného komentáře 3.7 Technické požadavky Vytvořená aplikace bude pro svůj chod potřebovat podporu Javy na straně serveru a databázový systém MySQL. Pro ukázku bude zprovozněna v servletovém kontejneru Apache Tomcat nainstalovaném na serveru kore.fi.muni.cz. Databáze se pak bude nacházet na serveru db.fi.muni.cz. Klientskou část by dle autorů GWT mělo být možno spustit ve většině moderních internetových prohlížečů s aktivním JavaScriptem. Uvedena je konkrétně podpora pro prohlížeče Firefox/Gecko, Windows Internet Explorer, Opera a Safari. 12

Kapitola 4 Vývoj aplikace 4.1 Struktura GWT projektu Struktura vytvářeného projektu dodržuje obecná pravidla. Důležité je, že je oddělena část, která bude zprovozněna na straně serveru, od části klientské. Tato základní struktura bývá zpravidla vygenerována pomocí nástrojů vývojového prostředí. Samotný Google Web Toolkit poskytuje efektivní nástroj applicationcreator pro vygenerování kostry aplikace, avšak vytváření aplikací v moderním vývojovém prostředí usnadní mnoho zbytečné práce. Základní rozdělení projektu vypadá takto: cz.muni.fi.xmeloun2.etesting balík obsahující moduly definované v XML souborech a balíky nižší urovně cz.muni.fi.xmeloun2.etesting.client balík, jehož obsahem jsou zdrojové soubory klientské části, a balíky nižší úrovně cz.muni.fi.xmeloun2.etesting.server balík obsahující zdrojové soubory té části aplikace, která bude zprovozněna na straně serveru, a balíky nižší úrovně Balík cz.muni.fi.xmeloun2.etesting obsahuje právě jeden konfigurační XML soubor ETesting.gwt.xml popisující základní modul. V souboru jsou uvedeny tři moduly, ze kterých hlavní modul dědí, dále je zde nastavena česká lokalizace, nachází se zde definice zaváděcí třídy a koncových bodů pro jednotlivé objekty vystavené pro vzdálené volání metod. Celý obsah tohoto souboru vypadá následovně: <module> <!-- inherit the core web toolkit --> <inherits name= com.google.gwt.user.user /> <!-- inherit GWT i18n support --> <inherits name="com.google.gwt.i18n.i18n"/> <!-- inherit GWT XML support --> <inherits name="com.google.gwt.xml.xml"/> <extend-property name="locale" values="cs" /> 13

4.1. STRUKTURA GWT PROJEKTU <!-- specify the application entry point class --> <entry-point class= cz.muni.fi.xmeloun2.etesting.client.etesting /> <!-- expose services in order to remote call --> <servlet path="/usersservice" class="cz.muni.fi.xmeloun2.etesting.server.usersserviceimpl"/> <servlet path="/testsservice" class="cz.muni.fi.xmeloun2.etesting.server.testsserviceimpl"/> <servlet path="/questionsservice" class="cz.muni.fi.xmeloun2.etesting.server.questionsserviceimpl"/> </module> Balík cz.muni.fi.xmeloun2.etesting.public obsahuje zaváděcí stránku, což je běžný soubor formátu HTML, který je zaveden při spuštění aplikace. Obsahem souboru ETesting.html je, kromě běžného formátování HTML dokumentu, element pro připojení GWT modulu a externího CSS souboru. V těle dokumentu lze nalézt volání zaváděcího skriptu a iframe pro podporu historie v aplikaci. Vedle tohoto souboru se v balíku nachází soubor ETesting.css, ve kterém jsou definovány kaskádové styly, a složka s obrázky použitými v aplikaci. Celý obsah zaváděcí stránky vytvářené aplikace vypadá takto: <html> <head> <title>..:: ETesting Application ::..</title> <meta name= gwt:module content= cz.muni.fi.xmeloun2.etesting.etesting > <meta name="gwt:property" content="locale=cs"> <link rel=stylesheet href="etesting.css"> </head> <body> <script language="javascript" src="gwt.js"></script> <iframe id=" gwt_historyframe" style="width:0;height:0;border:0"> </iframe> </body> </html> Balík nesoucí název cz.muni.fi.xmeloun2.etesting.client obsahuje implementaci třídy ETesting, která je vstupním bodem aplikace, což znamená, že je vyvolána při spuštění aplikace. Tato třída implementuje rozhraní EntryPoint obsahující jedinou metodu onmoduleload(), ve které je popsáno, co se má vykonat v okamžiku spuštění. Dále se v klientské části nachází další balíky, jejichž obsah je stručně následující: cz.muni.fi.xmeloun2.etesting.client.bean balík obsahující třídy dodržující konvence JavaBean cz.muni.fi.xmeloun2.etesting.client.section balík obsahující třídy reprezentující jednotlivé sekce v aplikaci 14

4.2. KLIENTSKÁ ČÁST APLIKACE cz.muni.fi.xmeloun2.etesting.client.service balík obsahující definice rozhraní objektů, které jsou volány na serveru, a k nim analogická rozhraní v asynchronním módu cz.muni.fi.xmeloun2.etesting.client.ui balík obsahující definice komponent uživatelského rozhraní cz.muni.fi.xmeloun2.etesting.client.util balík obsahující definice pomocných tříd V balíku cz.muni.fi.xmeloun2.etesting.client.server lze pak nalézt implementace rozhraní, které se nacházejí v balíku cz.muni.fi.xmeloun2.etesting.client. service, přesněji řečeno jejich synchronních variant. Tento mechanizmus je popsán níže. 4.2 Klientská část aplikace 4.2.1 Uživatelské rozhraní Pro tvorbu uživatelského rozhraní nebyl použit žádný pomocný nástroj. Komponenty jsou definovány v patřičných třídách a vizuálně jsou upraveny pomocí kaskádových stylů definovaných v souboru ETesting.css. Na uživatelské rozhraní aplikace byly kladeny hlavně tyto požadavky: práce s aplikací by měla být snadná a intuitivní oblast celé stránky by měla být přehledná, vizuální zpracování spíše jednoduché vstupní data by měla být řádně kontrolována, aby nedošlo později ke kolizím kontrola vstupních dat by měla probíhat na úrovni klienta a to ihned v okamžiku jejich zadávání, nikoliv při odesílání na server (toto je řešeno pomocí patřičných validátorů a naslouchačů, nepřípustný formát textových řetězců by nemělo být možno ke zpracování vůbec odeslat) vhodně přiřadit naslouchače textovým polím a dalším komponentám, aby uživatel mohl potvrzovat zadaná data stiskem patřičné klávesy namísto stisknutím potřebného tlačítka (vyplňování formulářu je poté rychlejší a pohodlnější) souběžně s anglickou verzí aplikace by měla být vytvářena česká lokalizace o veškerých chybách, které vzniknou na serveru a při komunikaci s ním, by měl být uživatel informován (toto by mělo být řešeno informací v dialogovém okně, které přinejmenším informuje o vzniklé komplikaci) 15

4.2. KLIENTSKÁ ČÁST APLIKACE 4.2.1.1 Rozvržení objektů na stránce Jelikož klientská část aplikace je spouštěna v okně internetového prohlížeče, je potřeba se tomuto faktu přizpůsobit. Problematika základního rozvržení objektů je řešena v privátní metodě buildlayout() třídy ETesting, která je vyvolána hned při načtení zaváděcí stránky. Je zde realizováno základní rozmístění jednotlivých panelů a určení jejich prostorových vlastností. Vizuální zpracování je doplněno v patřičném souboru. Obrázek 4.1: Rozvržení objektů na stránce Stránka je rozdělena vertikálně do dvou oblastí, kde pravá část využívá jednu třetinu okna prohlížeče a obsahuje: panel s textovými poli pro přihlašování uživatelů do systému (obsah tohoto panelu je po přihlášení uživatele přestavěn tak, že obsahuje informace o přihlášeném uživateli a patřičné odkazy) formulář pro výběr parametrů, na jejichž základě budou vyhledány testy panel s textovým polem pro vyhledávání testů na základě štítků 16

4.2. KLIENTSKÁ ČÁST APLIKACE Tyto tři uvedené panely jsou definovány jako samostatné komponenty v balíku cz.muni. fi.xmeloun2.etesting.client.ui (pro vytváření nových komponent byla využita technika skládání již existjích komponent rozšířením třídy Composite). Panel pravý zabírá zbylé dvě třetiny oblasti stránky a obsahuje tyto komponenty: logo stránky nadpis a popis aktuální sekce panel, na kterém jsou zobrazovány obsahy jednotlivých sekcí Jak již bylo pospáno, vizuální zpracování je v systému GWT ošetřeno pomocí CSS. Každá základní komponenta má standardně nadefinovanou třídu, díky čemuž je upravitelná právě pomocí kaskádových stylů. V rámci API je pak možné každé komponentě uživatelského rozhraní přiřadit libovolnou CSS třídu. Při návrhu aplikace byla snaha přiřazovat vlastní styl většině objektů, aby bylo možno v případě potřeby vizuální stránku jednotlivých komponent snadno upravit bez zasahování do samotného kódu a aby tato úprava nevyvolala více změn, než-li je žádoucí. Naopak byla snaha spíše se vyhýbat úpravám stylů na globální úrovni. Ve většině tříd byla vytvořena privátní metoda setstylenames(), která přiřadí patřičné styly všem objektům dané třídy. V případech, kdy byl přiřazován styl lokálním objektům, bylo samozřejmě potřeba přiřadit jej ihned v daném bloku. 4.2.1.2 Internacionalizace Internacionalizace je řešena obdobným způsobem jako v jazyce Java. Základem lokalizace jsou soubory, ve kterých jsou přeložené texty, a Java rozhraní, které k nim umožňuje přístup. Tyto soubory i rozhraní lze nalézt v balíku cz.muni.fi.xmeloun2.etesting.client. ui.i18n. Pro přístup k textům bylo konktrétně vytvořeno rozhraní ETMessages, které obsahuje metody pro volání jednotlivých textů. Definované metody lze volat pomocí takto vytvořeného objektu: ETMessages messages = (ETMessages)GWT.create(ETMessages.class); String message = messages.getmessage(); Souběžně s anglickou verzí byla vytvářena česká lokalizace. Anglické texty lze nalézt v souboru ETMessages.preperties a českou variantu v souboru ETMessages_cs. properties. V rámci zaváděcí stránky vytvořené aplikace je definováno, že má být spuštěna česká varianta. Toto lze zrušit odstraněním elementu <meta name="gwt:property" content="locale=cs"> z hlavičky HTML dokumentu. 17