Note:
The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this article in Dreamweaver CC and later. For more information, see this article.
You can perform server-side XSL transformations on the server. Read about server-side and client-side XSL transformations and about using XML and XSL with web pages before building pages that display XML data.
Note:
Your server must be correctly configured to perform server-side transformations. For more information, contact your server administrator.
The general workflow for performing server-side XSL transformations is as follows (each step is described in other topics):
For example, create a page that requires processing, and make sure that the application server processes the page.
In your Dreamweaver site, create an XSLT fragment or an entire XSLT page.
Convert an existing HTML page to an entire XSLT page.
7.If appropriate, add a Repeating Region XSLT object to the table or table row that contains the XML data placeholders.
To insert a reference to the XSLT fragment in your dynamic page, use the XSL Transformation server behavior.
To insert a reference to the entire XSLT page in the dynamic page, delete all of the HTML code from a dynamic page, and then use the XSL Transformation server behavior.
Post both the dynamic page and the XSLT fragment (or entire XSLT page) to your application server. If you are using a local XML file, you will need to post that as well.
When you do so, the application server transforms the XML data, inserts it in the dynamic page, and displays it in the browser.
You can create XSLT pages that let you display XML data on web pages. You can create either an entire XSLT page—an XSLT page that contains a <body> tag and a <head> tag—or you can create an XSLT fragment. When you create an XSLT fragment, you create an independent file that contains no body or head tag—a simple piece of code that is later inserted in a dynamic page.
Note:
If you are starting with an existing XSLT page, you need to attach an XML data source to it.
-
- Select Attach A Local File, click the Browse button, browse to a local XML file on your computer, and click OK.
- Select Attach A Remote File, enter the URL of an XML file on the Internet (such as one coming from an RSS feed), and click OK.
Note:
Clicking the Cancel button generates a new XSLT page with no attached XML data source.
Bindings panel
The following table provides an explanation of the various elements in the schema that might appear:
Element
Represents
Details
<>
Required non-repeating XML element
An element that appears exactly once within its parent node
<>+
Repeating XML element
An element that appears one or more times within its parent node
<>+
Optional XML element
An element that appears zero or more times within its parent node
Element node in boldface type
Current context element
Normally the repeating element when the insertion point is inside a repeating region
@
XML attribute
You can also convert existing HTML pages to XSLT pages. For example, if you have a predesigned static page to which you want to add XML data, you can convert the page to an XSLT page, instead of creating an XSLT page and redesigning the page from scratch.
If you are starting with an existing XSLT page, or if you don’t attach an XML data source when creating a new XSLT page with Dreamweaver, you must attach an XML data source using the Bindings panel.
After you’ve created an XSLT page and attached an XML data source, you can bind data to the page. To do this, you add an XML data placeholder to your page and then use the XPath Expression Builder or the Property inspector to format selected data that will be displayed on the page.
-
(Optional) Select Insert > Table to add a table to the page. A table helps you organize your XML data.
Note:
In most cases, you use the Repeating Region XSLT object to display repeating XML elements on a page. In this case, you might want to create a single-row table with one or more columns, or a two-row table if you want to include a table header.
-
In the Bindings panel, select an XML element and drag it to the place on the page where you want to insert data.
Select an XML element in the Bindings panel
An XML data placeholder appears on the page. The placeholder is highlighted and in curly brackets. It uses the XPath (XML Path language) syntax to describe the hierarchical structure of the XML schema. For example, if you drag the child element title to the page, and that element has the parent elements rss, channel, and item, then the syntax for the dynamic content placeholder will be {rss/channel/item/title}.
Double-click the XML data placeholder on the page to open the XPath Expression Builder. The XPath Expression Builder lets you format selected data, or select other items from the XML schema.
-
(Optional) Apply styles to your XML data by selecting an XML data placeholder and applying styles to it like any other piece of content using the Property inspector or the CSS Styles panel. Alternatively, you can use Design-time style sheets to apply styles to XSLT fragments. Each of these methods has its own set of benefits and limitations.
The Repeating Region XSLT object lets you display repeating elements from an XML data source in a web page. For example, if you are displaying article titles and descriptions from a news feed, and that news feed contains between 10 and 20 articles, each title and description in the XML file would probably be a child element of a repeating element.
Any region in Design view containing an XML data placeholder can be changed to a repeated region. However, the most common regions are tables, table rows, or a series of table rows.
-
Design view
Note:
To select a region on the page precisely, you can use the tag selector in the lower-left corner of the Document window. For example, if the region is a table, click inside the table on the page, and then click the tag in the tag selector.
-
In the Document window, a thin, tabbed, gray outline appears around the repeated region. When you preview your work in a browser (File > Preview in Browser), the gray outline disappears and the selection expands to display the specified repeating elements in the XML file.
When you add the Repeating Region XSLT object to the page, the XML data placeholder in the Document window is truncated. This is because Dreamweaver truncates the XPath for the XML data placeholder so that it is relative to the path of the repeating element.
After you’ve added a Repeating Region XSLT object to a region, you can edit it using the Property inspector.
After you have created an XSLT fragment, you can insert it in a dynamic web page using the XSL Transformation server behavior. When you add the server behavior to your page and view the page in a browser, an application server performs a transformation that displays the XML data from the selected XSLT fragment. Dreamweaver supports XSL transformations for ColdFusion, ASP, or PHP pages.
Note:
If you want to insert the contents of an entire XSLT page in a dynamic page, the procedure is exactly the same. Before using the XSL Transformation server behavior to insert the entire XSLT page, delete all HTML code from the dynamic page.
-
In Design view, place the insertion point in the location where you want to insert the XSLT fragment.
Note:
When inserting XSLT fragments, you should always click the Show Code And Design Views button after placing the insertion point on the page so that you can ensure that the insertion point is in the correct location. If it isn’t, you might need to click somewhere else in Code view to place the insertion point where you want it.
-
Upload the dynamic page to your server (Site > Put) and click Yes to include dependent files. The file containing the XSLT fragment, the XML file containing your data, and the generated run-time library file must all be on the server for your page to display correctly. (If you selected a remote XML file as your data source, that file must reside somewhere else on the Internet.)
You can remove an XSLT fragment from a page by deleting the XSL Transformation server behavior used to insert the fragment. Deleting the server behavior deletes the XSLT fragment only—it does not delete the associated XML, XSLT, or run-time library files.
After you’ve added an XSLT fragment to a dynamic web page, you can edit the XSL Transformation server behavior at any time.
You can create a dynamic link on your XSLT page that links to a specific URL when the user clicks a specified word or group of words from your XML data. For full instructions, see the Dreamweaver errata at www.adobe.com/go/dw_documentation.
When you create an entire XSLT page (that is, an XSLT page that contains <body> and <head> tags), you can display XML data on the page and then format the data like any other piece of content using the Property inspector or the CSS Styles panel. When you create an XSLT fragment for insertion in a dynamic page, however (for example, a fragment for insertion in an ASP, PHP, or Cold Fusion page), the rendering of styles in the fragment and in the dynamic page becomes more complicated. Although you work on an XSLT fragment separately from the dynamic page, it is important to remember that the fragment is intended for use within the dynamic page, and that the output from the XSLT fragment ultimately resides somewhere within the <body> tags of the dynamic page. Given this workflow, it is important to make sure that you do not include <head> elements (such as style definitions or links to external style sheets) in XSLT fragments. Doing so will cause the application server to place these elements into the <body> of the dynamic page, thereby generating invalid markup.
For example, you might want to create an XSLT fragment for insertion in a dynamic page and format the fragment using the same external style sheet as the dynamic page. If you attach the same style sheet to the fragment, the resulting HTML page contains a duplicate link to the style sheet (one in the <head> section of the dynamic page, and another in the <body> section of the page, where the content of the XSLT fragment appears). Instead of this approach, you should use Design-time style sheets to reference the external style sheet.
When formatting the content of XSLT fragments, use the following workflow:
First, attach an external style sheet to the dynamic page. (This is a best practice for applying styles to the content of any web page).
Next, attach the same external style sheet to the XSLT fragment as a Design-time style sheet. As the name implies, Design-time style sheets only work in the Dreamweaver Design view.
After you have completed the two previous steps, you can create new styles in your XSLT fragment using the same style sheet that you’ve attached to your dynamic page. The HTML output will be cleaner (because the reference to the style sheet is only valid while working in Dreamweaver), and the fragment will still display the appropriate styles in Design view. Additionally, all of your styles will be applied to both the fragment and the dynamic page when you view the dynamic page in Design view, or preview the dynamic page in a browser.
Note:
If you preview the XSLT fragment in a browser, the browser does not display the styles. Instead you should preview the dynamic page in the browser to see the XSLT fragment within the context of the dynamic page.
You can define parameters for your XSL transformation when adding the XSL Transformation server behavior to a web page. A parameter controls how XML data is processed and displayed. For example, you might use a parameter to identify and list a specific article from a news feed. When the page loads in a browser, only the article you specified with the parameter appears.
You can create simple conditional regions or multiple conditional regions on an XSLT page. You can either select an element in Design view and apply a conditional region to the selection, or you can insert a conditional region wherever the insertion point is in the document.
For example, if you wanted to display the word “Unavailable” next to the price of an item when the item is unavailable, you type the text “Unavailable” on the page, select it, and then apply a conditional region to the selected text. Dreamweaver surrounds the selection with <xsl:if> tags, and only displays the word “Unavailable” on the page when the data match the conditions of the conditional expression.
You can write a simple conditional expression to insert into your XSLT page. If content is selected when you open the Conditional Region dialog box, the content will be wrapped in an <xsl:if> block. If you rcontent is not selected, the <xsl:if> block is added at the insertion point on the page. It’s a good idea to use the dialog box to get started and then customize the expression in Code view.
The <xsl:if> element is similar to the if statement in other languages. The element provides a way for you to test a condition and take a course of action based on the result. The <xsl:if> element allows you to test an expression for a single true or false value.
-
<xsl:if test="@available='true'"> Content goes here </xsl:if>Note:
You must surround string values such as true in quotes. Dreamweaver encodes the quotes for you (') so that they are entered as valid XHTML.
In addition to testing nodes for values, you can use any of the supported XSLT functions in any conditional statement. The condition is tested for the current node within your XML file. In the following example, you want to test for the last node in the result set:
Test for the last node in the result set
You can write a simple conditional expression to insert into your XSLT page. If content is selected when you open the Conditional Region dialog box, the content is wrapped in an <xsl:choose> block. If you do not select content, the <xsl:choose> block is added at the insertion point on the page. It’s a good idea to use the dialog box to get started and then customize the expression in Code view.
The <xsl:choose> element is similar to the case statement in other languages. The element provides a way for you to test a condition and take a course of action based on the result. The <xsl:choose> element allows you to test for multiple conditions.
The purpose of the Set Conditional Region Property inspector is to change the condition used in a conditional region in your XSL page. The conditional region tests the condition and takes a course of action based on the result.
The purpose of the Set Conditional Region Property inspector is to change the condition used in a multiple conditional region in your XSL page. The multiple conditional region tests the condition and takes a course of action based on the result.
XPath (XML Path Language) is a non-XML syntax for addressing portions of an XML document. It is used mostly as a query language for XML data, just as the SQL language is used to query databases. For more information on XPath, see the XPath language specification on the W3C website at www.w3.org/TR/xpath.
The XPath Expression Builder is a Dreamweaver feature that lets you build simple XPath expressions for identifying specific nodes of data and for repeating regions. The advantage of using this method instead of dragging values from the XML schema tree is that you can format the value that is displayed. The current context is identified based on the position of the insertion point in the XSL file when the XPath Expression Builder dialog box is opened. The current context is in boldface type in the XML schema tree. As you make selections within this dialog box, the correct XPath statements, relative to your current context, are generated. This simplifies the process of writing correct XPath expressions for beginners and advanced users.
Note:
This feature is designed to help you build simple XPath expressions to identify a specific node or for repeating regions. It does not allow you to edit the expressions by hand. If you need to create complex expressions, use the XPath Expression Builder to get started and then customize your expressions in Code view or with the Property inspector.
-
Note:
If you select a different node in the XML schema tree, the expression changes to reflect your choice.
XPath Expression Builder (Dynamic Text) dialog box
<xsl:value-of select="price"/>
-
Formatting a selection is useful when the value of your node returns a number. Dreamweaver provides a predefined list of formatting functions. For a complete list of available formatting functions and examples, see the Reference panel.
In the following example, you want to format the price subelement as a currency with two decimal places:
Format the price subelement as a currency with two decimal places
These options would insert the following code in your XSLT page:<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
You can select a node to repeat over and, optionally, to filter the results. In the XPath Expression Builder dialog box, your selected content will be wrapped inside an <xsl:for-each> block. If you have not selected content, the <xsl:for-each> block will be entered at the insertion point of your cursor.
-
In the XPath Expression Builder (Repeating Region) dialog box, select the item to repeat in the XML schema tree.
Note:
Repeating items are identified with a Plus (+) symbol in the XML schema tree.
XPath Expression Builder (Repeating Region) dialog box
<xsl:for-each select="provider/store/items/item"> Content goes here </xsl:for-each>
-
Filter By
Specifies the repeating node that contains the data you want to filter by. The pop‑up menu provides a list of ancestor nodes relative to the node you selected in the XML schema tree.
-
As you enter values or make selections in the pop‑up menus, the XPath expression in the Expression box changes.
In the following example, you want to restrict the result set to those item nodes where the value of the @available attribute is true.
Restrict the result set to those item nodes where the value of the @available attribute is true
When you click OK, the following code is inserted in your XSLT page:<xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here </xsl:for-each>
<xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here </xsl:for-each>Note:
You need to surround string values such as true in quotes. Dreamweaver encodes the quotes for you (') so that they are entered as valid XHTML.
You can create more complex filters that allow you to specify parent nodes as part of your filter criteria. In the following example, you want to restrict the result set to those item nodes where the store’s @id attribute is equal to 1 and the item’s price node is greater than 5.
Restrict the result set to those item nodes where the store’s @id attribute is equal to 1 and the item’s price node is greater than 5
When you click OK, the following code is inserted in your XSLT page:<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]"> Content goes here </xsl:for-each>
For more information and examples of repeating regions, see the <xsl:for-each> section in the Reference panel.
<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]"> Content goes here </xsl:for-each>
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.