A je tu už druhý díl seriálu vývoje aplikací ve Flexu. Posledně jsme si vysvětlili, k čemu slouží Adobe Flex a dnes se zaměříme na vývojové prostředí Adobe Flex Builder 3. Ukážeme si, jak v něm probíhá vývoj aplikace od založení projektu přes samotný vývoj až ke spuštění a otestování.

Zároveň tento díl bude poněkud netradiční, protože vedle klasicky psaného článku je k dispozici i video verze, kde můžete vše na živo sledovat. Omluvte prosím případné chvění hlasu a nervozitu, je to autorův první pokus s videem.

Screencast tvorby ukázkové aplikace ve Flex Builder 3

Pro zvětšení videa na celou obrazovku použijte tlačítko v pravém dolním rohu.

<iframe src=„http://i­.iinfo.cz/urs-att/iframe-1227096767157­95.html“ width=„480“ height=„370“ frameborder=„0“></i­frame>

Předpokládám, že po přečtení prvního dílu jste si všichni pořídili minimálně 30ti denní zkušební verzi Adobe Flex Builder (dále jen Builder). Nebudeme se proto zdržovat instalací a rovnou si založíme nový projekt (File > New > Flex project). Projekt pojmenujte ahojSvete. Všimněte si, že už tady je zaškrtnut jako typ aplikace web application, což znamená, že výsledná aplikace poběží ve Flash Playeru a tudíž ji lze umístit na web.

Po vytvoření se celý projekt otevře. V okně File navigator (vlevo) si můžete všimnout, že Builder nám společně s projektem vytvořil i nový MXML soubor, který se jmenuje stejně jako náš projekt (ahojSvete.mxml). Modrá plocha, která zabírá většinu místa na obrazovce, je právě tento soubor. Do něj budeme postupně umísťovat grafické komponenty, jako jsou tlačítka, obrázky atpod. Vpravo se nachází okno Flex properties, kde jsou vypsány nejdůležitější vlastnosti právě vybrané komponenty (v případě tlačítka tu najdeme, co je na tlačítku napsané, co se má stát po kliknutí na toto tlačítko apod.).

Pokud jsme žádnou komponentu nepřidali, nastavujeme vlastnosti samotného okna. Jak jste si určitě všimli, okno má nastavený (pro Flex typický) modrý přechod, který necháme, ale změníme položku layout v stejnojmenné sekci na vertical. Tím zajistíme, aby se nám všechny komponenty řadily pod sebe a zarovnávaly na střed.

Jako první přetáhneme do okna komponentu Panel (okno komponent se standardně nachází vlevo dole). V okně Flex properties nastavíme hodnotu ID na „hello“ a title na „Ahoj světe“. Do panelu ještě přidáme komponentu label a upravíme její text na „Ahoj světe“. To můžete provést buď dvojím poklepáním na text label nebo opět ve Flex properties. Text můžeme příp. zvětšit a obarvit.

Pro oživení jinak textové aplikace vložíme ještě do panelu komponentu image. Ta slouží k zobrazení libovolného obrázku. Teď si musíme nějaký obrázek vybrat, já jsem použil logo Zdrojáku. Obrázek musíte přetáhnout do složky src ve File navigatoru a nakonec nastavit hodnotu src na jméno obrázku (logo-zd.gif). Nakonec někam dolů pod panel umístíme komponentu button. U něj změníme hodnotu label na „zobraz/skryj“ a do kolonky On click: vložíme tento kód:

hello.visible = !hello.visible; 

Vaše aplikace by nyní měla vypadat takto:

No a tím jsme v podstatě skončili. Aplikaci uložte, tím dojde i k přeložení aplikace do SWF. Jak si můžete všimnout, pokud ve File navigátoru otevřete složku bin-debug, uvidíte v ní soubory ahojSvete.swf a ahojSvete.html. Tady za nás Builder odvedl další kus práce a my jsme nemuseli vytvářet HTML soubor, ani provádět kompilaci aplikace. Soubor ahojSvete.swf je klasický soubor spustitelný ve Flash Playeru a soubor ahojSvete.html je HTML soubor, který zmíněný SWF soubor zobrazí.

Aplikaci spustíme zelenou šipkou nahoře na lište Builderu (po najetí se objeví Run). Jakmile je aplikace spuštěna, můžeme ji vyzkoušet. Po klepnutí na tlačítko zobraz/skryj by měl celý panel zmizet a zase se ukázat.

Nyní si předvedeme animační možnosti Flexu. Flex podporuje několik typů animace, jmenují se effects. V našem případě použijeme Fade effekt. K jeho použití musíme upravit zdrojový kód aplikace. Zobrazíme jej klepnutím na tlačítko Source (hned nad modrým oknem naší aplikace vedle tlačítka Design). Za řádkem s <mx:Application …>  vytvoříme řádek nový obsahující tento kód:

<mx:Fade id="prechod"/> 

Zároveň musíme upravit řádek s <mx:panel>  následovně:

<mx:Panel layout="absolute" id="hello" title="Ahoj světe"
          hideEffect="prechod" showEffect="prechod"> 

Přidaný kód dodává našemu panelu efekt fade. Všimněte si, že hodnota hideEffect i showEffect je „prechod“, což je ID efektu fade. Pokud jste vše udělali správně, stačí aplikaci již jen uložit a spustit. Po stisknutí tlačítka zobraz/skryj panel postupně mizí a zase se postupně objevuje.

Závěr

Pro dnešek je to vše. Doufám, že třešničkou na dortu, jakou byl efekt fade na konci, jsem vás navnadil do další práce a už teď se těšíte na další díl seriálu. Povíme si v něm o základech ActionScriptu, které je potřeba pro další práci s Flexem zvládnout. Pokud jste nedočkaví a umíte anglicky, mohu prozatím odkázat na dokumentaci.

Hotovou aplikaci včetně zdrojových kódů si můžete stáhnout: Ukázková Flex aplikace (ZIP 287086 bytů).