Adobe Flex – co je a co není

4. června 2008

•

Vývoj webových aplikací je historicky spojen s technologiemi jako HTML, CSS nebo JavaScript, v posledních letech se však rychle začínají prosazovat alternativní přístupy, z nichž mezi nejvýznamnější patří technologie Adobe Flex. Protože je Flex v České republice zatím poměrně neznámý, tento článek vám chce ukázat, jak vývoj ve Flexu probíhá a co lze od této technologie očekávat.

Co je Flex?

Otázka jednoduchá, odpověď však poměrně složitá:

Flex je vývojová technologie pro Rich Internet Applications – tak nějak by mohla znít krátká, politicky korektní definice, ale moc dobrou představu si z ní asi neuděláte. Pokračujme proto dále…
Flex je technologie pro vývoj aplikací, nikoli animací, bannerů nebo prezentačních stránek.
Flex je sada komponent a tříd spolu s kompilátory a dalšími command-line nástroji. Tento celek se nazývá Flex SDK.
Flex je vývojová technologie, nikoli běhové prostředí. Běhová prostředí v současnosti existují dvě – pro běh Flex aplikací v prohlížeči se používá Flash Player, pro instalaci a běh aplikací na desktopu slouží Adobe AIR.

Co naopak Flex není?

Flex není serverová technologie, nevyžaduje žádný specifický server a nikomu neplatíte licenční poplatky (to platilo pro první inkarnaci Flexu, která je již naštěstí dávnou minulostí).
Flex není náhrada za HTML, JavaScript a AJAX, je to jejich alternativa.

Flex není Flash!

Ačkoli je schopnost běhu Flex aplikací ve Flash Playeru jednou z jeho největších výhod, v komunitě webových vývojářů slovo Flash většinou vzbuzuje spíš odpor než sympatie. Bude proto dobré vyjasnit, jak se to se vztahem Flexu k Flashi vlastně má.

Zjednodušeně řečeno Flex s Flashem nemají společného prakticky nic kromě běhového prostředí (Flash Playeru). Zde jsou hlavní rozdíly v bodech:

Flash slouží pro tvorbu animací, bannerů a dalších grafických záležitostí, mezi základní koncepty patří časová osa, klíčové snímky, přechody mezi nimi a podobně. Flex je naproti tomu programátorská záležitost, koncept timeline zde vůbec neexistuje, vývojář skládá uživatelské rozhraní ze znovupoužitelných komponent, celá aplikace je tvořena v moderním objektově orientovaném jazyce a podobně.
Vývojovým prostředím Flashe je „Flash authoring tool“ (Flash MX, Flash 8, Flash CS3 a další verze). Vývojovým prostředím pro Flex je Flex Builder nebo nějaký textový editor spolu s kompilátory příkazové řádky.
Zdrojové kódy Flashe jsou uloženy v binárním formátu .fla a k jejich editaci je nutné Flash IDE, zdrojové kódy Flexu jsou prosté textové soubory a k jejich editaci lze použít libovolný textový editor. Z toho plyne řada příjemných důsledků, jako je možnost používat systémy pro správu verzí, soubory lze porovnávat vedle sebe a podobně.

Macromedia a později Adobe tedy udělali dobrou věc – Flex postavili nad Flash Playerem, což aplikacím dává možnost běžet skoro ve všech prohlížečích světa, ale opustili vše, co se vývojářům na Flashi nelíbilo, a jako náhradu nabídli framework stoprocentně orientovaný na vývojáře. (Aby nedošlo k mýlce – Flash samozřejmě stále své dobré využití má, a protože se jedná o produkt od stejné firmy, není problém například nějaké Flashové animace s Flexem integrovat.)

Příklad

Pro lepší představu o tom, jak Flex vypadá a funguje, projdeme jednoduchý příklad od začátku do konce. Řekněme, že cílem je vytvořit jednoduchou formulářovou aplikaci s následujícím vzhledem:

Požadovaný vzhled aplikace

Zdrojový kód

Zdrojový kód implementující požadovaný vzhled může vypadat například takto:

<?xml version=“1.0″ encoding=“utf-8″?>
<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml“ layout=“absolute“>
   <mx:Script>
      <![CDATA[
         import mx.controls.Alert;
         private function displayMessage() : void {
            Alert.show(„Zadané jméno bylo “ + nameField.text);
         }
      ]]>
   </mx:Script>
   <mx:VBox width=“270″ height=“103″
               horizontalCenter=“0″ verticalCenter=“0″ backgroundColor=“#FFFFFF“
               paddingBottom=“20″ paddingLeft=“20″ paddingRight=“20″ paddingTop=“20″
   >
      <mx:HBox width=“100%“ verticalAlign=“middle“>
         <mx:Label text=“Jméno:“/>
         <mx:TextInput id=“nameField“ />
      </mx:HBox>
      <mx:HBox width=“100%“>
         <mx:Spacer width=“50″ height=“10″/>
         <mx:Button label=“Odeslat“ color=“#0D8401″ click=“displayMessage()“/>
         <mx:Button label=“Zrušit“ color=“#0D8401″/>
      </mx:HBox>
   </mx:VBox>
