• Choose a category
• All
• Classic-Fiction

12

The number of steps in the fade

{complete: onComplete}

The completion callback to call once done

We use the helper method getLayer() to get the div element corresponding to the content layer to be faded. The getLayer() method is shown in listing 13.39. Listing 13.39 The getLayer() method

getLayer: function(n) {

var contentArea = $(this.id+'_content');

var children = contentArea.childNodes;

var j = 0;

for ( var i = 0 ; i < children.length ; i++ ) {

if ( children[i].tagName &&

children[i].tagName.toLowerCase() == 'div' ) {

if ( j == n ) return children[i];

j++;

}

}

return null;

},

Licensed to jonathan zheng

556

CHAPTER 13

Building stand-alone applications with Ajax

This method simply finds the content area, assuming its ID to be the ID of the reader with the value _content appended to the end. Once it finds the content element, it navigates to the children and finds the nth div child and returns it. This finishes our treatment of transitions. Let’s now examine the topic of loading our RSS feeds via the magic of Ajax. Loading RSS feeds with Ajax

We’ve given a fair amount of attention to the topics of creating a component and providing a rich slideshow semantic and fancy DHTML techniques for transitioning between slides. But without Ajax at the core, the fanfare would be for naught. The point is that it’s the synergy between Ajax, with its scalability and finegrained data retrieval, and sophisticated DHTML, with its rich affordances and effects, that provides a superior user experience. Okay, enough of the soapbox. Let’s look at some Ajax, starting with the method in listing 13.40 that loads an RSS feed into memory.

Listing 13.40 The loadRSSFeed method

loadRSSFeed: function(feedIndex, forward) {

this.feedIndex = feedIndex;

this.itemIndex = forward ? 0 : "last";

new net.ContentLoader(this,

this.options.rssFeeds[feedIndex],

"GET", [] ).sendRequest();

},

This method uses our ever-familiar net.ContentLoader to make an Ajax request, passing the URL of an RSS feed as specified in the this.options.rssFeeds array. The forward parameter is a boolean specifying whether or not we’re loading in new content as a result of moving forward. Given this knowledge, the itemIndex property is updated accordingly. Note that itemIndex is given the value of last rather than an integer if we’re moving backward. That’s because we want itemIndex to indicate the index of the last item in the previous RSS feed. The only problem is that we don’t know how many items are in the feed, because it isn’t loaded yet.

You’ll recall that the ajaxUpdate and handleError methods are required as an implicit contract with the net.ContentLoader. We will look next at the ajaxUpdate method, shown in listing 13.41, to see how the implementation resolves our indexing dilemma.

Licensed to jonathan zheng

Refactoring

557

Listing 13.41 The ajaxUpdate method

ajaxUpdate: function(request) {

if ( window.netscape &&

window.netscape.security.PrivilegeManager.enablePrivilege)

netscape.security.PrivilegeManager.enablePrivilege(

'UniversalBrowserRead');

this.currentFeed =

RSSFeed.parseXML(request.responseXML.documentElement);

if ( this.itemIndex == "last" )

this.itemIndex = this.currentFeed.items.length - 1;

this.updateView();

},

The ajaxUpdate method starts with a check to see if it’s running in an environment that provides a PrivilegeManager. If so, it asks to grant the UniversalBrowserRead privilege. As noted earlier, this is done so that our reader can run locally within a Mozilla-based browser.

The this.currentFeed is an instance of our RSSFeed model object that we defined in the Model section. It corresponds to the single RSSFeed loaded into memory, as populated from the Ajax response. If this.itemIndex has a value of last—as set by the loadRSSFeed method when moving backward—the itemIndex property is updated to contain the actual number of items in the newly loaded RSSFeed. Finally, the UI is updated via a call to updateView().

Let’s not forget to do our due diligence and define