Communicating Flex & JavaScript – Simple Example

If we google for communication between Flex & JavaScript we can get hundreds of examples. But for understanding the basic concept we need a very simple example, how to call JavaScript functions from Flex and Flex functions from JavaScript.

In this example we will see, My Flex application contains one Button and one TextInput control, and Html wraper also contains one Button and one Text Box. When I write something in Flex application’s TextInput and click button, we will show an JavaScript alert showing the Text of TextInput, and when I write something in HTML TextBox and click button I will show a Flex Alert containing the Text of TextBox.

For communication between Flex and JavaScript we need the ExternalInterface class.

In my example, whenever I am clicking the Button in my Flex Application, I am calling a function named callJs  in JavaScript and passing the value (Text) of TextInput. The Flex code will be like this below…

ExternalInterface.call("callJs", txtDisplay.text);

The JavaScript function will accept the Text and show in JavaScript Alert. The JavaScript code I need to put inside the HTML wrapper for my application and will look like this below…

<script language="javascript">
    function callJs(message){
        alert("Message from FLEX : " + message);
    }
</script>

That’s all… I successfully communicated to JavaScript from Flex.

Now,vice-versa… I will call Flex function [callFromJs()] from JavaScript. So firstly I need to allow this function to be called from JavaScript. So in the Application Initialise method I need to put the following code…

private function initApp():void{
   ExternalInterface.addCallback("callFlexFromJs", callFromJs);
}

callFromJs() function in Flex is like this below…

private function callFromJs(strFromJs:String):void{
   Alert.show("Message from JS : " + strFromJs);
}

Note:- callFlexFromJs is something like an Alias function name which is exposed to the Js layer, from Js layer we can call the method callFromJs in flex through this alias name, like below…

In the HTML wrapper side the JavaScript code which calls the Flex function looks like this below…

<script language="javascript">
    function callFlex(){
        element = document.getElementById("TestExternalInterface");
        element2 = document.getElementById("txtcallflex");
        txtForFlex = element2.value;
        element.callFlexFromJs(txtForFlex);//Here we are calling the alias name of the method
    }
</script>

Note:- TestExternalInterface, is the id of <object> tag and name of the <embed> tag, in my HTML wrapper. This is needed to identify my flex object in the HTML wrapper.

txtcallflex,  is the id of the TextInput in my HTML wrapper whose value I am passing to Flex.

To know more about the wrapper check the following link.

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001579.html

That’s all… I successfully communicated to JavaScript from Flex and vice versa.

The complete code in Flex side…

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">
<mx:Script>
  <![CDATA[
    import mx.controls.Alert;
    private function initApp():void{
      ExternalInterface.addCallback("callFlex", callFromJs);
    }
    private function callFromJs(strFromJs:String):void{
      Alert.show("Message Coming from Js : " + strFromJs);
    }
    private function callJs():void{
      if (ExternalInterface.available){
        ExternalInterface.call("callJs", txtDisplay.text);
      }
      else{
        Alert.show("ExternalInterface not available");
      }
    }
  ]]>
</mx:Script>
  <mx:Button id="btnCallJs" x="178" y="10" label="Call JS" click="callJs()"/>
  <mx:TextInput id="txtDisplay" x="10" y="10"/>
</mx:Application>

If you have any doubt do leave a comment.

Happy Flexing…:-)