. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Flex

Button komponens használata 2. rész (Flex)
  feltöltve: 2008.04.08 | szerző: Ducky | olvasva: 896 alkalommal

 
 

Az első részben megismerhettük az Adobe Flex Button, azaz gomb komponensének alapjait. Négy különböző gombot hoztunk létre. Ebben a segédletben megtanuljuk, hogy miként lehet a Flex Button komponenshez eseményt, vagy eseményeket rendelni. A gomb esemény nélkül nem több egy csicsás díszítő elemnél, ezért szükséges megismernünk az eseménykiosztás és alkalmazás módszerét. Ezt követően betekintést nyerhetünk a dinamikus gombok világába. AS kód segítségével hozunk létre Flex gombokat, amelyekhez egyből eseményt is rendelünk. A segédlet sikeres megértéséhez és alkalmazásához szükséges az első rész elolvasása és megértése, ezen kívül Flex alap ismeretekre is szükség lesz. Ezeket nem tartalmazza az anyag.

Esemény rendelése gombhoz

Az első részben létrehozott ButtonKezelesek projectben fogunk dolgozni továbbra is. Hozunk létre egy új MXML Applicationt az src mappában. Kattintsunk a jobb egérgombbal az src mappára és a megjelenő menüben válasszuk a New / MXML Application menüpontot. A megjelenő ablakban adjuk meg az új fájl nevét, legyen például ButtonEsemeny. Ha kész, akkor nyomjuk meg a Finish gombot.

Kép 1

Az új mxml fájlban fogjuk gyakorolni az eseményeket. Először is, a már megismert módon húzzunk egy új gomb komponenst a színpadra. Mielőtt rátérnénk a tulajdonságaira, el kell készítenünk az ActionScriptet, ami a működéshez szükséges. Ezt kódnézetben készítjük el, tehát váltsunk a Flex szerkesztőben kódnézetre a Source gomb használatával. ActionScript kódot az <mx:Script></mx:Script> elemek között tudunk elhelyezni CDATA részen belül létrehozva. Az XML-ben a CDATA karakteres állományok, szövegek tárolására szolgál <mx:Script><![CDATA[ide jön az as kód]]></mx:Script>. A Script elemet helyezzük el az Application elem alatt, így el lesz különítve a megjelenített elemektől. Hozzuk létre tehát a lenti forrásban látható kódot. A Script elemen kívüli részek már készen vannak.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">

    <mx:Script>
        <![CDATA[

            import mx.controls.Alert;

            // hibaüzenet megjelenítő metódus
            private function alertKlikk():void {
                Alert.show( "Hiba", "FIGYELEM!" );
            }

        ]]>
    </mx:Script>

    <mx:Button x="20" y="20" label="Button" click="alertKlikk()"/>

</mx:Application>

Az AS kódban először is importálunk egy szükséges csomagot, ez pedig nem más, mint az mx.controls.Alert. Ez a csomag teszi lehetővé a figyelmeztető üzenetek megjelenítését. Ezután készítünk egy függvényt alertKlikk() néven, ami mindössze annyit csinál, hogy megjelenít egy üzenetet FIGYELEM! Címmel és Hiba! szöveggel. Ezt a függvényt fogjuk majd hozzárendelni az elkészített gombhoz. Ennyi AS kód elég is. Jegyezzük meg, hogy a továbbiakban minden AS kódot ide kell majd írnunk, az alertKlikk() függvény után. Most váltsunk vissza grafikus nézetbe és adjuk meg a gomb tulajdonságait. Az ID és Label mezőket töltsük ki tetszőlegesen, ahogyan eddig is. A végrehajtandó függvényt az On click mezőben adhatjuk meg. Egyszerűen csak írjuk be a függvény hivatkozását: alertKlikk().

Kép 2

Ilyen egyszerű tehát hozzárendelni egy eseményt a gombhoz. Amikor lenyomjuk a gombot, az meghívja az AS kódban létrehozott függvényt és megjelenik a figyelmeztető üzenet.

Több esemény hozzárendelése AS kódban

