Na spletnem naslovu http://www.quietlyscheming.com/blog/ najdete blog Adobejevega razvijalca Ely Greenfielda. Blog je sicer v zadnjem času malce zapostavljen, vendar na strani lahko kjub vsemu najdete veliko koristnih informacij.

Zelo zanimiv post je DisplayShelf Component, kjer Ely prikaze kako se je potrebno lotiti Flex komponente, ki omogoča prikaz fotografij v stilu Appleovega coverFlowa, vse komponente katere najdemo na strani imajo omogočen prikaz kode iz katere se je mogoče veliko naučiti...uživajte v branju

MTV ter Adobe, sta skupaj sestavila zanimivo tekmovanje. Gre za t.i. MTV Adobe Air Challenge in sicer bo glavno nagrado dobil tisti razvijalec, ki bo po oceni MTV-jeve ter Adobe-jeve žirije izdelal najbolj zanimivo-zabavno-koristno aplikacijo. Zakaj bi bilo tekmovanje zanimivo za Flex razvijalce, zato ker je AIR platforma preko katere lahko izdelane Flex aplikacije (tudi HTML, AJAX, Flash) uporabimo tudi kot čisto pravo "desktop" aplikacijo. Tako torej aplikacija ne deluje preko spleta pač pa kar na uporabnikovem računalniku.

V eni zadnjih posodobitev so v AIR okolje postavili tudi pravo SQL bazo (SQLite) in s tem omogočili hranjenje podatkov na uporabnikovem računalniku enako kot to počnemo sedaj na strežnikih.

Pa še nekaj o samem tekmovanju. Aplikacija mora biti izdelana, tako da teče na Adobe AIR platformi, MTV razvijalcu ponudi tudi kar nekaj zanimivih grafičnih dodatkov, kot tudi RSS feede, video posnetke, podcaste, katere uproabimo pri izdelavi najbolj cool MTV AIR aplikacije.

Nagrade za najbolj uspešne so sledeče:

• Brezplačno potovanje v New York za dve osebi (prvo mesto), ter za eno osebo za drugo ter tretje mesto
• Dve VIP vstopnici Night On the Town
• Kar nekaj Adobe-jeve programske opreme (Adobe Creative Suite 3 Master Collection)
• MP3 naprava z enoletno naročnino za Rhapsody Music Service

No, vseeno pa obstaja ena slaba stran tega kar zanimivega tekmovanja...za sodelovanje moraš biti prebivalec ZDA (jikes)...

Linki:
MTV Adobe Air Tekmovanje
AIR za FLEX razvijalce
AIR za HTML ter JavaScript razvijalce

Zadnjih nekaj mesecov se ukvarjam z izdelavo moje prve malce bolj resne Flex aplikacije, gre za Foto Servis, (code named Jimmu) kjer si bodo lahko uporabniki uploadali slike (imamo tudi multiplefile upload...mega), slike urejali, jih grupirali v foto sete ipd. Zaenkrat je aplikacija še vedno v povojih, kljub temu pa bo čez kak teden ali dva aplikacija tako napredna, da bomo lahko začeli s testiranjem.

V kolikor vas zanima, kako Foto Servis deluje, mi lahko pošljete email na info (afna) tdteam (pika) com, zelo vesel bom vaših kritik, pripomb in morda tudi pohval...

Kot sem omenil že v prvem tutorialu je v Application tag-u mogoče definirati, kako Flex gradnike znotraj aplikacije razporedi (angl. layout). Na voljo so tri možnosti in sicer:
- vertical - gradnike razporedi v vertikalni smeri
- horizontal - gradnike razporedi v horizontalni smeri
- absolute - Flex ne razporedi gradnikov, za razporeditev moramo poskrbeti sami

Flex ima tudi znotraj aplikacije na voljo več gradnikov - kontejnerjev (angl. containers), s katerimi lahko kontroliramo razporeditev gradnikov znotraj samega kontejnerja. Na voljo so VBox (vertikalna razporeditev)
HBox (horizontalna razporeditev)
Canvas (brez razporeditve)

