Dreamweaver

No doubt, you have heard about XML. XML is everywhere. For Web designers, that can add to the confusion. If something is everywhere, it's nowhere. If only you heard "XML is the new HTML," then maybe you could wrap your mind around it as a markup language. But chances are, you've heard much more than that about XML.

You may have heard one or more of the following:

• XHTML is based on XML.
• XML is a way of storing information.
• XML is part of Web services.
• XML is an object in Flash.
• XML is part of Flash remoting.
• Dreamweaver supports XML.

XML is all of this and more. Thus the confusion for the average Web designer. What is XML? What does it mean to me? Where does it fit in my workflow? How can I leverage Macromedia's support of XML? The goal of this article is to answer these fundamental questions. Even if you never create an XML file, chances are you will be working with an XML file sometime in the very near future.

What Is XML?
Very simply, XML is the eXtensible Markup Language, a World Wide Web Consortium Recommendation as of February 1998. The first important aspect of your understanding of XML is recognizing that it is a meta-language. A meta-language is simply a master language used to create your own unique language, thus there are no predefined tags. For example the meta-language SGML was used by Tim Berners-Lee to create the Hypertext Markup Language (HTML). XML has already been used to create languages such as the Wireless Markup Language (WML) and the Voice Markup Language (VML). As the author of an XML file you create the tag names. When you receive or author an XML file with custom tag names, you are working with, or have created, an XML application. This fact alone is a significant one. It makes XML fundamentally different from HTML. Code I is an HTML snippet and Code II is a complete XML file.

The HTML file contains information about how the data (content) should be displayed. For example, a table should be rendered with a header row containing the words "Recipe," "Ingredients," and "Amount," followed by a row with corresponding columns that read: "Meatloaf," "Ground Beef," and "1 Pound." There is no information in the markup that explains what the data is. The XML file contains no presentation or display information, but only information about what the data in the tags mean. Thus the nature of the XML tag is to be both human-readable and ultimately machine-readable. XML is meant to be a self-describing document.

The XML file contains no presentation information, so we can reuse it for many purposes. This XML file can be made for use in a Web page, a PDA, a cellphone, a database, a proprietary application, etc.

Currently XML is being used to store the content for Web sites and will therefore land in the hands of the Web designer at some point. Think of it as the new ASCII text file for the Web and more. Web designers may even be asked to translate the current content of their Web sites to XML, so that the data may be repurposed.

Dreamweaver and XML Editing
Dreamweaver MX 2004 can be used to author XML files. The procedure is very straightforward. From the File menu, choose New. Select the "General" tab at the top of the "New Document" dialog box. Choose "Basic Page" from the Category section on the left and "XML" from the "Basic Page" category on the right, then click the "Create" button.

Dreamweaver creates a blank page in Code View that begins with what is known as the XML declaration:

<?xml version="1.0" encoding="iso-8859-1"?>

This line of code is found at the top of the XML document. It is known as a processing instruction, and it simply announces the page as being an XML file written in version 1.0 of the language as defined by the W3C. Because XML is meant to support international coding practices it is written in Unicode as opposed to ASCII code. The default encoding type used in Dreamweaver is iso-8859-1, which represents a character set similar to ASCII known as the "Latin Alphabet No. 1." However, the Latin Alphabet No. 1 (commonly known as ISO Latin 1) characters also contain characters and letters commonly used in writing the languages of Western Europe and other cultures. ISO-8859 is a family of character sets that extend ASCII, such as ISO-8859-2, which represents the characters of central/eastern Europe. The discussion of character encoding is beyond the scope of this article < the main point is that should you find the encoding type of your XML application unfit for a particular purpose, you may change it in Dreamweaver. The most commonly deployed encoding type is UTF-8, which is a subset of ISO-10646. The ISO-10646 is an international standard superset of widely used national and international characters. You may want to adjust your preferences in Dreamweaver so that the XML declaration writes the encoding type known as Unicode-8. To do this, choose Edit ‡ Preferences from the main menu. Select the "New Document" category on the right. In the default encoding field (unless the default encoding has been changed, it should read the default encoding type: Western European.) select "Unicode(UTF-8)" and click "OK." All newly created XML files will now begin with the following XML declaration:

