Přejít k navigační liště

Zdroják » Různé » Flex 4: States a Transitions

Flex 4: States a Transitions

Články Různé

V minulém díle jsme se seznámili se základy Flexu a ActionScriptu a předvedli si vytvoření jednoduché aplikace v tomto frameworku. Dnes si řekneme něco o interních stavech aplikace a přechodech mezi nimi.

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í.

Flex 4 - díl 2

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.

Flex 4 - díl 2

Flex 4 - díl 2

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:

Komentáře

Subscribe
Upozornit na
guest
20 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
pr.rybar

po tomto dieli serialu vsetci alebo horuckovite zacali studovat Flex 4 a prepisovat do neho svoje aplikacie, alebo im doslo o com skutocne Flex 4 je a nehodlaju sa nim dalej zaoberat

ja patrim k tym druhym, takto skutocne vyvyjat nehodlam :(

ps: searial si ale zo zaujmom docitam

pf

States a transitions těch states je jen jedna feature. Je třeba si uvědomit, že states vůbec nemusíte používat pokud vám nevoní. Můžete klidně na sebe vrstvit okna/panely/di­alogy/canvasy + layouty (a klidně je animovat) jako v normální desktop aplikaci (tak jak se aplikace vždycky psaly). Máte dosti solidní objektovou hierarchii všemožných „kontrolek“ (tlačítek, edit boxů…), z kterých můžete dědit a dopsat si _čistě_ co chcete, máte solidní podporu eventů – co chcete víc? :) (a to mluvíme jen o GUI)
Když půjdete cestou HTML a JavaScriptu, máte např. jeden ubohej InputBox na text a rozšiřování jeho vlastností, to je sebemrskačská soustava hacků… to neustálý mrskání se s <DIV/>, to je vývoj? a takhle je to se vším každou chvíli…

Přeji seriálu o Flexu aspoň 20 dílů :)

pr.rybar

> Když půjdete cestou HTML a JavaScriptu, máte např. jeden ubohej InputBox na text a rozšiřování jeho vlastností, to je sebemrskačská soustava hacků… to neustálý mrskání se s <DIV/>, to je vývoj? a takhle je to se vším každou chvíli…

Mam pocit akoby ste nikdy to HTML a Javascript nevideli.
Videli ste niekedy Google? :)

> Můžete klidně na sebe vrstvit okna/panely/di alogy/canvasy + layouty (a klidně je animovat) jako v normální desktop aplikaci

Videli ste niekedy ako sa robi normalna desktop aplikacia? :)

Asi som do tejto diskusie vazne nemal prispievat. Za cely den Flex 4 nikomu nestal za prispevok :(

pf

Ano google sem samozrejme videl. Ono je ale rozdil to videt a pouzivat a nebo vyvyjet – a to bych teda vazne nechtel. Zkuste si predstavit kolik lidi na tom muselo drit a kolik to muselo stat.

Desktop app – nejen videl, ale i nespocet delal. Rekneme ze Flex Builder dokaze plnit roli uplne klasickyho IDE na vyvoj desktop apps (tak jak je zvykem)… Podobne jako v Delphi, Netbeans nebo Visual Studiu.

Flex nikomu nestal za prispevok – no jo, kolem flashe je za ty roky banneru spousta predsudku, co se da delat. Velmi tezko se lidi presvedcuji ze Flex ma fakticky vetsi moznosti nez HTML+JS pro vyvoj apps (wiki bych v tom asi nedelal, to je jasne) – proto v ramci dalsi konstruktivni diskuze by bylo dobry se bavit o konkretnich vecech a porovnavat konkretni veci a moznosti, takto bychom se nikam nedostali. Na otazku jestli jsem neco videl se da odpovedet jenom „ano videl“ a ani jednoho z nas to nikam neposune…

pr.rybar

> Ano google sem samozrejme videl. Ono je ale rozdil to videt a pouzivat a nebo vyvyjet – a to bych teda vazne nechtel. Zkuste si predstavit kolik lidi na tom muselo drit a kolik to muselo stat.

Ak ste videl Google, pozrite si aj GWT.
Skuste si predstavit kolko ludi muselo drtit na Flexe a kolko to muselo stat.

> Desktop app – nejen videl, ale i nespocet delal.

Potom ale nechapem ako mozete tvrdit:
„klidně na sebe vrstvit okna/panely/di alogy/canvasy + layouty (a klidně je animovat) jako v normální desktop aplikaci „
Prezradte prosim mne aj ostatnym, ktory widget toolkit pre tvorbu desktopovych aplikacii to tak robi. Vopred dakujem. :)

