AJAX In Action [271]
“punt” message, as shown in our handleError implementation. More sophisticated implementations are certainly possible—and desirable. handleError: function(request) {
this.getLayer(this.visibleLayer).innerHTML =
this.options.errorHTML;
},
Now that our RSSReader is fully Ajax-ified, the only remaining piece of our puzzle it to write a couple of methods that handle updating the UI.
UI manipulation
Recall that early on we took the time to create Model and View classes to support our refactoring effort. Now that we’ve come to the portion of the Controller that Licensed to jonathan zheng 558 CHAPTER 13 Building stand-alone applications with Ajax has responsibility for updating the UI, we should expect our work to be mostly done. If that’s your expectation, then you’re right on target. To illustrate this, our updateView() method that has been referenced numerous times throughout our refactoring session is shown in listing 13.42. Listing 13.42 The updateView() method updateView: function() { var rssItemView = new RSSItemView( this.currentFeed.items[this.itemIndex], this.feedIndex, this.itemIndex, this.options.rssFeeds.length ); this.getLayer(this.visibleLayer).innerHTML = rssItemView; this.fadeIn( this.visibleLayer, this.bringVisibleLayerToTop.bind(this) ); }, As you can see, the updateView() method delegates all of the hard work to our View class by instantiating an instance of it, setting it as the value of the visible layer’s innerHTML property, and finally fading the layer into visibility. Three lines of code. Not too shabby. Notice that once the layer is faded into view, we call a completion callback named bringVisibleLayerToTop. What this does is update the layer’s zIndex style property to ensure that it’s above the other layer being faded out. The bringVisibleLayerToTop() function is implemented as follows: bringVisibleLayerToTop: function() { this.getLayer(this.visibleLayer).style.zIndex = 10; this.getLayer((this.visibleLayer+1)%2).style.zIndex = 5; } That’s all we have to do from a UI-manipulation perspective. The separation of concerns across our Model, View, and Controller classes has facilitated a clean, maintainable architecture. 13.7.4 Refactoring debrief Our refactoring session concentrated on repackaging our script in such a way as to provide an MVC implementation of our RSS reader. We created an RSSFeed Model class to encapsulate the concept of an RSS feed, as well as an RSSItem class. We created a View class to encapsulate the concept of providing a View for an RSSItem in context of its parent RSSFeed, the RSSItemView. Finally, we tied the Licensed to jonathan zheng Summary 559 Model and View classes together with an RSSReader Controller class that provided all of the event-management glue and sophisticated interaction of a slideshow with transition effects. 13.8 Summary In this chapter, Ajax allowed us to obtain information straight from our desktop without requiring a commercial client application, saving us money and allowing us to customize the solution to our needs. We were able to load multiple XML files and only obtain the information that is relevant to our needs. We developed an HTML framework and applied CSS to allow easy customization of the reader. By using DHTML, we were able to develop a rich user interface that allows users to skip messages, pause messages, and add additional feeds as needed. All of this was possible by taking advantage of Ajax functionality to obtain the syndication feeds from websites. By changing a few statements, we can easily adapt the reader to read any XML feed. We can even develop our own custom XML formats to display news, ads, and anything else that may be of importance for our websites. Finally, we repackaged the script along the lines of a Model-View-Controller architecture in order to facilitate the readability