</mx:Application>

Za povšimnutí stojí několik věcí:

Vývojářský model připomíná HTML/JavaScript – uživatelské rozhraní je definováno ve značkovacím jazyce MXML a v sekci <Script> je k vidění procedurální kód v jazyce ActionScript, který je velmi podobný JavaScriptu. Pro webové vývojáře se tedy od začátku jedná o model vývoje, na který jsou zvyklí.
Na rozdíl od HTML, MXML má silnou sémantiku pro tvorbu uživatelských rozhraní. V kódu můžete vidět elementy jako HBox (horizontální box), Button, Label a podobně, zatímco v HTML se například struktura stránky definuje pomocí řady „nic neříkajících“ elementů div nebo v krajním případě tabulkou. Vyšší sémantika MXML má za následek zjednodušenou tvorbu uživatelských rozhraní.
Zdrojový kód je vždy platný XML dokument, což má několik příjemných důsledků, jako je snadnější podpora v nástrojích, bezproblémovost používání češtiny, snadné míchání komponent od různých výrobců díky podpoře jmenných prostorů a podobně.
To, že se atributy pro ovlivnění vzhledu jmenují například color, backgroundColor nebo verticalAlign není náhoda – Flex totiž podporuje podmnožinu CSS (ve Flexu se používá camelCasing namísto pomlčky uprostřed dlouhých CSS vlastností, což je jen kosmetický rozdíl zavedený z praktických důvodů). Se styly se pracuje podobně jako v HTML – lze je definovat buď rovnou u elementů, nebo lze vytvořit externí CSS předpis, který se potom k MXML souboru přilinkuje.

Kompilace

Tento krok znamená zásadní rozdíl oproti klasickému HTML vývoji – Flex aplikace je vždy potřeba zkompilovat. Zřejmou nevýhodou je, že se do vývojového cyklu dostává další nutný mezikrok, který je z vývojářského pohledu nepříjemný, na druhou stranu tento model přináší také výhody – binární kódování je úspornější než prostý text, běhové prostředí nemusí zdrojový kód překládat při každém požadavku a výkon je tedy vyšší, snadněji se brání intelektuální vlastnictví (je-li to požadavkem) a podobně. V každém případě je však nutné Flex aplikaci před jejím nasazením zkompilovat. Jak na to?

Možnosti jsou v zásadě tři:

Použít command-line kompilátor, který je součástí Flex SDK a je k dispozici zdarma. Tato možnost je pro běžnou práci poněkud nepohodlná a používá se především při spolupráci s dalšími nástroji, pokud by však přeci jen někdo měl zájem, popis argumentů je součástí dokumentace.
Flex Builder, placené vývojové prostředí od Adobe, proces kompilace samozřejmě podporuje a navíc značně usnadňuje (osobně bych pro jakoukoli serióznější práci Flex Builder doporučil, cena někde okolo 5 000 Kč se rychle vrátí zpátky v podobě úspory času; pro pokusy můžete využít tříměsíční zkušební dobu). Flex Builder podporuje kompilaci na pozadí, takže po kliknutí na „Run“ se většinou okno prohlížeče otevře okamžitě, což je příjemné.
Zvlášť pro pokročilé scénáře se hodí kompilátor implementovaný v Javě, což umožňuje snadnou integraci se systémy Ant, Maven a podobně. Například můžete vytvořit build skript, který aplikaci zkompiluje, otestuje automatickými testy, vygeneruje nápovědu a celou aplikaci nahraje na server.

Prostředí Flex Builderu (plná velikost, cca 100 kB)

Výsledkem kompilace je binární .swf soubor (čte se „svif“), jehož formát je identický se soubory generovanými Flashem. Pokud aplikace používá obrázky, fonty, hudbu, videa nebo jiné binární soubory, mohou být tyto buďto vloženy přímo do SWF souboru nebo mohou být přilinkovány externě, podobně jako třeba u obrázků vložených do HTML stránky – výběr je čistě na autorovi aplikace, kompilátor podporuje obě možnosti.

Nasazení na server

