Keeping the user informed

221

can work out to send us relevant updates. This is stored as a property of the command queue and set to 0 initially. We pass these timestamps as UNIX-style dates, that is, the number of milliseconds elapsed since January 1, 1970. The choice of timestamp is based on portability. If we chose a date format that was easier to read, we would run into issues with localization, differences in default formats across platforms and languages, and so on. Getting localization right is an important topic for Ajax applications, since the application will be exposed to users worldwide if it is on the public Internet or the WAN of a large organization.

In the onload() function, we add the code required to update the last updated timestamp when a response comes in e and to parse tags f. The onUpdate handler function is called with the command queue as its context object and the tag DOM element as the sole argument.

In the case of our domain model of the solar system, the update handler function is shown in listing 6.2. Listing 6.2 updatePlanets() function

function updatePlanets(updateTag){

var attribs=updateTag.attributes;

var planetId=attribs.getNamedItem("planetId").value;

var planet=solarSystem.planets[planetId];

if (planet){

var fld=attribs.getNamedItem("fieldName").value;

var val=attribs.getNamedItem("value").value;

if (planet.fld){

planet[fld]=val;

}else{

alert('unknown planet attribute '+fld);

}

}else{

alert('unknown planet id '+planetId);

}

}

The attributes in the tag give us all the information that we need to update the domain model on the JavaScript tier. Of course, the data coming from the server may not be correct, and we need to take some action if it isn’t. In this case, we have fallen back on an alert() statement compounding the problems that were discussed in section 6.2.1.

We’ve added quite a bit more clever code to our command queue object in the process of handling updates from other users, including passing timestamps Licensed to jonathan zheng

222

CHAPTER 6

The user experience

between the client and web tiers, and adding a pluggable update handler function. Eventually we come full circle to the issue of informing the user of changes and asynchronous updates as they take place. In the next section, we look at our options for presenting this information to the user in a more workable fashion, and we’ll factor out that pesky alert() function.

6.3 Designing a notification system for Ajax

The alert() function that we’ve been relying on up to now is a primitive throwback to the earlier, much simpler days of JavaScript, when web pages were largely static and the amount of background activity was minimal. We can’t control its appearance in any way through CSS, and for production-grade notification, we’re much better off developing our own notification mechanisms using the techniques employed to build the rest of our Ajax user interface. This also provides a much greater degree of flexibility.

If we look across the full spectrum of computer systems, we see that notifications come in many shapes and sizes, varying considerably in their impact on the user. At the low end of the scale regarding obtrusiveness are changes to the mouse cursor (such as the Windows hourglass or the Mac “spinning beach ball”) or the addition of secondary icons or emblems to an image denoting the status of the files or other items in a folder. These simple indicators offer relatively little