Indicating freshness of data	241

Figure 6.7

An unsuccessful network request will result in the notification dialog being shown. (There are two messages shown here, the second of which is a network error notification.)

We’ve taken this framework as far as we need to for now and demonstrated how it can play nicely with our existing code. In the following section, we’ll look at an alternative graphical convention for notifications that can also serve us well.

6.6 Indicating freshness of data

The notifications framework that we developed in the previous section provides a series of new top-level components that display information about system activity. In some circumstances, we may want to display a more contextual form of notification, indicating a change to a piece of data in situ. In this section, we augment our ObjectViewer developed through chapters 4 and 5 to provide extra visual cues on recently changed data.

6.6.1Defining a simple highlighting style

Let’s start off with a simple way of highlighting the data by using a reverse video effect. The Object Viewer user interface is mostly quite pale, and uses blue/gray tones, so a deep red color will stand out nicely. The first thing that we need to do is to define an additional CSS class to represent newly changed data:

.new{

background-color: #f0e0d0;

}

We have chosen a very simple styling here. In a more polished application, you may want to be a little more adventurous. Listing 6.11 shows the changes to the ObjectViewer code required to style recently edited properties as new and to remove the styling automatically after a given length of time.

Listing 6.11 ObjectViewer with styling of recent edits

objviewer.PropertyViewer.prototype.commitEdit=function(value){ if (this.type=objviewer.TYPE_SIMPLE){

this.value=value;

242CHAPTER 6

The user experience

var	valDiv=this.renderSimple();
var	td=this.valTd;
td.replaceChild(valDiv,td.firstChild);
this.viewer.notifyChange(this);		b Set status as new
this.setStatus(objviewer.STATUS_NEW);

}

}

objviewer.STATUS_NORMAL=1; objviewer.STATUS_NEW=2;

objviewer.PropertyViewer.prototype.setStatus=function(status){

this.status=status; if (this.fader){

clearTimeout(this.fader);

}

if (status==objviewer.STATUS_NORMAL){ this.valTd.className='objViewValue';

}else if (status==objviewer.STATUS_NEW){ this.valTd.className='objViewValue new'; var rnd="fade_"+new Date().getTime(); this.valTd.id=rnd; this.valTd.fadee=this;

this.fader=setTimeout("objviewer.age('"+rnd+"')",5000); c Set timeout

}

}
objviewer.age=function(id){
var el=document.getElementById(id);
var viewer=el.fadee;	d Reset status when
viewer.setStatus(objviewer.STATUS_NORMAL);
el.id="";	timer expires
el.fadee=null;
}

We define two statuses, normal and new. We could have set a boolean term isNew instead, but we chose this approach to allow for future expansion, say to style items whose updates are being submitted to the server. We call the setStatus() method when committing an edited value b. This sets the CSS class appropriately, and, in the case of the “new” status, it also sets up a timer that will reset the status to normal after five seconds c. (In real life, we’d probably want it to last longer, but five seconds is good for testing and demonstration purposes.) The object retains a reference to the timer, which it can cancel if another change of status takes place before it has expired.

Indicating freshness of data	243

Figure 6.8

The modified ObjectViewer displaying a recently edited value for the diameter property, which is styled to have a colored background. The styling will disappear after a short period of time, when the edit is no longer new and noteworthy.

Because of the limitations of the JavaScript setTimeout() method, we assign a unique ID to the DOM node being styled, to allow us to find it again when the timer calls the age() function d. age() also tidies up the ID and other temporary references. Figure 6.8 shows the ObjectViewer with a recently edited value.

The user’s eye will be drawn toward the recently edited value because of the change in color. Another way of drawing the user’s attention is to use animation, and we’ll see how simple that can be in the next section.

6.6.2Highlighting with the Scriptaculous Effects library

We’ve created a simple styling effect by hand here, in part because it’s easy to display in the static medium of a printed book with screen shots. For production, we recommend the Scriptaculous library’s Effect objects as a simple way of adding sparkle to your inline notifications. We briefly introduced this library in section 3.5.2, where we noted that it provides one-line calls for styling DOM elements with a variety of animated effects and transitions.

We can easily rewrite our setStatus() method from listing 6.11 to make use of Scriptaculous Effects. Let’s say that we want to make recently edited entries pulsate using the Effects.Pulsate object. This will make them fade in and out repeatedly, in a way that certainly catches the eye, but unfortunately can’t be captured in a screen shot. Listing 6.12 shows the changes necessary to make this work.

Listing 6.12 Styling recent edits with Scriptaculous

objviewer.PropertyViewer.prototype.setStatus=function(status){

this.status=status; if (this.effect){

this.effect.cancel();

this.effect=null;

}

if (status==objviewer.STATUS_NEW){ this.effect=new Effect.Pulsate(

this.valTd,