Online Book Reader

Home Category

AJAX In Action [266]

By Root 3960 0
fade in the next slide. Finally, if an error occurs while loading an RSS feed, the errorHTML property specifies the HTML to display as an error message. The defaults for these values, if not explicitly overridden by the user, are shown in this code. It’s worth noting here that the component will expect an rssFeeds property of the options object to be passed in as the initial set of feeds to peruse. Because we can’t really assume a reasonable default for this value, it’s not defaulted within the setOptions method. The intent is that a reader will be created with an options object similar to the example shown here:

var options = {

rssFeeds: [ "http://radio.javaranch.com/news/rss.xml",

"http://radio.javaranch.com/pascarello/rss.xml",

"http://radio.javaranch.com/bear/rss.xml",

"http://radio.javaranch.com/lasse/rss.xml" ] }; var rssReader = new RSSReader('rssReader', options );

With creation and configuration quickly coded, it’s time to peek behind the curtain at the magical start method that kicks everything off. We’ll look at it briefly and cover its implications in the relevant sections that follow. Let’s start by illustrating the implementation shown in listing 13.29. Licensed to jonathan zheng

548

CHAPTER 13

Building stand-alone applications with Ajax

Listing 13.29 The start method

start: function() {

this.applyButtonBehaviors();

new Effect.FadeTo( this.getLayer(1), 0.0, 1, 1, {} );

this.loadRSSFeed(0,true);

this.startSlideShow(false);

},

The applyButtonBehaviors method sets up the onclick handlers for the previous, pause, next, and Add Feed buttons. This is the next method we’ll discuss. The fade effect on the second line fades out the visible div element so that when the first slide is loaded it can be faded in. Note that in this implementation, we’re using an effect provided by Rico rather than writing our own, which reduces the amount of code we have to write, debug, and maintain. The loadRSSFeed method initiates the Ajax request to load in the first feed, and the startSlideShow method starts a timer with the value of the slideTransitionDelay to initiate the slideshow. The loadRSSFeed method will be explored in more detail in the “Loading RSS

feeds with Ajax” section (page 556), and the startSlideShow method will be dissected in the “Slideshow functionality” (page 549) section. As promised, we’ll close our discussion of construction and setup by looking at the applyButtonBehaviors method in listing 13.29. The applyButtonBehaviors method, as mentioned previously, hooks the buttons up to methods that implement their behaviors. The implementation is shown in listing 13.30.

Listing 13.30 The applyButtonBehaviors method

applyButtonBehaviors: function() {

$(this.id + '_prevBtn').onclick = this.previous.bind(this);

$(this.id + '_nextBtn').onclick = this.next.bind(this);

$(this.id + '_pauseBtn').onclick = this.pause.bind(this);

$(this.id + '_addBtn').onclick = this.addFeed.bind(this);

},

Let’s start with some refresher notes about the syntax and idioms being used here. We’re using a couple of syntactical elements of the Prototype library. First, the $ method, as you will recall, can be thought of as a call to document.getElementById. Second, the bind method implicitly creates a closure for us so that the onclick handler for each button can call first-class methods of our component. Now to the details of the implementation.

Licensed to jonathan zheng

Refactoring

549

The implementation reveals an implicit contract between the component and the HTML markup for the reader. The component is constructed with an ID

that it stores in its this.id attribute. The ID is then used as a prefix to find various elements within the markup. In this case, the IDs of the buttons are assumed to be the ID passed into the constructor, followed by _prevBtn, _nextBtn, _pauseBtn, and addBtn. To illustrate this, in the example construction just mentioned that uses rssReader for the ID, the component expects the buttons to be specified as follows:

®Online Book Reader