Using XSL Filtering in Dreamweaver 8

Binding XML data to a web page

Before I dive into the actual filtering of data, it is important to review how you actually get that data into Dreamweaver. Let's say you have a data feed that displays upcoming events on a website. The data might look like the following (of course, this is sample material, so don't show up at these locations expecting to find me there!):

<?xml version="1.0" encoding="ISO-8859-1"?>
<events>    
    <item>
      <title>Introducing Studio 8</title> 
      <link>http://www.somewhere.net/060805.html</link> 
      <description>Experience the newest web tools from Adobe Systems, live and in person</description>
      <date>August 5, 2006 | 7:00 pm</date> 
      <location>San Francisco, CA</location>
    </item>
    <item>
      <title>Understanding CSS</title> 
      <link>http://www.somewhere.net/060815.html</link> 
      <description>Learn all there is to know about CSS from industry experts</description>
      <date>August 15, 2006 | 7:30 pm</date> 
      <location>San Diego, CA</location>
    </item>
    <item>
      <title>Leveraging Flash Video</title> 
      <link>http://www.somewhere.net/060909.html</link> 
      <description>Video on the web - made easy with Flash</description>
      <date>September 9, 2006 | 8:00 pm</date> 
      <location>New York, NY</location>
    </item>
    <item>
      <title>Introducing Studio 8</title> 
      <link>http://www.somewhere.net/060824.html</link> 
      <description>Experience the newest web tools from Adobe Systems, live and in person</description>
      <date>August 24, 2006 | 7:15 pm</date> 
      <location>Boston, MA</location>
    </item>
    <item>
      <title>Leveraging Flash Video</title> 
      <link>http://www.somewhere.net/061002.html</link> 
      <description>Video on the web - made easy with Flash</description>
      <date>October 2, 2006 | 8:00 pm</date> 
      <location>Los Angeles, CA</location>
    </item>
</events>

As you can see, this is a well-formed example of XML data. The individual "event" entries are each defined by an <item> tag, and in turn, contain child nodes or tags identifying elements of the entry, such as <title>, <date>, <location>, etc. For the purposes of this demonstration, I will assume that the file itself is stored locally on the web server hosting our site and is named events.xml.

In order to bind this XML data into a web page, you first need to create an XSL document that will handle the transformation of the XML data into HTML. In Dreamweaver 8, this is as simple as creating or opening an HTML page and choosing File > Convert > XSLT.

With the XSL document saved—let's call it events.xsl—you can now bind the XML document to it using the Bindings tab of the Application panel. Select the XML link in the Bindings tab and point the dialog at events.xml (see Figure 1).

Figure 1. Specifying events.xml as the XML source for the events.xsl document

In the Bindings panel, Dreamweaver 8 now displays the tree structure of the XML document. You can simply drag placeholders for the data onto the XSL document. Place the items in the following order: <title>, <date>, <location>, <description> (see Figure 2).

Figure 2. Dragging the data placeholders on the page

If you were to preview the document in the browser at this point, you would, of course, see only a single entry. In order to display multiple entries, you can add a Repeat Region behavior by selecting all of the placeholders on the page and choosing the Repeat Region icon in the XSLT tools section of the Insert panel. Choose the <item> tag as the element to repeat (see Figure 3).

Figure 3. Applying a Repeat Region behavior

A quick preview in the browser now displays all of the entries from the XML data, which of course brings me to the subject at hand: how to filter out unwanted data from the page.

Page 2 of 3

Previous Page

Next Page