Flex Flex SDK Flex Builder

Flex OpenSource

Flex tehnologija je nova tehnologija koja prua krajnjem korisniku jedno bogato, interaktivno iskustvo, slino onom kakvo pruaju desktop aplikacije. Flex je deo Adobe Flash Platforme i sve Flex aplikacije rade u Flash Player-u 9 (ili kasnijim verzijama). Mada Flex radi pod Flash Playerom, Flex se sutinski razlikuje od Flash-a po mnogo emu (poevi od planiranja projekata pa do naina kako se uopte aplikacija razvija). U principu je namenjen progamerima ne dizajnerima. Flash je bio opte prihvaen kod web dizajnera i aplikacije koje su razvijane pod Flash-om su imale daleko bolje performanse nego AJAX aplikacije (AJAX aplikacija je kombinacija HTML-a, CSS-a I JavaScript-a) i izgledale su vie nego sjajno. Meutim, kada bi progamer pokuao da se priblii Flash tehnologiji, uglavnom se zavravalo bezuspeno, najvie zbog samog okruenja u kojem se razvija Flash aplikacija koja se drastino razlikuje od bilo koje alatke na koju su programeri navikli. Najvei problem jednom programeru je da shvati ta je to u stvari MovieClip? Kako da napravi aplikaciju sa olovkom? Gde se u opte kuca kod??? Ova ciljna grupa je bila izgubljena.

Kao odgovor na datu problematiku, godine 2005. izdat je Flex 1.0.0. To je bila tehnologija koja je radila na serverskoj strarni i aplikacije koje su razvijane u ovom okruenju su imale 10 puta bolje performanse od bilo koje aplikacije koja ja razvijana u Flash-u. Ceo postupak planiranja i razvijanja Flex aplikacije je veoma podseao na rad sa serverskim jezicima. Onog momenta kada korisnik pristupi stranici, stranica se generie. Razvijen je novi jezik MXML i ActionScript 3. Termin kao to je MovieClip i TimeLine vie ne postoje. Sve bi bilo savreno da Flex server nije kotao petostruko vie od bilo koje druge serverske tehnologije.

