Flex 4: States a Transitions

Pomocí stavů můžeme definovat logické části či sekce aplikace, a následně se na ně můžeme odkazovat a přepínat mezi nimi. Není v tom žádná věda, a opět, jak je při vývoji ve Flexu zvykem, existují postupy, jak mechanickou práci zautomatizovat. Zde stačí použít panel States, a pak jen ovlivňovat vlastnosti komponent v tom kterém stavu, potřebný kód generuje Flash Builder automaticky na pozadí.

Podobné nastavení lze do kódu zapsat takto:

<s:states>
    <s:State name="Uvod"/>
    <s:State name="Editor"/>
    <s:State name="Napoveda"/>
</s:states>

Definice stavů aplikace

Dříve se ve Flexu (do verze 3) definovaly stavy pomocí <states> a tagu <State>, kam šlo ručně vkládat komponenty pomocí AddChild, odebírat pomocí RemoveChild, měnit vlastnosti pomocí SetProperty a styly pomocí SetStyle. Tento způsob lze použít stále, ale Flex 4 přichází s novou metodou, která byla přidána na žádost vývojářské komunity.

Nově lze pouze nadefinovat jména stavů, a k nim následně přiřadit komponenty pomocí parametru includeIn a excludeFrom a měnit vlastnosti pomocí tečkové notace.

Pokud chceme zobrazit nějaké tlačítko pouze ve stavu Uvod, stačí napsat:

<s:Button includeIn="Uvod" />

Analogicky – pokud ho chceme zobrazit ve všech stavech, vynecháme includeIn a excludeFrom  úplně:

<s:Button/>

Pokud jej chceme ve stavu Uvod a Napoveda, a nikoliv ve stavu Editor, tak můžeme zvolit dva způsoby. Buď vyjmenovat stavy, v nichž se má tlačítko zobrazit:

<s:Button includeIn="Uvod,Napoveda"/>

nebo komplementárně určit stavy, v nichž se zobrazit nemá:

<s:Button excludeFrom="Editor"/>

Vlastnosti komponenty pouze v určitém stavu pak měníme pomocí tečkové notace. Následující kód říká: ve stavu Uvod přesuň x pozici na 100 a ve stavu Editor x na 10 a y na 150, jinak nech x na 10 a y na 50.

<s:Button x="10" y="50" x.Uvod="100" x.Editor="10" y.Editor="150"/>

Zkusme si nyní se stavy trochu pohrát. V následujícím kódu jsou 3 komponenty:

• tlačítko, které mění pozici v závislosti na stavu
• popisek s názvem aktuálního stavu
• ComboBox na přepínání stavů

Všimněte si, že stav, v němž je aplikace spuštěna (start state), je nastaven na hodnotu Uvod pomocí  currentState="Uvod".

<?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" currentState="Uvod">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            import spark.events.IndexChangeEvent;

            protected function combobox1_changeHandler(event:IndexChangeEvent):void
            {
                currentState = states[event.newIndex].name;
            }

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="Uvod"/>
        <s:State name="Editor"/>
        <s:State name="Napoveda"/>
    </s:states>
    <s:Button id="btn" x="10" y="50" label="Button" x.Uvod="100" x.Editor="10" y.Editor="150"/>
    <s:ComboBox y="8" right="10" dataProvider="{new ArrayCollection(states)}" labelField="name" selectedIndex="0" hange="combobox1_changeHandler(event)"/>
    <s:Label x="10" y="10" text="{currentState}"/>
</s:Application>
</pre>

ComboBox při vybrání jiné položky vyvolá událost combobox1_changeHandler, která se automaticky vygenerovala ve Flash Builderu. Stačí do ComboBoxu připsat atribut change (a ENTERem spustit generování handleru). Lze také jít přes panel Properties, v události Change kliknout na symbol blesku a zvolit Generate Event Handler.

Přechody mezi stavy

