Mendelova zemědělská a lesnická univerzita v Brně Provozně ekonomická fakulta
Tvorba interaktivních Flash animací s využitím XML Bakalářská práce
Vedoucí práce: Ing. Roman Malo, Ph. D.
Vojtěch Sedláček
Brno 2008
2 Zde je zadání práce.
Děkuji Ing. Romanu Malovi, Ph.D., za vedení, podporu a cenné připomínky při tvorbě této práce.
Prohlašuji, že jsem tuto bakalářskou práci vytvořil samostatně podle pokynů vedoucího bakalářské práce s využitím odborné a jiné literatury uvedené v seznamu.
Abstract Sedláček V. Creations interactive Flash animations with XML use. Bachelor thesis. Brno, 2008 This bachelor thesis identifies basic possibilities animations use above all for web environment and individual possibilities compares with the technologies Flash. Next it illustratings possibilities deprive of a Flash presentations on concrete example and it analyses basic ways of XML use in the area.
Abstrakt Sedláček V. Tvorba interaktivních Flash animací s využitím XML. Bakalářská práce. Brno 2008 Bakalářská práce identifikuje základní možnosti využití animací především pro webové prostředí a jednotlivé přístupy srovnává s technologií Flash. Dále demonstruje na konkrétním příkladu možnosti přípravy Flash prezentací s využitím XML a analyzuje základní možnosti využítí XML v dané oblasti.
3 Metodická východiska 3.1 Základní etapy vývoje softwarového díla . . . . . . . 3.2 Zpracování dynamického obsahu . . . . . . . . . . . . 3.2.1 Formáty dat . . . . . . . . . . . . . . . . . . . 3.2.2 Zdroje dat . . . . . . . . . . . . . . . . . . . . 3.3 Zpracování událostí . . . . . . . . . . . . . . . . . . . 3.4 Základy práce s XML dokumentem . . . . . . . . . . 3.5 Definice typu dokumentu (DTD) . . . . . . . . . . . 3.6 Postup vytvoření Flashové animace s podporou XML
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
17 17 18 18 19 21 22 24 26
4 Vlastní řešení 4.1 Úvodní specifikace . . . . . . . . . . . . 4.2 Vlastní návrh XML dokumentu . . . . . 4.3 Implementace pomocí ActionScriptu 2.0 4.3.1 Odstranění bílých znaků . . . . . 4.3.2 Práce s třídou XML . . . . . . . 4.3.3 Třída LoadVars . . . . . . . . . . 4.3.4 události ”drag and drop” . . . . . 4.4 Podpůrné nástroje pro využití výsledků . 4.4.1 Administrační rozhraní . . . . . . 4.4.2 MySQL . . . . . . . . . . . . . . 4.5 Možnosti implementace . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
27 27 27 28 28 29 31 33 35 35 36 36
5 Závěr
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
38
OBSAH
7
6 Literatura
39
Přílohy
40
A Definice typu dokumentu (DTD)
41
B Náhled uživatelského prostředí aplikace E-TEST
42
C Náhled uživatelského prostředí aplikace E-TEST small
43
1
ÚVOD A CíL PRÁCE
1 1.1
8
Úvod a cíl práce Úvod do problematiky
Prostřednictvím internetu se stále více uživatelů setkává s pojmem RIA (Rich Internet Application), jsou to aplikace, které se v rámci webového prohlížeče snaží překonat rozdíly mezi klasickou webovou a desktopovou aplikací jak vzhledem, tak i chováním. RIA technologie se dělí na dvě velké skupiny. Do první spadá technologie AJAX a do druhé platformy vyžadující ke svému běhu plugin (Adobe Flash, Microsoft Silverlight, Java, atd.). V této kategorii je nejvíce rozšířený Adobe Flash. Adobe Flash je komerční vývojové prostředí pro tvorbu interaktivních animací, her nebo bannerů. Jeho využití je však mnohem širší díky implementaci vlastního, výkonného objektově orientovaného programovacího jazyku ActionScript, který slouží k rozvinutí všech možností interaktivní animace. Flash mimo jiné velice dobře komunikuje s externími zdroji, jako jsou například XML data. XML (eXtensible Markup Language - rozšiřitelný značkovací jazyk) je dnes běžně rozšířený formát určený pro výměnu informací za pomoci rozšiřitelného systému popisných značek. Takové XML pak může být importováno do aplikace Flash a použito ke změně chování nějaké animace odpovídajícím způsobem, což učiní animaci vysoce dynamickou. Takto se dá využít Flash pro vytvoření jediného souboru SWF (formát ShockWaveFlash), který zobrazí uživateli při jeho zhlédnutí vždy odlišný obsah.
1.2
Cíl práce
Základním cílem práce je analyzovat a demonstrovat možnosti přípravy Flash prezentací s využitím XML dokumentů. XML seskupuje data a uspořádává jejich hierarchii, proto je také důležité zvládnut tvorbu správné struktury dokumentu a deklarovat jej pomocí DTD (definice typu dokumentu). Animace prostřednictvím technologie Flash však nejsou jediným řešením. Proto se nabízí také další možnosti přípravy animací na webu prostřednictvím jiných nástrojů. Nedílnou součástí práce je také jejich srovnání s Adobe Flash.
2
VYUŽITí ANIMACí V PROSTŘEDí WEBU
2
9
Využití animací v prostředí webu
Problematika zobrazení animací na webu je v dnešní době velice aktuální. Rozšířenost vysokorychlostního internetu umožňuje uživatelům bez problému prohlížet stránky plné grafiky, a navíc animované reklamní bannery jsou dnes důležitým ekonomickým aspektem téměř každé internetové prezentace.
2.1
Grafické formáty
Grafické formáty definují způsob popisu a uložení grafických dat. Existuje mnoho grafických formátů. Zde jsou uvedeny jen ty, které jsou určené pro publikování na internetu a podporované těmi nerozšířenějšími a nejperspektivnějšími prohlížeči. Tyto grafické formáty nejsou samy o sobě animacemi, můžeme je však při použití na webu obohatit o CSS, nebo java script a tím ovlivňovat výslednou podobu grafického výstupu. JPEG (Joint Photographic Experts Group) Je standardní metoda ztrátové komprese používané pro ukládání počítačových obrázků ve fotorealistické kvalitě. Tento grafický formát je vhodný pro přenášení a ukládání fotografií na webu. Není však vhodný pro ukládání textu nebo ikonek, protože zde použitá kompresní metoda vytváří na okrajích obrazu viditelné a rušivé artefakty. PNG (Portable Network Graphics) Jedná se o grafický formát určený pro bezdrátovou kompresi rastrové grafiky. Byl vyvinut jako náhrada a zdokonalení formátu GIF. Podporuje 24 bitové barevné hloubky a osmibitovou průhlednost, to znamená, že obrázek může být v různých částech průhledný. Je tedy vhodný pro webovou grafiku, nikoliv pro ukládání fotografií, jelikož výsledná velikost fotografie je nevhodná. Formáty PNG a JPEG však neumožňují animace. Tuto funkci má pouze GIF. Všechny formáty patřící do této kapitoly jsou vytvořeny na principu bitmapové grafiky. Z toho vyplívá, že taková grafika může být datově náročná a nelze ji zvětšovat bez ztráty kvality. GIF (Graphics Interchange Format) Je jedním z nejjednodušších metod tvorby animací pro webové aplikace. Zkratka GIF vznikla z počátečních písmen výrazu Graphics Interchange Format. Jedná se o jeden z nejpoužívanějších formátů, díky kterému se vytváří obrázky a animace už od roku 1987. Což svědčí o jeho kvalitě, protože tato technologie funguje s úspěchem dodnes. Jeho největšími výhodami jsou mizivá velikost výsledného souboru a jeho snadná tvorba. Principem formátu GIF je převedení všech barev do souřadnic určených
2.2
Video formáty
10
třemi číselně vyjádřitelnými hodnotami. Jde o takzvané RGB neboli červenou (Red), zelenou (Green) a modrou (Blue). (Ladislav Kožíšek, 2007) Mezi další velice užitečné a průlomové vlastnosti tohoto formátu můžeme řadit například použití komprimačního algoritmu LZW, který není vázán na žádný operační systém , procesor ani grafickou kartu. Také umožňuje, aby jedna barva z barevné palety byla v každém rámci uvedena jako barva průhledná. Díky tomu bylo možné vytvářet obrázky se zdánlivě neobdélníkovými okraji. Tento grafický formát je také nechvalně známý kvůli svým problémům z hlediska patentů. Jedna z prvních potíží nastala hned v začátcích, když tento samý kompresní algoritmus (LZW) byl patentován hned od dvou různých společností. Tím vznikl veliký zmatek v této oblasti. Od vzniku GIFu však uběhlo již více než dvacet let a kauza se vytrácí do ztracena. V USA byla účinnost patentu Unisysu zrušena dne 19. června 2003 přesně v 0:00. V dalších zemích, například v Evropě (Německo, Velká Británie, Francie, Itálie) či Japonsku patent vypršel o rok později, tj. o půlnoci mezi 18. a 19. červnem 2004. Poslední známý patent vztahující se ke GIFu vyprší dne 11.8.2006 (Pavel Tišnovský, 2006)
2.2
Video formáty
Mezi video formáty vhodné pro publikaci na webu je možné zařadit AVI (audio video interleave). AVI funguje jako multimediální „kontejnerÿ, který obsahuje jednu nebo více datových stop. Každá stopa ukládá jeden typ dat: zvuk, video, efekty či text (pro zobrazení titulků). Každá stopa také obsahuje digitálně zakódovaný mediální tok zakódován pomocí specifického kodeku. Video v souborech s příponou avi je komprimováno MPEG-4 kodekem. Nejčastěji to bývají DivX a XviD. Rozdíl mezi nimi je hlavně v tom, že XviD je open source, zatímco DivX je komerční projekt stejnojmené firmy, jehož základní verze je zdarma. Další vhodný kandidát je MPEG (Motion Picture Experts Group), což je název skupiny standardů používaných na kódování audiovizuálních informací (např. film, obraz, hudba) pomocí digitálního kompresního algoritmu. Princip MPEG komprese spočívá v tom, že každý X-tý (dvanáctý pro normu PAL) snímek je uložen kompletní (tzv. I-frame neboli Index frame) a ostatní jsou definovány jako rozdíly mezi jednotlivými I-framy. Princip MPEG komprese spočívá v tom, že každý X-tý (dvanáctý pro normu PAL) snímek je uložen kompletní (tzv. I-frame neboli Index frame) a ostatní jsou definovány jako rozdíly mezi jednotlivými I-framy. Posledním zmíněným bude Windows Media Video (wmv), což je videoformát vyvinutý společností Microsoft pro několik kodeků chráněných zákonem.
2.3
Formáty založené na XML
2.3 2.3.1
11
Formáty založené na XML SVG
Do webového prostředí se mnohem více než rastrová grafika hodí vektorová grafika. Například proto, že v samotných HTML stránkách je možné měnit velikost písma a stránka se automaticky znovu zalomí. Ovšem rastrové obrázky mají stále stejnou velikost nehledě na obecně několikrát vyšší nároky a na kapacitu linek u rastrové grafiky. Proto vznikl i relativně mladý vektorový grafický formát SVG (Scalable Vector Graphics). Především se jedná o plnohodnotný vektorový formát podporující základní geometrické tvary, cesty (obecné křivky), pokročilou práci s textem, průhlednost apod. Jedná se o vlastnosti, které můžeme v prakticky stejné podobě najít například i v PostScriptu či Portable Document Formátu. (Pavel Tišnovský, 2007) Z programátorského hlediska je SVG ve skutečnosti XML aplikací. Všechny grafické objekty a ostatní informace jsou uloženy jako uzly v XML formátu. Díky XML je také možné využít DOM (Dokument Object Model) a měnit, ubírat nebo přidávat jednotlivé uzly a tím ovlivňovat výslednou podobu grafického výstupu. DOM lze samozřejmě ovládat i programově například pomocí javaskriptu, který je dostupný z prakticky jakéhokoli webového prohlížeče. SVG umožňuje nejen tvorbu statických obrázků, ale i animací a to navíc interaktivních. To znamená, že můžeme za jeho pomoci vytvářet jednoduché hry, mapový portál nebo dokonce grafický editor integrovaný do HTML stránek. K použití SVG je nutné mít nainstalovaný plug-in. V dnešní době však existují i prohlížeče, které jej podporují nativně tj. bez nutnosti instalace zásuvného modulu. 2.3.2
VML
Vector Markup Language (VML) umožňuje tvorbu vektorové grafiky, stejně jako SVG, a také používá syntaxi XML (viz obr. 1). VML se také velmi podobá HTML, proto by přechod na tento formát neměl dělat problém tomu, kdo se alespoň okrajově zabývá touto problematikou. Narozdíl od HTML však VML formátuje nejenom obsah, ale zároveň jej i vytváří. Výhody tohoto formátu plynou jak z podstaty vektorové grafiky, tak z hlediska XML formátu popsané již v části o SVG. 2.3.3
Microsoft Silverlight
Další z technologií v této oblasti je novinka od Microsoftu Silverlight, která by se měla stát hlavním konkurentem Flashe. Pod označením Silverlight (dříve Windows Presentation Foundation/Everywhere) se v podstatě skrývá runtime dovolující spouštět v prostředí webového prohlížeče elektronické prezentace sestávající se z animací, vektorové grafiky, videa, interaktivních prvků a dalšího obdobného obsahu.
2.4
Adobe Flash
12
Obr. 1: ukázka VML dokumentu
Základem Silverlight je podmnožina Windows Presentation Foundation grafického subsystému obsaženého v „.NETÿ Framework 3.0 a předinstalovaného ve Windows Vista. Tato technologie dovoluje popisovat textový, vektorový, interaktivní a multimediální obsah pomocí na XML založeného jazyka XAML. Součástí Silverlight je dále podpora přehrávání videa a audia ve formátech WMV, WMA a MP3. (Richard Krejčí, 2007) XAML umožňuje popisovat textový obsah, grafický bitmapový obsah, vektorový obsah a multimediální obsah. Jazyk XAML slouží pro definování prezentačního rozhraní aplikace. Interaktivita a aplikační logika znamenají obsluhu událostí (např. pohyb kurzoru nad nějakým objektem, stisknutí tlačítka, nebo jiného ovládacího prvku) která je v verzi Silverlight 1.0 zajištěná programovým kódem v jazyce JavaScript. Ve verzi 1.1 je možné aplikační logiku programovat už v „.NETÿ jazycích.
2.4 2.4.1
Adobe Flash Historie
Flash vznikl pod názvem FutureSplash v roce 1996, jako jednoduchý program pro vytváření a animování vektorových kreseb. Tato verze sice ještě neobsahuje skriptování ActionScript, ale nastiňuje nadějný směr vývoje webových animací. V roce 1997 firma Macromedia kupuje FutureSplash a přejmenovává ho na Macromedia Flash 1.0. Následuje verze 2, která dovoluje základní skriptovou manipulaci s přehráváním animace. Objevují se prvky jako tlačítko a grafika, vzniká proměnná. Verze 3 přináší ozvučení a s ní spojené příkazy. Dále pak možnost skriptově načítat SWF animace.
2.4
Adobe Flash
13
Verze 4 vyšla v roce 1999 a dalo by se říct, že tato verze byla do jisté míry revoluční. Soubor základních skriptovacích příkazů byl rozšiřován do skriptovacího jazyka . Nové příkazy představené ve Flash 4 zahrnovaly proměnné, výrazy, operátory, podmíněné příkazy a smyčky. Flash se stával v této době velice populární. Jeho hlavní výhodou bylo zobrazení vektorové grafiky a animací v prohlížeči i přes velmi omezené připojení k internetu, se kterým v té době byla většina lidí nucena pracovat. Verze 5 je opět přelomová. Vznikají komponenty a objekty se svými metodami i vlastnostmi. Je možné vytvářet vlastní funkce. Většina příkazů je přeorientovaná na objekty. Vzniká přehlednější syntaxe a podporována je komunikace se serverem pomocí XML Socket. Verze 6 (MX) nabízí další rozšíření objektů a metod. Vznikají UI komponenty a spolupráce s videem. Flash player 6 podporuje obousměrný streamovaný přenos zvuku a videa pomocí kamer a mikrofonů. Následuje 7. verze, pojmenovaná MX 2004, která přináší vylepšené rozhraní, lepší zpracování videa a nové efekty zejména pro práci s textem, na který je nabalena podpora CSS. Dále mnoho novinek v uživatelském prostředí a v neposlední řadě ActionScript 2.0. 3. prosince 2005 společnost Adobe Inc. odkupuje Macromedii s celým portfoliem produktů, následuje vydání Flashe 8. Ten opět zlepšuje práci s videem včetně alpha kanálu, blend filtry, možností cacheovat vektory jako rastry, ClearType antialiasingem písma, vytvářením multiplatformních animací a spoustou dalších vylepšení v AS2.0 V roce 2007 následuje zatím poslední verze Adobe Flash označována jako CS3, u kterého je nejvýznamnější novinkou ActionScript ve verzi 3.0. Vedle něj pak příjemné změny vzhledu, uživatelského komfortu a vylepšení kreslicích nástrojů a přidání spousty nových funkcí, které přispívají k zefektivnění vývoje a práce v prostředí editoru Flash 9. 2.4.2
Flash jako designerský nástroj
Vývojové prostředí Flashe (viz obr. 2) obsahuje spoustu grafických a tvůrčích nástrojů, jako například nástroje pro tvorbu grafických elementů, nástroje pro jejich animaci, nástroje pro vytváření prvků uživatelského prostředí a jejich interaktivitu. Nejnovější verze editoru Flash aplikací nese název Adobe Flash CS3, která s sebou opět nese spoustu vylepšení o proti předchozím verzím. Nejvýznamnější novinkou je ActionScript 3.0, a spolu s ním došlo ke změnám vzhledu, vylepšení kreslicích nástrojů a aplikace je celkově uživatelsky komfortnější. Tvůrčí prostředí v aplikaci Flash je velice flexibilní, avšak pro začátečníka na první pohled možná trochu nepřehledné. Každý dokument se skládá ze čtyř základních položek. První z nich je časová osa (anglicky Timeline), což je vizuální reprezentace každého snímku (frame), vrstvy (layer) a scény (scene) filmu ve zhuštěné podobě. Editační panel (Edit Bar), který zobrazuje identifikační text a nabídky pro výběr symbolů a scén, s nimiž lze pra-
2.4
Adobe Flash
14
Obr. 2: Vývojové prostředí Flashe
covat. Další je tzv. jeviště (anglicky stage), tj. efektivní oblast, v níž se zobrazuje (přehrává) Flashový dokument (film). Poslední položkou je pracovní oblast, což je místo, které obklopuje scénu během procesu tvorby filmového dokumentu. V konečném publikovaném dokumentu se ale nezobrazuje. Kresby, animace a interaktivita jsou tvořeny v souborech Flashového formátu. Tyto soubory mají koncovku .fla. Pokud je výtvor publikován na webu, musí být překonvertován do formátu s koncovkou .swf (vyslovováno jako swif). Tato práce bude zaměřována především na ActionScript a integrované podpoře XML, proto se Flashi jako designerskému nástroji věnuje pouze okrajově. 2.4.3
ActionScript
ActionScript 1.0 se poprvé objevil ve Flashi 5. Z počátku byl tento jazyk sice mocný, ale málo flexibilní a také neefektivní. Úlohy, na které jiným skriptovacím, nebo programovacím jazykům stačily milisekundy, potřeboval ActionScript dokonce sekundy. Navíc v něm nebylo snadné implementovat techniky objektově orientovaného programování. Později s novou verzí Flashe byl uveden ActionScript 2.0., který byl obohacen o některé nové schopnosti, striktní syntax a také byla vylepšena rychlost zpracování
2.4
Adobe Flash
15
úloh. Samotnou svou povahou je ActionScript od verze 2.0. přísnější a dbá na striktní zápis kódu. Na první pohled by tato změna mohla mírně odradit, pravdou však je, že zabraňuje při psaní kódu vytváření zbytečných chyb a donutí programovat efektivněji a lépe. Nyní se ActionScript nachází ve verzi 3.0. Lze o něm říci, že patří do oblasti programovacích jazyků profesionální úrovně. Jedná se o výkonný, vyspělý, objektově orientovaný programovací jazyk, a proto vyžaduje větší znalosti pojmů objektově orientovaného programování než jiné verze ActionScriptu. ActionScript dodává svým animacím velkou dávku interaktivity a dynamiky, která je tímto výrazně odlišuje od ostatních. 2.4.4
Ukázka webu Beatport.com
Beatport je americký on-line obchod od společnosti Native Instruments s taneční hudbou. Na webu je již od roku 2004 a za tuto dobu si našel spoustu zákazníků. Celý web je vypracován kompletně ve Flashi, proto se při prohlížení e-shopu zákazník pohybuje pouze na jedné stránce a v podstatě vůbec nepoužívá ovládacích prvků browseru. Z počátku je nutné si stránku pečlivě prohlédnout a prostudovat ovládací prvky, aby se po této aplikaci mohl pohybovat. Ovládání je však velice pohodlné, intuitivní a každý si na něj velice rychle zvykne. Přestože tento obchod obsahuje už více než 100 000 skladeb, vyhledávání v něm není složité díky členění hudby do katalogů podle autora, labelu, žánru atd. Celý design webu je kompaktní, a co je velice důležité, uživatelsky přívětivý (viz obr. 3). Obsah této aplikace je samozřejmě dynamicky načítán z databáze, obsahuje spousty aktuálních statistik a sekcí řazených podle oblíbenosti zákazníků. Velikou výhodou oproti jiným obchodům svého druhu je integrovaný mp3 přehrávač, ve kterém je možné přehrávat dvouminutové ukázky skladeb v kvalitě 64 kbps nezávisle na prohlížení ostatního obsahu e-shopu. Samozřejmostí je využití tzv. streamování, takže přehrání skladby je prakticky okamžité. Nevýhody tohoto webu jsou špatná indexace textu pro vyhledávače a mírně delší doba načítání než je obvyklé. Beatport si i přesto našel obrovské množství zákazníků po celém světě a dokazuje, že pomocí Flashe se v určitých oblastech dají vytvořit odvážné a úspěšné projekty. 2.4.5
Výhody a nevýhody
Je zřejmé, že Flash má své výhody i nevýhody, a proto je nutné se při tvorbě webového projektu rozmyslet, jakým směrem se bude ubírat. Pokud se bude jednat o rozsáhlý web z mnoha texty, je bezesporu lepší řešení XHTML doplněný animacemi SVG, nebo VML, zvláště hrají-li větší roli finance. Tyto formáty jsou totiž tzv. otevřené a není u nich potřeba zakoupení licence jako u komerčního Flashe. Pro web, jehož účelem je vytvořit působivou prezentaci s mnoha interaktivními prvky a zvuky, jako hlavní prvek projektu, doporučuji jednoznačně Flash, který v tomto odvětví zatím nemá příliš velkou konkurenci.
2.4
Adobe Flash
16
Obr. 3: ukázka webu beatport.com
Nicméně zde musím připomenout tvrzení, že méně je někdy více a u Flashe toto přísloví platí dvojnásob. Proto jako ideální řešení shledávám kombinaci XHTML stránky, která je vkusně a střídmě doplněná funkcemi aplikovanými prostřednictvím Flashe. Výhody a nevýhody použití Flash animací lze shrnout do těchto bodů: Výhody • • • •
vizuálně velmi přitažlivé, datová nenáročnost, díky vektorové grafice, kvalitnější práce s hudbou a zvuky, návštěvníkům není k dispozici zdrojový kód vašeho webu a nemohou ho ukrást ani měnit.
Nevýhody • • • • • • •
vektorová grafika zatěžuje procesor trochu nepřesné časování, nutnost instalace pluginu, není možná indexace textu pro vyhledávače, problémy s kompatibilitou u jednotlivých verzí flashe, náročné na vytvoření, uzavřený formát.
3
METODICKÁ VÝCHODISKA
3 3.1
17
Metodická východiska Základní etapy vývoje softwarového díla
Každé programové dílo, tedy i Flash aplikace, je rozděleno do určitých etap vývoje. Životní cyklus obvykle začíná nápadem nebo myšlenou vytvořit nebo zdokonalit určitou aplikaci a končí vyřazením a nahrazením za jiné. Životní cyklus programového díla by měl obsahovat zhruba tyto etapy: Identifikace a výběr projektu Začíná prvotním nápadem něco řešit nebo vylepšit pomocí IS/IT v souladu s informační strategií podniku, končí likvidací produktu a výměnou za jiný (Rábová, 2007). (definice problému, co chceme řešit, kde problém začíná a kde končí, jaké je jeho okolí, požadavky uživatelů, priority, podnikatelské cíle, k čemu bude sloužit projekt) – vlastně formulace zadání. Systém se může skládat z jednoho nebo několika projektů. Zahájení a plánování projektu Přesné obsahové vymezení projektu, stanovení řešitelského týmu, plánování projektu (stanovení jeho životního cyklu) – zdroje a časový plán, konečné rozhodnutí vedení o realizaci projektu (začíná se s přesným obsahovým vymezením projektu, stanoví se řešitelský team, určí se zdroje a časový plán) Důležité je stanovit časový průběh, finanční a lidské zdroje. Analýza Analýzou programového díla je definice logického modelu aplikace s abstrakcí k fyzickému řešení. Logický model popisuje jednotlivé entity, vztahy mezi nimi a určuje pravidla práce s nimi. Obsahuje aplikační logiku, která je srozumitelná pro uživatele. Projektování Obsahuje tyto podfáze: • určení implementačního prostředí, vývojového nástroje, programovacího jazyka a technologií, • vytvoření architektury systému, logické rozdělení na subsystémy a další funkční celky, • namapování logického návrhu do fyzické struktury, • definice chování modulů, specifikace práce s daty
3.2
Zpracování dynamického obsahu
18
Implementace Testování programů, instalace konečných verzí programů, finalizace dokumentace, školení, zkušební provoz – nový systém se zkouší, starý systém je připraven zastoupit v případě potíží, spuštění rutinního provozu – kdy nový systém již výlučně pracuje (vesměs zahrnuto programování – návrh končí projektovým řešením) Údržba Zlepšování funkcí systému, změny vnějších podmínek, odstraňování skrytých vad, jde vlastně o opakování předchozích etap pro dílčí úpravy, náročnost této etapy závisí na kvalitě a funkčnosti předchozích etap, příp. na rozsahu nastalých změn organizace – v extrémním případě místo údržby může nastat nový vývoj. Někteří autoři uvádějí, že údržba představuje 40–70 % nákladů na vývoj.
3.2
Zpracování dynamického obsahu
Jedním z hlavních rysů Flashe je schopnost komunikovat s externími zdroji dat, přijímat tyto data, zpracovávat a následně je rozesílat do různých míst. Tato schopnost vytváří z Flashe mocný nástroj vhodný i pro tvorbu složitějších dynamických aplikací, jako jsou například on-line zpravodajství, různé vzkazníky, chaty a dokonce i celé on-line obchody. 3.2.1
Formáty dat
Načtení dat z jiné aplikace do Flashe a naopak, je proces, kterému se říká přenos dat. Je ale vhodné si uvědomit, že taková data musí být určitým způsobem strukturovaná. Flash podporuje tyto formáty: Řetězec URL V tomto formátu je proměnná i její hodnota definována jako textový řetězec. Například: color=red&width=100&height=20 definuje tři proměnné color, width, height a jim odpovídající hodnoty „redÿ 100 a 20. Po té co tento řetězec Flash načte, rozdělí jednotlivé proměnné na patřičné dvojice proměnná/hodnota oddělovačem „&ÿ, který říká, kde končí jedna proměnná a začíná druhá. V tomto formátu lze ukládat pouze jednoduché proměnné. Ty složitější jako jsou objekty, pole a jiné typy dat se v řetězci textu nepodporují. XML Tento formátovací standard se jeví jako velice vhodný, jelikož udržuje data v logické struktuře. Například:
3.2
Zpracování dynamického obsahu
19
BabičkaBožena NěmcováTEX pro začátečníkyJiří Rybička Po načtení externího souboru se informace z tohoto dokumentu extrahují skriptem, který je napsán ve Flashi. Sdílené objekty Umožňují ukládat objekty místně na disku uživatelů to znamená, že při zhlédnutí nějaké Flash animace se nashromáždí data, která se následně uloží na disku. Pokud uživatel spustí tutéž animaci znovu na stejném počítači, lze tyto data opět získat. Sdílené objekty bývají také někdy přezdívány jako cookies Flashe. 3.2.2
Zdroje dat
V předcházejícím bodě jsou uvedeny datové formáty a nyní následují zdroje dat. Zdroj dat je nějaké místo, odkud může Flash načítat externí data (tj, data, která se nevytvářejí přímo v animaci). Flash může například načítat data z prostého textového souboru. Pak se takový textový soubor považuje za zdroj dat (Derek Franklin, Jobe Makar, 2005) Textové soubory Jedná se o jednoduché textové soubory s příponou „.txtÿ. Mohou být vytvořené například pomocí obyčejného poznámkového bloku obsahujícího data ve formátu řetězce URL. Textové soubory je možno načítat pomocí metod loadVariables() a load() třídy LoadVars. soubory XML obsahují data naformátovaná jako XML. Takové soubory mají příponu „.xmlÿ a Flash z nich získává informace pomocí metod třídy XML, o kterých se pojednává na str. 27. socket XML Socketové servery jsou aplikace, které běží na nějakém serveru a umožňují výměnu dat v reálném čase mezi propojenými počítači přes sockety pomocí formátu XML.
3.2
Zpracování dynamického obsahu
20
To umožňuje vytvářet velice zajímavé víceuživatelské aplikace jako různé chatové aplikace nebo hry. Sdílené objekty S jejich pomocí se na disk uživatele ukládají soubory dat, které později lze opět získat. Skripty na serveru Skripty na serveru se umísťují na stránky ASP, PHP nebo jiné a vykonává je server. Přestože je uživatel nevidí, generuje takto skriptovaná stránka formátovaná data (v našem případe ve formátu XML) a odesílá je zpět na zdroj (viz obr. 4). To znamená, že XML dokument vlastně neexistuje a je vytvořen až v okamžiku, kdy si to uživatel vyžádá. Tento způsob získávání dat je ve skutečném vývoji velice důležitý, jelikož uživateli umožňuje rychle a hlavně efektivně aktualizovat obsah své aplikace.
Obr. 4: schéma generování HTML stránky pomocí jazyka php
3.3
3.3
Zpracování událostí
21
Zpracování událostí
Mnohé aplikace vytvořené pomocí technologie Flash umožňují řešit různé úkoly technikou „táhni a pusťÿ. Uživatelé využívají interaktivních prvků, mění velikosti oken a přizpůsobují si je pomocí různorodých „virtuálníchÿ nástrojů. Všechny tyto módy interakce jsou dány tím, jak byly naprogramovány zpracovatelé událostí v dané aplikaci. Ve Flashi se vyskytují události trojího typu: Události myši Události myší řídí vykonávání skriptů, když je myš v interakci s nějakým tlačítkem nebo s instancí animačního klipu. Emulujete jimi akce, které byste jinak dělali svýma rukama. (Derek Franklin, Jobe Makar, 2005) Událsoti stnímků Události snímků jsou nejsnáze pochopitelné. Stačí připojit akci nějakému snímku na časové ose a akce se vykoná v době, kdy se animace během přehrávání dostane na tento snímek. Události klipů Události klipů se dají interpretovat takto: Když vstoupí na scénu nějaká instance animačního klipu, k níž jsou připojené skripty, může scéna prostřednictvím událostí klipu získat nový vzhled, jinak se chovat a jinak fungovat. Události tohoto druhu umožňují spouštět akce, když instance vstupuje na scénu nebo ji opouští, když uživatel přesouvá kurzor myši po scéně a při dalších příležitostech (Derek Franklin, Jobe Makar, 2005) Aplikovat reakci na nějakou událost je možné dvojím způsobem. První možnost je připojení skriptu k instanci animačního klipu: onClipEvent(mouseDown){//událost se spustí při stisku tlačítka myši this._alpha = 40; //nastaví průhlednost animačního klipu na 40. } Druhá možnost je použití metod zpracovatelů událostí. Skript se vkládá na nějaký snímek v časové ose takovým zápisem, kde je objekt oddělen od události, na kterou má reagovat, tečkou (.). mujKlip_mc.onMouseDown = function() { this._alpha = 40; //nastaví průhlednost animačního klipu na 40. }
3.4
Základy práce s XML dokumentem
22
Tyto metody nabývají velkého významu při tvorbě dynamicky generovaných animačních klipů, nebo v případě tvorby vlastních projektů a jejich reakce na události. Použitím normálního zpracovatele události se také velice omezují možnosti daného animačního klipu. Metodami lze měnit reakce na události, nebo tlačítka zvlášť na každém snímku časové osy. Je-li např. na prvním snímku časové osy umístěné tlačítko „myButton btnÿ je možné mu zde definovat, jak bude reagovat na událost stisknutí tlačítka myši (onPress). myButton_btn.onPress = function() { stopAllSounds(); // Při stisku tlačítka se vypnou všechny zvuky. } Poté se tomu samému tlačítku na druhém snímku časové osy (pokud tam bude existovat) může pomocí nastavení hodnoty null docílit, aby přestalo reagovat na událost „onPressÿ a zároveň začalo hlídat událost „onRollOverÿ. myButton_btn.onPress = null; myButton_btn.onRollOver = function (){ stopAllSounds(); // Při stisku tlačítka se vypnou všechny zvuky. } Protože jsou některé objekty tzv. neuchopitelné, vágní (Sound, XML), tak jediným způsobem, jak vykonat script, když dojde k nějaké události vztahující se k danému objektu, bývá definovat metody zpracovatele události na nějakém klíčovém snímku časové osy.
3.4
Základy práce s XML dokumentem
V kostce, XML poskytuje způsob, jak formátovat a strukturovat informace tak, že aplikace, které je přijímají, mohou snadno data interpretovat a používat i když se přemísťují z místa na místo. (Derek Franklin, Jobe Makar, 2005) To v praxi znamená, že pokud Flash posílá data ke zpracování serveru, musí být naformátované jako XML. Teprve poté je server zpracuje tak, jak to odesílatel zamýšlel. Flash může samozřejmě odesílat i jiné porce dat, ale server pravděpodobně nebude tušit, co má dělat, nebo jestli spolu data mají nějakým způsobem souviset. Následující příklad ukazuje jednoduchýXML dokument: <jmeno>Josef Novák <mesto>Brno Hybešova 34
3.4
Základy práce s XML dokumentem
23
Ukázka předvádí, jak naformátovat data z osobního adresáře. Každé kompletní značce se v XML říká element a jakýmkoliv datům naformátovaným ve formě XML se říká XML data. Pro uložení informací z ukázkového adresáře do databáze, se data v něm obsažená odešlou naformátovaná jako XML stránce PHP, nebo jiné skriptované stránce, která pak informace zanalyzuje (neboli provede jejich rozklad pomocí parseru) a vloží data do patřičných polí databáze (viz obr. 5). Je důležité navrhnout php skript tak, aby s daty zacházel požadovaným způsobem. Protože XML obvykle používá pro přenos dat, ne pro ukládání informací, „rozložíÿ se informace obsažené v adresáři do polí databáze a neukládají se jako dokument XML. Když jsou potom zase data potřeba, lze je extrahovat z databáze, nějaká skriptovaná stránka je naformátuje jako XML a odešle do Flase nebo jiné aplikace, která si informace vyžádala. (Derek Franklin, Jobe Makar, 2005)
Obr. 5: schéma ukládání XML dokumentu do databáze pomocí jazyka php
3.5
• • • • •
3.5
Definice typu dokumentu (DTD)
24
Při práci s XML je potřeba vždy dodržovat těchto pár pravidel: názvy uzlů nemohou začínat písmeny XM, každý uzel musí být řádně uzavřen. Uzavření uzlu se provádí pomocí ukončovací značky „/ÿ(<jmeno>), všechny speciální znaky se musí kódovat jako URL (ve Flashi pomocí funkce encode();), většina XML parserů rozlišuje velikost písmen, a proto je potřeba si uvědomit, že je rozdíl mezi uzlem a , každý XML dokument může mít pouze jeden kořenový uzel.
Definice typu dokumentu (DTD)
Definice typu dokumentu je použita pro určení legálních elementů u konkrétního typu XML dokumentu a je buď obsažena v samotném dokumentu, nebo představuje odkaz na externí dokument se specifickým umístěním. DTD v podstatě deklaruje formát specifického druhu XML dokumentu, což znamená, že aplikace, která tento dokument používá, ví, jaké elementy, tagy, atributy a CDATA dokument pravděpodobně obsahuje. (Craig Swann, Greg Caines, 2003) Deklaraci je možné připojit do dokumentu tzv. interně pomocí následujícího zápisu: Mnohem častější způsob připojení DTD k dokumentu, je uložit ho jako samostatný soubor (externě). Po té může být použito ve více dokumentech. V tomto příkladě má deklarace tvar: URL je cesta k dokumentu, nebo jeho název. Kořenový element je jméno elementu, který je v dokumentu definovaný jako kořenový. Jednotlivé elementy jsou definovány takto: Název elementu musí začínat písmenem a na rozdíl od HTML je důležitá velikost písmen. V poslední části deklarace elementu definuje, co může element obsahovat. Klíčová slova EMPTY a ANY v této části deklarace říkají, že element je prázdný nebo že může obsahovat jakýkoliv text či element. Kromě klíčových slov EMPTY a ANY může element obsahovat modelovou skupinu. V modelové skupině (vždy ohraničené kulatými závorkami) musí být obsaženy
3.5
Definice typu dokumentu (DTD)
25
všechny elementy, které jsou bezprostředními potomky právě v definovaného elementu. Jednotlivé elementy (pokud je jich více) jsou od sebe odděleny „,ÿ nebo „|ÿ . Pokud jsou odděleny čárkou, jejich pořadí říká, jak po sobě v dokumentu budou následovat. Naopak oddělí-li se jednotlivé elementy znakem „|ÿ, může dokument obsahovat pouze jeden z nich. Kromě pořadí elementů se musí definovat jejich počet, zda jsou povinné („?ÿ) nebo jestli se můžou opakovat(„*ÿ – element nemusí být obsažen nebo se libovolně opakuje, „+ÿ – element musí být obsažený alespoň jednou). Toho je docíleno přidáním příslušného znaku za jméno elementu. Je pravidlem, že čím komplikovanější je XML dokument, tím komplikovanější jsou deklarace DTD, proto se mohou všechny tyto varianty vzájemně kombinovat. Příklad: Element „clanekÿ musí obsahovat element „nazevÿ a dále může mít žádného, jednoho nebo více autorů. Pokud je již obsahem elementu pouze samostatný text, vyjádříme to pomocí slova #PCDATA. Jelikož každý element může obsahovat také atributy, je nutné tyto informace také deklarovat. V DTD jsou atributy deklarovány odděledně od elementů. Atributy mohou být deklarovány kdekoli v DTD, ale z důvodů dobré přehlednosti a čitelnosti se ustálil zvyk deklarovat atributy vždy hned za deklarací příslušného elementu, ve kterém jsou použity. (Miroslav Žák, 2003) Klíčové slovo pro deklaraci atributů je ATTLIST. Za tímto slovem je uveden název elementu, o jehož atribut se jedná. Poté následují název atributu, typ atributu (CDATA, ENTITY, ID atd.) a poslední parametr specifikuje, zda-li je atribut v elementu povinný, volitelný či pevně zvolený. Deklaraci atributu je možné provést takto: V zásadě je používání DTD doporučeno a většina XML dokumentů je obsahuje. Faktem ovšem je, že použití DTD je volitelné a Flash je z důvodů jednoduchosti ignoruje. Nakonec je zde ještě uveden příklad se sbírkou filmů: ]> dokumentárníakčníromantický
3.6
Postup vytvoření Flashové animace s podporou XML
26
3.6
Postup vytvoření Flashové animace s podporou XML
Základními předpoklady pro tvorbu takové aplikace je schopnost čerpat externí data (v tomto případě XML) a disponovat formalizovaným XML dokumentem (pomocí DTD nebo XML schématu). Je tedy možné použít již zhotovený XML dokument nebo vytvořit svůj vlastní. Při jeho návrhu je z programátorského i uživatelského hlediska důležitá jednoduchost a přehlednost logické struktury. Z důvodů použitelnosti vytvořeného XML dokumentu pro ostatní uživatele (neznající naše záměry při strukturování dokumentu) je více než vhodné definovat, v jakých vzájemných vztazích mohou být jednotlivé elementy použity. Takovouto definici struktury je možné provést prostřednictvím DTD. Výsledná animace je poté naprogramovaná pro určitý typ XML dokumentu, který je již formalizovaný. Proto jakákoliv změna ve formální struktuře používaného XML by měla za následek jeho nesprávný rozklad a tím pádem by narušila i celkovou činnost aplikace.
4
VLASTNí ŘEŠENí
4 4.1
27
Vlastní řešení Úvodní specifikace
Navrhnout jednoduchou aplikaci pro interpretaci a vyhodnocení testů na webu umožňující načítat data (potřebná pro zobrazení jednotlivých testů) prostřednictvím externích XML dokumentů. Vývojovým nástrojem této aplikace je Adobe Flash. Součástí je také administrační rozhraní pro vytváření jednotlivých testů ve webovém prostředí za pomoci dynamického webového formuláře.
4.2
Vlastní návrh XML dokumentu
Při vlastním návrhu jsem vycházel ze znalosti podkladů e-learningové dokumentace. Kořenovým elementem v tomto typu XML dokumentu je , ten obsahuje subelement poskytující podrobnější informace o konkrétním testu, jako jsou jméno, příjmení, název testu a datum. Druhý subelement, označený jako , obsahuje kolekci sourozeneckých elementů . Každý z nich vymezuje jednu otázku v testu. Typ otázky určuje atribut „typÿ , který může nabývat tří různých hodnot (1 – výběrová, 2 – přiřazovací, 3 – seřazovací). Potomky elementu jsou a . Obsah subelementu se mění v závislosti na typu otázky: Výběrová Kolekce sourozeneckých elementů <moznost> s atributem „pravdaÿ, který může nabývat logických hodnot 1 v případě, že možnost je správná a 0 pokud nikoli. Přiřazovací Kolekce sudého počtu sourozeneckých elementů s názvem <prvek> a atributem „skupinaÿ, který nabývá různých číselných hodnot, přičemž dvě stejné hodnoty u různých prvků značí dvojici. Seřazovací Různý počet sourozeneckých elementů s atributem „poradiÿ, který nabývá číselných hodnot určujících jejich pořadí. Pro formalizaci tohoto typu XML dokumentu jsem použil DTD (viz příloha A). Pro lepší představu o struktuře přidávám ukázku:
4.3
Implementace pomocí ActionScriptu 2.0
28
Vlastivěda <jmeno>Vojťák <prijmeni>Sedláček 04-04-2008Seřaďte země od nejvíce průmyslově rozvinutých až po nejméně rozvinutéčeské zeměSlovenskoPodkarpatská Rus
4.3
Implementace pomocí ActionScriptu 2.0
Po návrhu struktury XML dokumentu následuje fáze implementace, jejímž cílem je realizace aplikace pro reprezentaci a vyhodnocení testů. Kód je psán jazykem ActionScript verze 2.0. Grafický návrh byl vytvořen v bitmapovém grafickém editoru Adobe Photoshop 7 a z části přímo pomocí vývojových nástrojů v Adobe Flash 8. Data jsou čerpána ve formě XML dokumentu, který je generován pomocí skriptovacího jazyka PHP. Klíčová data pro vygenerování těchto XML dokumentů jsou uložena v relačně databázovém systému MySQL. 4.3.1
Odstranění bílých znaků
Bílé znaky představují označení pro mezery, ukončení řádků a tabelátory v XML dokumentu. Při vytváření nebo úpravě XML dokumentů usnadňují tyto znaky čtení a orientaci v dokumentu. (Craig Swann, Greg Caines, 2003) Jak je na první pohled patrné, bílé znaky usnadňují čtení kódu lidským očím. Naopak pro Flash bílé znaky znamenají pouze zbytečnou ztrátu výkonu. Navíc Flash uloží všechny mezery, tabulátory a znaky ukončení řádku do XML jako znaková data, což může způsobit celou řadu problémů v okamžiku, kdy se pokoušíte získat nějakou informaci ze specifického elementu. Parser Flash totiž s bílými znaky jedná, jako by se jednalo o normální text mezi dvěma tagy. Tuto věc je potřeba mít při práci s XML neustále na paměti a je zapotřebí tyto bílé znaky odstranit. Pokud
4.3
Implementace pomocí ActionScriptu 2.0
29
uživatel používá plugin Flash 5 5.0.41 a vyšší, může nastavit globální vlastnost zvanou XML.ignoreWhite na hodnotu true tímto kódem: XML.ignoreWhite = true; Ovšem aby odstranění bílých znaků fugovalo ve všech verzích, je zapotřebí detekovat verzi plug -inu každého uživatele a pro ty starší vymyslet alternativní způsob odstranění těchto znaků, například vytvořením nějaké vlastní funkce. 4.3.2
Práce s třídou XML
Téměř vše, co se dělá ve Flashi s XML dokumentem, se určitým způsobem týká třídy XML, která umožňuje: formátování, rozklad (extrahování informací, parsing), načítání (z externího zdroje, ze skriptu na serveru) nebo odesílání. Informace obsažené v XML dokumentu jsou přístupné pomocí metod a vlastností třídy XML až v okamžiku jejího úplného a bezproblémového načtení. Metodami a vlastnostmi této třídy se dá také vytvořit vlastní dokument XML, který je možné využít v animaci Flashe nebo ho odeslat nějakému skriptu na serveru. Rozklad XML Anglické sloveso parse znamená něco analyzovat nebo rozložit na jednotlivé díly. Když někdo mluví o tom, že píše skript pro rozklad dokumentu XML, myslí tím, že napíše takový skript, který bude z dokumentu XML extrahovat informace. (Derek Franklin, Jobe Makar, 2005) V této souvislosti je vhodné zmínit objekt XMLnode, který je velmi podobný XML objektu. Reprezentuje však pouze subelement a ne celý XML dokument jako objekt XML. V XML objektu se velice snadno zpřístupní jakýkoli uzel správným použitím vlastností firstChild a nextSibling. Vlastnost firstChild ukazuje na první uzel stromové struktury a nextSibling ukazuje na další uzel stejné úrovně ve stromové struktuře (sourozenec). Z největší části jsou uzly reprezentací elementů nějakého XML dokumentu v aplikaci Flash. Jedinou výjimkou jsou znaková data, jakým je například text mezi tagy. Flash pracuje s takovým textem zcela stejně jako s uzly. Velice důležité vlastnosti objektu XMLnode jsou nodeName, které ukazuje na název konkrétního uzlu, nodeValue, ta se používá pro získávání již zmíněných textových dat a nodeType, s jehož pomocí můžeme kontrolovat uzly dokumentu. Pokud tato vlastnost vrátí hodnotu 3, obsahuje uzel znaková data. V případě, že vrátí 1, obsahuje další uzly. Posledním důležitým zdrojem informací jsou atributy elementů, jejichž hodnotu získáme pomocí vlastnosti atributes. Při rozkladu XML dokumentu jsem postupoval následovně(do proměnné allData se uloží všechny otázky z XML dokumentu): allData = this.firstChild.firstChild.nextSibling.childNodes;
4.3
Implementace pomocí ActionScriptu 2.0
30
Ukázka zpřístupněné části XML dokumentu: Vlastivěda <jmeno>Vojťěchk <prijmeni>Sedláček 04-04-2008 **************************** allData ************************** Co bylo základním stavebník kamenem naší demokracie? <moznost pravda="0" >Osvobozené divadlo <moznost pravda="1" >ústava **************************** allData **************************
Načítání XML Pro načtení dat naformátovaných jako XML z externího zdroje je potřeba zavolat metodu load() objektu XML. Zdroj může být jednak statický soubor, tak skriptovaná stránka v PHP(nebo jiném jazyce), jejímž výsledkem je dokument XML. Funcion init() { //skript, který se spustí po načtení XML dokumentu } Var myXML:XML = new XML (); myXML.onLoad = init; myXML.load(’http://www.bakalarka.eu/gen_xml.php?testId=’+item_obj.data); Předposlední řádek nám říká, že po načtení XML dokumentu generovaný php skriptem „gen xml.phpÿ se spustí funkce init. Funkce init může obsahovat kód, který bude interpretovat XML.
4.3
Implementace pomocí ActionScriptu 2.0
31
Odesílání XML Zavolání metody send() způsobí odeslání XML dokumentu na cílovou URL specifikovanou jako argument této metody. var myXML:XML = new XML ("ahoj"); myXML.send("http:// nejakadomena.cz/cil.php"); Metoda sendAndLoad() objektu XML slouží k zaslání dat a zároveň pro přijetí odpovědi. U této metody je nutné specifikovat objekt XML , jehož obsah je odesílán, cílovou URL a objekt XML, do něhož se má uložit odpověď. Podobně jako u příkladu s načítáním XML dat, byste neměli zapomenout na událost onLoad, která vrací logickou hodnotu true, pokud jsou XML data načtena nebo v opačném případě false. var URL:string = "http:// nejakadomena.cz/login.php"; Function init() { Trace(objToRecive); } var smlToSend:String = "nick <pass>1234"; var objToSend:XML = new XML(xmlToSend); var objToReceive:XML = new XML(); objToReceive.onLoad = init; objToSend.sendAndLoad(URL, objToReceive); Tento ActionScript vytvoří objekt XML (objToSend) obsahující přihlašovací informace a odešle je na URL a bude čekat na odpověď z cílového místa. A se odpověď kompletně načte do přijímajícího objektu XML (objToRceive), zavolá se funkce init(). 4.3.3
Třída LoadVars
Práce s touto třídou je při vytváření jakékoli aplikace, která komunikuje se svým okolím pomocí dat ve formátu řetězce URL. Třída umožňuje načíst data proměnných z textového souboru, nebo odeslat data proměnných nějakému skriptu na serveru a načíst je jeho prostřednictvím. (Derek Franklin, Jobe Makar, 2005) LoadVars dokáže data odesílat, přijímat, nikoli však ukládat data do textového souboru. Tuto práci musí zvládnout nějaký skript na serveru. Vytvoření nové instance objektu LoadVars: var myLoadVars:LoadVars = new LoadVars();
4.3
Implementace pomocí ActionScriptu 2.0
32
Nyní máme vytvořený objekt LoadVars s názvem myLoadVars. Chceme-li do něj načíst nějaké proměnné můžeme zavolat metodu load(). Naopak pro odeslání proměnných nějakému skriptu na serveru použijeme metodu send(). Syntaxe těchto metod je násladující: myLoadVars.load("http://www.domena.cz/mujtext.txt"); myLoadVars.send("http://www.domena.cz/mujskript.php"); Cesta k cílovému souboru může být zadána také relativně. Pokud jsou do objektu myLoadVars načtené proměnné „ jmenoÿ a „vekÿ, přistupujeme k nim následujícím způsobem: myLoadVars.jmeno myLoadVars.vek V práci jsem této metody využíval pro plnění comboBoxu jednotlivými testy. Jako prostředník této výměny dat je php skript vratData.php. //instance loadvars pro posilana data var myLoadVarsObject:LoadVars = new LoadVars(); //funkce pro nacitani jednostlivych testu z~DB //localhost >’http://localhost/bakalarka/0_5/vratData.php’ myLoadVarsObject.load(’http://www.v-music.eu/bakalarka/vratData.php’); //promenna pro nacitani jednotlivych testu myLoadVarsObject.onLoad = function(ok){ if(ok){ var maxCount:Number = this.pocet; if (maxCount > 0){ infoText_txt.text = ’’; for (i=1; i<=maxCount; i++){ //promenne z~vratData.php testName = eval("this.test"+i); testId = eval("this.testId"+i); //pridani polozky do comboBoxu (id , nazev testu) my_cb.addItem({data:testId, label:testName}); } } else{ trace(’žádný test’); infoText_txt.text = ’Bohužel Databáze momentálně neobsahuje žádné e-testy.’; } trace(’data nactena’); } else { trace(’chyba’);
4.3
Implementace pomocí ActionScriptu 2.0
33
} } Třetí důležitá metoda sendAndLoad() umožňuje specifikovat objekt LoadVars, jehož obsach chcete odeslat a také objekt do kterého chcete načíst odpověď. myLoadVarsObject.sendAndLoad("http://www.domena.cz/mujskript.php", receivingLoadVarsObject); Data z myLoadVarsObject se odešlou příslušnému skriptu na straně serveru, kde jsou zpracovány. Tato zpracovaná data se poté načtou do objektu receivingLoadVarsObject. Ke třídě LoadVars se váže také velice důležitá událost: onLoad. Ta se využívá ke spuštění nějaké funkce bezprostředně po načtení dat do objektu. Událost se tedy spustí vždy v okamžiku, když se do objektu načtou nějaká data. 4.3.4
události ”drag and drop”
V mé práci jsem využívál převážně události myši, které se pro tuto aplikaci jeví jako velice vhodné. Uvádím zde příklad jedné z klíčových funkcí nazvanou dragSetup() využívající metod událostí „drag and dropÿ. Tyto metody umožňují uchopit a upustit jednotlivé objekty na scéně (v tomto případě odpovědi). Při upuštění objektu je zavolána funkce checkAnswer(), která vyhodnotí, zda se objekt nachází nad potencionálním cílem. Pokud ano, ukotví se na něj, v opačném případě se vrátí na svoji původní pozici. //funkce pro drag and drop movieclipu function dragSetup(clip, targ, qType, questInfo) { //definice promennych var m:Number; var isInArray:Boolean; var trueTarget:Boolean = false; //do promennych ulozim pocatecni pozice clip.myHomeX = clip._x; clip.myHomeY = clip._y; //udalosti onPress a onRelase clip.onPress = function() { startDrag(this); this.beingDragged = true; this._alpha = 10; }; clip.onRelease = clip.onReleaseOutside=function () { stopDrag();
4.3
Implementace pomocí ActionScriptu 2.0
34
isInArray = false; this._alpha = 100; this.beingDragged = false; for (m=0; m
4.4
Podpůrné nástroje pro využití výsledků
4.4
35
Podpůrné nástroje pro využití výsledků
Pro jednoduchou tvorbu a ukládání jednotlivých testů jsem vytvořil administrační rozhraní, které obsahuje dynamický webový formulář pro snadné vkládání jednotlivých dat potřebných pro pozdější vygenerování XML dokumentu. Tyto podpůrné nástroje byly napsány pomocí skriptovacího jazyka PHP za relačního databázového systému MySQL. 4.4.1
Administrační rozhraní
Celá administrační část je chráněna uživatelským jménem a heslem (zakódovným pomocí algoritmu MD5), které je nutné zadat při vstupu do jakékoliv části tohoto systému. V administračním rozhraní (viz obr. 6) může pověřený uživatel prohlížet, vytvářet a mazat jednotlivé záznamy v testech. Za účelem jejich tvorby je zde k dispozici webový formulář s ošetřenými vstupy, který mění svoji strukturu podle potřeb a nároků uživatele na rozsah testu.
Obr. 6: náhled administračního rozhraní
4.5
Možnosti implementace
4.4.2
36
MySQL
MySQL je databázový systém vytvořený švédskou firmou. Pro jeho použití jsem se rozhodl především díky tomu, že je dostupný pod bezplatnou licencí. Tento systém také patří mezi nejrozšířenější a je velice dobře optimalizován na rychlost zpracování. Datový model ERD (entitně relační diagram) slouží k vytvoření datových struktur (respektive vytvoření tabulek v databázi), kde jsou přesné typy sloupců, primárních klíčů, cizích klíčů a jejich vzájemných vazeb (viz obr. 7) Pro tvorbu tohoto modelu jsem využil nástroj Power Designer.
Obr. 7: ERD
4.5
Možnosti implementace
Pro co nejširší použití aplikace E-test jsem vytvořil hned dvě různá uživatelská prostředí. První verze je vytvořena jako samostatná aplikace, která obsahuje všechny důležité ovládací prvky. Jednotlivé testy jsou přístupné z tzv. comboBoxu, do kterého jsou automaticky načítány z databáze. Uživatelské rozhraní (viz příloha B) má přiměřenou velikost pro pohodlnou práci s testem a zároveň obsahuje informační okénko pro případné doplňující informace (jsou-li k dispozici). Druhá verze je, co se rozměrů týká, o poznání skromnější (viz příloha C), což je dáno i jejím účelem. Slouží pouze jako jednoduchý interpret XML testu, který je uzpůsoben pro vkládání přímo do textu určité XHTML stránky (viz. příloha B). Testy jsou také načítány z databáze, avšak konkrétní informace pro volání testu je zde načítána pomocí řetězce URL. Způsob vložení e-testu do XHTML kódu:
37
5
5
ZÁVĚR
38
Závěr
V souladu se zadáním jsem identifikoval základní možnosti přípravy a využití animací pro webové prostředí. Následně jsem tyto jednotlivé přístupy srovnal s technologií Flash. Pro splnění cílů bylo nutné analyzovat postup při vytváření Flash animace s podporou formátu XML a také základní možnosti využití tohoto formátu v dané oblasti. Pro účel ověření získaných znalostí jsem navrhl a experimentálně implementoval Flash aplikaci pro interpretaci a vyhodnocení testů na webu s využitím formátu XML. Z pohledu uživatele disponuje aplikace moderním vzhledem a intuitivním ovládáním, které je typické pro aplikace vytvořené pomocí nástroje Flash. Jako podpůrný prostředek pro využití výsledků jsem vyvinul administrační rozhraní prostřednictvím skriptovacího jazyka PHP a databázového systému MySQL. Uživatelské prostředí tohoto systému splňuje standardy webových prohlížečů a uživatelé tak mohou k systému přistoupit z libovolného místa bez specifických nároků na klienta. Přínosem je použití CSS stylů, které poskytuje ergonomické rozhraní pro práci s daty. Ačkoliv je aplikace v této fázi zcela funkční, domnívám se, že využití pro testování s vysokými nároky na korektní postup při získávání výsledků, není vhodná, jelikož neklade důraz na bezpečnost takového postupu. V případě takového použití by musela být obohacena ještě o několik funkcí. Avšak jako doplněk článků nebo jako cvičný test by mohla být aplikovatelná.
6
6
LITERATURA
39
Literatura
Franklin, D., Makar, J.Macromedia Flash MX 2004 ActionScript vyd. Praha: SoftPress s.r.o., 2005. 904 s. ISBN 80-86497-75-5. . Kožíšek, L.Animace GIF animace [on-line]. 1.1.2007. [cit. 21.4. 2008] Dokument ve formátu HTML. Elektronická adresa http://www.3d-animace.com/animace-gif/. Krejčí, R.Microsoft uvedl Silverlight 1.0: Flash killer nastupuje? [on-line]. 7.9.2007 [cit. 22.4. 2008] Dokument ve formátu HTML. Elektronická adresa http://www.grafika.cz/art/webdesign/silverlight10.html. Swann, C., Caines, G.Flash s využitím XML tvorba dynamických webových stránek vyd. Praha: Grada Publishing a.s., 2003. 240 s. ISBN 80-247-0389-0. . Tišnovský, P.Případ GIF [on-line]. 10.8.2006. [cit. 21.4. 2008] Dokument ve formátu HTML. Elektronická adresa http://www.root.cz/clanky/pripad-gif/. Tišnovský, P.Vektorový grafický formát SVG [on-line]. 2.8.2007. [cit. 22.4. 2008] Dokument ve formátu HTML. Elektronická adresa http://www.root.cz/clanky/vektorovy-graficky-format-svg/. Žák, M.XML – začínáme programovat, podrobný průvodce začínajícího uživatele vyd. Praha: Grada Publishing a.s., 2003. 216 s. ISBN 80-247-0565-6. .
Přílohy
A
A
DEFINICE TYPU DOKUMENTU (DTD)
Definice typu dokumentu (DTD)
41
B
B
NÁHLED UŽIVATELSKÉHO PROSTŘEDí APLIKACE E-TEST
Náhled uživatelského prostředí aplikace E-TEST
Obr. 8: Uživatelské prostředí
42
C
C
NÁHLED UŽIVATELSKÉHO PROSTŘEDí APLIKACE E-TEST SMALL
43
Náhled uživatelského prostředí aplikace E-TEST small
