Liferay and Flex Ajax Bridge (FABridge)

I am using Liferay to create highly interactive and componentized web applications and solutions for the healthcare industry. Adobe Flex is one of the technology I am using the create portlets for Liferay. One challenge is the communication between portlets and between the core layer of the portlet that access services and wrapping GUI layer (JSP/HTML and Javascript).

Adobe Flex 3.0 SDK now contains the Flex Ajax Bridge (FABridge) developed by Adobe Labs.
Flex Ajax Bridge is a small library that can be help you expose an flex application (Action Script graph) to scripting by Javascript.

To show how FABridge works in Liferay. I have created very simple Flex application that show a button. I then modify the label of the button at runtime via javascript.

The code for the Flex application is very simple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:fab="bridge.*">
 
 <fab:FABridge bridgeName="flash" id="flash" /> 
    
 <mx:Button id="button" label="Original Button" width="150"/>
 
</mx:Application>

The Flex application needs to refer to the action script part of the FABridge library (FABridge.as).

Likewise, your Javascript will need to refer to the Javascript part of the library (FABridge.js).


















The build.bat file is a simple command (mxmlc main.mxml -output main.swf) for building the SWF file. But you can also use Flex Builder for this.

Here is how the resulting SWF file looks like inside a very simple Liferay portlet:









The code for the wrapping portlet is contains inside the view.jsp file. I am using SWFObject 2.0 to integrate the SWF file.

I am also using JQuery (I have added manually JQuery 1.2.6 lib - but I assume that I could leverage JQuery that comes with Liferay) to highlight the SWF container in green if the bridge succeeds at changing the content of the button:








If there is an expection, which is the case when the portlet is added in Liferay in Internet Explorer (IE 7.0) - refreshing the page works however! ). Then the container is highlighted in red:








Here is the whole code of the JSP file:

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>

<portlet:defineObjects />
<script type="text/javascript" src="<%= request.getContextPath() %>/js/swfobject.js"> 
  swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script type="text/javascript" src="<%= request.getContextPath() %>/js/FABridge.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.2.6.js"></script>

<script type="text/javascript">

   accessFlex();
   
   function accessFlex()  {
       
        var initCallback = function() {
            try {
                    var root = FABridge.flash.root();
                    root.getButton().setLabel("Modified by FABridge");                       
                    $("#swf_div").css("border","3px solid green");    
            }
            catch(err) {
                $("#swf_div").css("border","3px solid red");
            }  
        }
        
        FABridge.addInitializationCallback("flash",initCallback);
    }
    
</script>


<div id="swf_div"> 
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="70">
  <param name="movie" value="<%= request.getContextPath() %>/flex/main.swf" />
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="<%= request.getContextPath() %>/flex/main.swf" width="350" height="70">
  <!--<![endif]-->
    <p>Alternative content</p>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
</div>