Flex 4: začínáme

S Flexem 4 jsme se již setkali v článku Jak na to: Spojení Flex 4 a PHP ve Flash Builderu 4. V tomto seriálu se budeme věnovat frameworku Flex podrobněji, a to především vlastnostem jeho čtvrté verze.

Pár slov o ActionScriptu

ActionScript je objektový jazyk, kterým se programuje pro Flash Player, a který vychází z ECMAScriptu. Je podobný JavaScriptu, Javě, C# či dalším „C-like“ jazykům (kam patří třeba i PHP), takže pro čtenáře, co některý z těchto jazyků znají (a takových je na Zdrojáku jistě naprostá většina), bude ActionScript hračka.

Nyní se nachází ActionScript ve verzi 3.0 a od svého oficiálního vzniku v roce 1998 ušel značný kus cesty. Nebudeme se zatěžovat předešlými verzemi, ale projdeme si rovnou pár ukázek syntaxe ActionScriptu na rozehřátí:

var toggled:Boolean = true; // booleovská hodnota
var x:int = 100; // definice proměnné celého čísla
var y:Number = 123.456; // definice proměnné čísla s pohyblivou desetinnou čárkou, identické s JavaScriptovým Number
var str:String = "Ahoj"; // řetězec
var arr:Array = ["prvek 1", "prvek 2"]; // dynamické pole
var arr2:Array = new Array("prvek 1", "prvek 2"); // taky pole
var vector:Vector.<Number> = [2231,5435,4350,6905]; // Vector je typové pole, v tomto případě pole celých čísel, operace nad Vectorem jsou mnohonásobně rychlejší než nad dynamickým polem, Vector je k dispozici od Flash Playeru 10.
var obj:Object = {jmeno:"Tom",prijmeni:"Krcha"}; // definice objektu
trace(obj.jmeno); // trace je funkce, která v debug módu vypíše řetězec do konzole (Console, najdete zpravidla naspodu obrazovky ve Flash Builderu)
var neco:*; // definice proměnné neznámého typu

Definice třídy

 Např. třída RozsirenePole rozšíří Array o pár funkcí:

package balicek
{
    public class RozsirenePole extends Array
    {
        // neveřejná proměnná přirozeného čísla
        private var i:uint = 123;

        // konstanta
        private const MAX:uint = 200;

        // Konstruktor
        public function RozsirenePole(...parameters)
        {
        // Volání konstruktoru rodičovské třídy
            super(parameters);
        }

        private function neverejnaFunkce():void{
        }

        public function verejnaFunkce():Array{
        }

        // tuhle funkci můžou používat všechny další sub-třídy a třída sama, jinak je privátní
        protected function chráněnáFunkce():Array{
        }

        // statická funkce přístupná jako RozsirenePole.maximalniHodnota();
        public static function maximalniHodnota():uint{
            return MAX;
        }

        // getter/setter
        private var _promenna:Number;

        public function get promenna():Number{
            return _promenna;
        }
        public function set promenna(value:Number):void{
            _promenna = value;
        }
    }
}

K dispozici máme i atributy dynamic, final, internal, native či override. Bližší informace naleznou zájemci v kapitole Statements v ActionScript 3.0 Language Reference.

Cykly

K dispozici jsou standardní cykly jako např. while, do/while, for, for each. Např:

for(var i:uint = 0;i<100;i++){
    trace(i);
}

Kompilátor mxmlc je volně k dispozici v rámci Flex SDK.

Toto byl nezbytný základ a „crash course“ ActionScriptu. Další vlastnosti ActionScriptu si ukážeme v průběhu práce.

Flex 4

Pojďme se tedy podívat na Flex.

Co je vlastně Flex? Potřebuju nějaký Flex Player? 

Ne, vše je Flash. Flex je knihovna pro Flash – sada ActionScriptových tříd, které použijete pro tvorbu výsledného SWF a ve finále spustíte ve Flash Playeru. Není tedy potřeba žádný Flex Player.

Flex je jednodušší a rychleji v něm složíte RIA aplikaci než v prostém Flashi. I když se zcela jistě najdou lidé, kteří s tímto názorem nebudou souhlasit, a zčásti mají pravdu. V dnešní době existuje spousta ActionScript frameworků, které tvorbu RIA ve Flashi usnadňují (BaseUI, MinimalComps…), ale ve spoustě případů narazíte na něco, co vám bude chybět.

Adobe se tedy rozhodlo vytvořit jednotný framework, který se postupem času stal open-source a má otevřený bug tracker, kde můžete vznášet připomínky na bugy i s případným návrhem na opravu. Flex v dnešní době obsahuje téměř vše pro tvorbu standardních RIA. Jeho poslední verze, Flex 4, navíc uvedla řadu podstatných novinek, které posouvají možnosti zase o kus dál. Zejména při práci s grafikou – stylování, skinování ve spojení s Flash Catalyst, ale i další výhody, které si postupně v seriálu představíme.

