ActionScript...JavaScript... mai bine amandoua

In incercarile mele de a fi un programator "cu mintea deschisa" si de a folosi Flex m-am lovit de o mica problema.
In primul rand am dorit sa integrez swf-ul rezultat din aplicatia mea Flex intr-un fisier html, pentru a da putina stralucire paginii mele web.
Problema a aparut atunci cand am avut nevoie sa fac ca flash-ul si javascriptul sa comunice intre ele.

Incepem cu inceputul.
Ca sa incluzi un swf in html-ul tau adaugi un tag de genul urmator:

< classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="blog" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

< name="src" value="blog.swf">
< name="allowScriptAccess" value="always">

< src="blog.swf" width="100%" height="100%" name="blog" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">

< /embed >
< /object >
Tag-ul il gasesti in fisierul html generat de catre FlexBuilder la rularea aplicatiei tale.

In fisierul html adaugam o functie care va fi apelata la apasarea unui buton:
< type="button" onclick="changeFlexText">
changeFlashText va apela o functie din fisierul nostru mxml, sa ii spunem flexFunction:
function changeFlexText(){
blog.flexFunction("test");
}
, unde blog este id-ul obiectului swf.

Pentru a putea face legatura cu JavaScript-ul, Flex se foloseste de ExternalInterface, o clasa care iti permite fie sa creezi functii ce pot fi apelate din cod JavaScript(addCallback), fie sa apelezi la randul tau cod JavaScript(call).
Declararea de functii visibile din JavaScript se poate face incepand cu emiterea semnalului creationComplete.
Astfel avem urmatorul script:

< mx:Script >
import flash.external.*;
public function localFlexFunction(newText:String):void {
//procesari necesare
}

public function OnCreationComplete():void{
//Adaug o noua functie care poate fi apelata de catre javascript
if(ExternalInterface.available) {
ExternalInterface.addCallback("flexFunction", localFlexFunction);
}
}
< /mx:Script >

Si cam atat.
Si uite cum inca o data, flex-ul ne-a aratat ca poate trai in armonie cu aplicatiile 'politehniste', iubitoare de html si javascript.

Nu e Flash, e Flex

Adobe a lansat in 2004 FLEX, o colectie de tehnologii pentru dezvoltarea de interfete web care sa impresioneze ochiul navigatorului pe internet.

Ce face Flex in plus fata de vechiul Flash si Action Script?
Doar le uneste intr-un produs unic, usurand astfel munca dezvoltatorului de interfete.
Mai mult, pentru realizarea interfetelor, este utilizat un limbaj numit MXML, bazat pe XML, care este familiar programatorului traditional.

Sa facem deci primii pasi...
Intram pe site-ul de la Adobe http://www.adobe.com/products/flex/, luam SDK-ul si Flex Builder-ul, care este un IDE special pentru dezvoltarea de aplicatii Flex si Air, gratuit pentru studenti (modul de obtinere a acestei licente gratuite este insa putin mai complicat, asa ca vom folosi trial-ul). FlexBuilder este bazat pe eclipse, deci un nou plus in ceea ce priveste usurinta programatorilor de a lucra cu el.
Cream un nou proiect si observam ca ni se deschide fisierul MXML pentru editare.

Ne jucam putin.
Folosim drept container un panel:
< mx:Panel layout="horizontal" title="Buna Flex">
...

Adaugam butoane,
< mx:Button id="but" label="Click!">

un label,
< mx:Text id="label" text="Buna lume Flex!">
si ce ne mai trece prin cap.


Remarcam atributele folosite pentru butoane, care ne duc cu gandul la HTML.
Observam ca putem introduce atat cod asemanator cu CSS, cat si Script de tip Action Script, ceea ce ni se pare de asemenea foarte similar cu CSS-ul si JavaScript-ul folosite pana acum in dezvoltarea de interfete web.

Remarcam similitudinea modului de organizare a interfetei cu cea de la Java, sau Visual C:
se merge pe principiul de mai multe straturi, straturi reprezentate de containere, si pe existenta a mai multor layout-uri.

Daca utilizam Flex Builder, acesta are inclus un al doilea mod de a aranja usor elementele din interfata noastra, folosind Design View-ul. Aici avem lista de componente pe care le putem utiliza, care pot fi aranjate acolo unde dorim printr-un simplu drag 'n drop

Rulam aplicatia si ne minunam de cat de glossy arata.

Concluzia acestei prima intalniri?
Acum Flash-ul este mult mai la indemana programatorilor traditionalisti, poate mai putini atenti la asectul unei pagini.
Efectele ce se pot realiza sunt nelimitate, iar tindand cont de faptul ca acum Google a inceput sa indexeze fisierele SWF, putem sa renuntam putin la mult prea indragitul html&css&ajax, pentru a cerceta macar, ceea ce Flex poate face.

Pentru un imbold, check this out:
StumbleUpon