Portlet
Time your website with
WebWait - from the creator of AjaxPatterns.orgFrom Ajax Patterns
There's an archived version of this pattern available, taken from the Ajax Pattern book draft, showing roughly how it appeared before the page became publicly editable.
Evidence: 2/3
Tags: Block Conversation Dialogue Independent Parallel Portal Portlet
Contents |
Ajax/Javascript Programming and Usability in "Ajax Design Patterns" Book |
In A Blink
Diagram: A portal, with some blocks in the middle of a conversation (chess game in progress, form shown, drilldown).
Mukesh Kumar Pal
Goal Story
Tracey's interface is dominated by a large block of text showing market quotes for various stocks. However, there are 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.
Problem
How can the user conduct rich conversations in parallel?
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'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.
Solution
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.
Sometimes, actions on the portal do 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 searh result to open it up in the main content area.
A Portal is a web application which aggregates Portlets together. A news Portal for example, contains a Portlet for each news category. But Portlets need not reside in Portals. They can be a useful way to augment regular web applications, 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. With a conventional Portlet, you have to reload the entire page every time any change occurs. In practice, this usually means wiping the state of any forms in progress, and it's also a bandwidth killer. Customising the interface is also difficult when each change requires a trip to the server. Portlets gain a lot from Ajax technology:
- 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 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.
A particularly interesting application combines 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 idea of "Advertising as Conversation, where he pointed out that web ads can work more as interactive conversations 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. The Portal Demo
Decisions
Will users be able to move Portlets around?
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
Real-World Examples
Google Homepage
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.
Backbase
The The Backbase Portal Demo contains several independent Portlets, each with their own state. It's only a demo, but it's a good demonstration of the independent nature of Portlets.
Claude Hussenet's Portal
ClaudeHussenet provides another 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.
Learnhanzi flashcards
Flashcards for learning Chinese characters, as an Ajax portlet Chinese characters flashcards. The portlet can be added to a page by pasting a few lines of javascript. It uses dynamic javascript loading to load the main script as well as to continually load new character data and images. It's connected to a database of 7000+ characters and gives the user feedback after each session.
Code Examples
Italic textlink title
Headline text
Image:Example.jpgMedia:Example.ogg== Claude Hussenet's Portal ==
Claude Hussenet's portal delegates server calls to the Direct Web Remoting 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 reformatter.)
The initial HTML represents it as a table. There's a span for the links and another for input.
DWR Example
<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 Response 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);
}
Alternatives
Tabbed Browsing
Tabbed browsing is a workaround users have to resort to in order to conduct multiple conversations with the same website.
Related Patterns
Periodic Refresh
Portlets often use Periodic Refresh to stay up to date.
Cross-Domain Proxy
Portlets can be used to show a conversation to the user and an external domain
Visual Metaphor
A portal full of Portlets like having a 21st century dashboard as depicted in a 20th century sci-fi flick - a conversation with the president on one screen, a little navigation through the stars on another screen, and a looping TV ad in the middle.
