Creating XSLT Fragments for Server-Side Transformations

Exercise: Creating an XSLT Fragment

While an XSLT page generates a complete web page from an XML file, an XSLT fragment is a scrap of code that generates only a portion of a page. After you populate the XSLT fragment with the XML data, you reference it and the XML source inside an inserted XSLT fragment. This include file is then inserted into a dynamic page and placed on a server equipped with scripts for reading and transforming XML. When someone visits the dynamic page, the web server inserts the data from the XML file into this section of the page.

You begin this tutorial by creating an XSLT fragment.

1. Unzip and copy the tutorial folder to a site running ASP, ASP.NET, ColdFusion or PHP. The tutorial folder is contained in the ZIP file linked from the beginning of the tutorial.
2. Open the static page, specials.html, and switch to Code view.
3. Select lines 33 to 56 and press delete. This static information will not be needed as you will build an XSLT fragment that will recreate it.

4. Place the insertion point after the closing bracket (>) of the <div id="main"> tag and click the Select Parent Tag button, , on the Coding tool bar.

   Note: The Coding tool bar is new in Dreamweaver 8. You can find it on the right side of the Code view.

5. Choose Edit > Cut. You will use this portion of code as the basis of the XSLT fragment and you will reinsert it into a dynamic version of this page.
6. Choose File > Save As. If you are working with a server running ASP, save this page as specials.asp. If you are working with a server running ASP.NET, save this page as specials.aspx. If you are working with a server running ColdFusion, save this page as specials.cfm. If you are working with a server running PHP, save it as specials.php.

7. Select File > New and in the New Document Dialog, choose XSLT (Fragment) and click Create.

   

   Figure 2. The New Document dialog box

   (+) View larger

8. You will then be prompted to enter the location for the XML file. This file can reside on your site or on the Internet. For now, select “Attach a local file on my computer or local area network” and click Browse.

   

   Figure 3. The Locate XML Source dialog box

9. Open the tutorial folder, select specials.xml, and click OK. Click OK again in the Locate XML source dialog box.

10. In Code view, move the cursor to just after the <xsl:template match=”/”> tag, press Return. Then select Edit > Paste. The div you cut from the static page should now be in the fragment as shown in Figure 4.

    

    Figure 4. The code for the fragment after pasting div into it

    (+) View larger

11. You should also now see the XML schema in the Bindings panel (Window > Bindings). Save the XSLT fragment in the tutorial folder as menu.xsl.

If you look at the first line of code for the XLST fragment you’ll see a comment after the XML version declaration:

<!-- DWXMLSource="specials.xml" -->

Note: This comment is used by Dreamweaver to display the schema for specials.xml in the Bindings panel. Since it’s only a comment and not an actual link, it’s not like attaching a link to an entire XSLT page inside an XML file.

Examining the XML

The specials.xml file contains the daily menu for Café Townsend. In a typical scenario, this XML file is generated from a web application that the chef uses to enter the appetizers, entrées, and desserts for a single day. The beauty of this solution is that form is separated from content. The Specials page does not need manual updating and the chef updates the menu using a simple web application that the customer never sees.

Look at the XML in the Bindings panel. There is one repeating element, menu_item, with two attributes, id and course, and several nonrepeating elements: name, link, description, and price.

Figure 5. The XML Schema for specials.xml

The final design for the menu will list each course followed by its items. For each item, the item’s name, price, description, and a link to a page showing the item is displayed. In the following steps you will bind these elements to heading and paragraph tags.

1. Switch to Design view in the XSL file you just created.
2. Place the cursor after the last word in the level 1 heading, Specials of the day, and press Enter (Windows) or Return (Macintosh).
3. Press Control + 3 (Windows) or Command+3 (Macintosh) to create a level 3 heading. The item’s name and price will use this format.
4. In the Bindings panel, double-click the non-repeating element, name. This will create an XML data placeholder on the page using XPath (XML Path language). The path indicates the location of the data within the XML Schema or tree. When you create a repeating region, this path will be shortened because the repeat region will set the context, or starting point for the data.
5. If the placeholder is still selected, press the right cursor key to move the insertion point to right of the placeholder. Data placeholders are selected by default upon insertion so they are easier to format with HTML tags and CSS rules.
6. Press the Space bar.
7. Insert an em dash, or long hyphen, by choosing Insert > HTML > Special Characters > Em-Dash. The em dash will be used to separate the menu special’s name from its price. If you look at the Code view for this page, you’ll see that an em dash is described by the HTML entity, — and that there are entities defined in the DTD section at the top of the page in Code view. I mention this because there are times when you will want to use a special character and if that character is not defined, the XML parser on your application server may not be able to process the page. After inserting the em dash, you may see an Alert dialog box. If you see it, simply dismiss it. I suggest reading the help topic, “Specifying a missing character entity” in Dreamweaver 8 Help.
8. Press the Space bar. Double-click the non-repeating element, price. The XPath for price is now on the page to the right of the em-dash.
9. Deselect the price data placeholder by pressing the right arrow key on your keyboard and press Enter (Windows) or Return (Macintosh) to create a new paragraph.

10. Now double-click the non-repeating element, description, to insert it onto the page. This will place the description data placeholder inside the paragraph you’ve just created. You should now have something that looks like Figure 6:

    

    Figure 6. The XSLT fragment in progress

Adding a Link to the Item

The XML feed also includes a nonrepeating element for a link. This link is a URL to a page showing the appetizer, entrée, or dessert. Applying a link to a XML data placeholder is slightly more involved than setting a link normally for ordinary static text. Here are the steps:

1. Select the data placeholder for the name.
2. In the Property inspector, click the Folder icon which is to the right of the Link field.
3. In the Select File dialog box, select Data Sources, select the link element, and then click OK.

Figure 7. Choose the Data Sources option to see the XML Schema

In the Property inspector, the Link field will have {specials/menu_item/link} specified as the link attribute for the item name. The curly braces are important in that they instruct the XSL parser on a server or in a web browser to insert the link element from the XML schema as the source for this link text.

Figure 8. The correct way to specify a link using an element from an XML schema is to set it in curly braces

Creating the Repeat Region

Now you will create a repeat region so that the final page will list menu items within a course.

1. In Code view, select the level three heading containing the name and price and the paragraph containing the description.

   

   Figure 9. Selecting the basis for the repeat region

2. From the Insert tool bar, select XSLT and then click the Repeat Region button, . The XPath Expression Builder will appear.

   

   Figure 10. The XPath Expression builder dialog box

3. Select the repeating element, menu_item, and click OK.

4. Switch to Design view. You should now see a tabbed region around the level three heading and paragraph. If you do not see the tabbed region, make sure that Invisible Elements is selected in the View > Visual Aids menu and that Hide All is not selected in the same menu. Also notice how each data placeholder has been shortened to only the element name. This has happened because you have set the context to start at menu_item and so the path between it and each element is no longer required.

   

   Figure 11. The Repeat Region displayed in Design view

5. Choose File > Save.

6. Preview the page in a browser by choosing File > Preview in Browser (F12 on Windows and Option + F12 on Mac). The browser is not doing the transformation in this case and Dreamweaver is not sending the file to the testing server for preview. Dreamweaver is doing the transform itself and creating a temporary file for the browser to display.

   

   Figure 12. Previewing the fragment in a browser window

   (+) View larger

Page 3 of 7

Previous Page

Next Page