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




 
 
SEGÉDLETEK Flex

Button komponens használata 1 rész (Flex)
  feltöltve: 2008.04.07 | szerző: Ducky | olvasva: 1083 alkalommal

     
 

Ebben a segédletben az Adobe Flex Button azaz gomb komponensével fogunk alap szinten megismerkedni. A komponens, ahogy a neve is mutatja, gombot, gombokat jelenít meg tetszőleges formában, színben. Megismerjük, hogy hogyan lehet egyszerű szabvány gombot létrehozni, majd ahhoz ikont rendelni. Ezután a CSS stíluselemmel formázott gomb létrehozása következik és a képek használata a gombokban. A segédlet sikeres megértéséhez és alkalmazásához Flex alap ismeretek szükségesek, ezeket nem tartalmazza az anyag.

Az elkészített példák megtekinthetőek a lenti linkre kattintva:

Alap gomb készítése

Az interaktív oldalak készítésének egyik alap eleme a gomb, azaz Button. Az Adobe Flex rendelkezésünkre bocsájt egy fejlett Button komponenst, amellyel egyszerűen és gyorsan hozhatunk létre gombot, gombokat. Készítsünk egy új Flex Projectet a főmenü File / New / Flex projekt menüpont használatával.

Kép 1

Adjuk meg az új projekt nevét a megjelenő ablakban, ami legyen például 'Button kezelesek'. Adjuk meg a projekt gyökér mappáját és végül nyomjuk le a Finish gombot.

Kép 2

Amikor létrehozunk egy új projectet, akkor létrejön az első mxml fájl is, ami jelen esetünkben a ButtonKezelesek.mxml lesz. Ebben a fájlban fogjuk létrehozni az első alap gombokat. Váltsunk a szerkesztőben Design nézetbe, ha eddig nem tettük volna meg. Válasszuk ki bal oldalt a Components panelt. Ha esetleg nincs megnyitva, akkor meg lehet nyitni a főmenü Window / Components menüpont használatával. A Components panelen válasszuk ki és nyissuk meg a Controls csoportot, majd keressük meg a Button komponenst, fogjuk meg az egér bal gombját lenyomva, majd egyszerűen húzzuk a színpadra a bal egérgomb nyomva tartása mellett. Ha elértük a megfelelő pozíciót, engedjük el az egérgombot.

Kép 3

Most nézzük meg a kihelyezett új gomb tulajdonságait. A jobb oldalon jelenik meg a Flex Properties panel, ebben adhatjuk meg a kiválasztott komponens tulajdonságait. Mivel ez az első gombunk, most csak az alap tulajdonságokat adjuk meg. Az ID-t, Label-t méreteket és elhelyezést. A panel is részekre oszlik, az első rész amit használunk, az a Common rész, itt adjuk meg az ID-t és a Label-t. Az ID tulajdonság lesz az a hivatkozás, amivel később elérhetjük a gombot, például AS kódból. A Label tulajdonság határozza meg a gombon megjelenő feliratot. Adjuk meg ezeket a tulajdonságokat a lenti képen látható módon.

Kép 4

Adjuk még meg a gomb méreteit és elhelyezkedését. Ezt a panel Layout részében tehetjük meg. A Width tulajdonság határozza meg a gomb szélességét, a Height pedig a magasságát. Az X és Y tulajdonságokkal adhatjuk meg a gomb pontos helyzetét. Alatta van egy pozícionáló lehetőség, ahol grafikusan lehet bejelölni, hogy a gomb a színpadon, vagy a tároló container-eb belül hogyan helyezkedjen el. Vízszintesen jobbra, középen és balra, függőlegesen pedig fent, középen és lent lehet megadni az elhelyezést. Adjuk meg a tulajdonságokat a lenti képen látható módon.

Kép 5

Ezzel az első alap gombunk készen is van. Teszteljük, azaz futtassuk az alkalmazást a gyorsmenüben található Run gomb használatával. A gyorsmenü a főmenü alatt található, a Run gomb pedig egy zöld kör, benne egy fehér lejátszás jellel. Futtatás, tesztelés előtt mindig mentsük is el a fájlt. Ha nem tesszük meg, akkor a futtatáskor figyelmeztet a szerkesztő és mentenünk kell az alkalmazást.

Kép 6

 
     
 
 

© 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 >>> : .. .