Javascript notifications to Flex on Multiple objects

Question

Hi,

I know that with ExternalInterface, we can register ActionScript functions that will be callable from JavaScript, But i want to register actionscript function for of one class which has multiple instance created in the Application. So how it will recognize which object action script function will called from java script.

For example :

1) Java script : Has function javaScripAlert() which call Action script function showAlert();

Ie testSwf.alert(value);

function javaScripAlert (value) {

    TestSwf.alert();

}

2) Class ABC has call back function showAlert (value); It register callback function “showAlert” in class ..

Ie . ExternalInterface. addCallback(“alert”, showAlert);

3) TestApplication : in this I have created multiple objects of Calss ABC

Ie

I have created multiple object of type ABC in the TestApplication . so when I call javaScript function javaScripAlert() from HTML it only calls function showAlert (value) of object “abc3” and not for the other objects abc1 ,abc2.

So is any way that function of other object also called at that time .

Thanks & Regards, Sanjay Ruparelia

Answer 1

Each Actionscript object that calls ExternalInterface.addCallback("myCallback", myCallback) will override the javascript callback. So the last Actionscript object to call that wins.

Example:

TestObject.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
    initialize="registerCallback()">
    <mx:Script>
        <![CDATA[
            import flash.external.ExternalInterface;

            protected function registerCallback():void
            {
                if (ExternalInterface.available)
                {
                    ExternalInterface.addCallback("myCallback", myCallback);
                }
            }

            protected function myCallback():void
            {
                trace(this);
            }

            protected function callJavascript():void
            {
                ExternalInterface.call("myCallback");
            }
        ]]>
    </mx:Script>
    <mx:Panel width="100%" height="100%" click="callJavascript()"/>
</mx:Canvas>

Javascript in HTML

function myCallback()
{
    getFlashContent().myCallback();
}
function getFlashContent()
{
    return document.getElementById("MyApp");
}

Sample App

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <mx:Panel id="panel" width="100%" height="100%" >
        <local:TestObject width="100%" height="50"/>
        <local:TestObject width="100%" height="50"/>
        <local:TestObject width="100%" height="50"/>
    </mx:Panel>

</mx:Application>

Output (when clicking)

MyApp.panel.TestObject34
MyApp.panel.TestObject34
MyApp.panel.TestObject34

A workaround would be to have all of those ExternalInterface.addCallback("myCallback", myCallback); calls in a Manager/Util class (some singleton-like thing). Then make sure you only add it once. Then you can pass individual items into the method.

Lance