<?xml version="1.0" encoding="utf-8"?>

Well-Formed XML
XML files must follow certain rules in order to be considered well formed, and all XML files must be well formed. These rules ensure that the XML file is structured. Here again, we see a small but very significant difference between XML and HTML. For example, browsers that parse HTML can understand the following:

<UL>
   <LI>Ham
   <LI>Eggs
   <LI>Milk</li>
</OL>

as well as:

<H1>My heading goes here</H2>

In the above code snippets we find a <UL> tag closed with an </OL>, an <LI> tag in uppercase closed with an </li> in lowercase, and an <H1> closed with an <H2>. XML requires far more structure, thus, the snippets above would not be considered well-formed.

All XML files must have a root element. This is the element that contains all the other elements. For example, the root element of an HTML 1.0 Web page is <HTML> because that is the tag that opens and closes the document. Other rules include the following: all opening tags must have closing tags and they must match precisely and that includes case-sensitivity. Thus an opening <Recipe> tag must be closed and cannot be closed with </recipe> because XML is case sensitive (our opening tag included a capital R in recipe and the closing tag is all lowercase). The rules for writing well-formed XML include:

1. All XML Files must contain a root element.
2. All start tags must have end tags.
3. All start tags and end tags must match.
4. When implementing rule two, remember XML is case-sensitive.
5. All tags must be properly nested.
6. All attributes' values must be in quotes.

Dreamweaver will check your file for well-formedness and will indicate your errors using the "Results" panel. Select the "Validation" tab at the top of the "Results" panel. Press the Validate button (the green, right-facing triangle on the left side of the panel) and choose "Validate Current Document." If your XML file is well-formed, the status bar in the "Results" panel will read: "Complete." If your XML breaks a well-formedness rule, the Results panel will display the line with the error followed by a description of the error (see Image I).

Valid XML
The minimum requirement when working with XML files is that they be well formed. This enforcement is what makes the repurposing of XML files possible because all systems can expect to receive the incoming XML file in a structured, predictable format.

In addition to structure, some systems will require that specific tags be used in a specific order and that the tags contain specific information. Remember that XML is a meta-language, which programmers can use to create their own markup languages. One such language derived from XML is the Wireless Markup Language used in PDAs and cellphone browsers. This is another XML language that Dreamweaver MX 2004 supports and is capable of writing. Being an XML application, the Wireless Markup Language has specific predefined tags that must be used according to a structure defined by the authors of the language. This structure is enforced with another digital file that can be written in several languages, although the most common are the DTD and the schema. Both of these documents work the same way. They declare the elements (or tag names), how often they can be used and in what order, as well as where in the document they are to be used. DTD's and schemas also declare the other components of an XML file such as attributes, processing instructions and entities. If your XML file does not break any of the rules set forth in the DTD or schema, your file is considered valid. To use a DTD you attach the file to your XML file with the following line of code:

<!DOCTYPE Recipe SYSTEM "recipe.dtd">

where !DOCTYPE indicates the use of a DTD with this XML file and "Recipe" indicates the root element of the file. The keyword "System" indicates that the DTD file is proprietary in use and can be found in the local network as opposed to "Public," which would indicate that the DTD is for public use and can be found on the Internet. Our recipe dtd might be an XML application unique to our company and thus a SYSTEM DTD, whereas the Wireless Markup Language is a widely used XML application and the DTD is public and can be found on the Internet.

If you were using Dreamweaver to write an XML application, you could point to the DTD or schema file (by way of the aforementioned line of code) and have Dreamweaver check to see if you are writing the code correctly. Dreamweaver uses the "Results" panel to indicate validity errors (see Image II).

Dreamweaver MX 2004 supports the opening and viewing of XML files as well as the creation of XML files. In addition it provides the means to check our XML files to ensure they are both well-formed and valid.