Když je aplikace naprogramovaná a zkompilovaná, posledním krokem je její nasazení na server. Zde je postup v podstatě stejný jako při publikování statických HTML souborů – stačí vzít vygenerovaný soubor a nahrát ho někam na server. Téměř vždy se kromě SWF souboru samotného používá ještě takzvaný HTML wrapper, tedy soubor, který se o načtení SWF souboru postará. Adresářová struktura většinou vypadá následovně:

Adresářová struktura

Nejdůležitější je HelloInterval.swf, což je aplikace samotná. Schválně jsem ponechal sloupeček s velikostí souboru, protože 141 kB je pro „Hello World“ aplikaci poměrně děsivá hodnota. Důvod je ten, že kromě oněch pár řádků kódu naší aplikace je ve výsledném SWF souboru zkompilován celý Flex framework (jinými slovy, je to podobné, jako kdyby se k Javovské aplikaci přibaloval celý Java runtime nebo k .NET aplikaci celý .NET framework). Toto řešení bylo nutné pro běh Flex aplikací ve stávajícím Flash Playeru, který o nějakém Flex frameworku v době svého vzniku neměl ani tušení, k nápravě už ale postupně dochází. Nejnovější Flash Player umí Flex framework cachovat, takže jakmile jednou navštívíte libovolnou Flex aplikaci od libovolného výrobce, od toho okamžiku bude Flex framework součástí vašeho Flash Playeru a každá další aplikace se už bude stahovat samotná a tedy výrazně menší.
Soubor HelloInterval.html je onen zmiňovaný HTML wrapper. Dělá v podstatě to, že zkontroluje přítomnost Flash Playeru v požadované verzi, v případě jeho nepřítomnosti vybídne uživatele k instalaci a v případě, že je vše v pořádku, aplikaci spustí. Rozumně použitelný HTML wrapper je generován přímo kompilátory Flexu, ale není problém vytvořit si svůj vlastní.
Další soubory jsou podpůrné, playerProductInstall.swf například zařizuje upgrade Flash Playeru na požadovanou verzi (Flex běží ve Flash Playeru 9 nebo novějším), history.js a history.swf zase zajišťují funkčnost tlačítka „zpět“ v prohlížeči a tak dále.

Celý adresář pak už jen zbývá nakopírovat na server (Apache, IIS nebo jakýkoli jiný). Tím je vývojový cyklus u konce a uživatelé pak mohou jednoduše navštívit odpovídající URL a při nainstalovaném Flash Playeru aplikaci spustit.

Přehled klíčových vlastností

Princip fungování Flex aplikací máme úspěšně za sebou, nyní v krátkosti projdeme několik hlavních aspektů Flexu z pohledu vývojáře.

Flex je komponentový framework

Jak už naznačila ukázka výše, Flex aplikace se skládá z řady různých komponent (Button, TextInput a podobně). Komponenty jsou v podstatě třídy ve smyslu objektově orientovaného programování, mohou tedy mít soukromé nebo veřejné členské proměnné, metody a události. (Ačkoli pro základní programování ve Flexu není znalost OOP zcela nezbytná, moje zkušenost je taková, že vývojáři bez znalosti OOP dříve nebo později začnou ve Flexu tápat, případně ho nebudou využívat na sto procent. Základy OOP lze zvládnout za několik hodin, proto bych tedy v případě potřeby silně doporučil onen čas investovat.)

Jelikož jsou komponenty obyčejné ActionScript třídy (respektive objekty), lze jejich funkčnost rozšiřovat děděním nebo skládáním, vlastnosti jejich chování lze nastavovat za běhu pouhou změnou odpovídajícího atributu a tak dále. Flex framework ve skutečnosti není nic magického – je to jen hromada ActionScript kódu, přesně stejného, jaký může naprogramovat kdokoliv.

Svět dvou jazyků – MXML a ActionScript

V ukázce výše bylo uživatelské rozhraní definováno ve značkovacím jazyce MXML. Když jsem ale před chvílí napsal, že celý Flex framework je jen rozsáhlá množina ActionScript souborů, jak do toho všeho zapadá MXML? Ve skutečnosti je jediným „definitivním“ jazykem Flexu ActionScript a MXML je jen syntaktickou záležitostí. Například…

<mx:Button label=“Klikni“ />

…odpovídá ActionScript kódu:

var b : Button = new Button();
b.label = „Klikni“;

Flex této ekvivalence využívá při kompilaci – MXML kód je nejprve převeden na ActionScript (i když trochu jiný, než bylo právě uvedeno) a teprve ten je zkompilován do výsledného SWF souboru. Tuto ekvivalenci je dobré mít na paměti, v praxi mají ale oba jazyky dost jiné využití – hierarchické a dobře čitelné MXML se skoro výhradně používá na tvorbu uživatelského rozhraní, zatímco ActionScript slouží k psaní obsluhy událostí a dalšího procedurálního kódu.