>Na otazku jestli jsem neco videl se da odpovedet jenom „ano videl“ a ani jednoho z nas to nikam neposune…

Vas to mozno neposunie, mna ale ano. Ked sa pytam, ci ste to videl, myslim tym: Ak set to niekedy uz videl, ako mozete rozpravat take hluposti. Iba ze by ste to videl a nepochopil.

pf

OK. Nedokazal sem se spravne vyjadrit (vrstveni) pro puntickare, moje chyba. Ale jak vidim, tak jak se pise desktop aplikace moc dobre vite a ze jde psat klasicka desktop aplikace ve Flexu taky vite a ze nemusite pouzivat states asi taky tedy chapete. To byla moje mise smerem k vam. Dekuji.

Na GWT jsem se znovu podival. V jakych vlastnostech prosim vynika oproti tomu zpropadenemu Flexu (kdyz uz se tady ty technologie snazime srovnavat)?

Pavel Šimek

DIV v HTML je něco jako Display Object ve Flashi – základní zobrazovací element. Nad tím může být teoreticky postaven framework stejný jako Flex. Srovnání efektivity vývoje ve Flexu s AJAXovými frameworky (architektura, používané design patterny, nástroje…) by určitě bylo zajímavé, ale za situace, kdy se lidi bijí za své jediné správné náboženství, se nedá čekat, že by někdo do hloubky prozkoumal více alternativ.

pf

Ano, muze. Ale podle mych zkusenosti jen teoreticky. Me prave spise zajima dnesek a praxe s pohledem do budoucna nez teorie a cekani na budoucnost (naplanovana budoucnost opravdu nekdy neprijde).

Zkuste si napsat napr. webovy CASE nastroj. Co pouzijete? HTML Canvas? DIVy a SVG? Jak budete odchytavat mouse eventy v Canvasu? Budete do Canvasu vsechno kreslit a mouse eventy odchytavat globalne pro cely Canvas (v kterem jsou stovky samostatnych grafickych sub-prvku) a vsechno si resit sam? Muzete do Canvasu vlozit subkomponenty (childs), ktere si prirozene ze sve hierarchie mouse eventy budou chytat samy (protoze jim tato odpovednost podle OO patri)? Jak asi bude za rok vyvoje vypadat vas JS kod? Proc je hned v prvnim tutorialu co jsem nasel na kresleni do Canvasu IF podminka, jestli jsem v Opere nebo ve Firefoxu? To je samozrejme jeden priklad (ucelovy? :) )…

Muzeme klidne vymyslet nejake zadani a porovnat nasledne vysledky ve Flexu a v HTML a JS (ne jen vysledky ale i vnitrek, cistotu OO, jednoduchost, primocarost implementace, pocet nutnych hacku). Vystrelte navrh pls (ne ze bych mel na podobny kraviny more casu, ale sem ochoten neco zkusit abych jen neplacal).

pf

(muj predchozi prispevek je namiren vice na Pavla Simka nez sem zamyslel, slo spis o ten Canvas, on ten HTML Canvas zase totiz takovy odvaz neni)

Pavel Šimek

Ano, já to vím (resp. spíše teoreticky tuším) že HTML/JS má ve srovnání s Flashem velmi chatrné a nesystematické základy na to, aby se z toho stala aplikační platforma. Ale taky vím, že nic není nemožné (ostatně pro Flash do verze 8 platilo totéž o těch chatrných základech). Proto by mě zajímalo, jestli se některý z AJAXových frameworků už dostal do stadia, že bez problémů „kompiluje“ do této platformy z nějakého vyššího jazyka (třeba Javy) a odstiňuje vývojáře od JavaScriptu, který je samozřejmě na programování čehokoliv většího nevhodný.

(Tyhle diskuse se vždycky zkomplikují tím, že do nich někdo vnese námitku, že HTML/JS jsou prostě standardy schválené příslušnými organizacemi, zatímco SWF je výmysl jedné firmy. To by ale měla být úplně samostatná diskuse.)

Martin Malý

