According to the general architecture introduced above, we
can divide the whole user interface into three parts.
1. Add a new RSS channel info (including the name and its
related URI).
2. Exhibit the RSS channel lists.
3. Display the contents (from the associated web site URL) of
the specified channel.
The above-depicted figure shows the design-time user
interface of the application.
As is seen from Figure 3, the upper left is an ASP.NET AJAX
client-side control—ListView which is
used to hold and show the RSS channel list. The .gif animation (in relation to
the emptyTemplate template of ListView control) below
it is just for creating a friendlier user experience. The larger rectangle area
(that contains several simple ASP.NET AJAX client-side controls) below the
animation is a HTML div tag (named "buttonarea")
which is used for the user to enter new interesting RSS channel info. The
right part of the whole page lies in the ASP.NET AJAX Control Toolkit Accordion
which is introduced to display the detailed information of the specified RSS
channel.
As for the several mysterious litter dots in the div "buttonarea"
and the server control UpdatePanel that encloses Accordion and its related
UpdateProgress control, you can find out the related answers later on. Now,
you are sure to have noticed the Rss Toolkit control RssDataSource at the far
lower left corner. It is designed to provide data source to Accordion from the
server side. In general, we can only use it at run-time from the server side
since it is a server-side data source control. There exist some puzzles with it;
we are also to discuss them later. Finally, all the controls we have just
introduced are arranged as sub elements through a HTML table
element.
Now with the data tier and presentation tier in mind, let us
turn our attention to the next period of the development— the logic tier design.