Architecting the RSS Reader
The DevX team and I decided that for a DevX Destination.NET Gadget, it made the most sense to create a simple RSS reader, but with a slight twist. This one would also employ two filtering options that aligned with the categorization of the site itself. In other words, users would be able to choose the "category" of headline they wanted to see, such as "Live Event" or "Feature", as well as the "subject" of the headline, such as "Windows Vista" or "Microsoft SQL Server" or "2007 Microsoft Office system".
When deciding how to architect the DevX Gadget, I went with a straightforward design. In addition to the required gadget.xml file, I created main.html as the primary Gadget file, with the creatively named flyout.html and settings.html as the single flyout and settings pages, respectively. I put all Gadget styles in a single stylesheet called main.css, but delineated between settings and the other pages when it came to JavaScript, creating dnetgadget.js and dnetgadget_settings.js. I put all of these files in one gadget sub-folder, "EN-US". As noted, except for the Gadget manifest, file naming and placement is entirely up to personal style.
My one nod to organization was to put images in their own "images" folder, which contains no other files. You can use PNG, JPG, and GIF formats in Gadgets, though this one only uses the latter two. Not being adept at graphics in the least, I asked our talented graphics artist, James Kattinge, to design all the assets for this project.
Experienced Web developers will notice that, except for the lack of a traditional index.* or default.* file, so far Gadget development is no different from your typical client-side Web app.
Creating the HTML Pages
As mentioned, this project uses three HTML pages:
- main.html: the Gadget itself; the object that sits in the Sidebar; this page will read a remote RSS feed and display navigable headlines.
- flyout.html: the flyout for the Gadget; when a user clicks on a headline, this page will slide out to display the title, article summary, date and author; clicking on the headline in the flyout will bring up the associated URL in the browser.
- settings.html: the settings page for the Gadget; when the user clicks the Settings button (a little wrench), a Settings template flies out with this page embedded in it; the Settings panel includes an Ok and Cancel button, which produces trappable events.
As you'll see in the Gadget code itself, none of these pages includes complicated HTML code. Their primary purpose is to provide placeholder <div> and <span> tags that can be accessed in the JavaScript code. For example, Figure 1 shows the code from main.html. As you can see, most of this just handles pretty button animation.
 | |
| Figure 1. main.html |
The other two files look even shorter. One important note, however: each HTML file includes an onload() function in the <body> tag:
main.html: onload="setup();"
flyout.html: onload="buildFlyout();"
settings.html: onload="buildSettings();"
Print
Previous Page: Architectural Overview continued
Dzone.com
Digg.com
Slashdot.org
Reddit.com
Del.icio.us