Mezi stavy aplikace lze přecházet pomocí přechodů (transitions), které jsou definovány v tagu <s:transitions>.

Zkuste do naší aplikace přidat následující kód:

<s:transitions>
    <s:Transition id="myTransition" fromState="*" toState="*" effect="{mover}" />
</s:transitions>

a do do deklarací efekt Move:

<fx:Declarations>
    <s:Move id="mover" duration="3000" targets="{btn}" />
</fx:Declarations>

Zajistí, že se při přechodu mezi stavy tlačítko btn přesune plynule za dobu 400 milisekund. Přechodu můžeme ještě nadefinovat easing – průběh animace (křivku). Všechny easingy pro Flex 4 najdete v balíčku spark.effects.easing. Standardně máte k dispozici např: Bounce, Elastic, Linear, Sine, ale může to být i vlastní třída implementující rozhraní IEaser.

Zajímavostí je, že třeba Wipe a CrossFade jsou shader filtry implementované pomocí jazyka Pixel Bender, optimalizovaného pro transformaci bitmap.

Zkusme použít filtr Bounce:

<fx:Declarations>
    <s:Bounce id="bounce" />
    <s:Move id="mover" duration="3000" targets="{btn}" easer="{bounce}"/>
</fx:Declarations>

(Mimo Move je k dispozici řada dalších přechodů, jako například Rotate, Scale, Resize, Move3D, Fade  – a mnohé další. Další informace o přechodech naleznete např. v popisu k balíčku  spark.effects.)

Když budeme chtít například nechat plynule zmizet nebo zobrazit některé prvky při změně stavu, můžeme k tomu využít efekt Fade. Zkusme si, jen pro zajímavost, upravit náš příklad tak, aby používal Fade a alpha.

Pokud chceme použít dva efekty zároveň, zabalíme je do tagu  Parallel:

<fx:Declarations>
    <s:Parallel id="parallel" target="{btn}">
        <s:Move id="mover" duration="3000"  />
        <s:Fade id="fader" duration="1000" />
    </s:Parallel>
</fx:Declarations>

Tlačítku btn pak nastavíme v jednotlivých stavech různé průhlednosti  alpha.

<s:Button id="btn" x="10" y="50" label="Button"
 x.Uvod="100" x.Editor="10" y.Editor="500"
 alpha="0" alpha.Uvod="1" alpha.Editor="0.6"
 alpha.Napoveda="0.1"/>

Na závěr musíme ještě změnit parametr a do atributu effect napsat ID našeho nového efektu:  effect="{parallel}"

autoReverse=„tru­e“

Určite nastane situace, kdy je potřeba spustit přechod ve chvíli, kdy nebyl předchozí ještě dokončen, a proto je potřeba pokračovat z místa, kde jste právě skončili. K tomu slouží vlastnost přechodu autoReverse. Přepněte ji na true a zkuste, jak se příklad bude chovat s ní a bez.

Animate

Třída Animate je základem pro ostatní efekty. Umožní vám „animovat“ jakoukoliv proměnnou – např. pozici ScrollBaru. V podstatě naprosto cokoliv – fantazii se zde meze nekladou. Velmi užitečným zdrojem pro získání dalších informací je blog Codedependent a související Adobe TV Codedendent show, kde Chet Haase (senior computer scientist pro Flex) ukazuje pokročilejší triky s přechody, Flexem apod. Doporučit lze např. videotutorial Animating a TextArea.

AnimateTransi­tionShader

Pomocí této třídy lze animovat Pixel Bender shadery. Podrobnější popis by opět byl mimo rozsah článku, proto doporučuji zájemcům o tuto problematiku stáhnout si nějaký filtr z Pixel Bender Exchange a vyzkoušet jej. Příklad naleznete i v dokumentaci Flex 4.

Odkazy:

• Stáhnout Flash Builder 4
• Příklad z dnešního dílu ke stažení: Flex 4 – States a transitions
• Do příkladu je přidán ještě efekt Rotate – Codedependent