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:
Visual XSL transformations using drag and drop from the Bindings panel.
- Easy-to-use objects accessible from the Insert bar.
- Code highlighting and code completion functions for the more experienced developers.
Jen Taylor presents a brief overview of the new XML/XSL features in Dreamweaver 8 in her article, "Dreamweaver 8 New Features and Benefits." In this article, I use the new XML features in Dreamweaver 8 in a real-life situation: consuming a remote RSS feed using server-side XSL transformations. It is a useful exercise if you plan to include news headlines, articles lists, blog posts, or other syndicated content in your personal website, in a portal, or company site.
Dreamweaver 8: Workspace Orientation
First, I'll take you on a quick tour of the new XML authoring features in Dreamweaver 8 to help you become familiar with the workspace.
Creating XML and XSL Documents
With Dreamweaver 8, you can create XML and XSL documents from scratch, just as you would create any other type of page. Open Dreamweaver 8 and select File > New. The New Document dialog box appears.
Notice that you can also create XSLT fragments that you can later use to process XML data in your dynamic pages. An XSLT fragment is a file that does not contain the <head> and <body> tags like a full XSLT page. It is a simple piece of code that is later inserted in a dynamic page.
If you already have a static site set up and want to go dynamic, you can easily convert (Figure 2) HTML pages into XSL templates, from the File menu by selecting File > Convert > XSLT 1.0.
Visual Authoring
The best thing about Dreamweaver 8 is that you get a smooth landing if you plan to take up XML development. You can see a tree-like representation of the XML data source that you're using, right in the Bindings panel:
You can drag nodes from the tree and drop them onto your XSL stylesheet, as you will learn later in this article.
You can use any of the objects from the XSLT tab on the Insert bar to display repeating nodes, define simple or multiple conditions, and comment your code.
Towards the end of this tutorial, you'll also learn how to use the XSL Transformation server behavior (from the Application panel) in your dynamic pages to process and display XML data:
Coding Made Easy
If you'd like to tweak the code or try some XSL tricks of your own, you can do this painlessly using the code hints and code auto-completion features in Dreamweaver 8.
You'll discover and master all these features in no time, as you follow this tutorial.
Application Scenario
In this article, you will consume Macromedia's RSS feed (available here: weblogs.macromedia.com/dev_center/index.rdf) in a mock-up site that can be anything from a blog, to a company site, or a personal site. Macromedia makes its Developer Center resources available to the public as an RSS feed. It is a great way to display the latest articles from Macromedia right in your site and let other developers know about them.
In this tutorial, you will:
- Understand RSS feeds and syndication
- Connect to the Macromedia Developer Center's remote RSS feed
- Process the RSS feed with XSLT using the new features in Dreamweaver 8
- Apply a server-side XSL transformation to include the feed in your mock-up site, under the "Related Articles" section of the generic page. Dreamweaver 8 supports server-side XSL transformations for ColdFusion, ASP, ASP.NET, and PHP pages.
What Is Syndication?
Web syndication is a popular method of making content available to other websites simultaneously. Syndication is achieved using web feeds or channels, which are written in a variety of standards RSS 0.9, 1.0, 2.0, or Atom. Despite the differences between the various standards and specifications, it is important to keep in mind that all feeds are actually XML documents that contain list-oriented information. The site that makes its content available as a source of information is said to "publish a feed," while the sites that republish that content are said to "consume the feed."
Any information on your site that visitors might be interested in reusing is a good candidate for an RSS feed. This includes news headlines, article lists, press releases, job listings, bookmarks, conference events, playlists, or software releases.
The benefits of syndication are obvious:
- Imported content is updated automatically when the remote feed changes.
- Content is made available to more people, as sites republish the same feed over and over. For instance, Macromedia's Developer Center resources are made available by DreamweaverFAQ.com, dopostback.com, actionscript.it, and edcox.net.webwatch.
- Content is served in a format that matches your site's look and feel. Notice how differently the same information is displayed in the websites above.
What's in an RSS Feed?
RSS is just another flavor of XML. The term "RSS" is actually used to refer several different formats that are used in parallel, and therefore can have different meanings:
- RSS 0.9x: In these versions, it stands for Really Simple Syndication.
- RSS 1.0: Includes RDF, a W3C standard for meta data. In this version, RSS stands for RDF Site Summary. RSS 1.0 also incorporates the Dublin Core Module, a standardized set of meta data used to describe both the feed and the individual items.
- RSS 2.0: This is the latest version, which does not include RDF.
If you feel baffled by all the different versions and standards available for RSS, don't worry: they are similar enough that you can treat them as simply any other XML document.
Note: If you want to learn more about the differences between various RSS dialects, check out this article from the O'Reilly XML.com site.
An RSS feed is made up of a channel, which has a title, a link, and a description followed by a series of itemseach of which have a title, a link, a description and an optional author and publishing date. To see what I mean, download a copy of the Macromedia Developer Center RSS feed and open it in Dreamweaver 8.
Notice how Dreamweaver 8 uses code coloring to make the document easier to read:
- Tags and attributes are blue
- Attribute values are green
- Content is displayed in black
The document starts with an XML declaration followed by the RSS declaration, which includes references to the RDF namespace, the Dublin Core Module namespace, and the RSS namespace.
For a reminder of namespaces, revisit this section of my previous article, XSL Overview.
The channel node contains generic information about the RSS feed: title, link, and a short description:
<channel rdf:about="http://www.macromedia.com/devnet/">
<title>Macromedia Developer Center RSS Feed</title>
<link>http://www.macromedia.com/devnet/</link>
<description>Macromedia Developer Center is your center for the tutorials, articles, and sample applications you need to
master Macromedia products. </description>
Also included in the channel node is a table of contents for the current feed, specified by the items element. This is actually an ordered list of links to the Developer Center articles. To indicate that the order is important, a sequence container is used: rdf:Seq. The items in the sequence are specified by rdf:li elements.
<items>
<rdf:Seq>
<rdf:li
rdf:resource="http://www.macromedia.com/devnet/mx/flashcom/articles/comm_components.html" />
<rdf:li
rdf:resource="http://www.macromedia.com/devnet/mx/flashcom/articles/flv_bestpractices.html" />
<rdf:li
rdf:resource="http://www.macromedia.com/devnet/mx/flashcom/articles/dyn_buffering.html" />
<rdf:li
rdf:resource="http://www.macromedia.com/devnet/mx/coldfusion/articles/adv_flashforms.html" />
</rdf:Seq>
</items>
Notice that each item's rdf:resource URL must be the same as the associated item element's rdf:about URL, much like in a table of contents, where each chapter is located at a specified page number.
Note: Items appearing in the feed but not as members of the channel's table of contents are likely to be discarded by RDF parsers.
Finally, the actual Developer Center articles are listed in the feed, as item elements. An item is made up of a title, a link, a description, a subject (which indicates the topic covered by the article), an author, and a publishing date:
<item
rdf:about="http://www.macromedia.com/devnet/mx/flashcom/articles/comm_components.html">
<title>Building Communication Components</title>
<link>http://www.macromedia.com/devnet/mx/flashcom/articles/comm_components.html
</link>
<description>This book excerpt from O'Reilly describes the first major step in building a
full-fledgedapplication.</description>
<dc:subject>Flash Communication Server</dc:subject> <dc:creator>Brian Lesser</dc:creator>
<dc:date>2005-07-25T17:31:46-08:00</dc:date>
</item>
Now that you have learned how to read the code that makes up an RSS feed, you can start processing it to display the articles in your site.
Subscribe to Adobe Flex Journal Email News Alerts
Subscribe via RSS
