15.7. Status AreaConsole, Log, Message, Status Figure 15-18. Status Area15.7.1. Goal StoryPam 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. ProblemHow can you show auxiliary information? 15.7.3. Forces
15.7.4. SolutionInclude 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:
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. Decisions15.7.5.1. 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:
15.7.5.2. 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 Examples15.7.6.1. BetFairBetfair (http://betfair.com) 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. 15.7.6.2. Lace ChatBrett Stimmerman's Lace Chat (http://www.socket7.net/lace/) 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 WikiThe Basic Wiki Demo (http://ajaxify.com/run/wiki/) is refactored in the Status Wiki Demo to include a Status Area (http://ajaxify.com/run/wiki/status). 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 entryThe 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 ID</td> <td ></td> </tr> <tr> <td >Row Count</td> <td ></td> </tr> <tr> <td >Word Count</td> <td ></td> </tr> <tr> <td >Character 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 = message.id; $("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. Alternatives15.7.8.1. PopupA 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. 15.7.8.2. Browser Status BarMost 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 Patterns15.7.9.1. Periodic RefreshWhere the Status Area shows server-related status, use a Periodic Refresh (Chapter 10) to keep it up to date. 15.7.10. MetaphorA Status Area is like a time-share property; both reduce real estate costs by letting multiple participants occupy the same area at different times. |