AJAX In Action [249]
The first thing is to understand the steps for what we are going to develop. We are developing an RSS reader that is going to set up a slideshow that uses two layers. Each layer will contain one feed, which will be displayed for a set period of time, after which the next feed fades in. In figure 13.2, we can see the control flow of the application.
The process has a lot of steps. The first step is to load our multiple feeds. We will use a master array to hold the information we need from each feed source. We do not require all the optional item elements that we listed in table 13.2. Optain web site
RSS file
Send
Format
Repeat
Load message
request
RSS feed
Preloader
Start transition
Start fade
Start timer
Figure 13.2 RSS reader project’s process flow diagram
Licensed to jonathan zheng Creating the rich user interface 511 After we load all the files, we need to create our transition effect of fading in and out. In this case, we’ll use CSS classes to do this. We’ll use a timer to switch between messages and loop through all the messages. Other features that we want to incorporate into this application are back, forward, and pause buttons. We can also add the ability to insert additional feeds from a selection list. The first step is to create our client-side form and layers. 13.2.2 The table-less HTML framework The biggest part of this project is presentation. We’ll use a series of div and span elements to make a table-like layout that contains a header, a body, and a footer. We can see how this looks in figure 13.3. We could have used tables to create the layout, but tables were the pre-CSS page layout tool (see chapter 2 for an introduction to CSS). Today, tables should not be used for layout since they require more time to render and they are not as easy to change as a CSS layout. Listing 13.1 shows the markup on which our XML viewer’s layout is based. Figure 13.3 The RSS syndication reader developed in this project Licensed to jonathan zheng 512 CHAPTER 13 Building stand-alone applications with Ajax Listing 13.1 Basic HTML for the RSS reader The first div that we added is divNewsHolder b, our container, which we use to set the overall size of our display window. The next div that we add is divNewsTitle c, which is the header in our layout. Inside this div, we add a span d that contains a placeholder for our feed count. The other line of text e is the title of our feed viewer. We can make that line say anything we want. The div divAd f is our next row. This row is the placeholder for our RSS feed information that we will retrieve later. We insert two more div elements inside of the div divAd. The two new divs, divNews1 g and divNews2 h, are used to hold the RSS feed information. The CSS properties of these elements will be altered by the JavaScript to create a fading transition. The footer row is made up of a div divControls i. The footer row contains our navigation and our feed management functions. The next, back, and pause Licensed to jonathan zheng Creating the rich user interface 513 Figure 13.4 HTML elements are shown without any CSS j buttons