Flex 3: Calling ActionScript Function from javaScript

In my earlier tutorial, we have seen how we can call JavaScript function from Flex application.

Today I will explain reverse functionality of calling Action Script function from JavaScript. Using ExternalInterface class of Flex library we can invoke Action Script function from JavaScript. To do this first we have to map the function in Action Script using addCallback method. This is static method of class ExternalInterface.

For this tutorial we will create an input Field and button in the html. To do this, first create a Flex project in Flex builder. Open your index.template.html form {project}/html-template/ folder. In this html page add following code just before the </body> tag.

<div>First Name: <input type="text" id="firstName"></div>
<div>Last Name: <input type="text" id="lastName"></div>
<div>Country: <input type="text" id="country"></div>
<div><input type="button" value="Send to Flex" onclick="sendDataToFlex()"></div>

We have created three input fields for first name, last name and country, We have also added button. Clicking on this button, it will call the Action Script function.

To make the html page proper. replace all ${width} by 600 and ${height} with 400. So that we can have flex swf size fix to 600x400.

If you have notice, in above code snippet we are calling sendDataToFlex function on Send to Flex button click. For that we have to write a function. To do this add following code before <noscript>

<script language="JavaScript" type="text/JavaScript">

function sendDataToFlex()
{
}

</script>

Now in the blank function body, we will add code for calling Flex function. To do this first we need to have reference of flash object in html page. We can retrieve the flex swf object using following function. Add following code above function sendDataToFlex()

function getFlexApp()
{
if(navigator.appName.indexOf("microsoft")!=-1)
{
return window['${application}'];
}
else
{
returndocument['${application}'];
}
}

This function will return the flex swf object reference. Now using this function we will call the function in Flex application.

Now we need to write a function which will call the flex method. Add following code after getFlexApp function.

function sendDataToFlex()
{
getFlexApp().addPerson(document.getElementById('firstName').value, document.getElementById('lastName').value, document.getElementById('country').value);
}

In the above method we have taken Flex application reference using getFlexApp and we are calling addPerson method of flex application. For this method we require three parameters, Here we will pass the values of each text field we have created.

Now we are done with creating Html file. Once you build your project, This template will create the html page in your output folder of project, by default it is bin-debug with all modification we made in the template.

Next we have to move to MXML. Open your application mxml file. In this file we will create a data grid component in which all data comes from java script will populate. Following code will create the data grid in your application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init();">

<mx:DataGrid width="500"
height="250"
dataProvider="{persons}">
<mx:columns>
<mx:DataGridColumn headerText="First Name"
dataField="firstName"/>
<mx:DataGridColumn headerText="Last Name"
dataField="lastName"/>
<mx:DataGridColumn headerText="Country"
dataField="country"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

We are ready with display component, Next we have to map JavaScript function using ExternalInterface.addCallback method. In this method we have to set two parameters, First will be the name what we will use in the JavaScript and next will be the function reference. Also we will create the function which will be called from JavaScript. In this function we will receive three parameters, add these values in persons array collection. This variable is binded with the data Grid. Updating this variable will add the values in Data greed. Add following code in the script tag of MXML file.

import mx.collections.ArrayCollection;

[Bindable]
private var persons:ArrayCollection = new ArrayCollection();

public function addPerson(firstName:String, lastName:String, country:String):void
{
persons.addItem({'firstName': firstName, 'lastName': lastName, 'country': country});
}

private function init():void
{
ExternalInterface.addCallback('addPerson', addPerson);
}

Once it is set, we are all set to go. Build your project and check.

Check out the demo here

Flex 3: Calling JavaScript from Flex

It is possible to communicate with the javascript functions reside in the html page from Flex. Flex library has an ExternalInterface class which allow us to communicate with Flex and javaScript and vice versa.

In this tutorial I will explain how you can communicate. You can call javaScript function which has no parameter, which has parameters and function which is returning values. I will cover function which will receive parameter in string format and returns the plain string.

To start with, First create a flex project in the Builder. First we will create a javaScript function in the html page and then we will call that from the Flex application. Open your index.template.html form {project}/html-template/ folder. In this html page add following code just before the <noscript> tag.

<script language="JavaScript" type="text/javascript">

function flexTojavaScript(fromFlex)
{
alert(value);
return 'Returning from JavaScript to Flex';
}

</script>

In the above code I have created the Script tag and within that I have created a function named 'flexTojavaScript' which will receive a parameter named 'fromFlex'. This function will return plain text.

That's it, we are done with the changes in html page.

Now we will move to the flex application mxml. In this mxml, I have created a button which will call the clickHandler on clicking on it. From the click handler I have called the javascript function using ExternalInterface class. The value returned from the javascript is stored in the returnFromJavaScript variable.

private function clickHandler():void
{
returnFromJavaScript='';
returnFromJavaScript = ExternalInterface.call("flexTojavaScript", "This is called from Flex");
}

ExternalInterface class has static method named 'call'. using this function we can call the javaScript function. In this function you will find two parameter, first parameter is the name of the javaScript function as a string. You can also send the parameters. In the above code we are sending plain string to javaScript. As mention above the function is javaScript is returning string. Which we are storing in the application local variable. In this application I have crated the text which will show up the return value of javaScript function.

That's it We are done with the changes. Just build your project and click on the button. You will find that javaScript alert will appear. Which will have the parameter text what we have sent from the Flex. On Clicking OK button of the alert prompt. You will find that the value which is returned from the javaScript will populate below the button.

This is very simple method using which we can call the javaScript function from the Flex.

I hope this will help you.

In my next tutorial I will explain the revers of this, i.e. Calling Flex function from javaScript.