Flex & Javascript Tutorial - Simple Interaction
Now that we have gone over Flex and PHP its time to get some client side interaction going on with Javascript. This tutorial will show you how to call javascript functions from flex and flex functions from javascript. There is a really nice example of the use of this on Google Finance, as well as a number of other google sites.The application below gives you a little taste of what can be done between javascript and flex. You can add people to the flex application using the small form on the bottom right through javascript, and if you select a person in the flex app and click the "Javascript Display" button you will get the info back out to the small form on the top right.
| |||||||||||||||||||
The very first thing to do is to set up a basic flex application - the code below represents close to the simplest one possible. This sets up an application with specified height and width and also adds the view source option to the movie, with the source file specified by "viewSourceURL" attribute.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="482" height="348"
viewSourceURL="../files/JSTutorial.mxml">
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="482" height="348"
viewSourceURL="../files/JSTutorial.mxml">
</mx:Application>
The next step in the process is to setup a simple flex interface with no functionality built in. We put a panel into our application and give it a title. Next we add the DataGrid object which we will bind our data to. In the DataGrid we add a couple columns (DataGridColumn), take notice to the dataField names as they will define the keys for our incoming data. So in this case our data coming in should have values from 3 keys: "Name", "Age" and "Sex". We also add a button, which will later be used to call a Javascript function on our page. Lastly we add a label to give us a quick status update when sending the data to Javascript. We also give each of the ui components an id so that we can refer to them later. All this code goes inside the application tags.
<mx:Panel id="pnlMain" x="10" y="10" width="462" height="328"
layout="absolute" title="Simple Javascript Interaction">
<mx:DataGrid id="dgPeople" x="10" y="10" width="422"
height="229">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Age" dataField="Age"/>
<mx:DataGridColumn headerText="Sex" dataField="Sex"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" />
<mx:Label x="149" y="260" id="lblMessage"/>
</mx:Panel>
layout="absolute" title="Simple Javascript Interaction">
<mx:DataGrid id="dgPeople" x="10" y="10" width="422"
height="229">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Age" dataField="Age"/>
<mx:DataGridColumn headerText="Sex" dataField="Sex"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" />
<mx:Label x="149" y="260" id="lblMessage"/>
</mx:Panel>
At this point you should be able to compile and run to see your small interface.
Ok, next up after this is just getting some data into our DataGrid and we are going to do this with a small bit of Actionscript. First, we attach a function call to our DataGrid's initialize event. So our new DataGrid opening tag looks like the one below.
<mx:DataGrid id="dgPeople" x="10" y="10" initialize="initDG()"
width="422" height="229">
width="422" height="229">
Now to go along with the event we need to write the actual function that it is referring to. First thing we need to do is add a script tag to our application. Then we can start writing the function. We also add an import call so that we can use ArrayCollection.
Inside the function "initDG" we do a little bit of data creation. We create an array for the data, and then push a few items onto the array - we use {key1: "value1", key2: "value2"...} syntax to add an associative array for each item. Now we need to make sure our keys match the ones we used for our DataGridColumns so the DataGrid knows what columns to associate with what values. Next thing done is to create an ArrayCollection to bind to and stick the array in it. And last thing we do is bind our dgPeople (DataGrid) to it and set the initial selected index. So this gives us the following code for our script and this code goes right below the application opening tag.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
]]>
</mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
]]>
</mx:Script>
Ok you again should be able to compile and run the application, and now there should be data in your DataGrid. Next up is sending this data to Javascript. This is pretty easy to do. To start off, we need to add a click event to our button to call a Actionscript function. Below is the new modified button tag.
<mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" click="jsDisplayPerson()"/>
id="butJSDisplay" click="jsDisplayPerson()"/>
Now to make this button work we need to add that Actionscript function. This starts to get into the fun stuff now - to call Javascript functions in Flex we us the External Interface api. You can learn more information about it on the Flex Documentation Site. Basically it allows us to build wrappers to call Javascript functions from Flex and vice versa.
We add our Actionscript function in the Script tags and we also need to add an import statement for "flash.external.*". There is not much to the function itself: first we check if there is a External Interface available (basically this makes sure we are in a html page). If we are we can make the magic happen, with a call to ExternalInterface.call we can send information to a Javascript function called "displayPerson" whose argument is the selectedItem in our DataGrid. Now this should send an array of data of the selected item to Javascript. To learn more about what can be sent to Javascript check out this Adobe Documentation page. Last we update the status label saying that we sent the data. Otherwise, if the external interface is not available we display an error message in the label. Now our script tag looks like this:
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.external.*;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
public function jsDisplayPerson():void
{
if (ExternalInterface.available) {
ExternalInterface.call("displayPerson",
dgPeople.selectedItem);
lblMessage.text = "Data Sent!";
} else
lblMessage.text = "Error sending data!";
}
]]>
</mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.external.*;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
public function jsDisplayPerson():void
{
if (ExternalInterface.available) {
ExternalInterface.call("displayPerson",
dgPeople.selectedItem);
lblMessage.text = "Data Sent!";
} else
lblMessage.text = "Error sending data!";
}
]]>
</mx:Script>
Now we get to write a bit of javascript code to display the person that is being sent to us from flex. So in a set of Javscript tags we create our displayPerson function - remember, the name has to match perfectly to what we told ExternalInterface.call function in flex to call. The first thing we do in our Javascript function is make sure we are not getting a null object and if it is null we display an alert. Then we just use the object passed as a javascript object and reference the appropriate datagrid columns using javascript object property syntax. All I do with them is display the values in a few table cells, but at this point you can do anything with the data that you want. So in our html script tags we get some code like this:
function displayPerson(person)
{
if(person == null){
alert("Please select a person, or maybe I screwed up.");
}
else{
document.getElementById('nameDisplay').innerHTML =
person.Name;
document.getElementById('ageDisplay').innerHTML = person.Age;
document.getElementById('sexDisplay').innerHTML = person.Sex;
}
}
{
if(person == null){
alert("Please select a person, or maybe I screwed up.");
}
else{
document.getElementById('nameDisplay').innerHTML =
person.Name;
document.getElementById('ageDisplay').innerHTML = person.Age;
document.getElementById('sexDisplay').innerHTML = person.Sex;
}
}
So then if we add a little bit of html that looks like what I have below the javascript from above should work and populate a few table cells. You should be able to embed the flex movie, but notice we need to have the allowScriptAccess property in our object and embed tags for the movie before the "Javascript Display" button works. You can check the source of this page if you need more info.
<table>
<tr>
<td>Name:</td>
<td id="nameDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Age:</td>
<td id="ageDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Sex:</td>
<td id="sexDisplay" style="width:150px;"> </td>
</tr>
</table>
<tr>
<td>Name:</td>
<td id="nameDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Age:</td>
<td id="ageDisplay" style="width:150px;"> </td>
</tr>
<tr>
<td>Sex:</td>
<td id="sexDisplay" style="width:150px;"> </td>
</tr>
</table>
Now you should be able to call any javascript functions from your Flex applications using the above technique. The next thing we are going to do is setup our flex application so that flex functions can be called by javascript via ExternalInterface.
The first thing we need to do is add some code to our application startup to initialize what flex functions will be accessible through external calls. We add code to our application tag to fire a function on the initialize event. The following code is the new application tag, it simply calls an actionscript function when the initialize event is fired.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="482" height="348"
initialize="initApp()"
viewSourceURL="../files/JSTutorial.mxml">
layout="absolute" width="482" height="348"
initialize="initApp()"
viewSourceURL="../files/JSTutorial.mxml">
Now we can write the initApp actionscript function. This function will check if the ExternalInterface is available to keep from getting errors when running in the regular 'ole flash player. Then it adds a callback for an actionscript function, this function will be referred to externally as "addPerson" (the first argument to addCallback) and will map to the internal function called addPerson (the second argument to addCallback). The initApp function should then look like the code below, which is added in our actionscript script tags.
public function initApp():void
{
if (ExternalInterface.available)
ExternalInterface.addCallback("addPerson", addPerson);
}
{
if (ExternalInterface.available)
ExternalInterface.addCallback("addPerson", addPerson);
}
Now the only thing left to do in our flex application is create the function "addPerson", which will add people to our DataGrid. This function takes three arguments: a string for the name, age, and sex of the new entry. Now to add an item we take the current Items in DataGrid cast them as an ArrayCollection and add a new item using the data we passed in. Again this is an actionscript function so you need to put it in the actionscript script tags.
public function addPerson(name:String, age:String,
sex:String):void
{
(dgPeople.dataProvider as ArrayCollection).addItem(
{Name: name, Age: age, Sex: sex});
}
sex:String):void
{
(dgPeople.dataProvider as ArrayCollection).addItem(
{Name: name, Age: age, Sex: sex});
}
Now that we have our mxml and actionscript written we can create some html and javascript to use our new external flex function. The javascript function we are going to make will just grab a few values from a couple input items on our html page and then we will call the flex function using those values as arguments. In order to call the flex function, we use another function called getFlexApp('FlexJSTutorial'). I will go over this in just a second. So what we add to our javascript tag is the following.
function addPerson()
{
var name = document.getElementById('txtName').value;
var age = document.getElementById('txtAge').value;
var sex = document.getElementById('selSex').value;
getFlexApp('FlexJSTutorial').addPerson(name, age, sex);
}
{
var name = document.getElementById('txtName').value;
var age = document.getElementById('txtAge').value;
var sex = document.getElementById('selSex').value;
getFlexApp('FlexJSTutorial').addPerson(name, age, sex);
}
So now you are wondering about this getFlexApp function - well this is the function that actually returns us the flex app that is on the page. I originally had an issue getting the embedded object but found the suggested solution on Adobe's site here. This function takes into account various types of browsers. The one thing you need to do is make sure your object and embed tags for your flash movie have an id and name. These are required for getting the flex application. So the following function goes in the javascript tag:
// This function returns the appropriate reference,
// depending on the browser.
function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
// depending on the browser.
function getFlexApp(appName) {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
The last thing are going to do is create the html inputs that we use in our javascript addPerson function. This includes two input text boxes and one input select with two options one for "Male" and one for "Female". Nothing special about these, also we have a button which we use to call our javascript function when the onclick event occurs. I put all these in a table for a little bit of organization:
<table style="border-spacing:5px;">
<tr>
<td style="border-style:none;padding:0px;">Name:</td>
<td style="border-style:none;padding:0px;">
<input id="txtName" type="text" />
</td>
</tr>
<tr><td style="border-style:none;padding:0px;">Age:</td>
<td style="border-style:none;padding:0px;">
<input id="txtAge" type="text" />
</td>
</tr>
<tr><td style="border-style:none;padding:0px;">Sex:</td>
<td style="border-style:none;padding:0px;">
<select id="selSex" style="width:100px;">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="border-style:none;padding:0px;">
<input type="button" id="butAddPerson"
onclick="addPerson()" value="Add Person" />
</td>
</tr>
</table>
<tr>
<td style="border-style:none;padding:0px;">Name:</td>
<td style="border-style:none;padding:0px;">
<input id="txtName" type="text" />
</td>
</tr>
<tr><td style="border-style:none;padding:0px;">Age:</td>
<td style="border-style:none;padding:0px;">
<input id="txtAge" type="text" />
</td>
</tr>
<tr><td style="border-style:none;padding:0px;">Sex:</td>
<td style="border-style:none;padding:0px;">
<select id="selSex" style="width:100px;">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="border-style:none;padding:0px;">
<input type="button" id="butAddPerson"
onclick="addPerson()" value="Add Person" />
</td>
</tr>
</table>
And that about wraps it all up. If you have any questions at all please leave them in a comment, and I will try and help you out.
Below is the full code for the mxml file.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="482" height="348"
initialize="initApp()"
viewSourceURL="../files/JSTutorial.mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.external.*;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
public function addPerson(name:String, age:String,
sex:String):void
{
(dgPeople.dataProvider as ArrayCollection).addItem(
{Name: name, Age: age, Sex: sex});
}
public function initApp():void
{
if (ExternalInterface.available)
ExternalInterface.addCallback("addPerson", addPerson);
}
public function jsDisplayPerson():void
{
if (ExternalInterface.available) {
ExternalInterface.call("displayPerson",
dgPeople.selectedItem);
lblMessage.text = "Data Sent!";
} else
lblMessage.text = "Error sending data!";
}
]]>
</mx:Script>
<mx:Panel id="pnlMain" x="10" y="10" width="462" height="328"
layout="absolute" title="Simple Javascript Interaction">
<mx:DataGrid id="dgPeople" x="10" y="10" initialize="initDG()"
width="422" height="229">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Age" dataField="Age"/>
<mx:DataGridColumn headerText="Sex" dataField="Sex"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" click="jsDisplayPerson()"/>
<mx:Label x="149" y="260" id="lblMessage"/>
</mx:Panel>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="482" height="348"
initialize="initApp()"
viewSourceURL="../files/JSTutorial.mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.external.*;
public function initDG():void
{
var people:Array = new Array();
people.push({Name: "Charlie", Age: "23", Sex: "Male"});
people.push({Name: "Brandon", Age: "23", Sex: "Male"});
people.push({Name: "Mike", Age: "23", Sex: "Male"});
people.push({Name: "Caroline", Age: "23", Sex: "Female"});
var peopleCollection:ArrayCollection =
new ArrayCollection(people);
dgPeople.dataProvider = peopleCollection;
dgPeople.selectedIndex = 0;
}
public function addPerson(name:String, age:String,
sex:String):void
{
(dgPeople.dataProvider as ArrayCollection).addItem(
{Name: name, Age: age, Sex: sex});
}
public function initApp():void
{
if (ExternalInterface.available)
ExternalInterface.addCallback("addPerson", addPerson);
}
public function jsDisplayPerson():void
{
if (ExternalInterface.available) {
ExternalInterface.call("displayPerson",
dgPeople.selectedItem);
lblMessage.text = "Data Sent!";
} else
lblMessage.text = "Error sending data!";
}
]]>
</mx:Script>
<mx:Panel id="pnlMain" x="10" y="10" width="462" height="328"
layout="absolute" title="Simple Javascript Interaction">
<mx:DataGrid id="dgPeople" x="10" y="10" initialize="initDG()"
width="422" height="229">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Age" dataField="Age"/>
<mx:DataGridColumn headerText="Sex" dataField="Sex"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="256" label="JavaScript Display"
id="butJSDisplay" click="jsDisplayPerson()"/>
<mx:Label x="149" y="260" id="lblMessage"/>
</mx:Panel>
</mx:Application>
EDIT: You can check out all the html code needed here.
Posted in Flex, Javascript, All Tutorials by The Fattest |
71 Responses
Tracebacks / Pingbacks
-
My Hobby is Programming » Blog Archive » Flex and Javascript Tutorial: Simple Two Way Interaction
October 28th, 2007 at 11:11 am
July 21st, 2007 at 8:45 am
Wow! Excellent tutorial on using JavaScript and Flex. Thanks for providing such a well written and easy to follow example.
July 21st, 2007 at 9:29 am
Here are a few notes for anyone who wants to create the Flex application and HTML page to duplicate the example given in this excellent tutorial.
1. When you create a new Flex project, make a note of the name you give your Flex project. For example I called my Flex project FlexToJavaScript. You will need this name for one of the JavaScript functions (see below).
2. After you have copied the Flex app source code in the tutorial into your own Flex project run your Flex app to ensure the basic data grid displays with the data.
When you run a Flex app in Flex Builder, Flex Builder uses a file named index.template.html to create the HTML page that includes your compiled Flex app (a Flash SWF). The index.template.html is in the html-template folder of your Flex project. You can add HTML markup and JavaScript functions to the index.template.html file and that way that markup will be present in the HTML file Flex Builder creates.
3. Copy the HTML markup for the two tables given in the tutorial (the one table that displays the data send from Flex to the HTML page and the other table that encloses the input fields to get data to send to the Flex app). I pasted the HTML for these two tables into the index.template.html just after the ending of the tag. Save index.template.html and rerun your Flex app. The two tables should appear below the DataGrid.
4. The JavaScript functions given above can also be copied into the index.template.html file. Just copy all the JavaScript code given in the tutorial to an area inside the block that is right after the closing tag. Be sure you don’t overwrite the JavaScript that is already inside that block. Save the index.template.html file and rerun your Flex app to make sure you didn’t overwrite something. Everything should work ok and you should be able to select a data grid row and then click on the button and the row’s data should appear in the table.
5. In the index.template.html locate the JavaScript function addPerson. Inside this function is a command getFlexApp(’FlexJSTutorial’). Change FlexJSTutorial to the name you gave your Flex project (my Flex project was named FlexToJavaScript so that is what I used instead of FlexJSTutorial). The name you gave your Flex project becomes the value for the id attribute of the embed and object tags (which are used to display your compiled Flex App [the SWF]).
6. Save index.template.html and rerun your Flex app. You should now be able to enter data into the input fields and send that data to Flex where it will appear in the DataGrid.
July 21st, 2007 at 9:35 am
It looks like some of instructions above got stripped out. Here are missing words.
3. …I pasted the HTML for these two tables into the index.template.html just after the ending of the iframe tag.
4. …area inside the javascript block that is right after the closing style tag in the head section
July 21st, 2007 at 10:38 am
Bruce, thanks for the comments and the helpful information on various parts of the tutorial.
August 8th, 2007 at 12:19 am
It’s really nice interactive tutorial
August 9th, 2007 at 7:45 am
I am new with flex and this is my first application.
I have created FLEX project named “Connection” in Flex Builder 2 for above Tutorial.
The mxml file is Connection.mxml.
And I have putted all java script code to index.template.html.
I don’t know what path should I write to viewSourceURL?
Can anybody help me out?
Thanks in Advance
August 9th, 2007 at 7:56 am
full path is
C:\Documents and Settings\Nikunj\My Documents\Flex Builder 2\Connection\Connection.mxml
August 9th, 2007 at 8:06 am
I got it ..its running..
Really a very nice tutorial
August 9th, 2007 at 9:01 am
Glad to hear you got it running. Really you don’t have to have the viewSourceURL; this is just a nicity that I like to do so people can see the actual source behind the examples.
If you need any other help feel free to ask Niks.
August 9th, 2007 at 2:14 pm
Excellent tutorial.!!!
August 10th, 2007 at 2:51 am
Thanks for co-operation
August 17th, 2007 at 9:18 am
First of all thanks for sharing this great example. I am new in flex. I have tried it and it works for me fine. Now my desire is to call the flex function from java script but I need to call the function from a function of JavaScript class created in a JS file.
I have tried the code in example for that. It works fine for firefox, but for IE it is not working. Can any one give me any idea about that?
Same way is it possible to call a java script function in js file from flex?
August 20th, 2007 at 3:17 pm
i don’t know the reason why because when i try this thing it crashes my browser (IE). but when i switched to my old fscommands, it worked again. They call the same commands and parameters. Do you know where did i go wrong?
Thanks.
August 24th, 2007 at 11:58 pm
Hi
My mxml file is called ExtInterface.mxml.When I compile this project a file ExtInterface.html is created in the bin folder of the project.Can I place the html code in this file or does it have to be in the index.template.html ?
August 25th, 2007 at 4:57 am
i have a problem for retriving the new data from database.when i click on the edit link that time edit page will be displayed and then click on hte save button that time data will not save.
September 5th, 2007 at 6:47 am
Hi thanks for sharing this greate concept. keep on posting like this.
Thanks and Regards
Praba.S
September 6th, 2007 at 1:43 am
Thanks for giving nice tuitorials
September 19th, 2007 at 12:26 pm
Hi, I tried to run this code in Flex Builder 2. I followed every set of instructions mentioned here. I can see the datagrid, I can see the input fields and the buttons. But when I enter my data the datagrid does not get updated. When I click on the Javascript display, it does puts a status “Data sent” I cannot see the reaction.
I am a newbie can someone help me here please..?
thanks
D
October 3rd, 2007 at 11:39 am
Domnic,
I had the same problem, but then realized it was this function that was causing the problem:
// This function returns the appropriate reference,
// depending on the browser.
function getFlexApp(appName) {
if (navigator.appName.indexOf (”Microsoft”) !=-1) {
return window[appName];
} else {
return document[appName];
}
According to Adobe’s documentation at
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=19_External_Interface_178_3.html
it doesn’t seem we need the function to detect browsers. So I simply deleted the function, and used ‘FlexJSTutorial’ as the app name, and it worked.
October 4th, 2007 at 2:30 am
hi,
im new to flex can u tell me how to connect flex to sqlserver
using .net
October 12th, 2007 at 7:32 am
Can you give the complete code of html.
Some other example if available.
Not sure of using
October 13th, 2007 at 3:01 pm
swetha yeah sure just give me a day and I will add an edit to the post with the entirety of the html and everything.
October 16th, 2007 at 7:19 am
OK
October 16th, 2007 at 9:28 am
I added a link to the html page with all the javascript and html/css code used. You can then just view the source or save the page to get it all.
November 5th, 2007 at 5:57 am
Hi there,
I’ve got a question especially for the Fattest. First of all i want to thank you for the great tutorial. Its really helpful but i want to get rid of the grey activation border. How is that possible? Thank you!
November 5th, 2007 at 1:40 pm
Tim, I assume your talking about IE’s click to activate thing. This can be avoided by using JavaScript to embed the .swf file. A quick post explaining it can be found here from FindMotive.com.
Let me know if this isn’t what you need.
November 6th, 2007 at 5:03 am
Yeah Thanks! It works. I used hundreds of examples but all didn’t work in combination with your tutorial but this one did. Thank you man!
November 20th, 2007 at 4:04 pm
Thanks for the tutorial, very helpful, extremely well-written.
December 5th, 2007 at 7:18 am
Hi thank’s for such an interactive tutorial.
I have one doubt regarding call to action-script method using javascript (using ‘ExternalInterface’ api).
The example works fine usually. But some time it reports javascript error saying the method of ‘action-script’ which we are calling in javascript is not a function or property.
Kindly help me out of this problem.
Thank’s
December 5th, 2007 at 1:20 pm
Its really a nice tutorial, and very nicely explained too. Its really helpfull.
December 6th, 2007 at 9:40 am
Pankaj,
I am not sure why you would be getting this, I haven’t experienced that problem before. What brower/version are you using? Another option is to try the Flex-Ajax Bridge if you are using Flex 3. You can check this out over at Adobe Labs.
December 17th, 2007 at 1:38 am
Hi! What a simple but interactive app you have!
Thanks for sharing~!
Btw, are you able to do up a tutorial regarding on how to remove and edit the datas after adding? For example, using removeItemAt() method etc.
I really need help in this.
Thanks alot in advance!
December 20th, 2007 at 5:40 am
It’s a nice well described tutorial. Thanks………..
December 21st, 2007 at 4:10 pm
Thanks for a great tip. I am .Net user and I got it working on Mozila but not on IE. In .Net, we always have to include form tag if any form elements(i.e. textbox, dropdown, etc). Then that “getFlexApp” function becomes useless. I did notice that “window[appName]” is returning embed object. So I initialized embed object, but it’s not recognizing the Flex function. Has anyone encounter similar problem as mine? And anyone has resolved this issue?
January 9th, 2008 at 2:42 am
Hi Fattest,
thanks for you advice. I was using IE v 6.0. I figured out the problem.The javascript method to invoke action-script method had some problem. Now it’s working fine. Thank’s once again !
January 22nd, 2008 at 12:20 pm
Actually, my problem is this. I have a datagrid where there are 3 columns. I need to populate one column from the value that I enter into a text box and hit the Add Row button. The data for the other 2 columns can be dummy data. How do I achieve this in Flex. I am populating the other rows in the data grid through an array.
Thanks !
February 12th, 2008 at 9:24 am
A very helpful, interactive tutorial !!
Thanks
February 25th, 2008 at 8:19 pm
Thank you for your great article. When some amazing technology as Flex can interact with other like JS, then it can be more powerful even. I’m starting with Flex, but after read you article I’m thinking about ways to mix Flex with Ajax and some dynamic content with PHP by myself. Thank you again.
March 4th, 2008 at 8:43 am
Nice work…very helpful to the newbie! Thank you.
March 4th, 2008 at 6:14 pm
It is not working for me. I always get “undefined” in the javascript function.
Flex is sending a string but javascript is getting undefined object.
Please help!!
March 4th, 2008 at 6:29 pm
nevermind I found it. hehe. sorry for the bandwith waste.
March 11th, 2008 at 4:33 pm
Thank you! This was very helpful in getting the Flex documentation examples to work!
Once I added and used your “getFlexApp” function, I was able to get the sample working.
March 12th, 2008 at 4:09 pm
Thanks for providing some excellent information and maybe you can help me with an issue I’m having sending an array to flex from Javascript.
I’m basically using:
var flexApp = FABridge.fab.root();
flexApp.myActionScriptFromJavascript(someArrayComing);
Which is sent an array with the key & value as in your example, except that I write out the entire array via PHP returning values like so:
[{SHOWS: “some show”, GENDER: “Female”, etc…}] — but I receive an error in the JavaScript error console that has an arrow pointing directly after the first “:” character following the word SHOWS.
The strange thing is that if I copy & paste the data generated from the PHP file into the JavaScript function by replacing the word someArrayComing, then it loads the info into the datagrid with no errors and no issues.
So my question is why would data that I can copy and paste not work when being passed into a param?
Thanks in advance
March 26th, 2008 at 5:53 am
Hey! I’m into .NET and MS Technologies since a long…. Just started with Flex and found your tutorial very helpful in understanding the communications between JS and Flex…. Thanks and Keep it Up….
March 28th, 2008 at 11:03 pm
Nice tutorial. keep posting such stuff.
April 9th, 2008 at 12:24 pm
Great tutorial. Thanks for sharing.
I have a question:
How you pass the whole table data at once?
I am creating a Flex app that displays a ColumnChart, and the data comes via JavaScript, so I need to pass the whole array collection or an XML file to Flex.
Any suggestions?
Gilbert
April 10th, 2008 at 12:05 pm
Good example,easily understandable keep on posting any new examples with good logic.
April 28th, 2008 at 1:27 am
thx
May 1st, 2008 at 4:41 am
Thanks for the tutorial, I’m having great fun with it
I’ve been using Bruce’s method above for modifying the html wrapper by changing my index.template.html file. I’ve noticed that in certain circumstances flex builder will stop generating your wrapper file even though you have ‘Generate HTML wrapper file’ checked in properties. If this happens you need to uncheck it, apply the settings then go back into properties and switch it on again.
Its very odd but also frustrating and I hope this helps anybody with the same problem.
May 1st, 2008 at 6:13 am
Make sure to backup the html template if you do this though
May 3rd, 2008 at 4:18 am
amazing tut!
good job it was very helpful!
May 5th, 2008 at 5:17 pm
I am getting an
“1120: Access of undefined property ArrayCollection”
error here:
public function addPlayer( player_name:String,
jersey_: String,
age_:String):void
{
/*error on next line */
(RosterList.dataProvider as ArrayCollection).addItem(
{playerid: 0,
playername: player_name,
jersey: jersey_,
age: age_
}
);
}
Am trying to add extra fields that are not being passed
to the function. But if I take out the extra field,
playerid, I still get the error.
May 6th, 2008 at 9:08 am
This sounds like you don’t have the import statement in your code.
May 14th, 2008 at 3:50 am
The best example on array I proud of You , dear.
Jay Bharat……….
May 21st, 2008 at 11:19 pm
I’m using Flex IDE 3
I have an ActionScript Project.
I can call JS from AS but not the other way around. Does anybody know what could be the cause.
Thank you
June 5th, 2008 at 8:45 am
I have to need exactly this type of communication between flex and java Script,but i need
Select a few records on the grid and launch a browser popup window (using a URL method). The purpose is to pass the students that are selected from this Flex application to the browser window call.
June 9th, 2008 at 8:35 am
Nice tutorial. I am new to Flex and was wondering how to interact between Flex and JSP. Well done! (btw…works on FlexBuilder 3).
June 12th, 2008 at 9:04 am
This is excellent tutorial. Thanks for your knowledge sharing. Thanks to Bruce for step by step process to proceed with it.
June 12th, 2008 at 9:07 am
Question to The Fattest,
can you please give me any link for database connectivity using flex for J2EE server application
Thanks in advance.
June 13th, 2008 at 8:00 am
I am trying to figure out how to run my jsp files through a flex application. Can someone help me with this?
June 20th, 2008 at 6:22 am
its a really good tutorial.
June 22nd, 2008 at 3:37 am
great!
It is really helpful…
Thanks very much.
June 24th, 2008 at 7:20 pm
i found it so cool
June 26th, 2008 at 8:37 pm
Aaaaaaaaaaawesome!
June 30th, 2008 at 6:37 am
Thanks for sharing.
Now I got it.
August 1st, 2008 at 5:16 am
Executing the code given by you is raising the following error
SecurityError: Error #2060: Security sandbox violation: ExternalInterface caller
Can you help me with fixing this?
August 5th, 2008 at 7:18 am
Nice Job.
Simply Superb
August 11th, 2008 at 4:54 am
Good example!!But how can we do the same thing for the chart components in flex by passing the run time data in form of XML in html text box ??
August 11th, 2008 at 9:27 am
Hi,
nice tutorial. Everything is working great with my Firefox, but I can’t get the addPerson() function working with IE. I tried it with Flex 2 and Flex 3.
I tried calling the Flex function without getApp like John Chang suggested in comment 19, but then Firefox and IE aren’t able to use addPerson.
Does anyone have any suggestions?
August 15th, 2008 at 9:49 am
Hi, it’s me again. I did change the javascript like this.
function getFlexApp(appName) {
if (navigator.appName.indexOf (”Microsoft”) !=-1) {
if (BrowserVersion = IE7 or newer) {
return document[appName];
}
return window[appName];
} else {
return document[appName];
}