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=„true“
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.
AnimateTransitionShader
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
Přehled komentářů