Kot primer imamo spodaj ponovno sila enostavno Flex aplikacijo, v vsakem izmed kontejnerjev so tri Label napisi, kjer so velikosti napisa za vsak Label različni. Iz primera je razvidno, kako vsak izmed kontejnerjev svoje gradnike razporedi v različnih smereh. Opazimo lahko tudi, da v primeru kontejnerja Canvas vsi trije napisi “sedijo” eden na drugem. Kot sem omenil Canvas pričakuje, da sami razvrstimo gradnike, kar lahko naredimo z določanjem atributov x in y pozicije gradnika Label - s tem določamo položaj zgornjega levega kota gradnika glede na zgornji levi kot Canvas kontejnerja.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                       width="325" height="225">
	<mx:VBox backgroundColor="#ffffff">
		<mx:Label text="Prvi Napis" fontSize="20"/>
		<mx:Label text="Drugi Napis" fontSize="15"/>
		<mx:Label text="Tretji Napis" fontSize="10"/>
	</mx:VBox>
	<mx:HBox backgroundColor="#ffffff">
		<mx:Label text="Prvi Napis" fontSize="20"/>
		<mx:Label text="Drugi Napis" fontSize="15"/>
		<mx:Label text="Tretji Napis" fontSize="10"/>
	</mx:HBox>
	<mx:Canvas backgroundColor="#ffffff">
		<mx:Label text="Prvi Napis" fontSize="20"/>
		<mx:Label text="Drugi Napis" fontSize="15"/>
		<mx:Label text="Tretji Napis" fontSize="10"/>
	</mx:Canvas>
</mx:Application>
 

<mx:Label text="Drugi Napis" fontSize="15" y="25"/>
<mx:Label text="Tretji Napis" fontSize="10" y="45"/>

Z uporabo HBox, VBox kontejnerjev lahko v Flex aplikaciji skrbimo za razpored gradnikov, zelo podobno kot smo lahko s tabelami gradili izgled HTML spletne strani. Na koncu naj na kratko predstavim tudi konetjnerja HDividedBox ter VDividedBox. Kontejnerja vse notranje gradnike razporedita v horizontalni oz. vertikalni smeri (kot HBox in VBox), na meji med dvema notranjima gradnikoma pa se postavi t.i. slider, s kateri lahko večamo ali manjšamo velikost gradnikov znotraj DividedBox-a. V spodnji aplikaciji se lahko poigrate s sajderjem tako HDividedBox-a kot tudi VDividedBox-a, da boste vedeli čemu ta slider pravzaprav služi.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                       width="368" height="175">
	<mx:HDividedBox backgroundColor="#ffffff">
		<mx:Label text="Prvi Napis" fontSize="24"/>
		<mx:Label text="Drugi Napis" fontSize="24"/>
	</mx:HDividedBox>
	<mx:VDividedBox backgroundColor="#CFDFF9">
		<mx:Label text="Prvi Napis" fontSize="24"/>
		<mx:Label text="Drugi Napis" fontSize="24"/>
	</mx:VDividedBox>
</mx:Application>
 

V naslednjem tutoriali si bomo ogledali kratko predstavitev jezika ActionScript 3.0, ter kako lahko s pomočjo ActionScripta v Flex aplikaciji uporabimo gradnike - brez MXML kode.

V drugem tutorialu vam bom na kratko predstavil tri gradnike, katere boste lahko velikokrat uporabili pri svojih bodočih Flex aplikacijah. No pa najprej poglejmo, kar končni izdelek, Flex aplikacija z vsemi tremi gradniki - Panel, TitleWindow ter ApplicationControlBar.

Kot smo spoznali v prvem tutoriali je Flex koda pisana v XML strukturi, katero imenujemo MXML, celotna aplikacija se nahaja znotraj <mx:Application> ter </mx:Application> taga.

Prvi gradnik, katerega boste izmed vseh treh verjetno najmanj koristili je ApplicationControlBar. Pa vendar ga tu omenjam zato, ker se mi zdi da nanj lahko zlahka pozabimo, kjub temu pa lahko svojo fukcijo opravi odlično in sicer takrat ko potrebujemo pri svoji aplikaciji neko vrsto globalne navigacije, primer uporabe ApplicationControlBar-a bi bila navigacija za gumbe in ostale lastnosti pri izdelavi Wordu podobnega urejevalnika beseldila. Znotraj Tagov ApplicationControlBar-a lahko vnašamo poljubne gradnike, kot so Button, Label, Text, ComboBox, MenuBar, Spacer in ostale.

