Flex-Ajax bridge the primer for flex-javascript communication

Flex-Ajax-Bridge


Often a common issue i face redundantly in setting up a actionscript – Javascript  communication is – actionscript function call back. ie:  calling actionscript function from JavaScript.  sometimes its a real pain to get it to work in all browser pretty much error free.The Flex-Ajax Bridge targeting flex development environment, from Adobe seems to provide all that plus lot more than you can expect. The flex-ajax bridge is packed as a pair of as/js files  (FABridge.js,FABridge.as). The setup is cake, and provides you with seamless direct access to flex elements and their properties, and lets you work on them as if you were working in action script itself.

You can check out the docs here for technical infos. However we are going to do more than just read text here. :). We are going to take a walk through on a practical implementation, and study some of the details of facilities provided by the flex-ajax bridge.

Click to launch application

Setting up the Flex application


In Flex Builder, create a new Flex Application, called “FlexAjaxBridgeDemo” (you can name anything you want though).  Our interface will contain simple layout of a few controls, and probably a function to test callback.

Here is our MXML Application code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#2499CA, #0E6F98]" xmlns:ns1="bridge.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;


public function greet(msg:String):void
{
Alert.show(msg);
}
]]>
</mx:Script>
<mx:TextInput x="174.5" y="147" width="190" id="txtInput"/>
<mx:Label x="35.5" y="149" text="Puppet Text Input" fontWeight="bold" fontSize="11" color="#E5EB45"/>
<mx:Label x="35.5" y="64" text="Puppet Text Area" fontWeight="bold" fontSize="11" color="#E5EB45"/>
<mx:Label x="35.5" y="194" text="Puppet Button" fontWeight="bold" fontSize="11" color="#E5EB45"/>
<mx:CheckBox x="174.5" y="237" label="Check Me" width="190" id="cbxCheckMe" color="#FFFFFF"/>
<mx:Label x="35.5" y="239" text="Puppet CheckBox" fontWeight="bold" fontSize="11" color="#E5EB45"/>
<mx:TextArea x="174" y="63" width="190.5" height="57" id="txtArea"/>
<mx:Label x="110" y="0" text="Puppet Flex Application" color="#FFFFFF" fontWeight="bold" fontSize="14" fontFamily="Georgia"/>
<mx:RadioButton x="174" y="193" label="Me" color="#FFFFFF" selected="true" groupName="options" id="radio"/>
<mx:RadioButton x="260" y="193" label="Or Me" color="#FFFFFF" groupName="options" id="radio2"/>
</mx:Application>

Thats it for our flex side work. Now in flex builder right click on the project and click select “Create Ajax Bridge“.

createAjaxBridge

At this stage Flex Builder will auto generate the FABridge.js, FABridge.as, FlexAjaxBridgeDemo.js

(as per our application’s name). The FlexAjaxBridgeDemo.js file is the ready to use implementation of  the bridge and contains references to all flex objects that your application had.  We wont be using this file directly here. But rather we will use it to get our self a head start , rather than a starting from scratch.
Also at this stage you can see that flex builder adds

<ns1:FABridge/>

to the mxml code.

Now We create a HTML file to hold our flex swf and the JavaScript codes we will be using.

The swf embed code:


<object id="FlexAjaxBridgeDemoTest" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="flashvars" value="bridgeName=b_FlexAjaxBridgeDemo" />
<param name="quality" value="high" /><param name="allowScriptAccess" value="sameDomain" />
<param name="src" value="FlexAjaxBridgeDemo.swf" />
<param name="name" value="FlexAjaxBridgeDemoTest" />
<param name="align" value="middle" />
<embed id="FlexAjaxBridgeDemoTest"
type="application/x-shockwave-flash"
width="400" height="300" src="FlexAjaxBridgeDemo.swf"
align="middle" name="FlexAjaxBridgeDemoTest"
allowscriptaccess="sameDomain" quality="high" flashvars="bridgeName=b_FlexAjaxBridgeDemo"></embed></object>

If you notice in the code above flashvars=”bridgeName=b_FlexAjaxBridgeDemo”, b_FlexAjaxBridgeDemo is the unique identifier to help JavaScript talk to flex.
Next we build our HTML form which will be the controller to flex application.


