| By Marius Zaharia | Article Rating: |
|
| March 31, 2006 12:15 PM EST | Reads: |
25,515 |
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" />
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..
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.
- 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.
- 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.
- 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:
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.
Published March 31, 2006 Reads 25,515
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
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.
![]() |
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 |
||||
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Adobe Flex Developer Earns $100K in New York City
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- Ph.D. in Twitter Anyone?
- Eolas Sues the Internet
- Adobe LiveCycle Enterprise Suite 2 for Cloud Computing
- Adobe Betas Target RIAs and Cloud Computing
- Special Report on the Emerging Cloud Computing Trend
- Adobe Cans Another 9% of its Workforce
- My Thoughts on Ulitzer
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Ulitzer Live! New Media Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Eval JavaScript in a Global Context
- Fig Leaf Software to Exhibit at Government IT Conference & Expo
- Cloud Executives Feature on Cloud Computing Expo Power Panel
- Software Flexibility in the Cloud - Part 4 of 5
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Is Microsoft as Free as Open Source?
- Adobe Reader Sued
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Where Are RIA Technologies Headed in 2008?
- Cover Story: How to Increase the Frame Rates of Your Flash Movies
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Your First Adobe Flex Application with a ColdFusion Backend
- Adobe Flex 2: Advanced DataGrid
- i-Technology Blog: Death-Knell For "Rich Media? Hardly!
- Adobe/Macromedia - Microsoft, Look Out!
- How To Create a Photo Slide Show ...
- Adobe Flex Interface Customization - Themes, Styles, Skins
- Personal Branding Checklist
- Has the Technology Bounceback Begun?
- "Real-World Flex" by Adobe's Christophe Coenraets





