Když se bavíme o Flashi, myslíme tím vetšinou čistý ActionScript projekt vytvořený v nějakém IDE (Flash Professional, Flash Builder, FDT, IntelliJ, TextMate, Notepad) a zkompilovaný pomocí MXMLC. Hlavní výhodou je v tomto případě optimalizace – kompletní kontrola nad tím co se ve finále zkompiluje. Týká se to nejenom rychlosti, ale i velikosti výsledného souboru. Proto spousta lidí dává přednost psaní čistého ActionScriptu. (Já osobně preferuji Flex právě kvůli své lenosti a lepší teamové spolupráci, kterou Flex nabízí. – pozn. aut.) Na druhou stranu třeba zobrazení dat ze serveru a jejich editaci

uděláte ve Flexu za pár minut bez nějakých výrazných znalostí.

Základní komponenty Flexu jsou: Seznamy, tlačítka, datagridy, slidery, checkbox, combobox, video přehrávač a spousty dalších.

Pro návrh layoutu nabízí Flex kontejnery, které zjednodušují seskládání aplikace a dávají výslednému zobrazení pravidla.

Navigátory: Akordéon, ButtonBar, Taby apod.

Grafy: Zobrazení grafů je pomocí grafových komponent hračka.

Pro práci s Flexem si stáhněte a nainstalujte Flash Builder 4.Výsledný projekt se všemi příklady si můžete stáhnout zde: Flex 4 – Hello World. Importovat jej můžete přes  File -> Import Flex Project (FXP)

První aplikace: HelloWorld s bindingem

Binding je velmi užitečná vlastnost Flexu, která vám umožní v reálném čase mapování proměnných na komponenty.

Vytvoříme nový projekt: File -> New -> Flex Project. Nazveme jej HelloWorld a dáme Finish. Otevřeme si Design view a drag-and-dropneme NummericStepper z Controls do aplikace. Nastavíme v properties Id: stepper, Minimum: 100, Maximum: 200 a Step size: 10. Když zobrazíme zdroj – Source view, měli bychom tam mít tohle:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:NumericStepper x="10" y="10" minimum="100" maximum="200" stepSize="10" id="stepper"/>
</s:Application>

Jazyk MXML, který se při práci s Flexem hojně používá je pouhý XML zápis ActionScriptu. Jmennými prostory definují různé sady tříd, které právě používáte: s – nové Spark komponenty, mx – Halo komponenty z Flexu 3, fx – základní třídy. Později si k tomu řekneme víc, zatím zůstaneme u NumericStepperu a přidáme do aplikace pod něj ještě TextInput.

<s:Button x="10" y="45" label="Button {stepper.value}" id="btn" width="{stepper.value}" height="{stepper.value/2}"/>

Složené závorky definují binding. Když se změní hodnota NumericStepperu, projeví se v popisu tlačítka. Tuto hodnotu projevíme i do šířky a výšky. Spustíme aplikaci. Změnou hodnoty NumericStepperu nyní ovlivňujeme parametry tlačítka. Vidíme, že binding je velmi silný a ušetří nám spoustu kódu. Flex 4 navíc uvedl two-way binding – nejenom, že hodnotu propagujete někam, navíc ji můžete i přijímat.

Druhá aplikace: Two-way binding

Vytvořte v našem projektu aplikaci HelloWorld2.mxml ( File -> New -> MXML application) a vložte do ní 2 TextInputy:

    <s:TextInput x="10" y="10" id="txt1"/>
    <s:TextInput x="10" y="40" id="txt2" text="@{txt1.text}"/>

Zavináč definuje two-way binding. Když změníme hodnotu v txt1, změní se tatáž hodnota v txt2. Nově však můžeme změnit hodnotu v txt2 a ta se projeví do txt1. Tato technika výrazně zjednodušuje editaci ve formulářích. K two-way bindingu se ještě vrátíme v dalších dílech.

Třetí aplikace: Layout

Dynamický layout je další silná zbraň Flexu. U každého prvku můžete nastavit parametry left, right, top, bottom a různě je kombinovat. Jednoduchým příkladem může být např. VideoPlayer, který mění velikost podle velikosti prohlížeče.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
    <s:VideoPlayer left="0" right="0" top="0" bottom="0"/>
</s:Application>