Most azt nézzük meg, hogy miként lehet AS kódból eseményeket rendelni egy gombhoz. Ez azért szükséges, mert később a dinamikusan létrehozott gomboknál már nem lesz lehetőség grafikus módban megadni az események függvényeit. A gyakorlathoz helyezzünk el egy új gombot a színpadon, majd mellé tegyünk egy Text komponenst ugyanazzal a módszerrel. Megfogjuk a komponenst a bal egérgombbal és áthúzzuk a színpadra. Helyezzük el a két komponenst egymás mellett.

Kép 3

A gombnak és a Text elemnek is meg kell adnunk az alap tulajdonságokat. A gomb esetében adjuk meg az ID-t, ez most legyen gomb2, és a Label tulajdonságot tetszőlegesen. A Text esetében kell az ID, ez legyen kiirText. A Text tulajdonságot töröljük ki, így a mező üres lesz, majd a Styles részben a Font Colort állítsuk fehérre.

Kép 4

Most pedig váltsunk át kódnézetbe és készítsük el a vezérlő AS kódot. A kódot, ahogyan fentebb is említettük, az előzőleg elkészített függvény alá írjuk folytatásként. Szükségünk lesz egy induló függvényre, ami kiosztja az eseményeket a gombnak és kell három esemény függvény ami elvégzi a megadott feladatokat az események bekövetkezésekor. Írjuk le tehát a következő kódot.

private function gombIndit():void {
    gomb2.addEventListener( MouseEvent.ROLL_OVER, rolloverEsemeny );
    gomb2.addEventListener( MouseEvent.ROLL_OUT, rolloutEsemeny );
    gomb2.addEventListener( MouseEvent.CLICK, clickEsemeny );
}

private function rolloverEsemeny( eData:MouseEvent ):void {
    kiirText.text = "RollOver";
}

private function rolloutEsemeny( eData:MouseEvent ):void {
    kiirText.text = "";
}

private function clickEsemeny( eData:MouseEvent ):void {
    kiirText.text = "Click";
}

A gombIndit() függvény adja meg a gombnak azt a három eseményt, amit használni akarunk. A ROLL_OVER esemény akkor érvényesül, ha rávisszük az egeret a gombra. A ROLL_OUT esemény akkor teljesül, ha levesszük az egeret a gombról. Végül pedig a CLICK esemény, ami akkor teljesül, ha rákattintunk a gombra. Ezeknek az eseményeknek megfelelően készítjük el a következő három függvényt, amelyek egy-egy eseményhez tartoznak. Ezzel a kód el is készült, de magában ez még kevés. A gombIndit() függvényt le is kell futtatni, hogy megadja a gombnak az eseményeket. Tehát ha most tesztelnénk a mozit, nem történne semmi, mivel a gombIndit() függvényt nem hívja meg semmi és nem fut le. Az Application elem initialize tulajdonságaként kell megadni a gombIndit() függvényt a következő módon.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     layout="absolute" verticalAlign="middle" initialize="gombIndit()">

Ha ez megvan, akkor mentsük el az alkalmazást és teszteljük. Most már lefut az eseménykiosztás és a gomb a leírtaknak megfelelően működik. Ebben a példában tehát kombináltuk a grafikus nézetben elhelyezett elemek vezérlését az AS kóddal.

Gombok dinamikus létrehozása és kezelése

