AjaxPatterns
Block, Conversation, Dialogue, Gadget, Independent, Parallel, Portal, Portlet, Widget
The sidebar of Tracy's stock trading system contains a few independent blocks down the side: a currency Portlet, a calculator, a miniature chart generator. Right now, she is checking on the USD/EUR exchange rate in one of those blocks. She's typed in"USDEUR" into the text field, and the block updates a moment later to show the rate. Everything else on the page continues as normal.
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's not 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 with the application - you don't want to invalidate one activity just because the user chose to initiate another.
Introduce "Portlets" - isolated 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 website 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 was 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.
Aggregate Portlets together on the same page and you end up with a Portal. 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 apps (Figure 1.75, “Portals and Embedded Portlets”), as the examples above illustrate.
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 Call”s alleviate the need to reload the entire page on each interaction. The response is minimal, and the state of everything else is effortlessly retained - a truly parallel conversation.
“Display Morphing” lets you change the portal's appearance in response to user events and server responses.
“Periodic Refresh” allows for auto-updating 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” with Portlet. The idea is to let the user have a complete conversation with an external website. Consider how this might impact on Tim O'Reilly's proposal of "Advertising as Conversation", where he suggested that web ads can work more as interactive conversations between user and advertiser, rather than mindless branding imagery. A Portlet can be used to mediate a complete conversation between advertiser and user. The weather Portlet example above could actually come from an external service provider. The travel site could even contain a booking Portlet. While viewing online discussions about a destination, users can conduct a parallel conversation with an airline company, to check flight availability.
“Drag-And-Drop” provides a nice way to rearrange Portlets around the page, but do you 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 movement - for example, let the user move Portlets up and down a side column
Claude Hussenet's portal is a demo informational portal. Information from different news sources, as well as customisable 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.
Google Homepage is a portal with 3 columns of Portlets. Registered users can click on "Add content" to keep adding Portlets. Most of the Portlets contain recent updates - like news, RSS feeds, and Word of the Day. There are also some more interactive Portlets: "Search" shows personal search history, Bookmarks lets you accumulate bookmarks in a Portlet, GMail summarises recent mail messages. All Portals Existing Portlets can be dragged around the page and edited. Editing morphs the Portal into a form. At present, the form is unfortunately submitted as a regular form, causing a page refresh.
The The Backbase Portal Demo contains several independent Portlets, each with their own state (Figure 1.76, “Backbase”). It's only a demo, but it's a good demonstration of the independent nature of Portlets.
Dobrado, an open-source project, is different from the above information portals in a couple of ways. Firstly, the “Portlet”s are free-flowing - they can be dragged anywhere around the page, as opposed to the more common style of docking a Portlet into one of three columns. Secondly, Dobrado is not actually an information portal per se, but rather a website authoring application - for novices, it's easy to create a page by conjuring new Portlets, arranging them around the page, and typing in some content.
Claude Hussenet's portal delegates server calls to the Direct Web Remoting (DWR) framework. Let's focus on the "Quick Links" Portlet, which allows you to maintain a collection of bookmarks. (Some of the code here has been reformatted.)
The initial HTML represents Quick Links as a table. There's a span for the links and another 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="/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 id="portletQuickLinks" ><B>Loading Content</B></span>
</TD>
</TR>
<TR>
<TD>
<span id="inputLinksPortletQuickLinks" ></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);
}
Portlets often use “Periodic Refresh” to stay up to date.
Using “Distributed Events” is a good way to keep the portlet updated. This is particularly important when you have one portlet dependent on another: instead of tying them directly, use events to add a layer of indirection.
A dynamic “Drilldown” is an effective way to conserve space within a Portlet.
“Live Form”s 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.
Portlets can be used to show a conversation to the user and an external domain.
A portal full of Portlets like having a 21st century dashboard as depicted in a 20th century sci-fi movie - a 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.