Ano. Výše uvedený kód je opravdu celý. Pokud bychom chtěli v přehrávači spustit video, stačí nastavit parametr source např. takto:

    <s:VideoPlayer source="http://www.flashrealtime.com/tuts/video/FlashCatalyst-screencast-czech.mov" left="0" right="0" top="0" bottom="0"/>

Tímto se spustí video pomocí progressive download přes HTTP.

Čtvrtá aplikace: Layout podruhé

Pro další pochopení layoutování si zkuste zkompilovat následující příklad HelloWorld4:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:Panel width="250" top="10" bottom="10" x="10">
    </s:Panel>
    <s:Panel left="275" right="10" top="10" height="250">
    </s:Panel>
    <s:Panel left="276" right="10" bottom="10" top="275">
    </s:Panel>
</s:Application>

Pátá aplikace: Pokročilejší layout s HGroup, VGroup a TileGroup

Pokud vám něco říká Flow layout, tak přesně o to zde jde. Prvky se budou pozicovat relativně za sebou. V případě HGroup horizontálně, VGroup vertikálně a s TileGroup  do matice. Všechny tři kontejnery dědí od Group, což je de-facto základní Canvas s absolutním pozicováním.

 <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:HGroup x="10" y="10">
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
    </s:HGroup>
    
    <s:VGroup x="10" y="40">
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
    </s:VGroup>
    
    <s:TileGroup x="86" y="39" width="298" height="130">
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
        <s:Button label="Button"/>
    </s:TileGroup>
    
</s:Application>

Šestá aplikace: Script blok a Twitter timeline

Asi si celou dobu říkáte, kam zmizel slibovaný ActionScript. Nyní si vytvoříme aplikaci, která zobrazí poslední stavy z Twitter účtu. Použijeme knihovnu twitterscript. Stáhněte si poslední verzi ActionScript knihovny SWC – v tomto případe TwitterApi.1.3­.swc. Vytvořte novou aplikaci PosledniTweety.mxml. V horním menu zvolte Project -> Properties. Otevřete Flex Build Path. Přejděte na Library Path tab, klikněte na Add SWC a vyberte stažený *.swc soubor – tím nalinkujete knihovnu.

Stažení timeline bude tedy vypadat nějak takto: Všechny síťové operace ve Flash Playeru jsou asynchronní, tudíž přídáme EventListener – funkci, která je vyvolána, když vznikne určitá událost – v tomto případě TwitterEvent.ON_U­SER_TIMELINE_RE­SULT.

private function stahniTimeline():void
{
    var twit:Twitter = new Twitter();
    twit.addEventListener(TwitterEvent.ON_USER_TIMELINE_RESULT, stahniTimelineResult);
    twit.loadUserTimeline(txtUser.text);
}

Timeline chceme zobrazit v seznamu, proto přídáme [Bindable] proměnnou timeline a tu nabindujeme na seznam. Data se nachází v event.data – co vrací si můžeme v Debug módu zobrazit v okně Variables, když přídáme na daný řádek breakpoint. My víme, že vrací jedno pole v druhém poli – to vyjmeme pomocí pop() a převedeme na ArrayCollection.

Knihovna twitterscript vám umožňuje vytvořit kompletní Twitter klient jako je např. TweetDeck či Seesmic Desktop za velmi krátkou dobu. Pokud vám dostupní Twitter klienti nevyhovují, zkuste si vytvořit vlastního, lepšího…Výsledná aplikace PosledniTweety.mxml bude tedy vypadat takhle:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="stahniTimeline()">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
           
            import twitter.api.*;
            import twitter.api.data.*;
            import twitter.api.events.*;
           
            [Bindable]
            private var timeline:ArrayCollection;
               
            private function stahniTimeline():void
            {
                var twit:Twitter = new Twitter();
                twit.addEventListener(TwitterEvent.ON_USER_TIMELINE_RESULT, stahniTimelineResult);
                twit.loadUserTimeline(txtUser.text);
            }
           
            private function stahniTimelineResult(event:TwitterEvent):void{
                timeline = new ArrayCollection(new Array(event.data).pop());
            }
               
            private function lblFunction(item:Object):String{
                return item.createdAt+" | "+item.text;
            }
        ]]>
    </fx:Script>
   
    <s:List dataProvider="{timeline}" labelFunction="lblFunction" top="100" bottom="0" left="0" right="0"></s:List>
    <s:Button x="142" y="10" label="Stáhnout" click="stahniTimeline()"/>
    <s:TextInput x="10" y="10" id="txtUser" text="tomkrcha"/>
</s:Application>

V článku jsme si ukázali základy práce ve Flexu 4. Dalšími hezkými věcmi, které Flex 4 vývojářům RIA nabízí, jsou např. drag-and-drop, stavy, navigátory apod. Se všemi se postupně seznámíme v dalších dílech.