WebSphere portlet to Flex plug-in communication

Plug-in technologies are one way to enhance WebSphere Portal applications with functionality that is normally available via JavaScript libraries.

Plug-in technologies are an easy way to enhance any WebSphere Portal environment. Often coined as mini-apps, plug-ins provide a way to add a significant amount of performance and functionality to a Portal solution that would normally not be made available via traditional JavaScript libraries. The most popular plug-in technology is Flex and has deep market penetration via the popular Flash player plug-in.

Plug-in technologies level the playing field for the performance of your Portal application when you are forced to support the lowest common denominator browser (often with a poor performing JavaScript engine). Plug-in components run client side in their own VM (virtual machine) and hence are free of the frailties of the rendering browser.

Integrating Flex and WebSphere Portal

A concern for developers is the integration of plug-in components within the Portal framework. There is a significant amount of contextual information that would benefit a plug-in component, such as user’s profile information, actions taken within other portlets, etc. A plug-in component is not directly privy to the information that is natively available within a Portlet.

But fear not, a plug-in component does not need to be in complete isolation! There are two ways to facilitate external communication:

  1. FlashVar parameters
  2. The Ajax JavaScript bridge

FlashVar Parameters

FlashVar parameters can be passed to a plug-in component at component initialization. These are useful for passing configuration information to your component or pieces of data that are pertinent to its environment.

Here is an example in HTML:

<object id='myFlashVarExample' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'

codebase='http://fpdownload.macromedia.com/get/ flashplayer/current/swflash.cab'



        <param name='src' value='FlexMiniApp.swf'/>

        <param name='flashVars' value='userID=myUserAccount&userRoles=admin'/>

        <embed name='mySwf' src='FlexMiniApp.swf' pluginspage='https://www.adobe.com/go/getflashplayer'

height='100%' width='100%' flashVars='userID=myUserAccount&userRoles=admin'/>


It is then very easy to use these properties on the other end. Here is an example on how to create bindable properties for these FlashVars. In the example below, invoke the initVars() method on initialization:


     // Declare bindable properties for the application


     public var userID:String;



     public var roles:String;


     // Assign values to new properties.

     private function initVars():void {

        userID = Application.application.parameters.userID;

        roles = Application.application.parameters.userRoles;



[Author’s note: One thing to keep in mind is that the values of the FlashVars properties must be URL encoded. Property name-value pairs are separated by an ampersand (&). You can escape special characters with a % followed by the 2-digit hexadecimal equivalent i.e. a userID of “bob smith” and a userRoles of “admin&member” would be encoded as: FlashVars='userID=bob+smtih&userRoles=admin%26member' ]

JavaScript Bridge

FlashVar Parameters are limited. To truly integrate a Flex plugin component you will need to leverage the Ajax JavaScript bridge provided. The following example will demonstrate how Flex can make calls out the surrounding container and how that container can then make calls to the Flex component.

Flex has access to the flash external libraries which is what will provide access to the JavaScript Bridge.

Suppose that you have a JavaScript method in the containing portlet as follows:


function updateMyContext(contextInfo){


       alert("Please set the context information");


       document.getElementById('userID').innerHTML = contextInfor.UserID;

       document.getElementById('userRole').innerHTML = contxtInfo.UserRole;

       document.getElementById('applicationData').innerHTML = contextInfo.ApplicationData;




This method will update some contextual information about the user account including some application specific data (applicationData) that might have some special meaning.

Now to access this method from the Flex component, simply invoke an ExternalInterface call passing in the name of the method as well as any objects as parameters.


   import mx.collections.ArrayCollection;

   import flash.external.*;


   var contextInfo:UserContextInformation;


   public function jsMyContextHasChanged():void


     if (ExternalInterface.available)


       ExternalInterface.call("updateMyContext", contextInfo);

       Messagbox.Show("Data Sent!");




     Messagbox.Show("Error sending data!");      





The first part provides communication from the Flex component to the outside world, but this is only half the story.  The next step is to allow the outside world to be able to reach into the Flex component.

Exposing a Method

To provide access to a Flex component from the outside world, create a method to expose externally. In the following example, create a method displayData() followed by a call back that will be exposed with the same name.  Once this is complete, the new method displayData() can then be invoked by any external component.



   import mx.collections.ArrayCollection;

   import flash.external.*;



    var dataSource:XMLListCollection;


    public function initApp():void


        if (ExternalInterface.available)

            ExternalInterface.addCallback("displayData", displayData);     




    public function displayData(dataSetName:String, data:XML):void









Callback Methods

The next step is to invoke the call back method displayData() from an external source via JavaScript.  From the previous example the HTML reference for the Flex plug-in is "myFlashVarExample". Use this to reference to the Flex plugin object to invoke the exposed method just like any other JavaScript function. Note in the example below, two JavaScript objects are being passed to the Flex-plugin (one is XML and the other is a string).

function sendData()


  var title = MyDataSet;


  //method to retrieve some XML data from some data

  //source like a webservice

  var xmlData = getXMLDataSet("MyDataSet"); 




It is very easy to provide communication between a WebSphere portlet and a Flex plug-in component. It just requires some forethought to properly plan out the methods that need to be exposed or provided access to.

With this in hand, any developer should be able to add that Flash wow factor to any Portal application without sacrificing the benefits of all the contextual information that is provided from the Portal framework.

Dig Deeper on Web portal design

Start the conversation

Send me notifications when other members comment.

Please create a username to comment.