Section 15.6. Portlet

15.6. Portlet

Block, Conversation, Dialogue, Gadget, Independent, Parallel, Portal, Portlet, Widget

Figure 15-15. Portlet

15.6.1. Goal Story

The sidebar of Tracy's stock trading system contains a few independent blocks down the side: a currency Portlet, a calculator, and a miniature chart generator. Right now, she is checking on the USD/EUR exchange rate in one of those blocks. She types "USDEUR" into the text field, and the block updates a moment later to show the rate. Everything else on the page remains the same.

15.6.2. Problem

How can the user conduct rich conversations in parallel?

15.6.3. Forces

• A complex application contains a range of loosely related functionality. The user often needs to work on these things in parallel, gathering knowledge about one thing and using it to influence another.

• It isn't just different functionality, but different data that users need to work with in parallel.

• These conversations need to be "rich." They require conversational state to keep track of what's occurred so far and what can happen next, and they require interaction with the server.

• It's important to retain the state of each conversation between the user and the application. You don't want to invalidate one activity just because the user chose to initiate another.

15.6.4. Solution

Introduce Portletsisolated blocks of content with independent conversational state. A Portlet is like a mini-application inside a regular application. It presents a little bit of information and usually some controls. The user can communicate via the controls, which causes the Portlet to update.

Usually, the Portlet state is completely independent of the rest of the application. For example, a travel web site can include a weather Portlet. Users are able to search for locations and drill down from a result to an extended forecast. The conversation can be as rich and stateful as the display allows. However, the conversation has no effect on the rest of the application. If the main site is in the middle of a booking transaction, it will stay that way while users spend a few minutes checking the weather. Browser/server communication will take place, but it won't affect the conversational state of the booking transaction, nor will it affect the state of any other Portlets.

In some cases though, actions on the Portlet can affect the general application state, and vice versa. A search Portlet can allow a user to locate content in the application. While locating the content, the user conducts a rich conversation alone with the Portlet, but once located, the user can click on the search result to open it up in the main content area.

If you aggregate Portlets together on the same page, you will end up with a Portals. A news Portal for example, contains a Portlet for each news category. But Portlets need not reside in Portals. A single Portlet can also be embedded in a regular web app (Figure 15-16), as the preceding example illustrates.

Figure 15-16. Portals and embedded Portlets

Portlets have been around for a long time, and Portals were once touted as the next big thing after search engines. However, they've never really taken off, and the interface is part of the problem. Chapter 1 explains in detail the problems with traditional portals and how much they gain from Ajax. The various Ajax Patterns help in different ways:

• XMLHttpRequest Calls alleviate the need to reload the entire page on each interaction. The response is minimal, and the state of everything else is effortlessly retaineda truly parallel conversation.

• Display Morphing lets you change the portal's appearance in response to user events and server responses.

• Periodic Refresh allows you to auto-update Portlets based on external changes and activity from other users.

• Drag-And-Drop lets you pick up Portlets and drag them around, a great improvement over the contrived page rearrangement interfaces used in the past.

