• Choose a category
• All
• Classic-Fiction

By Root 4078 0

information. A status bar can provide a bit more detail on background events, and finally the full-blown dialog can show a greater degree of detail than either. Figure 6.1 illustrates a range of notification conventions being used in the KDE desktop for UNIX. The folder called lost+found is not accessible to the current user, so a secondary image of a padlock has been superimposed over that folder. The status bar at the bottom of the main window gives further information on the contents of the folder being viewed, without interrupting the user. Finally, the error window that is presented when the user tries to open the locked folder presents a stronger notification requiring immediate action by the user.

Compared to these notifications, the use of alert() is essentially ad hoc, as well as being simplistic and ugly. In our quest for robustness, consistency, and simplicity, it makes sense to develop a framework for presenting notifications to the user that we can reuse throughout our application. In the following sections we’ll do just that.

Licensed to jonathan zheng

Designing a notification system for Ajax

223

Figure 6.1 Various conventions for providing status information in a user interface: modifying the icons to reflect particular characteristics (here access permissions), a status bar providing summary information, and a modal dialog. The interface shown here is the KDE desktop for UNIX

workstations, but similar conventions are found in most popular graphical interfaces. 6.3.1 Modeling notifications

As a first step, let’s define what a notification message looks like. It contains a text description for the user and optionally an icon to display alongside the message. When we notify the user of background activity, some messages are going to be more urgent than others. Rather than working out each time whether or not to show a particular message, let’s define some generic priority levels, which we can then assign to each message.

In general, we want to tell the user something, which they can acknowledge and dismiss. Some messages might be important enough to stay around indefinitely until the user does dismiss them, whereas others will be relevant only for a limited time. Where a message does remove itself without user intervention, it may be in response to a callback, if it is telling the user that some background process such as a network download is under way and the process finishes before the user dismisses the notification. In other cases, such as a news feed, we may simply wish to assign a given lifetime to a message, after which it will tidy itself away. With these requirements in mind, listing 6.3 presents a Message object, which provides a generic behind-the-scenes representation of a notification that is to be presented to the user. Once we’ve established this model of notification messages, we can dress them up in various ways, as we will see later.

Licensed to jonathan zheng

224

CHAPTER 6

The user experience

Listing 6.3 Message object

var msg=new Object();

msg.PRIORITY_LOW= { id:1, lifetime:30, icon:"img/msg_lo.png" }; msg.PRIORITY_DEFAULT={ id:2, lifetime:60, icon:"img/msg_def.png" }; msg.PRIORITY_HIGH= { id:3, lifetime:-1, icon:"img/msg_hi.png" }; msg.messages=new Array();

msg.Message=function(id,message,priority,lifetime,icon){

this.id=id;

msg.messages[id]=this;

this.message=message;

this.priority=(priority) ? priority : msg.PRIORITY_DEFAULT.id;

this.lifetime=(lifetime) ? lifetime : this.defaultLifetime();

this.icon=(icon) ? icon : this.defaultIcon();

if (this.lifetime>0){

this.fader=setTimeout(

"msg.messages['"+this.id+"'].clear()",

this.lifetime*1000

);

}

}

msg.Message.prototype.clear=function(){

msg.messages[this.id]=null;

}

msg.Message.prototype.defaultLifetime=function(){

if (this.priority<=msg.PRIORITY_LOW.id){

return msg.PRIORITY_LOW.lifetime;

}else if (this.priority==msg.PRIORITY_DEFAULT.id){

return msg.PRIORITY_DEFAULT.lifetime;

}else if (this.priority>=msg.PRIORITY_HIGH.id){

return msg.PRIORITY_HIGH.lifetime;