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.

Zorzoane

..smart AND sexi ;)


Am dat şi eu de boala javascriptului întru împopoţonarea site-ului. Ca dovadă, nu m-am lăsat pâna nu am adăugat (trebuie sa aveti javascriptul activat)

• Alex


• Raluca


• Iulia


• Tudor

pe blog, asta pt că widgetul "noi suntem" din dreapta e chiar anost (Tudor, scuze, nu am avut poză cu tine).

Instructiuni: mouseover menu. Efectul e luat de pe http://www.phatfusion.net/imagemenu/index.htm.

Nu la fel de spectaculos, dar subliminal arătos, javascript-ul ştie să pună chenare, umbre frumoase şi spin pozelor. Fără pic de photoshop şi cu doar 23.6kB. Check out
http://www.netzgesta.de/instant/ .

Adăugăm şi puţină comunicare cu serverul, şi voila: http://imageflow.finnrudolph.de/ - o galerie de imagini extrem de sexi şi sofisticată.

Precautii: excesul de javascript poate dăuna interfeţei.

Obs: Daca nu apar niste poze care slideaza cand dai cu mousu' pe ele, e vina serverelor .dap, care gazduiesc niste javascripturi folosite in efect, dar care pica din cand in cand zilnic.

Variabilele de mediu din JavaScript

Netscape, IE, Google Chrome, rezolutie mare pentru Desktop-uri, rezolutie mica pentru PDA-uri... trebuie sa tinem cont de toate atunci cand cream o interfata web.
Dar cum putem obtine aceste informatii?
JavaScript pune la dispozitie posibilitatea accesarii unor variabile de mediu care ne-ar putea ajuta in detectia browser-ului, rezolutiei si nu numai.
Astfel,
pentru aflarea tipului / versiunii de browser - folosim variabila navigator
<html>
<body>
<script type="text/javascript">
document.write('<hr />');
document.write('Browser >>'+ navigator.appName);
document.write('<br/>');
document.write('Versiunea >>'+navigator.appVersion);
</script>
</body>
</html>

,iar pentru aflarea rezolutiei - folosim variabila screen
<html>
<body>
<script type="text/javascript">
document.write('Rezolutie >>' + screen.width + 'x' + screen.height)
</script>
</body>
</html>

Simplu, nu? Dar in aceasta era a 'razboiului rece' dintre browserele web, variabilele navigator si screen se dovedesc a fi foarte utile in realizarea
unei interfete ce nu are culoare 'browsereasca'.