Section 15.7. Status Area

15.7. Status Area

Console, Log, Message, Status

Figure 15-18. Status Area

15.7.1. Goal Story

Pam wants to revise the list of project issues. As she begins checking off those that are now resolved, she notices the Status Area below update, which is showing the number of issues resolved and the number still outstanding.

15.7.2. Problem

How can you show auxiliary information?

15.7.3. Forces

  • The same data can be represented in different ways.

  • Users often benefit from redundant summary information.

  • Screen real estate is limited; you can't augment each field with its own summary information.

15.7.4. Solution

Include a read-only Status Area to report on current and past activity. The Status Area is usually auto-generated text based on some aspect of system state. The main purpose is to save space by occupying a region with information from different sources. This is done by dynamically altering the information according to current context.

Applications of the Status Area include the following:

  • Summarizing information about elements the mouse is hovering over.

  • Summarizing information about the element being edited.

  • Summarizing information about the overall application state.

  • Capturing past events in a log.

  • Offering a preview.

Often, there's no server-side processing involvedthe browser has enough information to maintain the Status content itself. For example, the browser can easily show a count of selected elements or a log of past data that's been retained. A Status Area can be particularly valuable for monitoring the state of dynamic objects. For example, an e-commerce system can use Periodic Refresh (Chapter 10) to continuously update the state of an order within a user's profile ("Submitted," "Credit Card Verified," "Stock Available," and so on).

The Status Area is usually a div element, with changes triggered by events such as mouse rollovers and form editing.

Note that this pattern is mostly speculative and is based on analogies from conventional desktop systems (where Status Areas are indeed commonplace).

15.7.5. Decisions How will you size the Status Area? What if it overflows?

The Status Area is usually a relatively small elementsometimes just one row of text. You need to perform some analysis to determine the worst-case situation, i.e., what's the most content the Status Area can hold, and how will you deal with overflow. Strategies for dealing with this include:

  • Compressing the text somehowe.g., by trimming the message or extracting a summary.

  • Introducing scrollbars. This is reasonable for a console-like Status Area that retains a history.

  • Dynamically resizing the Status Area (which is not very common). How will you structure the Status Area's content?

The Status Area need not be plain-text. It's often useful to keep a common structure in which each position always reflects the same variable. Consider which variables are being maintained and how they relate to each other.

15.7.6. Real-World Examples BetFair

Betfair ( includes a Live Form (Chapter 14) for creating new bets (see "Real-World Examples" in Live Form). A Status Area tracks your total liability, which is dynamically updated as you change the stake. Lace Chat

Brett Stimmerman's Lace Chat ( is an Ajax chat app. A Status Area contains a live preview of your message. As you type, a preview of the output, including any markup, is shown.

15.7.7. Code Refactoring: AjaxPatterns Status Wiki

The Basic Wiki Demo ( is refactored in the Status Wiki Demo to include a Status Area ( While the focus is on a message, there's a Status Area below maintaining the word count, row count, and character count (Figure 15-19).

Figure 15-19. Showing the status of a wiki entry

The static HTML has been refactored to include a Status Area with a table for all the values. This means the script need only set the actual count values rather than perform HTML manipulation:

   <div >     <table >       <tr>             <td >Message&nbsp;ID</td>             <td  ></td>       </tr>       <tr>             <td >Row&nbsp;Count</td>             <td  ></td>       </tr>       <tr>             <td >Word&nbsp;Count</td>             <td  ></td>       </tr>       <tr>             <td >Character&nbsp;Count</td>             <td  ></td>       </tr>     </table>   </div> 

The CSS stylesheet makes the status initially hidden:

   #status {     visibility: hidden;     text-align: center;   } 

When the message gains focus, it makes the status visible and calls showStatus( ) to set its values according to the message's initial state. The Status Area remains until the message is blurred. To update on each change, showStatus is called on keyup:

   function onMessageFocus(event) {     ...     $("status").style.visibility = "visible";     showStatus(message);   }   function onMessageBlur(event) {     ...     $("status").style.visibility = "hidden";     ...   }   function onMessageKeyUp(event) {     var message = getMessage(event);     showStatus(message);   } 

The showStatus message analyzes the message and posts its results to the status-table cells:

   function showStatus(message) {     $("messageId").innerHTML =;     $("characterCount").innerHTML = message.value.length;     $("rowCount").innerHTML = message.value.split('\n').length + 1;     var messageCopy = message.value.replace("\n", " ");     messageCopy = message.value.replace(/^ */, "");     messageCopy = messageCopy.replace(/ *$/, "");     $("wordCount").innerHTML = messageCopy.match(/^ *$/) ? 0:messageCopy.split(/\s+/g) .length;   } 

15.7.8. Alternatives Popup

A Popup (see earlier) is another way to show auxiliary information without dedicating a permanent space on the page for it. A Status Area is less intrusive but at the expense of some screen real estate. Browser Status Bar

Most browsers contain a status bar at the bottom, which you can access with the window.status object. That's an okay place to include status information, but it has drawbacks. First, it's a very rudimentary interface with no support for structured content, styling, and animation. Second, users expect URLs to appear there when they hover over hyperlinks, and you might be breaking that model. Finally, there are cross-browser issues. Firefox, for instance, disables scripting the status line by default due to security concerns (malicious web sites can fake the URL you're heading to).

15.7.9. Related Patterns Periodic Refresh

Where the Status Area shows server-related status, use a Periodic Refresh (Chapter 10) to keep it up to date.

15.7.10. Metaphor

A Status Area is like a time-share property; both reduce real estate costs by letting multiple participants occupy the same area at different times.

Ajax Design Patterns
Ajax Design Patterns
ISBN: 0596101805
EAN: 2147483647
Year: 2007
Pages: 169

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: