Saturday, February 28, 2009

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"?>

<fab:FABridge bridgeName="flash" id="flash" />

<mx:Button id="button" label="Original Button" width="150"/>


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

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="" prefix="portlet" %>

<portlet:defineObjects />
<script type="text/javascript" src="<%= request.getContextPath() %>/js/swfobject.js">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
<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">


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");



<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">
<p>Alternative content</p>
<!--[if !IE]>-->