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ářů