Utolsó példaként nézzük meg azt, hogy miként lehet gombokat AS kódból létrehozni dinamikusan és vezérelni. Ehhez készítsünk egy új MXML fájlt a projekt src mappájában DinamikusGombok néven. A módszer ugyanaz, mint amit a lecke elején megismertünk. Az új MXML-ben csak kódnézetben fogunk dolgozni. Nézzük meg először is a teljes forrást.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application initialize="gombokIndit()"
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
        <![CDATA[

            import mx.controls.Button;

            private var actGomb:Button;
            private var menuTomb:Array;

            public function gombokIndit():void {
                menuTomb = new Array
                (
                {cim:'Kezdőoldal', tart:'A Kezdőoldal menüpont tartalma.'},
                {cim:'Kínálatunk', tart:'A Kínálatunk menüpont tartalma.'},
                {cim:'Ügyfeleink', tart:'A Ügyfeleink menüpont tartalma.'},
                {cim:'Referenciák', tart:'A Referenciák menüpont tartalma.'},
                {cim:'Elérhetőségek', tart:'A Elérhetőségek menüpont tartalma.'},
                {cim:'Üzenőfal', tart:'A Üzenőfal menüpont tartalma.'}
                );

                for ( var i:int = 0; menuTomb[i] != undefined; i++ ) {
                    actGomb = new Button();
                    actGomb.width = 150;
                    actGomb.height = 22;
                    actGomb.x = 20;
                    actGomb.y = 20 + ( 24 * i );
                    actGomb.setStyle( "textAlign", "left" );
                    actGomb.label = menuTomb[i].cim;
                    actGomb.data = menuTomb[i];
                    addChild( actGomb );
                    actGomb.addEventListener( MouseEvent.ROLL_OVER, overEsemeny );
                    actGomb.addEventListener( MouseEvent.ROLL_OUT, outEsemeny );
                    actGomb.addEventListener( MouseEvent.CLICK, klikkEsemeny );
                }
            }

            private function overEsemeny( eData:MouseEvent ):void {
                cimText.text = eData.target.data.cim;
            }

            private function outEsemeny( eData:MouseEvent ):void {
                cimText.text = "Válassz menüt";
            }

            private function klikkEsemeny( eData:MouseEvent ):void {
                tartalomText.text = eData.target.data.tart;
            }

        ]]>
    </mx:Script>

    <mx:Text x="190" y="20" text="Válassz menüt" color="#F3F7F8"
        fontWeight="bold" width="250" height="20" id="cimText"/>
    <mx:Text x="190" y="42" color="#F3F7F8"
        fontWeight="bold" width="250" height="20" id="tartalomText"/>

</mx:Application>

Nézzük végig a kódot. Az Application elem initialize paraméteréhez rendeljük az indító függvényt, ami majd létrehozza a gombokat és kiosztja az eseményeket (initialize="gombokIndit()"). Ezt követően jöhet az AS kód. Importáljuk a szükséges csomagot. Mivel gombokat akarunk készíteni, így szükségünk lesz az mx.controls.Button csomagra. Létrehozunk két változót actGomb:Button és menuTomb:Array. Az első lesz a gombok létrehozásakor használt elem, míg a másik a menü és tartalom tárolására szolgáló tömb. Most következik a gombokIndit() függvény, ez indítja el az alkalmazást. Létrehozza a tároló tömböt, amiben minden tömbelem egy objektum lesz és tárolja a címet, meg a gomb által megjelenítendő tartalmat.

A for ciklusban hozzuk létre a gombokat. Létrehozunk egy gombot: actGomb = new Button(), majd megadjuk a szélességét, magasságát, a pozícióját X éx Y tengelyen és a gombban megjelenő felirat pozícióját. Ezután megadjuk a gombban megjelenő címet, majd a Button data tulajdonságában, ami szintén egy objektum, eltároljuk az aktuális, gombhoz tartozó tömbelemet. Így a gomb bármikor hozzáférhet ezekhez az adatokhoz. Ezután a gombot az addChild segítségével hozzáadjuk a display list-hez. Ha ezt kihagynánk, a gombok nem jelennének meg. A már megszokott módon hozzárendeljük a gombhoz az eseményeket és a függvény el is készült. Ezután létrehozunk még három függvényt, amelyek az eseményekhez tartoznak.

Ha rávisszük az egeret egy gombra, akkor megjeleníti a címet. Ha rákattintunk egy gombra, akkor megjelenik a tartalma. A ciklusnak köszönhetően annyi gomb fog létrejönni, ahány elem található a tömbben. Ezeket az adatokat, amik a tömbben vannak, akár egy külső XML fájlból is betölthetjük, vagy például adatbázisból. A kód végén létrehozunk két Text elemet, ezekben fognak megjelenni a gombok által kiíratott értékek. Mentsük el a fájlt és teszteljük.

El is érkeztünk a segédlet végéhez. Természetesen ezzel nem merítettük ki a Flex Button komponens lehetőségeit, de a továbblépéshez szükséges alapokat elsajátítottuk. Van még rengeteg tulajdonság, stílus és esemény, amit használhatunk és a Flex Properties panel Category View nézetében ezeket meg is találjuk.

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .