Creating an XSLT Fragment
You'll start by creating an XSLT fragment that displays the article headings in the Related Articles area of the mock-up site:

• Download and unzip the tutorial sample files in your site root (the site must be running a ColdFusion, PHP, ASP or ASP.NET testing server). The sample files are linked at the beginning of this article. Check out How to define a site in Dreamweaver (TechNote 14028) for instructions on correctly defining your site.
• Open the homepage.html page in Dreamweaver 8.
• Select the list under the Related Articles heading, by putting your cursor in the that area of the page and clicking the corresponding <ul> tag form the tag selector:
• Press Delete to remove this section. You will later replace it with the Developer Center headlines.
• Select File > Save As and save the current page as homepage.cfm, homepage.php, homepage.asp, or homepage.aspx, depending on your server model.
• Select File > New and in the displayed dialog box (Figure 1), select Basic Page > XSLT (Fragment), and click Create. Dreamweaver prompts you to associate an XML file as the data source for the new XSLT fragment.
• Select "Attach a remote file on the Internet" and paste the following URL in the text box:
• http://weblogs.macromedia.com/dev_center/index.rdf

  Note: Make sure you remove the http:// text before pasting the URL so those characters are not duplicated in the URL.

• Click OK to attach the XML source. Notice that a tree-like representation of the RSS feed is displayed in the Bindings tab of the Application panel (If you cannot see the Bindings tab, select Window > Bindings).

  Note: You will need to be connected to the Internet for a remote RSS feed to populate the Bindings panel.

• Dreamweaver uses the following symbols to display XML trees:
  <> for an element that appears exactly once within its parent node
  <>+ for an element that appears one or more times within its parent node
  <>? for an optional XML element
  @ for an XML attribute
  
• Save the file as headlines.xsl.

The XSLT fragment that you will create next will display the article titles and their authors. The titles will be linked to the actual articles from the Developer Center.

You can achieve this by dragging and dropping from the Bindings panel:

• Drag the rss:title node (having the parent rss:item) from the XML tree and drop it onto the page. Dreamweaver inserts an XML data placeholder in your page, which is, in fact, the XPath expression corresponding to the node.
• Note: You must use the rss:item node from the rss:item parent node and not from the rss:channel parent node.
• Place the mouse cursor after the XML placeholder and press Shift-Enter (Windows) or Shift-Return (Macintosh) to begin a new line immediately below it.
• Type by on the new line and press the spacebar.
• Drag the dc:creator node from the Bindings panel and drop it after "by."
• Preview the page in your browser using F12 (Windows) or Option + F12 (Macintosh). It is pulling the latest article added to the Developer Center RSS feed and the feed is updated regularly, so your browser will display a different article than the one shown here.

Notice that Dreamweaver automatically generates a temporary file for previewing the transformation results. However, this is neither a client-side, nor a server-side transformation. Dreamweaver internally does the transform using its built-in XSLT processor and generates a temporary file for preview purpose. Dreamweaver is performing the translation. You will apply the actual server-side transformation later on in this tutorial. Also notice that the CSS styles that are applied to the homepage are not available in the transformation. They will be after you include the XSLT fragment in the homepage. Finally, notice that only one article is displayed in the transformation result page. To display all the articles from the feed, you need to create a repeat region that loops through all the items in the feed and displays them.

Creating the Repeat Region
To display all the articles from the RSS feed, follow these steps:

• In Dreamweaver Design view, select the title and creator elements as well as the "by" text from the headlines.xsl document and right-click them (Control-click on Mac).
• From the displayed menu, select Paragraph Format > Paragraph. This will display each article as a new paragraph. Paragraph may already be selected in the contextual menu.
• Go to the XSLT tab from the Insert bar, and click the Repeat Region button.
• Note: The default view for the Insert bar is menu view. If you are in menu view, select Show as Tabs from the list of Insert bar options. If you are in Tab view, right-click (Control-click on Mac) any of the tabs and select Show as Menu.
• In the XPath Expression Builder dialog box, select the repeating node that you want to loop through, which is rss:item. Be careful not to confuse this with the rss:items node.
• Click OK. Notice that Dreamweaver displays a gray border labeled xsl:for-each, around the selected text, to indicate a repeat region.
• Save your page and preview it in a browser. Again, since the Developer Center resource feed is updated regularly, the list of articles will be different.

Again, Dreamweaver is doing the XSL transformation and displaying the result in a temporary HTML file. In the next section, you'll learn how to link each article to its corresponding URL, provided via the RSS file.

Creating Links with XSL
To link the title of each article to the corresponding resource on the acromedia Developer Center, follow these steps:

• In the headlines.xsl page, select the XML data placeholder for the article title.
• In the Property inspector, click the folder icon next to the Link text box, to define a link on the selected text.
• Select the Data Sources option in the Select file name from section of the Select File dialog box.
• Each article title should point to the URL contained by its rss:link node.
• Select the rss:link node from the XML tree. Be sure to select the rss:link node under the rss:item parent node and not the rss:link node under the rss:channel parent node.
• Click OK. Dreamweaver generates the link.
• Save the page and preview it in the browser.