Using XML in Dreamweaver
Dreamweaver MX 2004 provides several uses for XML. You can import XML into predefined templates. You can export the data from templates to XML and you can access XML data through ColdFusion. XML is also widely used in Flash MX 2004.

XML and Dreamweaver Templates
Macromedia lets you import XML files into Dreamweaver MX templates (.dwt files). In addition, you can also export data from a Dreamweaver MX template to the XML format. The process is very straightforward once you understand the foundations that must be in place.

The first step is to indicate the name and location of the .dwt file that you wish to import your XML into. This is done through the "template" attribute, which points to the .dwt file. The template attribute is placed in the root element of your XML file as follows:

<recipe template="Example1.dwt">

To import an XML file into your Dreamweaver template, you must name your template's editable regions with names that match the tags in the XML file. Thus, the recipe example would require creating editable regions with the names: recipe, name, ingredient, and amount. There is one problem with the structure of this XML file < Dreamweaver does not understand XPath, which is a language that identifies locations of elements within an XML file. Thus, Dreamweaver will understand the location of the root element and the children of the root element only. Dreamweaver cannot access nested tags such as the following snippet:

<ingredients>
	<ingredient>Ground Beef
	      <amount measurement = "pounds">1</amount>
	</ingredient>

Dreamweaver cannot locate the nested <amount> tag or the nested <ingredient> tag because they are not children of the root element. Therefore to import XML into Dreamweaver your file structure must match Code III.

In most cases your XML files will not reflect this structure and you will need to transform the XML to match. XSLT is a stylesheet language that can transform XML files into any other type of file and can be used to transform the original XML file in Code II into the XML file in Code III.

If your Web site is complete and uses templates you can also export a templates data to an XML file. Dreamweaver will structure the XML file as in Code III.

Using XML in ColdFusion
Dreamweaver MX 2004 can create dynamic sites using server-side technologies such as ASP, JSP, and ColdFusion to connect to data sources such as Microsoft Access, Oracle, or any ODBC-compliant data. ColdFusion can also access data in an XML file, including the elements, attributes, and the data they contain. You must work in Code View in order to write the ColdFusion Markup that loads, reads, and parses the XML file. Following that code you simply output the XML to the browser using the ColdFusion <cfoutput> tag.

Loading, Reading, and Parsing XML with ColdFusion
The code to load an XML file (including the first line comment):

<!-- Load the XML File -->
<CFSET MyXmlFile = ExpandPath("FileName.xml")>

Simply use the <CFSET> tag to set a variable named MyXmlFile which is set using the ExpandPath() method to return the full path to the XML file supplied as the argument ("FileName.xml").

The code to read an XML file (including the first line comment):

<!-- Read the XML File -->
<CFFILE ACTION="READ" FILE="#MyXmlFile#" VARIABLE="MyXmlCode">

The <CFFILE> tag manages interactions with the server and includes the attributes: ACTION set to read a text file on the server; FILE set to the name of the file to read, which in this case is the file indicated in the variable MyXmlFile referenced as a dynamic value by the # symbols surrounding the variable name; and VARIABLE set to the variable name of the XML file.

The code to parse an XML file (including the first line comment):

<!-- Parse the XML File -->
<CFSET MyXml = XmlParse(MyXmlCode)>

Again, a variable is set, this time using the XmlParse() method to parse the XML file referenced as MyXmlCode from the previous <CFFILE> tag.

Displaying XML in the Browser with ColdFusion
Using the XML file in Code II, we can display the XML in the Web browser as follows:

<cfoutput>
   <H1>
      #MyXml.recipe.name.XmlText#
   </H1>
</cfoutput>

This code would result in the output shown in Image III. The ColdFusion Markup Language includes numerous tags and methods for accessing and manipulating XML data for processing and display in the Web browser.

Macromedia and XML
As you can see, Dreamweaver, while not a full-fledged XML editor, can be used to create, edit, and validate your XML files. After you have created your XML applications you can then access them through ColdFusion as well as Macromedia Flash MX 2004, which includes many new features for manipulating XML including the XMLConnector for accessing XML data from the server.