V našem primeru smo uporabili na levi strani Label gradnik, na desni pa Button gradnik, da smo dosegli željeno ureditev, torej en gradnik na levi, drugega na desni smo uporabili Spacer gradnik, katerega glavna naloga je zagotavljanje vertikalnega ali horizontalnega zamika. Uporabili smo lastnost width="100%", kar pomeni, da Flex najprej pridobi širino ApplicationControlBara, od katerega odšteje širino Label gradnika na levi ter širino Button gradnika na desni, dobljeno širino v px vnese v Spacer gradnik.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                       width="600"
                       height="460">
	<mx:ApplicationControlBar width="500">
		<mx:Label text="To je ApplicationControlBar"/>
		<mx:Spacer width="100%"/>
		<mx:Button label="Gumb"/>
	</mx:ApplicationControlBar>
	<mx:Spacer height="20"/>
	<mx:Panel width="500" height="180" title="Naslov Panel gradnika">
		<mx:Text text="Lorem Ipsum is simply ..." width="462" height="110"/>
		<mx:ControlBar>
			<mx:Label text="ControlBar za Panel gradnik"/>
		</mx:ControlBar>
	</mx:Panel>
	<mx:Spacer height="20"/>
	<mx:TitleWindow width="400" height="130" id="prviTitleWindow"
                                 title="Naslov TitleWindow-a"
                                 showCloseButton="true"
                                 close="removeChild(prviTitleWindow)">
		<mx:Text width="300" text="It is a long ..."/>
	</mx:TitleWindow>
</mx:Application>
 

Uporabo vertikalnega zamika vidimo pri naslednjem Spacer gradniku, kjer smo z lastnostjo height="20" ločili ApplicationControlBar ter Panel gradnika vertikalno za 20 px.

Druga gradnika katera vam v tem tutorialu predstavljam sta si zelo podobna, kot vidimo tudi po izgledu. Sam bi težko povedal kaj je prednost enega ali drugega, sam TitleWindow velikokrat uporabim kot PopUp okno, saj za razliko od Panela omogoča zelo uporabno lastnost showCloseButton, katerega nastavimo na true in s tem omogočimo uporabniku, da PopUp window zapre, seveda pa moramo tu uporabiti malo ampak res čisto malo ActionScripta.

Naslov obeh gradnikov nastavimo z lasnosto title="Naslov Panel-a ali TitleWindow-a", znotraj taga gradnika lahko ponovno vstavimo poljubne ostale gradnike (HBox, VBox, Label, Text, Form ...). Z uporabo ControlBar taga, lahko v t.i footer - spodnji del gradnika vstavimo poljubne gradnike, tako kot smo to naredili v Panel-u...

Na koncu še nekaj besed o tem kako smo omogočili da se TitleWindow ob pritisku na križec izbriše iz naše kratke aplikacije. Kot sem omenil že zgoraj nam TitleWindow omogoča prikaz uporabnega križca na desni zgornji strani gradnika. Kaj se pri kliku na križec zgodi kontroliramo s close lastnostjo. Ker Flex ve, da v close lastnosti pričakuje ActionScript kodo, nam je znotraj narekovajev ni potrebno posebej označiti z { ActionScript Koda med oglatimi oklepaji } kot je to v navadi pri ostalih lastnostih, kjer lahko pišemo navaden tekst oz. po želji tudi ActionScript kodo...

TitleWindow-u smo dodelili id="prviTitleWindow", ki mora biti edinstven v celotni aplikaciji, saj se nam ne sme zgoditi, da bi dva gradnika nosila enaki id, saj nam to povzroči error v Flash Playerju. Ko uporabnik klikne na križec želimo, da se gradnik odstrani z aplikacije, tako lahko uporabimo ActionScript lastnost removeChild, ki pričakuje, da mu povemo kateri gradnik naj z aplikacije odstrani. Ker želimo, da odstrani TitleWindow z id-jem prviTitleWindow mu id vpišemo znotraj oklepaja. Kot opombo naj povem, da ne smemo uporabiti narekovajev znotraj removeChild lastnosti, če mu želimo sporočiti id gradnika, saj ActionScript ‘prviTitleWindow’ obravnava kot String in ne kot DisplayObject in s tem povzorčimo nedelovanje close lastnosti.

V naslednjem tutoriali si bomo ogledali gradnike kot so HBox, VBox, Canvas, HDividedBox, VDividedBox, H ter VRule...

V nekaj naslednjih tutorialih vam bom poiskušal na kratko predstaviti Adobejevo orodje za izdelavo interaktivnih spletnih aplikacij, videli boste, da je izdelava aplikacij s Flexom lahko zelo preprosta in učinkovita. Aplikacije katere s Flexom izdelamo lahko primerjamo s čisto pravimi aplikacijami, ki tečejo na naših vedno bolj zmogljivih računalnikih. Adobe je za razvijalce predstavil tehnologijo AIR, ki dopušča izdelavo pravih desktop aplikacij (z notranjo bazo podatkov ter dostopom do datotek na lokalnih diskih), ampak o AIRu kaj več ob drugi priložnosti...

Flex je kljub vsemu primarno namenjen izdelavi spletnih aplikacij, bitna Flash koda, katero s Flexom proizvedemo deluje na Flash Player 9.0 platformi ter tako deluje enako v vseh brskalnikih, ki imajo omogočen Flash Player plugin. Vsakomur, ki je izdeloval interaktivne spletne strani z AJAX tehnlogijami ve kakšna težava je napisati aplikacijo, ki bo delovala na primer enako v IE, Safariju, Operi ter Firefoxu. Flex vas teh težav reši...