Click on the links to test it out. In the next section, you will apply the XSL Transformation server behavior to display the articles on the homepage.

Applying a Server-Side XSL Transformation to the RSS Feed
To list the Developer Center articles in the Related Articles section of your homepage, follow these steps:

• Open the dynamic homepage file (PHP, ASP, or ColdFusion page) you created earlier in the tutorial.
• Place the mouse cursor below the "Related Articles" heading.
• Go to the Application tab/menu on the Insert bar, and click the XSL Transformation button.

  Note: You can access the same command from the Server Behaviors tab, as well.

  Note: If you are working on a ColdFusion server, Dreamweaver might prompt you to specify a RDS login password. Type in the password or contact your network administrator, if you don't know it.

• In the XSL Transformation dialog box, click the Browse button next to the XSLT file text box. Then browse to and select the headlines.xsl file. Notice that Dreamweaver automatically detects the associated XML data source and fills in the XML URI text box.
• Click OK to apply the transformation. Dreamweaver displays the XSL fragment directly in your dynamic page. It also generates a folder called "includes" in your site root. This folder contains the library that performs the server-side transformation and must be uploaded on your testing tester. Notice that the CSS styles from the stylesheet attached to the home page are automatically applied to the imported XSL fragment.
• In the Files panel, find the includes folder Dreamweaver created and upload it to your server.
• Save the page and display it in the browser (Make sure you have uploaded the "includes" folder to your testing server).

What Is Really Happening
Dreamweaver generates a runtime library file that is used by the application server to process the XML data and output HTML content to the client's browser. The runtime library is the file in the includes folder. The XSLT fragment, the dynamic page containing it, and the runtime library from the "includes" folder must all be on the server for your page to display correctly. To review the server-side transformation workflow, visit this section of my previous article.

Notice that all the items from the RSS feed are displayed. If the feed has 10 or 20 articles, this may lead to a very long home page, which might interfere with your design requirements. In the next sections, you will learn how to limit the number of items that are displayed from an RSS feed using parameters and you will learn how to sort items.

Using Parameters in an XSL Transformation
The processed RSS feed currently displays several articles on the homepage. Suppose you only want to list the latest four articles from the Developer Center. To do this, you need a parameter that tells the XSL transformation to display only the first four items. Here are the steps to do that.

• Open the headlines.xsl page and click inside the XSL Repeat Region.
• Select the <xsl:for-each> tag from the tag selector.
• In the Property inspector, click the lightning bolt icon to define the condition that displays only the first four items:
• In the XPath Expression Builder dialog box, click Build Filter, then click the plus (+) button to define a new XPath condition. See the section in my article, XSL Overview, for a review of XPath.
• Edit the default condition in the Where field. Select that field and type position(). In the Operator menu, select <= (less or equal). Finally, in the Value field, type $ItemsPerPage.
• The position() function returns a number equal to the position of the current node. This value must be less or equal than the value specified by the ItemsPerPage parameter. You will define this parameter later, in your dynamic home page file.
• Click OK to apply the condition.
• Save the XSL document, and preview it in the browser using F12 (Windows) or Option + F12 (Macintosh). Your browser will throw an error similar to this one:
• XSLT Error: The variable ŒItemsPerPage' is not defined.Source tree node: #document.
• This is because Dreamweaver performs the XSL Transformation internally, using nothing but the XSLT fragment you have created and the XML source file. The ItemsPerPage parameter that you have used to limit the number of displayed items is defined in xslt page, but its value is passed to the XSLT page by a dynamic page (homepage.php, homepage.asp, homepage.aspx, or homepage.cfm). To make the browser preview work and to get used to the code hints in Dreamweaver 8, type the following line of code in the headlines.xsl file right before the xsl:template tag:
• <xsl:param name="ItemsPerPage" select="4" />
• This code defines the value of the ItemsPerPage parameter and gives it a default value of 4.

  Note: The default value of the ItemsPerPage parameter specified in the XSLT fragment will be ignored at run-time, when the server-side transformation is performed. The value specified in the XSL Transformation server behavior will be used instead.

  You can now preview the XSLT fragment in your browser without errors.
  

• Switch to the homepage dynamic page.
• In the Server Behaviors tab from the Application panel, double-click the XSL Transformation server behavior to edit it.
• Dreamweaver opens the XSL Transformation dialog box. In the XSLT Parameters area, click the XSLT parameters plus (+) to define a new parameter.
• Select ItemsPerPage from the Name pop-up menu, and type 4 for its value.
• Click OK. If 4 appears with double quotes around it in the XSL Transformation dialog box, click the Edit button, remove the quotes, and click OK.
• Click OK again to dismiss the XSL Transformation dialog box. Save your page and preview it in your browser. Make sure you have uploaded the headlines.xsl, homepage file and includes folder to your testing server.