Godinu dana nakon prvog pokuaja, razvijen je Flex 2.0.0. Jo uvek je postojala mogunost da Flex aplikacija radi na serverskoj strani ali to vie nije bio uslov. Znai, na server se postavlja izgenerisan swf fajl i pokree se prilikom pristupanja stranici. Najbolje od svega je da je Flex 2.0.1. SDK izdat kao Open Source! Najverovatnije je na ovu odluku uticala tadanja Microsoftova najava da e izdati Sliver Light (mogue je povui paralelu izmeu Microsoftovog Silver Light-a i Flex-a i uoiti slinosti Silver Light radi sa XAML i C#, a Flex sa MXML i ActionScript-om). Flex framework

Sr Flex-a je Flex framework - biblioteka ActionScript klasa koja koristi paterne i .NET,

JAVA i web programeri e nai dosta slinosti sa tehnologijama u kojima su ranije radili. Isto tako, Flex Framework obezbeuje mnotvo komponenata - neto slino kao to je u VisualBasic-u, .NET-u, ili JAVI. Komponente imaju svojstva i metode i na osnovu tih parametara obezbeuju svoju funkcionalnost. Flex ima standarizovan sistem preko kojeg prosleujemo podatke do komponenti i menjamo njihov izgled. Naravno, mogue je napraviti svopstvene komponente ili proiriti funkcionalnost ugraenih komponenti.

Flex Builder

Flex Builder je zvanini Adobe-jev IDE za pravljenje Flex aplikacija. Flex Builder je

napravljen pod Eclipse IDE i trenutno vai za najbolji MXML i ActionScript editor na tritu. Poseduje ugraene alatke koje olakavaju razvijanje aplikacija. Flex framework je ugraen u Flex Builder, ali Flex framework i Flex Builder su dve razliite stvari. Da bi razvili Flex aplikaciju, ne

moramo da koristimo Flex Builder. Umesto toga, moemo instalirati besplatan Flex SDK (Softer Development Kit) koji sadri i Flex framework i kompajler. Nakon toga se Flex framework moe integrisati u bilo koje drugo okruenje ili se prosto MXML i ActionScript mogu ispisati u bilo kom text editoru i nakon toga pokrenuti kompajler iz komandne linije. Rezultat je isti ali rad u Flex Builder-u je daleko komotniji od bilo kog drugog reenja.

U Flex Builder-u postoje dve opcije za razvijanje aplikacije neto slino kao u DreamWeaver-u: kod editor i dizajn mod. Kod dizajn moda je dostupna i paleta sa komponentama a rad sa njima se svodi na prevlaenje u glavni ekran i prostim popunjavanjem polja sa parametrima.

Adobe je nedavno dao besplatnu licencu svim visokokolskim ustanovama za Flex Builder kako profesorima, tako i studentima.

Instalacija Flex Builder-a

Trenutno se sa Adobe sajta moe besplatno preuzeti Flex Builder 3 Beta 3. Razlike u

odnosu na prethodnu verziju Flex Builder-a, to se tie okruenja nisu velike. Najvea prednost je ugraen Adobe AIR SDK (Adobe AIR je Adobe Integrated Runtime I omoguava razvijanje desktop aplikacija koristei tehnologije kao to su Flex, Flash, HTML , CSS I JavaScript). Sem toga, kod editor je daleko moniji od prethodne verzije. Postoji opcija da se Flex Builder instalira posebno kao program ili kao plug-in za Eclipse. Najverovatnije ete se odluiti za zaseban program. Nakon pokretanja instalacionog fajla, potrebno je postupno pratiti korake (kao I kod bilo kog drugog programa).

Nakon uspene instalacije I pokretanja Flex Builder-a, pojavie se Flex Start Page:

Flex Projekat

Da bi kreirali novi Flex projekat, biramo File > New > Flex Project. Nakon toga e se pojaviti prozor preko kojeg emo definisati ime projekta I da li hoemo

da pravimo web aplikaciju ili desktop aplikaciju (Adobe AIR). Izaberite Web aplikaciju. Flex po definiciji uva sve projekte u MyDocuments/FlexBuilder3/ImeProjekta. Naravno, ta putanja moe da se izmeni. Ukoliko pogledate, postoji opcija da se izabere serverska tehnologija, izmeu ostalog I PHP. Kao vrednost ove opcije, ostavite none jer rad sa serverskim tehnologijama zahteva malo drugaiji pristup (ovo ne znai da neete moi da komunicirate sa serverskim jezikom). Nakon to ste podesili parametre, kliknite Finish (postoji I opcija Next ali za sada ostavimo to je mogue jednostavnije).

Nakon toga ete u gornjem levom panelu videti strukturu vaeg Flex projekta. Kao to vidite, ve je izgenerisano dosta fajlova. U folderu src e se nalaziti kompletan kod vezan za projekat. To znai da e Flex po definiciji traiti kod u okviru tog foldera sem ukoliko drugaije ne navedete. U folderu bin-debug e se automatski snimati fajlovi na va zahtev. Tu e se praktino nalaziti gotova aplikacija (fajlovi koji se postavljaju na server).

Kako razvijamo aplikaciju, ona moe sadrati vie tipova fajlova. Najee, jedan Flex

projekat sadri sledee: MXML fajlove MXML se najee koristi za definisanje izgleda aplikacije (layout)

ActionScript klase ActionScript koristimo za kompleksnije radnje - kako za vizuelne efekte, tako i za

kreiranje sopstvenih komponenti i kompleksnih algoritama XML fajlove Poto Flex ne moe direktno da pristupi bazi podataka, neophodna je komunikacija

Flex-a sa serverskim jezikom. Znai da Flex prosleuje parametre (promenljive) do serverskog jezika i na osnovu tih parametara, serverski jezik vraa rezultat koji je formatiran kao XML I koji Flex moe da uita. Ovo je najei sluaj, mada ponekad u sklopu Flex projekta se mogu nai i ve formatirani XML fajlovi (kao statini podaci)

Slike Flex aplikacija moe da uitava slike prilikom izvrenja ili se slike mogu nalaziti unutar

Flex aplikacije (unutar swf fajla) Audio i video Kao to je sluaj kada su slike u pitanju, Flex aplikacija moe da ih uitava prilikom

izvrenja (ne moraju biti ukljueni u kompajlirani swf fajl) HTML fajl Kao I veina sadraja na net-u, I Flex aplikacija se najee prikazuje tako to se

umetne u HTML fajl.

MXML

MXML je zasnovan na XML-u i uglavnom se koristi za vizuelni deo aplikacije (znai, za

layout). U tom pogledu je vrlo slian HTML-u. Koristei MXML tagove, dodajemo kompnente, forme, tastere, tabele i drugo. MXML je toliko fleksibilan da je mogue napraviti kompletnu aplikaciju bez ActionScript-a. Pored toga, mogu se definisati i efekti (kao to je fade in, fade out, scale i sl.), tranzicije, promena stanja

Svaka Flex aplikacija poinje sa XML deklaracijom:

Poto MXML prati pravila XML-a pridrava se sledeeg: svaki otvoren tag se mora zatvoriti () tagovi su case sensitive svaki tag moe sadrati atribute postoji hijerarhija tagova

Root tag (koren) se naziva Application I svi ostali tagovi moraju da se nalaze izmeu tagova i . Ukoliko pogledamo, videemo da svaki tag poinje sa mx. To se naziva namespace. Zato je to tako reeno?

Prilikom kompilacije se sav MXML kod prevodi u ActionScript pa u binarni kod koji ita Flash Player. Poto se sve klase koje dolaze uz Flex nalaze u paketu koji se naziva mx, po pravilu bi ih iz ActionScripta pozvali na sledi nain : mx.ImeKlase. Ime klase kao I kod veine objektno orjentisanih jezika poinje velikim slovom. Kada piemo MXML, mi ne radimo nita drugo, nego pozivamo ugraene klase koje se nalaze u paketu mx. Zato se I namespace pie velikim slovom: . Mogue je napisati I svoje klase I komponente pa bi njihovo pozivanje u MXML pratilo ista pravila.

Recimo da elimo da u aplikaciju dodamo input polje irine 120 px:

Da bi testirali aplikaciju, iz glavnog menija biramo Run > Run ImeProjekta.

Flex Builder e vas pitati da sauvate izmene pre testiranja, a nakon toga e Flex aplikaciju otvoriti u vaem default browser-u. Videete da se input text nalazi u gornjem levom uglu (kao I veina objekata u Flex-u, i TextInput ima x i y svojstvo ija je vrednost po definiciji 0). Ukoliko elimo da dodamo recimo jo jedno input polje koje elimo da se nalazi ispod prvog, moraemo da iskoristimo neki od kontejnera (VBox, HBox, Panlel, ) u ovom sluaju VBox. Ukoliko samo u MXML-u dodamo jo jedan red koda koji definie novo input polje, a ima isto x i y svojstvo, dolo bi do preklapanja sa prvim, ve kreiranim. Vratite se u Flex Builder i dodajte sledei kod: Ukoliko sada testirate aplikaciju, terbalo bi da imate dva input polja jedno ispod drugog ovo je postignuto koristei VBox (ukoliko umesto VBox-a iskoristimo HBox, input polja e se nalaziti jedno pored drugog). Najee kontejnere koje ete koristiti su Panel, Canvas, HBox, VBox, ViewStack, TabBar, TabNavigator. Videli ste kako se layout formira koristei MXML. Identian rezultat ete dobiti ukoliko radite u Design modu. Kada se prebacite u design mod, u donjem levom panelu ete imati na raspolaganju listu komponenata. Jednostavno se eljena komponenta prevue na radnu povrinu, a parametri se podeavaju u desnom panelu.

ActionScript 3

ActionScript je evoluirao od prostog jezika koji sluio za jednostavnu kontrolu animacije do monog objektno-orjentisanog jezika. Sa obzirom da ljudi piu knjige na hiljade strana vezane za ovu problematiku, neu ni pokuavati da ActionScript objasnim u jednom pasusu. Radije u navesti on-line resurse koji pokrivaju ActionScript. Najea adresa koju poseujem a vezana je za ActionScript 3 i Flex je http://livedocs.adobe.com/flex/201/langref/index.html. Tu ete nai sve dostupne klase I metode. Sjajna knjiga koja pokriva ActionScript 3 je Essential ActionScript 3 koju je napisao Colin Moock.

ActionScript se moe nalaziti unutar MXML koda ili se moe nalaziti u zasebnom as fajlu. Druga opcija je mnogo ea recimo da imate klasu koju koristite u vie projekata. Sledi primer kako se ActionScript implementira u MXML. Ukoliko vam je jo uvek otvoren projekat koji ste kreirali, moete da nastavite rad u njemu, ili kreirajte novi projekat. Kreiraemo dva input polja u koja emo unositi brojane vrednosti, a pritiskom na taster e se izvriti funkcija koja sabira te vrednosti i prikazuje ih na ekranu. Svi objekti e se nalaziti u VBox-u. Prvo to elimo da uradimo je da definiemo layout preko MXML-a. Znai, imamo dva input polja, jedno textualno polje koje e prikazivati rezultat i taster. Da bi mogli da prosleujemo parametre funkciji koja izraunava vrednost i vraa rezultat u zavisnosti od unosa u input polja, neophodno je da input poljima damo unikatna imena id. Kod bi trebao ovako da izgleda:

ActionScript kod se u MXML-u se pie izmeu tagova i . Najee se ActionScript kod pie neposredno ispod Application taga, mada se moe nalaziti bilo gde u kodu. Ubrzo nakon to dodate red koda , videete da je Flex Builder dodao automatski neke udne znakove. Kod bi trebao ovako da izgleda:

Ukoliko ste ranije radili sa XML-om, CDATA ne bi trebalo da vam bude stran. Ukoliko niste, u XML-u se CDATA koristi kako bi razdvojili deo koda koji nije XML od ostatka XML-a. U Flex-u se koristi kako bi pisali ActionScript unutar MXML-a. Pre nego to napiemo funkciju koja sabira vrednosti, bilo bi dobro da uradimo jedan primer kako se promenljiva iz ActionScript-a poziva iz MXML-a. Dodajte privremeno sledei kod u okviru taga CDATA:

Nakon to pokuate da testirate aplikaciju, trebalo bi da je Flex Builder dao dva upozorenja. Za sada ih ignoriite I vaa aplikacija e raditi bez problema. Moete obrisati prethodni kod koji ste dodali i definiite funkciju koja e sabirati unose:

Sada elimo da ta funkcija bude pozvana onog momenta kada pritisnemo taster. Da bi to postigli, potrebno je da u okviru taga dodamo atribut click. Ukoliko sada testirate aplikaciju, Flex Builder e prijaviti greku. Razlog je oigledan funkciji koja kao parametre oekuje brojeve, prosleujemo String. Da bismo to izbegli, moramo da promenimo tip podatka : da string pretvorimo u broj. Promenite kod da ovako izgleda: Aplikacija bi sada trebalo da radi bez problema. Ukoliko pokuate da u input polja unesete vrednost koja nije broj, nakon klikom na taster e se na ekranu ispisivati Rezultat je Nan. Nan znai Not A Number (nije broj). Postoji nain da se unosi ispitaju na vrlo jednostavan nain bez if petlji pomou klase koja se naziva validator. Poto bi ovo trebalo da predstavlja kratak uvod u Flex, ne bih opisivao rad sa ovom klasom. Dovoljno je da znate da postoji. Resursi Nakon ovog kratkog tutorijala, trebalo bi da imate uvid u to kako Flex radi i koliko je jednostavno koristiti ga. Uputio bih vas na par adresa na internetu gde da pronaete vie informacija. Svakako bih vam preporuio Flex quick start quide for PHP developers na Adobe sajtu. Adresa je: http://www.adobe.com/devnet/flex/articles/php_getstarted.html. Namenjen je PHP programerima koji ele da naue Flex. Preporuio bih vam i da pogledate Flex 2 Component Explorer, takoe na Adobe sajtu. Na ovoj stranici ete videti na delu sve dostupne komponente i kako se koriste. Adresa je http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html.