XSLT is used to provide layout and formatting instructions for XML pages. Unlike CSS, XSLT can be used to generate HTML pages that include both XML data and formatting information. It can be used on either the client side or the server side. When you use XSLT on the client side, the browser (client) does the work of transforming the XML and XSLT. When you use XSLT on the server side, the server does the transformation.
The main advantage of using client-side XSLT is that you don't need an application server. The disadvantage is that you must use XML files that reside on your Web server. If you're using a remote XML file, such as a news feed, you will have to download the remote file and then upload it to your server every time you want to update the information. Another disadvantage of client-side XSLT is that it requires a browser that supports XSLT (Microsoft Internet Explorer 6, Firefox 1.0.2 or later, Netscape 8, Safari 2.0, or Mozilla 1.8 or later). Still, if you don't want to use an application server and you create your own XML files or use remote XML files that don't change very often, client-side XSLT is a good choice.
In the exercises in this section, you'll convert an HTML page to an XSLT page, add an XML file as a data source, and bind the XML data to the XSLT page. You'll also add an XSLT Repeat Region object so that you can display groups of data on the same page, and attach the XSLT page to the XML page.
You'll need the files in the Studio8 HTML folder for the exercises in this section. You can download them from the Web site for this book, at www.peachpit.com/dw.vqp.
To convert an HTML page to an XSLT page:
Open Studio8.html in Dreamweaver.
From the main Dreamweaver menu, choose File > Convert > XSLT 1.0 (Figure 14.12).
Figure 14.12. You can convert an HTML file to an XSLT 1.0 file from the File menu.
Dreamweaver converts Studio8.html to Studio8.xsl.
In the Application panel group, click the Bindings tab to access the Bindings panel. Click the XML link (Figure 14.13).
Figure 14.13. Click the XML link on the Bindings panel to attach an XML data source to the XSLT page.
The Locate XML Source dialog appears (Figure 14.14).
Figure 14.14. Use the Locate XML Source dialog to select an XML page as a source of data for the XSLT page.
Select the "Attach a local file on my computer or local area network" radio button, and then click the Browse button and browse to the location of the Studio8.xml file.
Click OK to close the dialog and attach the XML file.
Dreamweaver's Schema for Studio8.xml appears on the Bindings panel (Figure 14.15). The schema shows the structure of the XML document. Studio8 is the root element. The plus (+) next to item indicates that this is a repeating element.
Figure 14.15. The structure of the attached XML file is shown on the Bindings panel.
Save the page.
You've converted an HTML page to an XSLT page and added an XML data source.
In the next task, you'll replace the static content of the table on the page with dynamic content using XML data placeholders.
To bind XML data to an XSLT page:
Open Studio8.xsl, which you created in the preceding exercise.
In Design view, place the insertion point in the last row of the table. In the Tag selector at the bottom of the document window, click the right-most tr tag to select the row (Figure 14.16). Press Delete.
Figure 14.16. To select the bottom row, click the tr tag that is farthest to the right in the Tag Selector.
Repeat Step 2 for the next three bottom rows of the current table (the Flash Professional, Fireworks, and Contribute rows).
In the Dreamweaver row, select the content in the first cell and press Delete. Repeat for the content in the second and third cells.
Your table now has two rowsone row with column headings and one empty row (Figure 14.17). You're now ready to add XML data placeholders to make this a dynamic table.
Figure 14.17. After deleting the bottom four rows and removing the content in the second row, your table has a row of column headers and an empty row.
On the Bindings panel, select name (Figure 14.18) and drag it to the first cell in the second row of the table.
Figure 14.18. Create an XML data placeholder by selecting name in the Bindings panel and dragging it to the first cell in the second row of the table.
An XML data placeholder appears (Figure 14.19).
Figure 14.19. The first cell in the second row contains a placeholder for XML data.
Drag version to the second cell, and description to the third cell.
XML data placeholders appear in the second and third cells (Figure 14.20).
Figure 14.20. All the cells in the second table row now include XML data placeholders.
Save the page.
Choose File > Preview in Browser to see one row of XML data on your XSLT page (Figure 14.21).
Figure 14.21. One row of XML data appears in the table when you preview the XSLT page in a browser.
To display groups of data on the same page:
Open the Studio8.xml page you saved from the previous exercise.
In Design view, select the row in the table with the XML data placeholders (Figure 14.22).
Figure 14.22. Select the row with the XML data placeholders.
From the Insert menu, select XSLT Objects > Repeat Region.
Adding an XSLT Repeat Region object lets you display multiple rows of dynamic data in the table.
The XPath Expression Builder dialog appears (Figure 14.23).
Figure 14.23. Use the XPath Expression Builder dialog to select a repeating XML element for an XSLT Repeat Region.
Select the item repeating element. (Repeating elements are indicated by the small, superscript plus (+) sign to right of the angle brackets.) Click OK to close the dialog and insert the Repeat Region behavior.
In Design view, the length of the XML data placeholders is now shortened. Dreamweaver updates the XPath code for the XML data placeholders so that it's relative to the location of the repeating element. For example, the XML data placeholder for the name element prior to adding the Repeat Region object is Studio8/item/name (Figure 14.19). After adding the Repeat Region object, it's shortened to name (Figure 14.24).
Figure 14.24. After adding an XSLT Repeat Region, the names of the XML data placeholders are shortened.
Save the page and preview it in a browser. Multiple rows of XML data now display in the table (Figure 14.25).
Figure 14.25. Multiple rows of XML data appear in the table after you add an XSLT Repeat Region object.
You've added a Repeat Region XSLT object to show multiple rows of XML data in a table. In the next exercise, you'll attach the XSLT page to the XML page.
For more information on data transformations in Dreamweaver, see "About previewing XML data" in Dreamweaver Help (F1).
You can use the XSLT Insert bar instead of the Insert menu to add XSLT objects to your page. Anytime you have an XSLT page open in Dreamweaver 8, the XSLT Insert bar can be accessed from the Insert bar drop-down list.
To attach an XSLT page to an XML page:
Open the Studio8.xsl page from the previous exercise.
In the Application panel group, click the Bindings tab to access the Bindings panel. Double-click Schema for Studio8.xml to open the Studio8.xml file.
This XML page is the page that viewers see online. The XSLT page, which we'll attach to Studio8.xml, contains the formatting for the XML page. Up to this point, Dreamweaver has been transforming the XML data when you preview the XSLT page. Once you attach the XSLT page, the browser will perform the transformation.
From the main Dreamweaver menu, choose Commands > Attach an XSLT Stylesheet (Figure 14.26).
Figure 14.26. Use the Commands menu to attach an XSLT style sheet to an XML page.
The Attach an XSLT Stylesheet dialog appears (Figure 14.27).
Figure 14.27. Browse to the location of the XSLT file in the Attach an XSLT Stylesheet dialog.
Click the Browse button, and browse to the location of the Studio8.xsl file. Click OK to close the dialog and attach the style sheet.
Save the Studio8.xml page.
Preview the XML page in a browser (File > Preview in Browser).
The XML page displays, styled per the instructions in Studio8.xsl (Figure 14.28).
Figure 14.28. The Studio8.xml file viewed in Firefox with display formatting per the attached XSLT stylesheet, Studio8.xsl.