1

Flex – part 1

Cosmin Varlan

Cosmin Vârlan

http://www.infoiasi.ro/~flash/prezentari_cerc

http://www.infoiasi.ro/~flash/prezentari_cerc

2

Flex – 1st application

Cosmin Vârlan

• Indiferent ca sunt proiecte realizate in Flash, ca proiect ActionScript sau direct in Flex (utilizand mxml), toate aplicatiile care au ca rezultat final crearea unui fisier SWF se numesc aplicatii Flash.

• Apropos… SWF = shock wave flash

http://www.infoiasi.ro/~flash/prezentari_cerc

3

Flex – 1st application

Cosmin Vârlan

http://www.infoiasi.ro/~flash/prezentari_cerc

4

Flex – 1st application

Cosmin Vârlan

• Va crea urmatoarea secventa de XML:

• In Project trebuie sa aveti bifat “Build automaticaly” – cand se va salva, se va crea si obiectul SWF (aplicatia Flash)

http://www.infoiasi.ro/~flash/prezentari_cerc

5

Flex – 1st application

Cosmin Vârlan

• Componentele pot fi adaugate direct in acest XML (mxml) dar metoda mai simpla este de a “aduce” componentele ce vor fi utilizate din modul design:

http://www.infoiasi.ro/~flash/prezentari_cerc

6

Flex – 1st application

Cosmin Vârlan

Componente

Particularizarea unei componente

Componenta selectata

http://www.infoiasi.ro/~flash/prezentari_cerc

7

Flex – 1st application

Cosmin Vârlan

O noua linie adaugata…

http://www.infoiasi.ro/~flash/prezentari_cerc

8

Flex – 1st application

Cosmin Vârlan

Efectul… crearea unei etichete

http://www.infoiasi.ro/~flash/prezentari_cerc

9

Flex – 1st application

Cosmin Vârlan

Auto Complete pentru proprietatile

etichetei

http://www.infoiasi.ro/~flash/prezentari_cerc

10

Flex – 1st application

• Incercati sa mariti fontul.• Si sa adaugati cate voi etichete.

Cosmin Vârlan

http://www.infoiasi.ro/~flash/prezentari_cerc

11

Flex – 1st application

Cosmin Vârlan

http://www.infoiasi.ro/~flash/prezentari_cerc

12

Flex – 1st application

Cosmin Vârlan

better

http://www.infoiasi.ro/~flash/prezentari_cerc

13

Flex – 1st application

Cosmin Vârlan

sau asa (sau chiar fara sa punem deloc layoutul acesta care este predefinit ca fiind

vertical)

http://www.infoiasi.ro/~flash/prezentari_cerc

14

Flex – 1st application

Cosmin Vârlan

Am putea sa punem un container care sa grupeze

obietele vertical

http://www.infoiasi.ro/~flash/prezentari_cerc

15

Flex – 1st application

Cosmin Vârlan

Pentru a le pune pe ultimele doua pe orizontala

http://www.infoiasi.ro/~flash/prezentari_cerc

16

Flex – 1st application

Cosmin Vârlan

Putem reveni la scrierea absoluta a coordonatelor prin

inserarea unui canvas

http://www.infoiasi.ro/~flash/prezentari_cerc

17

Modificarea etichetei in runtime

Cosmin Vârlan

Afiseaza automat dimensiunea in pixeli a primei etichete.

Modificarea textului din prima eticheta va updata automat si valoarea afisata de cea de-a

doua eticheta

http://www.infoiasi.ro/~flash/prezentari_cerc

18

Adaugarea unei componente custom

Cosmin Vârlan

Adaugarea unei noi componente (Custom)

http://www.infoiasi.ro/~flash/prezentari_cerc

19

Adaugarea unei componente custom

Cosmin Vârlan

Adaugarea unei noi componente (Custom)

http://www.infoiasi.ro/~flash/prezentari_cerc

20

Adaugarea unei componente custom

Cosmin Vârlan

De adaugat in componenta

http://www.infoiasi.ro/~flash/prezentari_cerc

21

Adaugarea unei componente custom

Cosmin Vârlan

De adaugat in aplicatia FLEX principala De adaugat in aplicatia FLEX

principala

http://www.infoiasi.ro/~flash/prezentari_cerc

22

Adaugarea de metode si proprietati

Cosmin Vârlan

De adaugat in aplicatia FLEX principala De adaugat in aplicatia FLEX

principala

http://www.infoiasi.ro/~flash/prezentari_cerc

23

Adaugarea de metode si proprietati

Cosmin Vârlan

Am adaugat un cod AS3 care contine o variabila publica

Textul Etichetei a fost “bindat” de proprietatea declarata.

http://www.infoiasi.ro/~flash/prezentari_cerc

24

Adaugarea de metode si proprietati

Cosmin Vârlan

In aplicatia principala setam proprietatea “prop1”

http://www.infoiasi.ro/~flash/prezentari_cerc

25

Adaugarea de metode si proprietati

Cosmin Vârlan

Apare un warning care ne avertizeaza ca eticheta nu va fi efectiv bindata la proprietatea

prop1. Pentru a face proprietatea bindabila, trebuie sa-I adaugam acest metatag.

http://www.infoiasi.ro/~flash/prezentari_cerc

26

Adaugarea de metode si proprietati

Cosmin Vârlan

Sa complicam componenta prin adaugarea unei metode…

http://www.infoiasi.ro/~flash/prezentari_cerc

27

Adaugarea de metode si proprietati

Cosmin Vârlan

In aplicatia principala chemam metoda din componenta noastra

In aplicatia principala: punem un ID componentei

http://www.infoiasi.ro/~flash/prezentari_cerc

28

Adaugarea de metode si proprietati

Cosmin Vârlan

Un buton ce are rolul de a schimba eticheta (prop1 de fapt).…Asta este AS3 inline….

http://www.infoiasi.ro/~flash/prezentari_cerc

29

Adaugarea de metode si proprietati

Cosmin Vârlan

Sau poate fi apelata o metoda din AS3 (din componenta)

http://www.infoiasi.ro/~flash/prezentari_cerc

30Cosmin Vârlan

Import…

Metoda

http://www.infoiasi.ro/~flash/prezentari_cerc

31

Sa importam o aplicatie AS3 ca o componenta…

Cosmin Vârlan

Trebuie sa scriem o clasa Cerc care sa extinda UIComponent

http://www.infoiasi.ro/~flash/prezentari_cerc

32

Sa importam o aplicatie AS3 ca o componenta…

Cosmin Vârlan

http://www.infoiasi.ro/~flash/prezentari_cerc

33

>:)

• Sa facem importam un proiect oarecare in flex…

……… END

Cosmin Vârlan