• Choose a category
• All
• Classic-Fiction

Licensed to jonathan zheng

Refactoring

545

Figure 13.18 RSSItemView result

(Remember, $() is a function provided by Prototype for retrieving DOM elements by their ID.) Now that we have a good set of abstractions for our Model classes and our View, let’s tackle the RSS reader Controller that ties all the pieces together.

13.7.3 RSS reader Controller

The RSSReader class will perform functions related to manipulation of the Model and View classes to coordinate all of the activities associated with the reader. Recall that the RSS reader provides a slideshow-type interface to the feeds where each article is presented for a certain period of time, and then a transition effect is created to move from one article to the next. Buttons are provided to move backward and forward within the articles, as well as pause and resume the slideshow. Finally, a select list and an add button are provided to add supplemental feeds to the initial set of RSS feeds in the list. The RSS reader has to perform five categories of behaviors to implement these features, as outlined here: Licensed to jonathan zheng

546

CHAPTER 13

Building stand-alone applications with Ajax

■

Constructing objects and initial setup

■

Creating slideshow functionality

■

Creating the transition effects

■

Loading the RSS feeds via Ajax

■

Updating the UI

To reduce the complexity and amount of code required to do all of this, we’ll use the Prototype library for syntactical brevity, the Rico library to provide the functionality for our transition effects, and the net.ContentLoader for the Ajax support. Let’s tackle the initial construction and setup first. Construction and setup

The de facto starting point for our component development has been constructors. Let’s stick with that practice here and start by defining our constructor. The constructor in this case is a simple method to set the initial defaults for some of the component state and, as in other examples, to set our configuration options and perform behavior initialization. With that in mind, our RSSReader constructor is defined as shown in listing 13.27. Listing 13.27 The RSSReader constructor

RSSReader = Class.create();

RSSReader.prototype = {

initialize: function( readerId, options ) {

this.id = readerId;

this.transitionTimer = null;

b Set default

this.paused = false;

values

this.visibleLayer = 0;

this.setOptions(options); c

Set configuration options

this.start(); d

Initialize behavior

},

...

};

The constructor takes two arguments: an ID and an options object. The ID is used as a unique identifier for the reader and is used as a prefix for the IDs of the buttons that it will need to identify from the DOM. This will be shown shortly in the applyButtonBehaviors method. The first thing the constructor does b is to set the default values for its state. Next, the options object, as with most of the components we’ve written, is used c to specify configuration options to the Licensed to jonathan zheng

Refactoring

547

component. This is done via the setOptions method. Finally, everything that needs to happen to bring the component to life happens in the start method d. Let’s ponder configuration first, and then we’ll move on to behavior. Our boilerplate configuration idiom, setOptions, shown in listing 13.28, provides the configuration. Let’s establish the setOptions implementation now and talk about our configuration options.

Listing 13.28 The setOptions method

setOptions: function(options) {

this.options = {

slideTransitionDelay: 7000,

fadeDuration : 300,

errorHTML : '

}.extend(options);

},

The properties we’ve decided to make configurable in our RSS reader are indicated within the setOptions method shown here. The slideTransitionDelay property specifies the number of milliseconds an article’s “slide” is visible before transitioning to the next one. The fadeDuration property specifies the amount of time in milliseconds it takes to fade out and subsequently