Práce s daty

Interaktivní uživatelské rozhraní by bylo k ničemu, kdyby neumělo pracovat s daty. Flex jakožto klientská RIA technologie to ale v tomto ohledu nemá úplně jednoduché – data na uživatelově počítači jsou tabu kvůli bezpečnostním omezením Flash Playeru, zatímco k MySQL databázi se jakožto klientská technologie nemůže připojit vůbec. Řešení je tedy v podstatě jen jedno – přes HTTP si data vyžádat od nějakého serverového skriptu. (Pokud se vám to zdá příliš krkolomné a jako nedostatek Flexu, vězte, že v AJAXu a v RIA technologiích obecně to není a z principu nemůže být jiné.)

Pokud tedy chceme například načíst seznam zákazníků z databáze, musíme udělat následující:

V serverové technologii typu PHP, ASP.NET nebo Java vytvoříme skript, který data načte z databáze a nějakým způsobem je předá dál. Konkrétní implementace může být v REST stylu (například požadavek http://example.com/giveme/customers vrátí sadu zákazníků jako XML soubor) nebo se může jednat o webovou službu postavenou na protokolu SOAP – na tom vcelku nezáleží, důležité je, aby se o data dalo nějakým způsobem zažádat.
Ve Flexu využijeme třídu HTTPService, WebService nebo RemoteObject (podle použité implementace na serveru), o data zažádáme a po jejich obdržení je zobrazíme.

Pokud bychom chtěli podporovat kompletní CRUD operace (Create, Read, Update, Delete), budeme muset připravit serverový skript pro všechny druhy operací, což může být trochu pracné. Z toho vyplývá, že Flex není vhodnou technologií pro administrační rozhraní nad mnoha databázovými tabulkami, ale že se spíše hodí pro bohaté vizualizace dat (grafy a podobně). Je to logické – v RIA technologiích jde o bohaté uživatelské rozhraní především.

Validace dat

Flex obsahuje dobrou vestavěnou podporu pro validaci dat. Zde je příklad:

<mx:TextInput id=“emailInput“ />
<mx:EmailValidator source=“{emailInput}“ property=“text“ />

Textové pole samotné zůstává nezměněno (nikde se u něj nedefinuje, že by mělo obsahovat e-mail) a pouhá existence validátoru ve stejné aplikaci zajistí, že uživatel bude po zadání neplatné e-mailové adresy upozorněn červenou bublinou. Toto řešení je dobře flexibilní – designer například může navrhnout uživatelské rozhraní v MXML a vývojář může zcela nezávisle na něm přidat validační pravidla v ActionScript souboru (protože ActionScript a MXML jsou ekvivalentní, jak už víme). Rovněž lze ovlivnit vizuální reprezentaci chyb nebo implementovat vlastní validátory, Flex je zkrátka pro tuto činnost velmi dobře vybaven.

Skinování aplikace

Výchozí vzhled komponent může být ve Flexu do značné míry ovlivněn, a to bez zásahů do původního zdrojového kódu. Galerii zajímavých skinů lze nalézt na http://www.scalenine.com.

Další vlastnosti

Flex toho samozřejmě nabízí daleko více, namátkou:

efekty uživatelského rozhraní, opět jednoduše definovatelné v MXML nebo v ActionScriptu
data binding (například automatické navázání dat pole na komponentu DataGrid)
formátování (datum, měna…)
kvalitní podpora WYSIWYG ve Flex Builderu
řada komponent třetích stran, aktivní komunita
existence MVC frameworků
a tak dále

Souhrn

Především kvůli závislosti na Flash Playeru nemůže být Flex úplnou náhradou HTML/AJAXu, o zajímavou alternativu do některých scénářů se však rozhodně jedná. Flex nabízí především vysoký programátorský komfort a technické možnosti, které v HTML nemají obdoby. Pokud vás tedy tato technologie zaujala, stáhněte si Flex Builder a zkuste si vytvořit nějakou jednoduchou aplikaci – uvidíte, možná se vám Flex zalíbí tak jako mnoha vývojářům před vámi.

Odkazy a zdroje

Flex.org – základní rozcestník na různé zdroje o Flexu; pro úvodní motivaci může být zajímavá především stránka Flex Showcase.
Flex na webu Adobe – zde můžete mimo jiné stáhnout zkušební verzi Flex Builderu.
Sekce o Flexu na serveru flash.cz – články v češtině, fórum.
Adobe Feeds – agregátor blogů a dalších zdrojů většinou o Flexu.
Rich Internet Applications v roce 2008 – přehledový článek o oblasti RIA, který diskutuje zasazení Flexu do širšího kontextu.