Flex & Javascript : Why that won’t work?

Some tricks to keep in mind while trying to make a Flex application and Javascript communicate between them. Tutorials are available in the official documentation here and here. But you may be in a hurry, and omit some details that may prevent you from achieving what you want. So, either RTFM pretty slowly, or check those features:

That's you'll always get whenyou are in hurry!

  • ExternalInterface.available

You have to  check whether the browser supports the interface by using its available property:

if(ExternalInterface.available)
{
  //make calls
}
  • Check Browser constraints

The ExternalInterface class requires the user’s web browser to support either ActiveX or the NPRuntime API that is exposed by some browsers for plug-in scripting.

  • Check Embedded SWF ID

Your SWF object is included in the HTML page using the Object tag.

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

The id and the name mustn’t  contain those characters :   [.-+*/\].  The sample application here is called “logon”.

  • Referencing your SWF Object

Not all browsers reference the swf object in the same way, some you may add a JS function to avoid this browser incompatibility issue:


<script language="javascript">

function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
}

</script>

Be sure to make the correct reference to you application, because:


getFlexApp(logon);

won’t work. You forgot the double quotes :p


getFlexApp("logon");

That’s the correct way.

  • Make your Flex methods accessible

Inside the Object tag, in the swf object, change the


allowScriptAccess="sameDomain"

to


allowScriptAccess="always"

And in the Flex side, add a callback to your method to be added to the externalInetrface dictionary.


if(ExternalInterface.available){

//callFlexMethod is the AS function you want to call from JS

ExternalInterface.addCallback('YouWillCallTheMethodFromJSByThisName',callFlexMethod);

}

Allow security domain using Security.allowDomain(‘your js domain’) and make concerned functions public accessible via a wrapper function:


public function callFlexMethod():void{
Security.allowDomain('*');
if(ExternalInterface.available){
var wrapperFunction:String = "myPrivateMethod";
ExternalInterface.call(wrapperFunction);
}
 }

private function myPrivateMethod():void{
//some code here
}

Got it?… Good for you 😉

Advertisements

About Salem Ben Afia

Big Data & Java developer

Posted on September 29, 2012, in Flex, Web and tagged , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: