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

11 comments:

Anonymous said...

Hi,
We are looking for a good web2.0 solutions for healtcare industry. Liferay could be a candidate. Have you developed something with LR for this industry ? Can you share us with some ideas ?

fandry said...

I will post more articles on Portal technology for the healthcare industry in the coming weeks.

Anoumou said...

Hi Fandry,

Could you post the downlodable zip file for the application? I've tried everything you siad in the tutorial but my button is not showing in liferay. Instead, it is showing alternative content. Any ideas?

fandry said...

Dear Anoumou,

Are you sure you have included the swfobject library correctly?

Try to include and display a very simple SWF file using /js/swfobject.js independently of the code related to FABRidge.

Then include the code fragments I have described in my blog.

Regards,

-Francois

fandry said...

Again you can look at

http://code.google.com/p/swfobject/

for more info on swfobject library.

-Francois

Sivan Hermon said...

Hi Francois,
I've been reading some of your posts, regarding Flex with BlazeDS and this one (LifeRay & Flex).
I appreciate the knowledge sharing - thanks!

I'm writing a dashboard application, using LifeRay with several portlets that consist of a JSP page as Flex container.
Generally speaking, it's working perfectly fine (I'm using ExternalInterface to communicate between JS and the Flex), but I have a strange issue:
I can see the flex file just fine when using FireFox, but when I'm using IE I can't see the flash when the portlet is in NORMAL mode. I know the movie is loaded, but it just does not show.
When I maximize the portlet - I see the movie.

I tried using SWFObject - but it did not help.
I posted a question in the LifeRay dev forum, got 1 response saying I should use the web content display portlet - but this path also failed due to a bug in web content display portlet.

I feel the solution is really simple, yet I cannot find it.
Any ideas?

narveen said...

Thanks for this wonderful thing. i want to create a liferay portlet with flex can u give me a sample project here is my mail id : praveenmj@gmail.com

fandry said...

Hi Sivan,

Have you looked at the wmode tag?

I have posted an article related to that on this blog.

-Francois

Sivan Hermon said...

Hi Francois,
I'm not sure how wmode is related to my specific problem.
I did have an issue with the LifeRay menus being hidden by the flash movie, and since then I'm using wmode=transparent.

My current problem is that I don't see the flash movie in portlet NORMAL mode only on IE.
Please see my screen shots here:
http://www.liferay.com/web/guest/community/forums/-/message_boards/message/3937982#_19_message_3867592

If I missed some wmode feature that is related to my issue - please let me know.

Regards,
Sivan

Sivan Hermon said...

Francois and all,

I found my issue!
I used width="100%" height="100%" in my embed and object tags. It worked fine in FireFox, but didn't show up on IE.
I removed it and now I can see my flash movie on both.

Sivan

Hugo said...

Hi Fandry...

It works like a charm ;) nice post...

The js could be improved to something like this since jQuery is available...
$('id') doesn't work for my on liferay...you must explicit use jQuery('id')...


jQuery(document).ready(function(){

var initAccessFlexCallback = function() {
try {
var root = FABridge.flash.root();
root.getButton().setLabel("Modified by FABridge - Hugo");
jQuery("#swf_div").css("border","3px solid green");
}
catch(err) {
jQuery("#swf_div").css("border","3px solid red");
}
}

FABridge.addInitializationCallback("flash", initAccessFlexCallback);
});