Javascript and Flex Communication

11 04 2008

A couple days a go I was writing a quick flex app at work and it became necessary for me to be able communicate between javascript and flex, that is, making javascript calls from flex and making flex calls from javascript. After a bit of research, I found that it is a pretty easy thing to do. To make it easier to see what is going on I’m splitting this up into two separate examples.

Making javascript calls from flex:

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="86" layout="absolute"  >
    <mx:Script>
    	<![CDATA[
        	import flash.external.*;
 
    		function buttonClicked():void {
    			ExternalInterface.call("alert", userInputField.text);
    		}
		]]>
    </mx:Script>
 
	<mx:TextInput id="userInputField" x="20" y="28"  width="191"/>
	<mx:Button label="JS Alert" click="buttonClicked()"  x="219" y="28"/>
</mx:Application>

Get FlashPlayer

The above example makes a simple call to the javascript function “alert” and passes the text in the text field as an argument to the alert function. To pass more than one argument simply just add them as additional arguments to the ExternalInterface.call() method. Example: ExternalInterface.call(”myJsFunction”, “arg1″, “arg2″);

Making flex calls from javascript:

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="86" layout="absolute" creationComplete="init()" >
    <mx:Script>
    	<![CDATA[
        	import flash.external.*;
 
    		function init():void {
    			ExternalInterface.addCallback("setTextField", setTextField);
    		}
 
    		function setTextField(userInput:String):void {
    			userInputField.text = userInput;
    		}
		]]>
    </mx:Script>
 
	<mx:TextInput id="userInputField" x="20" y="28"  width="191"/>
</mx:Application>
var flexApp;
 
if (navigator.userAgent.indexOf("MSIE") != -1) {
	flexApp = window[flexElementObjectId];
} else {
	flexApp = document[flexElementObjectId];
}
 
flexApp.setTextField("Hello World");

This example invokes a flex function from javascript. As you may have noticed this is relatively simple, all you need to do is add a an external callback within flex and make a call to the DOM object from Javascript.

Comments : 1 Comment »
Categories : Flex, Javascript

Upload XML into Flex

10 01 2008

Today I was asked to add some functionality to a flex application I have been developing, that functionality was to give users the option to upload the XML data file, rather than fetch it from the server. I won’t go in to the details of the application, just that it is completely driven on its data, which is provided via XML. After doing some reading I was surprised to learn that it is not possible to upload an XML file without a server side script of some kind. I choose to use PHP because its quick, easy, and simple. So the concept is that the user sends the file through flex to a server side script, that script accepts the file and returns its contents back to flex as XML.

Here is the flex code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" width="275" height="354" 
  creationComplete="init()">
<mx:Script>
<![CDATA[
  import mx.rpc.events.*;
  import flash.events.*;
  import flash.net.FileReference;
  import flash.net.URLRequest;
  import flash.net.FileFilter;
 
  private var myXML:XML;
  private var file:FileReference;
 
  private function init():void {
    file = new FileReference();
 
    // Add Event Listners
    file.addEventListener(Event.SELECT, userSelectedFile);
    file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, serverResponse);
  }
 
  private function browse():void {
    file.browse([new FileFilter("XML", "*.XML;")]);
  }
 
  // Called after the user selects the file to upload
  private function userSelectedFile(event:Event):void {
    file = FileReference(event.target);
    file.upload(new URLRequest("file_upload.php"), "FileData", false);
  }
 
  // Called after flex receives response from PHP
  private function serverResponse(event:DataEvent):void {
    myXML = XML( event.data );
    XML_Box.data = myXML;
  }
]]>
</mx:Script>
<mx:VBox>
</mx:VBox>
  <mx:Button id="Upload" label="Upload" click="browse()" x="200" y="322"/>
  <mx:TextArea id="XML_Box" width="250" height="300" x="12.5" y="10"/>
</mx:Application>

Here is the php code:

<?php
// Set the header information
header ("content-type: text/xml");
 
// Open the uploaded file
$file_handler = fopen($_FILES["FileData"]["tmp_name"], "r");
 
// Display the file contents
while(!feof($file_handler))
{
        echo fgets($file_handler);
}
 
// Close the file
fclose($file_handler);
?>

That’s all there is to it! To try it out just click the upload button and select an XML file to upload. If you don’t have an XML file handy you can use this sample file.
Get FlashPlayer

Comments : 1 Comment »
Categories : Flex, PHP, Programming