Table 13.3 Item elements (continued)		Creating the rich user interface		509
Element	Description	Example
description	The item summary	Ajax allows developers to improve the UI by making a web
		application act like a client application.
enclosure	Describes the media	<enclosure url="http://radio.javaranch.com/
	object that is	pascarello/media/TheAjaxInActionSong.mp3"
	attached to the item	length="5908124" type="audio/mpeg"/>
guid	A string that is a	http://radio.javaranch.com/pascarello/2005/05/25/
	unique identifier	1117043999998.html
link	The URL of the item	http://radio.javaranch.com/pascarello/
pubDate	The date the item was	Wed, 25 May 2005 17:59:59 GMT
	published
source	The RSS channel the	<source url="http://radio.javaranch.com/
	item came from	pascarello/blog.xml">Eric's Blog</source>
title	The title of the ele-	Ajax Improves UI Development
	ment

The heart and soul of the RSS feed are the title and the description. The title gives us a small insight into what the article is, whereas the description element can be one of two things: a synopsis about the article or the entire article itself. There is no set standard on how the description element is used. To determine how to handle it, we have to look at the individual feeds before we start to write the RSS feed reader. If it’s a synopsis, we can compare it to a blurb on the front of a magazine where it says, “see page 10 for more information.” That is where the link element comes into use. The link is the URL to the entire article on the author’s site.

Most RSS feeds try to utilize as many of the optional elements as possible in order to provide developers, like us, the tools to make our RSS reader as robust as possible. With better data at our hands, we can better display the RSS feed content. For more information about the RSS specification, visit http://backend.userland.com/rss.

Now that we understand the basic elements of the RSS document, we can create our Ajax-based RSS reader.

13.2 Creating the rich user interface

In this chapter, we create an RSS feed viewer that obtains the XML feeds from websites without using a server-side language or a client application RSS reader.

510CHAPTER 13

Building stand-alone applications with Ajax

Ajax allows us to view the information with a web page that is stored on our desktop. This example demonstrates that Ajax does not have to run with a web server that has a server-side language such as .NET or JSP. As long as we have an active Internet connection, we are able to access RSS feeds from any site we desire. (If you are running a Mozilla browser, see section 13.6.1. You must overcome Mozilla’s security restrictions, which we discussed in chapter 7, before you try to execute the code in this project.)

13.2.1The process

If you find yourself scanning multiple websites for content every day, you will be able to avoid that by running this reader. The viewer will be able to show multiple feeds on one page.

The unique feature of this application is that we are not using any server-side code; we are only obtaining RSS XML documents that are created by the other websites. The complete application resides on a web page saved on our desktop environment or delivered as part of our website.

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	Repeat	Format	Load message
request		RSS feed
	Preloader	Start transition		Start fade

Start timer

Figure 13.2 RSS reader project’s process flow diagram

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.2The 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

512CHAPTER 13

Building stand-alone applications with Ajax

Listing 13.1 Basic HTML for the RSS reader

<form name="Form1">	b Container div
<div id="divNewsHolder">
<div id="divNewsTitle">		c Header div
<span id="spanCount">Loading</span>
Ajax News Viewer		e Title
</div>
<div id="divAd"> f News feed container
<div id="divNews1">		g First news
Loading Content...		feed layers
</div>
<div id="divNews2">		h Layout
Loading Content...		footer
</div>
</div>	i
<div id="divControls">

<input type="button" name="btnPrev" id="btnPrev" value="<BACK" />

<input type="button" name="btnPause" id="btnPause" value="PAUSE" />

<input type="button" name="btnNext" id="btnNext" value="NEXT>" />

<hr/>

<select name="ddlRSS"> </select>

<input type="button" name="btnAdd" value="Add Feed" />

</div>

</div>

</form>

d Feed count holder

j Action

buttons

1) Additionalelement feed

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 eis the title of our feed viewer. We can make that line say anything we want.

The div divAd fis 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