Using Macromedia Flex in a Portal Environment

Using Flex in a Portal Environment

Portals facilitate the aggregation of content in an integrated user interface. However, portlets are typically rendered in HTML and therefore inherit the limitations of HTML for building applications. You can use Flex to render the user interface of portlets, overcome the limitations of HTML, and greatly improve the user experience within a portal.

Example

Figure 1. A Websphere portal page featuring five Flex-based portlets

The portal page represented above features five Flex-based portlets (notice that, as described in the integration scenarios below, Flex-based portlets can also coexist with HTML-based portlets):

• Mutual Fund Selector Portlet: Provides an example of rich user interactions. In this portlet, a user can specify selection criteria using sliders and other controls. The portlet fades out mutual funds that don’t match the criteria automatically. Details about a mutual fund appear as the user places his pointer over the symbol.
• Real-Time Market Data Portlet: Provides an example of a portlet that has a connection to a real-time market data feed. The lines of the chart automatically adjust to reflect new data received from the data feed.
• Portfolio Portlet: Another example of a portlet featuring rich user interface components: the DataGrid (fully sortable and editable if required), the Accordion navigation container, and so forth. When a user maximizes this portlet, she can get stock quotes and drag them into a watch list.
• Video Portlet: The MediaPlayback component allows you to stream video in a completely integrated manner within your portal. No third-party player required.
• Chat Portlet: This is another example of data pushed from the server to the client.

Benefits

The benefits of using Flex in a portal environment include:

• Improved user experience
  • Flex can deliver portlets with a desktop-like user experience
  • Flex can use rich user interface components: DataGrid, Tree, TabNavigator, Accordion, Charting components, sliders, etc.
  • Flex uses rich user interface metaphors: drag-and-drop, expansion in place, etc.
• No page refreshes
  

  Note: Refreshing a portal page is disorienting from the user point of view, and is also an expensive operation in terms of resources and bandwidth. Unlike traditional HTML-based portlets, Flex-based portlets can communicate with back-end systems without page refreshes.

• Smart client-side data manipulation
  • Once downloaded from the server, data can be manipulated at the client side. For example, a list of items retrieved from the client can be sorted or filtered on the client-side. This leads to a more responsive user interface and reduced network traffic.
  • Data can also be pushed from the server to the client using the XMLSocket API or the Flash Communication Server.
  • If appropriate in the context of a specific application, data can also be saved at the client side.
• Reduced network traffic
  

  Because of the ability to communicate with back-end systems without page refreshes, and the ability to manipulate data at the client-side, Flex-based portlets can also dramatically reduce the overall network traffic.

Page 3 of 6

Previous Page

Next Page