Kot uvod v Flex kodo je spodaj prikaz preproste aplikacije, vsem znani tekst Hello World, ki se tako rad pojavi v vsakem začetniškem tutorialu ali knjigi, ter gumb, ki je seveda v tem primeru popolnoma nefunkcionalen.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                       layout="vertical"
                       height="130"
                       width="220">
	<mx:Label fontSize="24" text="Hello World!"/>
	<mx:Button label="Flex GUMB"/>
</mx:Application>
 

Flex aplikacije pišemo v XML formatu, katerega so pri Adobeju poimenovali MXML. Celotna Flex koda se nahaja znotraj tag-a Application, v našem primeru smo definirali širino in višino aplikacije v pixlih (width ter height). Layout=”vertical” razporedi vse gradnike znotraj aplikacije v vertikalni smeri, na voljo imamo tudi:
— horizontal - vsi gradniki so razporejeni v horizontalni smeri
— absolute - gradnike moramo razporediti sami, tako da jim določimo x ter y koordinate v px.
Xmlns:mx definira t.i namespace, v mx namespacu se nahajajo vsi v naprej izdelani gradniki Flex okolja. Kasneje bomo spoznali, kako lahko definiramo lastne namespace in kako izdelamo svoje gradnike...

Za tekst Hello World! smo uporabili Label gradnik, ki se uporablja za prikaz naslovov ali enovrstičnega teksta, za tekst ki obsega več vrstic uporabimo Text gradnik. Znotraj posameznih gradnikov lahko uporavljamo tudi njihov izgled, fontSize=”24” nastavi velikost pisave na 24 px. Tako Text, kot tudi Label gradnik sprejemata z lastnostjo text napis ki se bo znotraj gradnika pojavil (text=”Tu napišemo tekst za prikaz znotraj Label ali Text gradnika”)

Gumb v Flex aplikaciji preprosto izdelamo z Button gradnikom. V kolikor želimo, da bo na gumbu tudi napis le tega vpišemo kot label=”Napis ki bo prikazan v gumbu”

Tako smo skupaj izdelali svojo prvo aplikacijo, sicer aplikacija ne služi ničemur, pa vendar moramo nekje začeti. Prav kmalu pa boste videli kaj vse vam ponuja zares odlično orodnje ki ga imenujemo Flex. Osebno me je Flex fasciniral in upam da bo tudi vas!

Na spletni strani flex-si.com bom pisal o produktu Adobe Labs, ki sliši na ime Flex. Flex je framework, s pomočjo katerega lahko izdelujemo t.i. bogate spletne aplikacije (RIA – Rich Internet Applications). Flex framework bazira na Flash tehnologiji, za delovanje aplikacij, katere s pomočjo Flexa izdelamo pa je potreben Flash Player 9.0., ki je v svetu že dosegel več kakor 90% razširjenost. Tako aplikacije delujejo enako v vseh operacijskih sistemih, kot tudi v vseh brskalnikih (o čemer ostali razvijalci spletnih aplikacij s tehnologijami Ajax lahko le sanjajo).

Zakaj je Flex framework?

Adobe Flex je tako imenovani framework zato, ker uporablja gradnike, kateri se pri pred prevodom v bitno kodo za Flash player najprej prevedejo v ActionScript 3.0.

ActionScript 3.0.

Flex in Flash player 9.0, predstavljata še eno novost in sicer programski jezik ActionScript 3.0. Verzija 3.0, ki predstavlja nadgradnjo verzije 2.0, ki pa je bila napisana kot bi američani rekli “from ground up”, tako je ActionScript 3.0 popolnoma objektno usmerjen ter zelo podoben programskemu jeziku Java.

Na flex-si.com spletni strani bo kar nekaj postov namenjenih programiranju z novim ActionScript 3.0 programskim jezikom.

Za konec prvega posta pa še nekaj zanimivih povezav, za vse ki želite še kaj več zvedeti o Flexu ter ActionScriptu

• http://www.quietlyscheming.com/blog/ - Best resource za Flex razvijalce
• http://blog.flexexamples.com/ - Veliko tutorialov
• http://www.dougmccune.com/blog/ - Zanimiv blog znanega Flex razvijalca
• http://www.adobe.com/devnet/flex/ - Adobejeva stran za Flex navdušence
• http://weblog.cahlan.com/
• http://www.returnundefined.com/tags/flex/
• http://www.sephiroth.it/