Online Book Reader

AJAX In Action [120]

The page (as seen in figures 6.6 and 6.7) renders a simple HTML form into which the user can type URLs. Clicking the submit link will attempt to load that URL b and fire the notifyLoaded() callback function if successful. notifyLoaded() doesn’t actually do anything with the resource, other than report that it has fetched it by creating another Message object c.

Note that the behavior on a successful request is not written into the framework but provided by a custom onload handler function. This allows the framework to be adapted to differing requirements. In the example in listing 6.9, we have hard-coded the default behavior in case of error. In a real application, every network failure may not be sufficiently important to warrant a big in-your-face dialog. We leave it as an exercise for the reader to add a parameter to the ContentLoader to denote the urgency of the notification required on failure (or else provide an overridden onError handler with a gentler notification policy). Figure 6.6

A successfully loaded resource

will be displayed as a tooltip on

the status bar.

Licensed to jonathan zheng

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.1 Defining 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;

Licensed to jonathan zheng

242

CHAPTER 6

The user experience

var valDiv=this.renderSimple();

var td=this.valTd;

td.replaceChild(valDiv,td.firstChild);

this.viewer.notifyChange(this);

this.setStatus(objviewer.STATUS_NEW); b Set status as 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;