WebSphere portlet to Flex plug-in communication

Web portal design

WebSphere portlet to Flex plug-in communication

By Matt Dalrymple

TheServerSide.com

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'

height='100%'

width='100%'>

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

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

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

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

</object>

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:

<mx:Script><![CDATA[

     // Declare bindable properties for the application

     [Bindable]

     public var userID:String;

 

     [Bindable]

     public var roles:String;

    

     // Assign values to new properties.

     private function initVars():void {

        userID = Application.application.parameters.userID;

        roles = Application.application.parameters.userRoles;

     }

  ]]></mx:Script>

[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:

<script>

function updateMyContext(contextInfo){

   if(contextInfo==null){

       alert("Please set the context information");

   }else{

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

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

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

   }

}

</script>

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.

<![CDATA[

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

     }

     else

     {

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

     }

   }

]]>

</mx:Script>

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.

<mx:Script>

 <![CDATA[

   import mx.collections.ArrayCollection;

   import flash.external.*;

 

    [Bindable]

    var dataSource:XMLListCollection;

 

    public function initApp():void

    {

        if (ExternalInterface.available)

            ExternalInterface.addCallback("displayData", displayData);     

        }

    }

 

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

    {

       _lbTitle.Text=dataSetName;

       dataSource=data.Items;

       dgMyData.dataProvider=dataSource;

    }

 

   ]]>

</mx:Script>

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

  document[myFlashVarExample].displayData(title,xmlData);

}

Summary

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.

20 Jun 2011

Related Content

Related Resources

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.