Tag Archives: ExternalInterface

Passing objects with ExternalInterface from JS to Flex

What if you’d like to pass an object to Flex

To continue the topic of my previous post I’m just going to add that there’s a native way to pass objects from JavaScript to Flex’s actionscript.

I’m not going to describe how to structure a object in JavaScript and/or Flex. Let’s go directly to the example.

The function in .js file should return something that is object in JavaScript:

.js file

function getObject() {
    return { foo : 'bar', zoo : 'tar' };
}

Continue reading Passing objects with ExternalInterface from JS to Flex

Tips and tricks in ExternalInterface communication!

ActionScript and the rest of the world

In the past, when ActionScript v2 was widely used, the most common way to interact with the other parts of the web application, whether a page refresh, redirect or JavaScript method call was the as2 method getURL. With the simple getURL(‘javascript:someJSMethod…’) the flash movie called the JS function and everything was OK.

Now in ActionScript v3 where everything looks and it is different, everything about communication between JS and Flash/Flex is done by ExternalInterface. The communication can be done in both directions. From JS to Flash and vice versa.

The ExternalInterface.call

There are two simple methods implemented by ExternalInteface. The first one is addCallback and the second one is call. Here I’m going to write a little more about the second one.

The most common usage is:

ExternalInterface.call('jsMethod');

where jsMethod is, as you can guess, a JavaScript method. Something like:

test.js

function jsMethod() { alert('test') };

A bit different, but yet again simple, is the call to a js function with parameters:

ExternalInterface.call('jsMethod', param1, param2);

where the javascript function can be:

function jsMethod(param1, param2) { alert(param1) };

But what I was writing about is really tricky. What if the jsMethod returns a value? Than in the .js file you’ve the following method:

function jsMethod() { return 'foo bar' };

and when you try this:

var str:String = ExternalInterface.call('jsMethod');
Alert.show(str);

you get the alert box with the string ‘foo bar’.

Where to use it?

Well this is really useful, because you get the response within the call method, only with the .call instead with .call and than .addCallback. The problem of course appears when you try to use it with AJAX call. Than even if the function returns in the success method of the AJAX call the flash doesn’t get the response.

Than you simply implement the communication with both .call and .addCallback!

ExternalInterface from JavaScript to IE/Firefox

ExternalInterface communication with JavaScript

The most simple way to describe the case is as if you have the ExternalInterface addCallback in the Flex application like that:

flex.mxml

ExternalInterface.addCallback("jsFunc", flexFunc);

public flexFunc() : void
{ ... }

and in the javascript code you’ve something like that: Continue reading ExternalInterface from JavaScript to IE/Firefox

Flex Javascript communcation example

First of all you’ve to have both files for JavaScript and Actionscript  3 to make the communication successful. I don’t remember where exactly I found the tutorial, maybe it was on the official Adobe’s documentation page, but as I’ve written before I’m going to share my experience with the ExternalInterface options of Flex.

First of all you’ve to add this at the beginning of the page with the simple js code:

var jsReady = false;
function isReady()
{
return jsReady;
}

function pageInit()
{
jsReady = true;
}

of course the pageInit() function should be called onload of the body. It simply sets the JavaScript part to be ready for communication, after initialize the page. Than a small part of the javascript should be written for really speaking with the Flex application.

var swfReady = false;

function setSWFIsReady() {
swfReady = true;
}

function getSWF(movieName) {
if (navigator.appName.indexOf(“Microsoft”) != -1) {
return window[movieName];
} else {
return document[movieName];
}
}

function callFlexApp() {
if (swfReady) {
getSWF(“flash_movie”).methodInFlex(param_value1, param_value2);
}
}

Where flash_movie is the id of the object / embed pair.

First of all the JavaScript can begin to call methods in Flex only after the Flex application has returned that it has been initialized. That happens in Flex within the following file:

package communicator {

import flash.events.TimerEvent;
import flash.external.*;
import flash.utils.Timer;

public class Communicator
{

public function init():void {

if (ExternalInterface.available)
{

var containerReady:Boolean = isContainerReady();
if (containerReady)
{
setupCallbacks();
}
else
{
var readyTimer:Timer = new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}

}
else
{
trace(“External interface is not available for this container.”);
}

}

private function isContainerReady():Boolean
{
var result:Boolean = ExternalInterface.call(“isReady”);
return result;
}

private function setupCallbacks():void
{
ExternalInterface.addCallback(“callFlexApp”, callFlexApp);
ExternalInterface.call(“setSWFIsReady”);
}

private function timerHandler(event:TimerEvent):void
{
var isReady:Boolean = isContainerReady();
if (isReady)
{
Timer(event.target).stop();
setupCallbacks();
}

}


private function callFlexApp(param1:int, param2:int):void
{
// this function is called from javascript

}

}

}

That’s the short description how to set up a communcation between JavaScript and Flex.