„jestli se některý z AJAXových frameworků už dostal do stadia, že bez problémů „kompiluje“ do této platformy z nějakého vyššího jazyka (třeba Javy)“ – koukněte se na GWT (Google Web Toolkit – http://code.google.com/intl/cs/webtoolkit/)

Pavel Šimek

Já vím, že to existuje. Spíš jsem si chtěl ušetřit čas s experimentováním… takže by mě potěšilo, kdyby někdo napsal „Ano, GWT používám, sekám s tím jednu aplikaci za druhou, s GUI na úrovni Google Docs (lépe však na úrovni GUI flexových aplikací), veškeré úpravy v čisté Javě, s JavaScriptem nepřijdu do styku“.

pr.rybar

Aspon ze k editorovi sa spravate slusne.
Hoci Vam to musel podat polopatisticky.

Nie je mi jasne, preco maju ludia fobiu z programovania v Javascripte.
Z praxe viem, ze je to tym, ze si ludia nenastuduju syntax jazyka. A preco si to nenastuduju? Lebo oni su predsa super neprekonatelni machri a oni to nemusia. Javascript je predsa lahky, skoro ako C/Java ma nejake objekty, ze nema tredy im akosi uniklo, ale to im nevadi a este ma aj funkcie. Tak co sa ucit.

O GWT je na Googli mozne najt kopu odkazov na skusenosti. Tak preco klast otazku skor ako si o tom nieco zistit?

A este jedna poznamka. Je uzitocne sa naucit formulovat jednoznacne a zrozumitelne otazky. Ak sa spytate „Existuje …“ tazko si pod tym niekto predstavy „Ma niekto skusenosti s … “.

Pavel Šimek

Dokud si píšeme česky a slovensky (a ne javascriptem :)), tak musíte počítat s určitou mírou zamlženosti, nepřesností a lidských prohřešků. :)

Co je na tom špatného přiznat v diskusi, že si chci ušetřit čas a na něco se prostě zeptat? Lidí, kteří mají chuť a čas odpovědět.

Fobie z JavaScriptu? To mě ani nenapadlo… Já jsem právě dřív v JS dělal hodně, syntaxi jsem si prošel od A do Z a fobii jsem měl právě možná z toho, že toho v ní už víc nebylo. :)

aprilchild

o GWT psal Martin, dalsi z rady je napr. Capuccino (http://cappuccino.org/) pouzite pro MobileMe (http://me.com).

Tyhle diskuze se vzdycky zkomplikuji tim, ze do nich nekdo vnese namitku typu „… od JavaScriptu, který je samozřejmě na programování čehokoliv většího nevhodný..“ :). Nic ve zlem, ale taky pekna pitomost.

pf

Apple pro me.com a iWork.com pouziva http://www.sproutcore.com/

Pavel Šimek

A proč je to pitomost? Existují jazyky jednoduché a složité – je snad na první pohled vidět, že JS je jednoduchý jazyk, AS je složitější a třeba C# ještě o trochu víc složitý. Vždycky jsem si myslel, že do jazyků se přidávají další a další konstrukce (to je to, čemu říkám „složitý“) proto, aby se udržel pořádek a zefektivnilo ladění při velkých projektech. Mýlím se a na cokoliv se stejně efektivně dá použít i JavaScript?

Samozřejmě, co se týče výkonu, tak vůbec nepopírám, že JavaScript klidně může nadále hrát roli webového „assembleru“. Ostatně když už vzniká dokonce javascriptová implementace Flash Playeru, tak je asi možné úplně vše (http://paulirish.com/work/gordon/demos/)

Erender

Absolutna pravda. State su vyborna vec, ale samozrejme to s nimi netreba prehanat. Treba si uvedomit, ze vo flexe treba mysliet nie webovo, ale aplikacne. To znamena, ze mate k dispozicii samostatne okienecka, kanvasy, panely atd, ako napisal hore kolega PF. Ja osobne mam napriklad urobenu sablonku pre prihlasovanie. Je to jednoduchy panel, na ktorom su nejake policka aby sa uzivatel mohol prihlasit aj s tlacitkom na prihlasenie. Uz je ale zbytocne robit novy panel na registraciu. Tak jednoducho zmenim state, pri kliknuti na registraciu zvacsim okienecko, doplnia sa dalsie polozky pre registraciu potrebne a je to rychle, krasne, elegantne. Tiez pouzivam staty pre rozsirenie nastaveni. Mam v jednej aplikacii nejaky default profil jedneho komponentu. Ak uzivatel chce zmenit nastavenia komponentu, klikne na navigacny bazmeg, zmenim state – ukazem mu zopar dalsich voliem a ked uzivatel chce, zase klikne a okienecko sa vrati do povodneho stavu.

Taktiez prajem serialu o flexe vela dielov – zatial je toho jak safranu (na CZ, SK webe). Tesim sa na pokrocilejsie veci, ako su HTTP servisy, vlaste komponenty, moduly (velmi zaujimava vec)… drzim palce…

-tom-

Díky za pěkný seriál, už teď se těším na další díly. Jen bych se rád zeptal, zda je vydávání nějak plánováno (1× týdně?), nebo jde čistě o formu „když je čas a chuť“? :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.