Monday, April 19, 2010

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

0 comments:

Post a Comment