An interesting variant is the "Cross-Domain Portlet," a mixture of Cross-Domain Proxy and Portlet. The idea is to let the user have a complete conversation with an external web site. Consider how this might impact Tim O'Reilly's proposal of "Advertising as Conversation" (http://radar.oreilly.com/archives/2005/05/advertising_as.html), where he suggested that web ads can work more as interactive conversations between user and advertiser rather than simply being mindless branding imagery. A Portlet can be used to mediate a complete conversation between advertiser and user. The preceding weather Portlet example could actually come from an external service provider. The travel site could even contain a booking Portlet. While viewing online discussions about a destination, a user can conduct a parallel conversation with an airline company to check flight availability.

15.6.5. Decisions

15.6.5.1. Will users be able to move Portlets around?

Drag-And-Drop provides a nice way to rearrange Portlets on the page, but do you really want to? Generally, Portal-style applications support this activity, but for regular applications with one or two Portlets, you need to decide if it's worthwhile. Often, you can support some constrained movementfor example, let the user move Portlets up and down a side column.

15.6.6. Real-World Examples

15.6.6.1. Claude Hussenet's Portal

Claude Hussenet's portal is a demo informational portal (http://claudehussenet.com). Information from different news sources, as well as customizable stock quotes and quick links (bookmarks), are available in independent Portals. Each can be refreshed independently, and all editing occurs in the Portlet and without reloading the entire page. A checkbox lets you show and hide each Portlet individually.

15.6.6.2. Google Homepage

Google Homepage (http://www.google.com/ig) is a portal with three columns of Portlets. Registered users can click on "Add content" to keep adding Portlets. Most of the Portlets, like news, RSS feeds, and Word of the Day, contain recent updates. There are also some more interactive Portlets: Search shows personal search history, Bookmarks lets you accumulate bookmarks in a Portlet, Gmail summarizes recent mail messages. All Portals' existing Portlets can be dragged around the page and edited. Editing morphs the Portal into a form. At present, unfortunately, the form is submitted as a regular form, causing a page refresh.

15.6.6.3. Backbase

The Backbase Portal Demo (http://projects.backbase.com/RUI/portal.html) contains several independent Portlets, each with its own state (Figure 15-17). This is only a demo, but it's a good demonstration of the independent nature of Portlets.

Figure 15-17. Backbase

15.6.6.4. Dobrado

Dobrado (http://dobrado.sourceforge.net), an open source project, is different from the preceding information portals in a couple of ways. First, the Portlets are free-flowingthey can be dragged anywhere on the page as opposed being restricted to the more common style of docking a Portlet into one of three columns. Second, Dobrado is not actually an information Portal per se, but rather a web site authoring application; for novices, it's easy to create a page by conjuring new Portlets, arranging them on the page, and typing in some content.

15.6.7. Code Example: Claude Hussenet's Portal

Claude Hussenet's portal (http://claudehussenet.com/) delegates server calls to the Direct Web Remoting (DWR) framework (http://www.getahead.ltd.uk/dwr/). Let's focus on the "Quick Links" Portlet, which allows you to maintain a collection of bookmarks. (Some of the following code here has been reformatted.)

The initial HTML represents Quick Links as a table. There's a span for the links and another span for input:

   <TABLE border="0" cellPadding="0" border="0" cellSpacing=0 width="100%" >     <tr><td height="2" colspan="2" bgcolor=#FF6633><img height= "1" src="/books/2/755/1/html/2//images/pixel.gif"></td></tr>     <TR>       <TD  valign="top" nowrap><B>Quick Links</B></TD>       <TD width=1% align=right> <input type="checkbox" id='buttonMinimizedPortletQuickLinks'       value="Min" onclick="refreshPortletQuickLinks       (document.getElementById('portletQuickLinks'));"></TD>     </TR>     <TR>       <TD>         <span  ><B>Loading Content</B></span>       </TD>     </TR>     <TR>     <TD>         <span  ></span>     </TD>     </TR>   </TABLE> 

A call is made on startup to get content from an HTML Message on the server. This delegates to a DWR function, and the server call finally morphs the links:

   QUICKLinks.getContent(writePortletPortletQuickLinks,     {timeout:3500,       errorHandler:'sayHello2('+"'portletQuickLinks'"+')'});   ...   function QUICKLinks( ) { }     QUICKLinks.getContent = function(callback) {         DWREngine._execute('/portal/dwr', 'QUICKLinks', 'getContent', callback);     }     ...   function writePortletPortletQuickLinks(data) {     if (data!=null)document.getElementById("portletQuickLinks").innerHTML = data;   } 

The input for new links has a Submit button, and when the user submits, a JavaScript function is invoked. It causes the new link details to be posted to the server. Because the server is keeping track of the session, it is able to send the HTML back for all links. The callback function is the same as before:

 function addQuickLinksPortletQuickLinks(elem) {   var name = document.getElementById("linkname").value;   var link =document.getElementById("url").value;   ...   QUICKLinks.addLink(writePortletPortletQuickLinks,name,link); } 

15.6.8. Alternatives

15.6.8.1. Tabbed Browsing

Tabbed browsing is a workaround users resort to in order to conduct multiple conversations with the same web site.

15.6.9. Related Patterns

15.6.9.1. Periodic Refresh

Portlets often use Periodic Refresh (Chapter 10) to stay up to date.

15.6.9.2. Distributed Events

Using Distributed Events (Chapter 10) is a good way to keep the Portlet updated. This is particularly important when one Portlet is dependent on another: instead of tying them directly, use events to add a layer of indirection.

15.6.9.3. Drilldown

A dynamic Drilldown (Chapter 14) is an effective way to conserve space within a Portlet.

15.6.9.4. Live Form

Live Forms (Chapter 14) appear in many Portlets because they are a good way to conduct a rich conversation with the server in a manner that avoids any page refresh.

15.6.9.5. Cross-Domain Proxy

Portlest can be used to show a conversation to the user and to an external domain.

15.6.10. Metaphor

A portal full of Portlets is like having a 21st century dashboard as depicted in a 20th century sci-fi moviea conversation with the president on one screen, a little navigation through the stars on another screen, and a looping fast-food ad in the middle.

15.6.11. Acknowledgments

Tony Hill of Thomson Consulting gave me the idea for the pattern diagram.