Flex tiptrik – dvojklik a animace komponent

26.7.2007· Autor: Ondřej Brichta· Počet komentářů: 3

V dnešním tutoriálu si ukážeme použití dvojkliku, pomocí kterého budeme animovat změnu velikosti vybrané komponenty.

Dvojklik

V ActionScriptu 2.0 jsme událost dvojkliku nemohli využívat a proto bylo nutné požívat více či méně úspěšné náhražky. V ActionScriptu 3.0 je tato událost doplněna a tak jí můžeme plně využívat ve svých Flex/FlashCS3 projektech.

Pokud chceme připojit listener dvojkliku k vybranému objektu, použijeme již standardní zápis:

objekt.addEventListener(MouseEvent.DOUBLE_CLICK,listener);

Funkce listeneru pak vypadá následovně:

function listener(e:MouseEvent):void{
//akce při dvojkliku
}

V případě Flex aplikací můžeme využít i zápisu v tagu vybrané komponenty:

<mx:Komponenta doubleClick="listener()" />

Pak funkce listeneru nebude volána s parametrem objektu události a můžeme tedy psát:

function listener():void{
//akce při dvojkliku
}

Pokud bychom chtěli, aby byl funkci objekt události předán, bude tag komponenty pozměněn na:

<mx:Komponenta doubleClick="listener(event)" />

Aktivace dvojkliku

Abychom mohli ve Flex aplikacích detekovat dvojklik myši, musíme u vybrané komponenty nejprve „aktivovat" možnost dvojkliku. V případě VBox komponenty to bude celkový zápis v mx:VBox tagu:

<mx:VBox buttonMode="true" doubleClickEnabled="true" useHandCursor="true" mouseChildren="false" doubleClick="changeSize()"/>

Pokud se nejedná o tlačítko, musíme nastavit vlastnost „buttonMode" na „true", pak nastavíme možnost detekce dvojkliku pomocí atributu „doubleClickEnabled". Protože se při najetí kurzorem myši na komponentu nezmění kurzor na ruku, můžeme tuto vlastnost upravit pomocí atributu „useHandCursor". Aby nebyla detekce rušená případnými objekty komponenty, můžeme použít nastavení atributu „mouseChildren" na hodnotu „false".

Takto upravená komponenta pak bude zachytávat dvojklik a spouštět při něm funkci „changeSize()". Jak již název napovídá, funkce bude sloužit pro změnu velikosti, v našem případě budeme měnit velikost vlastní komponenty, která bude tvořena upravenou VBox komponentou:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox mouseChildren="false" buttonMode="true" useHandCursor="true" horizontalScrollPolicy="off" verticalScrollPolicy="off" doubleClickEnabled="true" doubleClick="changeSize()" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="25" verticalAlign="top" backgroundColor="#008000">
 <mx:Script>
 <![CDATA[
 import mx.effects.easing.*;
 [Bindable]
 public var xmlData:XML;
 [Bindable]
 private var stat:String = "closed";
 private function changeSize():void{
 if(stat=="closed"){
 stat = "open";
 resizeEff.heightFrom = 25;
 resizeEff.heightTo = 75;
 }else{
 stat = "closed";
 resizeEff.heightFrom = 75;
 resizeEff.heightTo = 25;
 }
 resizeEff.play();
 }
 ]]>
 </mx:Script>
 <mx:Resize easingFunction="{Back.easeOut}" target="{this}" id="resizeEff" duration="500"></mx:Resize>
 <mx:Label text="{'Název položky: '+xmlData.name}" color="#ffffff" fontWeight="bold" fontSize="12"/>
 <mx:Label text="{'Popis položky: '+xmlData.desc}" color="#ffff80" fontSize="12"/>
</mx:VBox>

Tato komponenta je ve výchozím stavu vysoká 25px, ale díky animaci změny velikosti (Resize) jí při dvojkliku zvětšíme na 75px. Tím dojde k odhalení druhého textového pole, které bylo dosud schováno. Data do textových polí jsou poskytována XML objektem s názvem „xmlData". Proměnná je nastavená na „public" a proto k ní budeme moci přistupovat z hlavní aplikace jako k vlastnosti této komponenty.

Efekt změny velikosti "Resize" můžeme vytvořit jak pomocí standardního zápisu pomocí ActionScriptu a nebo pomocí mx:Resize tagu. V každém případě pak nesmíme zapomenout na určení objektu, který chceme ovládat (parametr "target") a na nastavení délky efektu (parametr "duration").

Animaci pak vymezíme pomocí vlastností "heightFrom" a "heightTo", kterými nastavíme výchozí a konečnou výšku objektu. Samotný efekt pak spustíme pomocí metody "resizeEff.play()".

Aplikace

Samotná aplikace, která zpracuje obecný XML objekt a podle něj přidá do VBox komponenty námi připravenou komponentu, má následující kód:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="parseXML()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
 <![CDATA[
 private var newItem:expand_item;
 import flash.filters.DropShadowFilter;
 [Bindable]
 public var mainXML:XML = <datas>
 <item>
 <name>Jméno 1</name>
 <desc>popis 1</desc>
 </item>
 <item>
 <name>Jméno 2</name>
 <desc>popis 2</desc>
 </item>
 <item>
 <name>Jméno 3</name>
 <desc>popis 3</desc>
 </item> 
 <item>
 <name>Jméno 4</name>
 <desc>popis 4</desc>
 </item> 
 <item>
 <name>Jméno 5</name>
 <desc>popis 5</desc>
 </item> 
 <item>
 <name>Jméno 6</name>
 <desc>popis 6</desc>
 </item>
 <item>
 <name>Jméno 7</name>
 <desc>popis 7</desc>
 </item> 
 </datas>;
 private function parseXML():void{
 for each(var itemXML:XML in mainXML.item){
 newItem = new expand_item();
 newItem.xmlData = itemXML;
 container.addChild(newItem);
 }
 var filter:DropShadowFilter = new DropShadowFilter();
 container.filters = [filter];
 }
 ]]>
 </mx:Script>
 <mx:VBox id="container" height="300" width="200">
 </mx:VBox>
</mx:Application>

Jedná se o velice jednoduchou ukázku, kdy podle počtu elementů „item" XML objektu vložíme stejný počet námi vytvořených komponent do VBox komponenty. Objekty tak budou automaticky seřazeny pod sebou a v případě, že se do komponenty nevejdou, budou zobrazeny posuvníky. Nakonec přidáme filtr stínu k celé VBox komponentě, která tak bude působit plastičtějším dojmem:

Zdrojové soubory jsou k dispozici zde:data.zip

Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

Web: http://www.obria.cz |

Motto: <°))))><