• Choose a category
• All
• Classic-Fiction

Now that our RSSReader controller is starting to take shape, let’s take a look at the implementation details of providing the slideshow behavior.

Slideshow functionality

Now would probably be a good time to talk about a change in semantic from our previous version of the script. In our first version of the RSS reader, we loaded all of the RSS feeds into memory at start time and then just transitioned through our in-memory representation. This had the advantage of simplicity but the decided disadvantage of not being very scalable. If we have dozens or even hundreds of RSS feeds that we read on a regular basis, each with dozens of articles, preloading them all would bring our browser to its knees. So in this refactoring, we’ll take the opportunity to improve the scalability and performance of our RSS reader by changing our semantic to load only a single RSS feed into memory at a time. All of the RSSItems of a single feed will be in memory, but only a single RSSFeed will be in memory at a time. Three attributes of the Controller keep track of where the slideshow is in its list of displayable content. These are outlined in table 13.4. Table 13.4 Attributes of the Controller

Attribute

Purpose

this.currentFeed

The RSSFeed instance currently loaded into memory.

this.feedIndex

The index of the currently visible feed. This is an index into the

this.options.rssFeeds array.

this.itemIndex

The index of the currently visible item. This is an index into the currently visible RSSFeed object’s internal items array.

Licensed to jonathan zheng

550

CHAPTER 13

Building stand-alone applications with Ajax

With that overview of semantic change, let’s ponder navigation. There are a number of methods that we must contemplate in order to navigate through each of the articles (item elements) of each one of the RSS feeds. Let’s consider previous/

next method pairs. A mechanism for moving forward and backward is needed not only to provide the implementation for the explicit button events but also for the passive perusal via the automated slideshow.

Let’s start by looking at the boolean method pair that tells the reader whether it can move forward or backward. These two methods, hasPrevious and hasNext, are shown in listing 13.31.

Listing 13.31 The hasPrevious/hasNext method pair

hasPrevious: function() {

return !(this.feedIndex == 0 && this.itemIndex == 0);

},

hasNext: function() {

return !(this.feedIndex == this.options.rssFeeds.length - 1 && this.itemIndex == this.currentFeed.items.length - 1);

},

These methods will be used in the previous and next processing to determine whether a previous or next slide is available. As implemented here, a previous slide is available unless we are on the first item of the first feed, and a next slide is available unless we are on the last item of the last feed.

Now let’s examine what it means to move backward and forward. Let’s start with the previous() method, shown in listing 13.32.

Listing 13.32 The previous() method

previous: function() {

if ( !this.hasPrevious() ) return;

var requiresLoad = this.itemIndex == 0;

this.fadeOut( this.visibleLayer, Prototype.emptyFunction );

this.visibleLayer = (this.visibleLayer + 1 ) % 2;

if ( requiresLoad )

this.loadRSSFeed( this.feedIndex - 1, false );

else

setTimeout( this.previousPartTwo.bind(this),

parseInt(this.options.fadeDuration/4) );

},

Licensed to jonathan zheng

Refactoring

551

previousPartTwo: function() {

this.itemIndex--; this.updateView();

},

The first thing the previous() method does is to put a guard condition at the beginning of the method. If there isn’t a previous content item, then previous() just returns without performing any action. If the requiresLoad value is true, then the RSS content for the item being navigated to isn’t loaded yet. When moving backward as we are