Using the XSL Transformation server behavior is a two-stage process, as follows:
1.Create an XSLT fragment to access the XML source, and extract the data that you want.
2.Embed the XSLT fragment in a PHP page.
The following instructions use the BBC Online world news feed. The principles behind dis- playing any XML source are the same, but I suggest you use the same feed until you are comfortable with the process, because some of the concepts might be unfamiliar.
Because you are working with a live feed, you need to be connected to the Internet for several steps during the following section.
1.From the Dreamweaver Filemenu, choose New. In the New Documentdialog box, select Blank Page, and XSLT (Fragment)as Page Type. Click Create.
2.Dreamweaver immediately presents you with the Locate XML Sourcedialog box shown here. It offers two options: to work with a local XML file or to work with a remote one on the Internet. Select the radio button labeled Attach a remote file on the Internet, and insert the following URL: http://newsrss.bbc.co.uk/rss/
newsonline_world_edition/front_page/rss.xml. Click OK.
You must use XSLT (Fragment)in the New Documentdialog box. Do not use XSLT (Entire page)in the Dreamweaver welcome screen or the New Documentdialog box. The option for XSLT (Entire page)is used only for client-side XSLT. For a tuto- rial on client-side XSLT, visit http://www.adobe.com/devnet/dreamweaver/
articles/display_xml_data.html.
Creating the XSLT fragment
3.If you don’t know the URL of the XML file, clicking Cancel doesn’t stop Dreamweaver from creating a page for the XSLT fragment. You can reopen the Locate XML Source dialog box by clicking either Source or XML in the Bindings panel, as shown here:
4.As long as you are connected to the Internet, Dreamweaver will contact the BBC Online site and populate the Bindingspanel with a document tree like that shown in Figure 18-3. This shows you the structure (Dreamweaver uses the technical term, schema) of the XML document sent by the RSS feed.
5.Before working with the XML data, save the page as bbc_feed.xslin workfiles/
ch18. On Windows, Dreamweaver will automatically add the .xslon the end of the file name, even if you delete it in the Save Asdialog box.
Figure 18-3.
Dreamweaver builds a tree (or schema) of the XML source in the Bindings panel.
Take a good look at Figure 18-3 or the actual schema in your own Bindingspanel. You’ll see that it’s like a family tree. The angle brackets (<>) represent the different element nodes of the source document, with the name shown alongside. The top level or root element of the XML document is rss. As you go up and down the structure, nodes share a parent- child relationship. Go up a level to reach the parent; go down a level to reach the child or children. This genealogical terminology also extends to nodes on the same level, which are called siblings. So, item is a child of channel and a sibling to image. Dreamweaver builds this diagrammatic hierarchy to make it easier for you to identify the elements you want to manipulate, and XSLT uses it as a sort of road map to perform the transformation.
Attributes that appear within XML tags are designated by @. So at the top of Figure 18-3, you can see that rsshas two attributes: versionand xmlns:media. The channeland image nodes contain child nodes that describe the feed. The news comes further down: in the eighth element node from the bottom labeled item.
The important thing to note about itemis that it has a tiny plus sign to the upper right of the angle brackets. This indicates that it’s a repeating element.
Branching off item are seven child nodes: title, description, link, guid (with an attribute isPermaLink), pubDate,category, and media:thumbnailThe ones we are interested in are title, which contains the headline; description, which contains a summary of the news story; and link, the URL to the full story.
6.Make sure you’re in Design view, select title from the item node in the Bindings panel, and drag it into the page.
7.You should now see a dynamic placeholder inside the page. The placeholder indicates the path to title within the hierarchy of the XML document. Select the placeholder and select Heading 3 from the Format drop-down menu in the HTML view of the Property inspector. The page should now look like the screenshot alongside.
8.Click to the right of the dynamic placeholder, and press Enter/Return to insert a new paragraph. Highlight description in the item node, and drag it into the para- graph that you have just created. You should now have a similar dynamic place- holder for {rss/channel/item/description}.
9.The news feed contains a large number of news items, so you need to apply a repeat region to it. The simplest way to do this would have been to put the news feed into a table or surround each item with a <div>, but either solution results in unnecessary code. Open Split view, and click inside Code view to highlight all the
It’s very easy to go wrong when selecting nodes, because several share the same name. There are three nodes each called titleand link, and there are two called description. All the nodes that you need to select are children of the itemrepeating node.
18
code from the opening <h3>tag to the closing </p>tag, as shown in the following screenshot:
Don’t worry about the meaning of the code. It’s simply the XSLT way of inserting dynamic data in the same way as PHP does with echoand a variable. Just make sure that the opening and closing HTML tags are properly selected.
10.Look at the Insertbar. You’ll see a new XSLTtab has appeared. It’s displayed only when the current document is an XSL file. Select the XSLTtab, and click the Repeat Regionbutton as shown here. Alternatively, use the menu option: Insert ➤ XSLT Objects ➤Repeat Region.
11.This brings up a completely different dialog box from the one you used with the PHP server behavior. It’s the XPath Expression Builder.
XPathis the W3C standard that describes how to identify parts of an XML docu- ment. In many ways, it’s very similar to ordinary file paths and URLs, but it has many more options (http://www.w3.org/TR/xpath), including functions. The XPath Expression Builder incorporates a lot of these functions and builds an XPath with the correct syntax for you.
All you need to do is highlight the parent node of the elements that you want to repeat—in other words, item. In the XPath Expression Builder (Repeat Region)dialog box, scroll down to the bottom of the section labeled Select node to repeat over, and select item. Dreamweaver inserts rss/channel/iteminto the Expressionfield at the bottom. Click OK.
12.When the XPath Expression Builder closes, the dynamic placeholders will have changed to just the node names. This is because the XPath expression created in the previous step tells the underlying XSLT code where to find them. There will also be a gray border around the placeholders with a tab labeled xsl:for-eachat the top-left corner, as shown alongside, indicat- ing that this is now a repeat region.
13.Save bbc_feed.xsl, and press F12/Opt+F12 to view the page in a browser. If you are connected to the Internet, you should see something like Figure 18-4, except with the very latest headlines, not something from all those months ago when I was writing this book.
Look in the browser address bar, and you’ll see that Dreamweaver is using a temporary file, even if you have set your preferences not to use temporary files.
You can’t use an XSLT fragment in a browser on its own, and you can’t use Live view, but Dreamweaver processes it internally so you can check that everything is working as expected before embedding it into a PHP file.
You can check your code against bbc_feed_01.xslin examples/ch18.
18
Figure 18-4.Dreamweaver uses a temporary file to confirm that the XSLT fragment is working as expected.
As part of the BBC conditions of use, you must either provide a link back to the complete story or insert a link to the part of the BBC site from which the feed was drawn. Since the XML source contains a link node (see the schema in Figure 18-3), it’s easy to provide a link to each story by converting its headline into a link.
Continue working with the XSLT fragment from the previous exercise. Alternatively, use bbc_feed_01.xslin examples/ch18.
1.In Design view, select the titledynamic placeholder, and click the Browse for File icon to the right of the Linkfield in the HTMLview of the Property inspector.
2.When the Select Filedialog box opens, choose Data sourcesas the option for Select file from. (It’s a radio button at the top of the dialog box in Windows but an ordinary button at the bottom of the dialog box in the Mac version.) Scroll down inside the area labeled Select node to display, and select link, as shown in the following screen- shot. Leave the other options at their default settings, and click OK.
Converting the headlines into links
When testing XSLT fragments, you might see the temporary files listed in the Dreamweaver Filespanel. This is nothing to worry about. Dreamweaver automatically clears them up.
3.Look in the Linkfield in the Property inspector. It should contain {link}, indicating that it will draw its value from the link node in the XML source.
4.Save bbc_feed.xsl, and press F12/Opt+F12 to test it again. This time, the headlines should have been converted to links. Click one of them to check that it takes you to the relevant story on the BBC website.
You can check your code against bbc_feed_02.xslin examples/ch18.
The BBC news feed normally contains 20 or more items. Unlike the Repeat Region server behavior, the XPath Expression Builder (Repeat Region)dialog box has no option to limit the number of items displayed. Instead, you need to use an XSLT conditional region, as shown in the following exercise.
Continue working with the XSLT fragment from the previous exercise. Alternatively, use bbc_feed_02.xslin examples/ch18. The following instructions show you how to limit the page to displaying the first five items.
1.Open Split view, and click in Code view to select all the code from the opening
<h3>tag to the closing </p>tag in the same way as in step 10 in “Creating an XSLT fragment.” Then click the Conditional Regionbutton in the XSLTtab of the Insert bar, as shown in the following screenshot (or select Insert ➤ XSLT Objects ➤ Conditional Region):
2.The Conditional Regiondialog box contains just one field, Test. Enter the following code, and click OK:
position() <= 5
XSLT uses the position()function to determine a node’s position in the XML hier- archy. Unlike PHP or JavaScript, it begins counting at 1, so you need to use <= 5to display the first five items.
3.Save bbc_feed.xsl, and press F12/Opt+F12 to test it again. This time, just the first five items should be displayed. You can check your code against bbc_feed_03.xsl.
Dreamweaver places another gray border around the dynamic placeholders in Design view, with an xsl:iftab at the top-left corner. Confusingly, Dreamweaver positions the xsl:if tab above the repeat region’s xsl:for-each tab, giving the incorrect impression that the Restricting the number of items in an XSLT repeat region
18
repeat region is nested inside the conditional one. In Figure 18-5, the conditional region has been selected by clicking the xsl:ifgray tab. As you can see, lines 18–21 are highlighted in the underlying code. The code that controls the repeat region is on line 17, and the closing tag of the repeat region is on line 22. If in doubt about the order of code, check the Tag selector at the bottom of the Document window, because it always displays the correct hierarchy of parent and child tags.
Figure 18-5.XSLT uses <xsl:if> tags to create a simple conditional region.
As you can see on line 18 of Figure 18-5, Dreamweaver has converted the less-than oper- ator from <to <. XSLT follows the rules of XML and cannot use < within the test attribute value. Although it looks strange, it’s the way that XSLT expects it. More impor- tant, it works!