sâmbătă, 10 ianuarie 2009

ActionScript...JavaScript... mai bine amandoua

Interfete web cu Flex si JavaScript

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.

Niciun comentariu: