Sharing structured data

XML Magazine

Subscribe to XML Magazine: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get XML Magazine: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


XML Authors: Progress Blog, Jayaram Krishnaswamy, Greg Schulz, Jason Rahm, Stackify Blog

Related Topics: ColdFusion on Ulitzer, XML Magazine

CFDJ: Article

Consuming a Remote RSS 1.0 Feed with Dreamweaver 8

XML and XSL-based web projects

Only the first four articles display in the browser. You may need to refresh your browser if all of the articles are still showing.

But how do you know these are the latest articles from the Developer Center? Since it is not always safe to assume RSS feeds list items in chronological order, you will learn how to sort them by date.

Sorting Items
In my previous article, XSL Overview, I explained the syntax for sorting XML nodes. You will apply that knowledge to sort articles by date.

  • With the headlines.xsl page open, switch to Code view.
  • Locate the following line of code:
  • <xsl:for-each select="rdf:RDF/rss:item[position() <=$ItemsPerPage]">
  • You can use Edit > Find and Replace to look for it.
  • Press Enter (Windows) or Return (Macintosh) after this line and start typing <xsl:s. Dreamweaver suggests hints to fill in your code.
  • Select xsl:sort and press Enter (Windows) or Return (Macintosh). If you are unable to see the code hints menu, you can press Control + Spacebar to display it.
  • As you type a space, Dreamweaver suggests the attributes of the <xsl:sort /> tag. Choose select and type dc:date as its value.
  • Type another space and select order from the list of suggested attributes. Choose descending for its value using the Dreamweaver code hints again.
  • Close the xsl:sort tag by typing />. The line should look like the following:
  • <xsl:sort select="dc:date" order="descending" />
Dreamweaver can really make coding XSL documents child's play. If you're not sure which function or XSL construct you need, you can always check out O'Reilly's XSLT Reference on the Reference panel by selecting Window > Reference and selecting O'REILLY XSLT Reference from the Book pop-up menu.

You can even copy-paste code samples from the Reference panel directly in your code.

Save the file and put your files to the server and preview them in your browser. You will see that the list of articles is sorted in descending order.

Creating a Detailed Display of the RSS Feed
The links to the Developer Center articles are okay, but what if you need a detailed page that displays all articles, grouped by subject, listing their descriptions and their authors? In this section, you will exercise your newly-acquired XSLT skills to create a detailed view of the RSS feed and you will learn how to use conditional regions to display specific content.

Follow these steps to create the XSLT fragment that displays the detailed view of the articles:

  • Select File > New to create a new XSLT fragment.
  • At the Dreamweaver prompt, attach the remote RSS feed, as described previously.
  • Save the page as all_articles.xsl.
  • Drag the following nodes from the XML tree in the Bindings panel and drop them onto your page, each on a new line:

    rss:title (from the rss:channel parent node).
    rss:description (from the rss:channel parent node).

  • Format the channel title as Heading 2.
  • Suppose your site focuses on Flash technology. Therefore, you would like to display Flash-related articles first, and all the others after under a separate heading. Type the following text below the channel description, on two separate lines:
  • Flash
  • Other Technologies
  • Format each of the two lines as Heading 3.
  • On a new line below the Flash heading, drag and drop the article title node (rss:title) from the rss:item parent node.
  • Link the article title to the corresponding resource, as described previously.
  • On the same line, insert an em dash after the article title from the Text tab of the Insert bar.

    Note: If the em dash button is not showing on the Insert bar, you may need to select it from the more characters menu at the right edge of the displayed characters.

  • Type by after the em dash, and then drag and drop the dc:creator node after it.
  • Place the mouse cursor at the end of the line and press Shift + Enter (Windows) or Shift + Return (Macintosh) to begin a new line immediately below it.
  • On the new line, drag and drop the article description node (rss:description) from the rss:item parent node..
In the next section, you will learn how to use conditional regions to group articles by topic.

Using Conditional Regions
To display only Flash-related articles under the Flash heading, you need to define a conditional region. I discussed the XSL syntax for building conditional regions in my previous article, XSL Overview.

Now you will learn how to do this visually, using the visual XML authoring features in Dreamweaver 8:

  • Select the paragraph containing the article details by clicking the corresponding <p> tag from the Tag Selector.
  • Go to the XSLT tab from the Insert bar and click the Conditional Region button:
  • In the Conditional Region dialog box, type the following line:
  • contains(dc:subject,'Flash')
  • This is an XPath expression that returns true when the subject node contains the word "Flash." When this condition is satisfied, the article is displayed.
  • Click OK to dismiss the Conditional Region dialog box. Dreamweaver displays a gray border labeled xsl:if around the selected text.
To display all the articles about Flash, you need to loop through all the items from the RSS feed and evaluate the test condition each time using a repeat region. To do this, follow these steps:
  • Select the <xsl:if> tag in the tag selector.
  • Apply a repeat region, as I explained earlier in this article.
  • Save your page and preview it in the browser. Yours will probably have more articles since there have been more Flash articles since the time of writing.
Before completing this XSLT fragment, you need to display the remaining articles under the "Other Technologies" heading:
  • Select the <xsl:for-each> tag from the Tag Selector.
  • Copy the selected content and paste it on a new line below the "Other Technologies" heading using the Copy and Paste commands from the Edit menu.
  • The conditional region must display only articles that do not contain the word "Flash" in their subject node. To do this, you need to change the test condition. Select the <xsl:if> tag corresponding to the second conditional region on the tag selector.
  • Dreamweaver displays the test condition for the selected region in the Property inspector.
  • Change the condition to this one:
  • not(contains(dc:subject,'Flash'))
  • This is simply the negation of the initial XPath expression. It says: "if the subject of the article does not contain the word Flash, then display the article."
  • Save the XSLT Fragment and upload it to your testing server.
To display the detailed feed in a dynamic page, you'll use the XSL Transformation server behavior again:
  • Open the homepage.html page and save it as a dynamic page, corresponding to your server model ColdFusion, PHP, ASP, ASP.NET.
  • Switch to Code View, select the code lines 19 to 28 and delete them, to remove the contents from the main area of the page.
  • Go back to Design view, and place your mouse cursor inside the empty <div> tag that should display the content:
  • Apply the XSL Transformation server behavior.
  • Save your page and upload all files on your testing server. Preview the page in the browser and view the results:
Where to Go from Here
In this article, you have learned how to use Dreamweaver 8 to consume a remote RSS feed in your dynamic pages, and process it in various ways. With the visual XML authoring features, you can now easily display XML data, define repeat and conditional regions, and build complex XPath expressions. The ways you can use XML and XSL in your web applications are only limited by your imagination. The following articles can give you more clues:
  • In the article, Displaying XML Data, Jon Varese walks you through using client-side XSL transformations to process XML documents.
  • John Skidgel shows how a restaurant website can use XML and XSL to display its daily menu, in his article, Creating XSLT Fragments for Server-Side Transformations.
  • Check out the Dreamweaver XSL FAQ.
  • Visit the Dreamweaver Developer Center XML and XSL category page for more resources on learning XSL transformations.
You can learn more about the RSS tools out from this article on RSS validators, aggregators, and clients. If you need a tool for creating your own RSS feeds, check out MX RSS Reader-Writer, a Dreamweaver extension from InterAKT Online.

More Stories By Marius Zaharia

Marius Zaharia is the documentation manager at InterAKT Online, a developer of professional tools for dynamic web development. When he's not writing articles and tutorials to guide web developers, he enjoys learning new things and exploring new technologies. His interests range from web development to politics and avantgarde electronic music.

Comments (3) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Matt 09/05/07 06:15:53 PM EDT

Samples Files Missing

john wright 09/19/06 12:47:21 PM EDT

hi i can't find the sample files for this tutorial. could someone please help me out.

regards

John

Sys-Con Brasil News Desk 03/31/06 12:44:18 PM EST

Macromedia Dreamweaver 8 is a major breakthrough for XML development, just as Dreamweaver MX 2004 was for CSS. The development team behind this release decided to offer people the entry-point support they needed to tackle XML and XSL-based web projects. The approach Dreamweaver 8 takes to XML and XSL is no surprise