<table width="430" border="0">
<tr>
<td width="177">Controller TextInput</td>
<td width="213"><label>
<input name="txtInput" type="text" id="txtInput" size="40" onkeypress="setTextInput()"/>
</label></td>
</tr>
<tr>
<td>Controller Radio</td>
<td><label>
<input name="radio" type="radio" id="radio" value="radio" checked="checked" onclick="setRadio(this.value)" />
Me        
<input type="radio" name="radio" id="radio2" value="radio2" onclick="setRadio(this.value)" />
Or Me</label></td>
</tr>
<tr>
<td>Controller CheckBox</td>
<td><label>
<input type="checkbox" name="cbxConfirm" id="cbxConfirm" onclick="toggleCheck()" />
</label></td>
</tr>
<tr>
<td>Controller TextArea</td>
<td><label>
<textarea name="txtArea" id="txtArea" cols="40" rows="5" onkeypress="setTextArea()"></textarea>
</label></td>
</tr>
</table>

And finally the most important part of this exercise: – The JavaScript setup to work it all out.


The head of your html file will contain a reference to the FABridge,js inthe head tags:

<script type="text/javascript" src="lib/FABridge.js"></script>

As you can see the FABridge.js is inside a lib folder, where your html lies.you can have a different path if you want. Lastly the main JavaScript code:


<script type="text/javascript">
function FlexAjaxBridgeDemoReady() {
b_FlexAjaxBridgeDemo_root = FABridge["b_FlexAjaxBridgeDemo"].root();
return;
}

function setTextInput()
{
b_FlexAjaxBridgeDemo_root.getTxtInput().setText(document.getElementById("txtInput").value);
}

function setRadio(id)
{

switch(id)
{
case 'radio':
b_FlexAjaxBridgeDemo_root.getRadio().setSelected(true);
break;

case 'radio2':
b_FlexAjaxBridgeDemo_root.getRadio2().setSelected(true);
break;
}
}

function toggleCheck()
{
b_FlexAjaxBridgeDemo_root.getCbxCheckMe().setSelected(document.getElementById("cbxConfirm").checked);
}

function setTextArea()
{
b_FlexAjaxBridgeDemo_root.getTxtArea().setText(document.getElementById("txtArea").value);
}

FABridge.addInitializationCallback("b_FlexAjaxBridgeDemo", FlexAjaxBridgeDemoReady);
</script>

Explanation:


When your html page starts, it attaches a listener to the bridge for “ready” notification. Only after the bridge is ready, you can use it. This is done like this:

FABridge.addInitializationCallback("b_FlexAjaxBridgeDemo", FlexAjaxBridgeDemoReady);

so when the bridge is ready it calls the FlexAjaxBridgeDemoReady function. This is where all the initialization code goes normally. Like here we will get hold of our flex object.

function FlexAjaxBridgeDemoReady() {
b_FlexAjaxBridgeDemo_root = FABridge["b_FlexAjaxBridgeDemo"].root();
return;
}

Now lets suppose that some one types something into out html input box. Here we will call a function setTextInput(), which will be responsible to relay the text typed to flex TextInput Control. On onkeypress() event of the textInput control in html , it calls the setTextInput(). In setTextInput(), we take the value from the textbox and set it into flex TextInput Control.

function setTextInput()
    {
        b_FlexAjaxBridgeDemo_root.getTxtInput().setText(document.getElementById("txtInput").value);
    }

If you are wondering how did i know about the getTxtInput() and setText() functions ??, you can take a look at the file we hhad from flex when we first created the bridge – FlexAjaxBridgeDemo.js
It will contain reference to all functions that you will need to get/set data inside your flex application.

The setText() is a property of the object returned by getTxtInput() , which you can understand by looping over the returned object like this:

for(var prop in b_FlexAjaxBridgeDemo_root.getTxtInput() )
{
  //print out to textbox / console/ alert  the value of  prop
}

very similarly to call a function, it needs to be public by scope. Then if you go to FlexAjaxBridgeDemo.js you will find reference to it, and you can call like this:

b_FlexAjaxBridgeDemo_root.greet(argString);

Get the full source code to this exercise: Here

No Comments - Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*