DM 171: Week Twelve - XML and XML Transformations

XML Files

Dreamweaver makes it easy for you to create XML files without totally needing to know the syntax.

If you are using a defined schema for your XML file, add it to your tag library from the menu Edit > Tag Libraries… Click on the Plus symbol and choose DTDSchema > Import XML DTD or Schema File. Click OK.

Paste in the URL of the DTD you wish to use or navigate to a Schema file on your hard drive using the Browse… button and click OK. Dreamweaver will load in all the tags that are used and assist you with tag hints. For your own self defined XML files, you may skip this step.

From the File > New… dialog box, General tab, Category: Basic Page, Basic page: select XML.

Dreamweaver creates a document with the correct first line to identify the document as an XML file:
<?xml version="1.0" encoding="ISO-8859-1"?>

It is worth noting that Dreamweaver only gives the “Code” view option for XML files, “Split” and “Design” views are grayed out. XML files carry your data but have no look to design.

Ideally, you have sat down with the data you wish to organize. My sample XML file is a short listing of CDs in my collection. I decided to organize the data based on artist/group, then album (CD), then track name.

Start creating tags. Similarly to HTML tags, they begin with < and end with >. If you have a Schema imported, Dreamweaver will assist you with tag hints. If you are creating your own, use tag names with no spaces that are friendly enough that you will remember the context for the data the tags contain. Data must be surrounded by your XML tags or within the tags as attributes. In my sample file, I have created the <discography></discography> tag(s) to contain data about the CDs in my collection.

With each tag you create, Dreamweaver adds it to your tag hints making longer document coding easier. Add attributes as needed, you are in charge! In my example:
<track track_num="1" length="7:05">Track Name</track>
I added track_num to list the position on the CD and length to contain the minutes and seconds of the track. Your tags and attributes will vary with your data needs and the constructs of your imported schema if you are using one.

On to the next tab…

XSLT Files

eXtensible Stylesheet Language Transformation files are used to style and structure XML files for use in other documents/applications; in our case, to give our XML files a functional appearance via the web browser.

From the File > New… dialog box, General tab, Category: Basic Page, Basic page: select XSLT (Entire page). Choosing fragment will be useful when working in a dynamically based environment such as PHP, ASP, or Cold Fusion; entire page will work for the class needs.

A dialog box will appear asking you to locate an XML file to link to your XSLT file. Browse to your local XML file and click OK.

Dreamweaver creates an XSLT file that closely resembles an HTML file. It adds a number of xsl tags to the beginning of the HTML document and closes them after the closing </html> tag. View my sample file for to see these tags.

In the Bindings panel, you will find a graphical listing of the "nodes" of information in your XML file.

The panel shows how each node of information is nested within containing tags/nodes.

The <> symbols are the containing tags and their data. Ones with pluses next to them can be used as repeating areas.

The @ symbol stands for attributes of of the tag they are under.

Create a faux layout for your data, mine looked something like this:

Artist

Album Name

Track #	Track Name	Track Length

 

In Dreamweaver, select the area you wish to repeat. I selected both the headline and table. Under menu Insert > XSLT Object > Repeat Region. Dreamweaver gives you the xPath Expression Builder Repeat Region dialog box. Choose the node with the data you want to repeat, click OK; for my example I chose artist.

If needed select other areas within your layout that will need repeating. Go through the same process to create these nested repeating regions. You can drag over attributes from the bindings panel to designate where you wish the data to be displayed. My sample layout ends up looking like this:

The Track Name required using menu Insert > XLST Objects > Dynamic text in order to make it work. When you try to drag a node with a plus symbol over, Dreamweaver automatically creates a repeat region, in this case, not what was wanted.

When you drag a node over in code view, sometimes you will need to add the curly brackets to properly indicate the node.

Choose to preview in browser to see the results. Dreamweaver creates a temporary HTML file to view the data.

On to the next tab…

XML Client Side Transformations

Once you have your XML file created and have configured your XSLT file to work with it, attach it to your XML file. With the XML file open, go to menu Commands > Attach an XLST Stylesheet. From the resulting dialog box, navigate to your XSLT (.xsl) file and click OK.

Now view your XML file in your browser. Modern browsers understand these transformations and will style your data to look as you wish. Older browsers or XML feeds from other sites need transforming on the server, a topic for another lesson.

Here is my sample XML file unstyled, here it is styled with an .xsl file.