AJAX In Action [121]
this.fader=setTimeout("objviewer.age('"+rnd+"')",5000); c Set timeout
}
}
objviewer.age=function(id){
var el=document.getElementById(id);
var viewer=el.fadee;
viewer.setStatus(objviewer.STATUS_NORMAL); d
Reset status when
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.
Licensed to jonathan zheng 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.2 Highlighting 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, Licensed to jonathan zheng 244 CHAPTER 6 The user experience {duration: 5.0} ); } } The Effect object takes care of some of the plumbing work for us, and we no longer need to manage our own timeouts. The age() function can be removed altogether. We simply invoke the constructor of the Pulsate effect, passing in a reference to the DOM element to operate on, and an associative array of any options whose defaults we wish to override. By default, the Pulsate effect runs for 3 seconds. We have modified it here to 5 seconds, in keeping with our previous example, by passing a duration parameter into the options array. The same styling techniques could be applied to other events affecting the data, such as updates originating from the server. To prevent any clashes between effects, we check first for any effect that is already in progress, and cancel it. (As of version 1.1, all Scriptaculous effects respect a standard cancel() function.) This kind of styling provides instant feedback to the user at the point at which his