• Choose a category
• All
• Classic-Fiction

Implementing a notification framework

235

Figure 6.5

Using CSS float attributes allows a list of icons to fit into a

variety of shapes of container. Here we have changed the

status bar to a square, and the cross and blue sphere icons

on the left wrap themselves into the new area automatically,

while the launcher for the dialog floats to the right.

Finally, we need to modify our Message object now that we have a user interface for it. As individual messages are created, they have the ability to add themselves to the user interface and will remove themselves when the message expires. Listing 6.8 presents the changes needed to implement this functionality. Listing 6.8 Modified 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.dialog=null;

msg.msgBarDiv=null;

msg.suppressRender=false;

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

);

}

if (!msg.suppressRender){ b

Extra arguments

this.attachToBar();

}

}

msg.Message.prototype.attachToBar=function(){ c

Extra arguments

if (!msg.msgbarDiv){

msg.render();

Licensed to jonathan zheng

236

CHAPTER 6

The user experience

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

this.render(msg.msgbarDiv);

}else{

if (!msg.dialog){

msg.dialog=msg.createDialog(

msg.msgbarDiv.id+"_dialog",

msg.msgbarDiv,

(this.priority==msg.PRIORITY_HIGH.id)

);

}

this.render(msg.dialog.tbod);

msg.showDialog();

}

}

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

msg.messages[this.id]=null;

if (this.row){ d Extra arguments

this.row.style.display='none';

this.row.messageObj=null;

this.row=null;

}

if (this.icoTd){

this.icoTd.style.display='none';

this.icoTd.messageObj=null;

this.icoTd=null;

}

}

We want the framework to be easy for developers to work with, so when a message is created, we automatically attach it to the user interface b. Simply invoking the constructor will cause the new message to render itself. Depending on the message priority, it will attach itself to the status bar or dialog as appropriate c. For cases where we don’t want the overhead of rendering for each message—such as when adding several messages at once—we provide a flag to suppress automatic rendering. In such cases, we can manually call msg.render() after creating a large number of messages.

Likewise, when removing a message in the clear() function, we automatically remove any user interface elements, so that the message goes away d. We now have a useful framework for presenting notifications to the user. We can trigger it manually but also make use of it in our other reusable code components. In the following section, we demonstrate how to hook it up to our ContentLoader object to report on the progress of network downloads. Licensed to jonathan zheng

Using the framework with network requests

237

6.5 Using the framework with network requests

In chapter 5 we introduced the ContentLoader object as a common encapsulation for network traffic. We can make use of our notification framework to provide status reports on any data request that we make automatically. Let’s scope out the requirements first.

When a request is made to the server, we would like to indicate that it is in progress, with a low-priority notification. To differentiate network requests from other low-level notifications, we would like to use a different icon. We have the image of the earth from our planetary viewer example in chapters 4 and 5, so let’s use that.

When the network request completes, we would like the notification