Distributed Events and the Browser-Server Dialogue - Introducing a watchlist
(Page 4 of 4 )
The refactoring above wouldn't be very useful if we stopped with an event mechanism. Good for your work experience perhaps, but we haven't yet added any functionality to justify the effort; it's basically the same application as before. Not to worry Watchlist Wiki Demo (http://ajaxify.com/run/wiki/events/watchlist) to the rescue! A new watchlist monitors interesting messages, so that when a message you're watching is updated (by you or someone else), the watchlist will add a summary line.
To start with, the HTML now includes a watchlist table:
<div id="summary">
<table id="watchlist">
<tr>
<th>Author</th>
<th>Message</th>
</tr>
<tbody id="watchlistBody"> </tbody>
</table>
</div>
Which messages are in your watchlist? That's determined by a new checkbox control, one per message:
onNewMessage: function(message) {
...
var watching = document.createElement("input");
watching.type = "checkbox";
watching.messageId = message.id;
watching.onclick = onWatchingToggled; ...
}
When the user wants to watch a message, she selects its checkbox. A single function updates the watchlist for all chosen messages. Remember that message update events are fine-grained, so we need to ensure this callback is registered to receive notifications for all the chosen messages and nothing else. So when a user deselects a message, we'll unregister the function as a listener on that message. Note that this functionality necessitated the creation of an function to unregister listeners, which was never required in the previous version.
function onWatchingToggled(event) {
event = event || window.event;
var checkbox = event.target || event.srcElement;
if (checkbox.checked) {
messageModel.addMessageUpdateListener(checkbox.messageId,
onWatchedMessageUpdate);
} else {
messageModel.removeMessageUpdateListener(
checkbox.messageId,onWatchedMessageUpdate);
}
}
onWatchedMessageUpdate will now receive notification of any new messages that are being watched. It simply adds a summary row to the table and runs a visual effect:
function onWatchedMessageUpdate(message) {
var summary = message.content;
if (summary.length > 35) {
summary = summary.substring(0, 15) + "..."
+ summary.substring(summary.length - 15);
}
var row = document.createElement("tr");
var authorCol = document.createElement("td");
authorCol.className = "authorSummary";
authorCol.innerHTML = message.author;
row.appendChild(authorCol);
var contentCol = document.createElement("td");
contentCol.className = "contentSummary";
contentCol.innerHTML = summary;
row.appendChild(contentCol);
if ($("watchlistBody").childNodes.length > 0) {
$("watchlistBody").insertBefore(row, $("watchlistBody").childNodes[0]);
} else {
$("watchlistBody").appendChild(row); }
Effect.Appear(row);
}
We now have two independent functions that receive notifications of new messages arriv ing from the server. Each can use the information however it pleases. This is a much more scalable approach than having the server message recipient dictate how the browser should respond.
Related Patterns
Periodic Refresh, HTTP Streaming
For server-to-browser propagation, Periodic Refresh (see earlier) or HTTP Streaming (Chapter 6) is required.
RESTful Service
Distributed Events usually involve a browser element observing a server-side entity. REST is ideal for this purpose as it provides a simple, standard way to exposes server state.
XML Data Island
If the server responds with XML and you need to retain state locally--e.g., to track differences--an XML Data Island (Chapter 11) would be useful. Under some technologies illustrated in that pattern, XML Data Islands allow for automated updates--when the data island changes, then a control is updated, and vice versa.
Metaphor
The old newspaper analogy still works. People can subscribe to any number of newspapers, and each newspaper can have any number of subscribers. The algorithm does not explicitly mention any particular subscriber; rather, when a newspaper comes out, it simply loops through each subscriber and sends a copy to each of them.
Please check back next week for the conclusion of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter 10 of the book Ajax Design Patterns, written by Michael Mahemoff (O'Reilly, 2006; ISBN: 0596101805). Check it out today at your favorite bookstore. Buy this book now.
|
|
