XML and Dreamweaver
June 9, 2004
Programmers of XML applications that include XML database connectivity or those creating Web Services will indeed find full-service XML editors to be the correct choice for their toolbox. For web designers however, it may be the equivalent of learning how to use a 500w Variable Speed Keyless Chuck Hammer Drill when a screwdriver will do the job. This is not to say, however, that Dreamweaver is a mere screwdriver capable of performing only one function. The XML support in Dreamweaver combined with Flash and ColdFusion provide the means for rich internet applications including RSS feeds, Flash Remoting, Database Connectivity, Web Services and more. This article provides a summary of what can be done with Dreamweaver MX 2004 in the area of XML for the average Web designer.
Writing Well-Formed and Valid XML in Dreamweaver MX 2004
Web designers who work with XML will, foremost, want to ascertain if their documents are well-formed. Dreamweaver MX 2004 is capable of checking the file for well-formedness. The Validation tab of the Results panel allows a check for both well-formed XML and valid XML. Dreamweaver can validate a single file, user-selected files, or an entire site.
Figure 1. The Results panel showing a validation error.
Another method for checking the well-formedness of an XML file is to open it in Dreamweaver and preview it in a Web browser. Netscape 7.0, Mozilla 1.0 and Internet Explorer 6.0 will return a parse-error message if your file is not well-formed.
In addition to checking for well-formed XML, Dreamweaver MX 2004 can validate XML documents against DTDs (other schema technologies are currently not supported). If the XML file has an associated DTD, the Results Panel will display validity errors as shown in Figure 1. Dreamweaver can also validate against a supplied DTD in addition to its built-in DTDs for XHTML 1.0 Transitional and Strict.
XML and Dreamweaver MX Templates
Dreamweaver offers two primary ways of incorporating XML in your web sites. The first method, to be used at design-time only, is to use templates (.dwt files). Templates hold the basic static sections of a web site; including site navigation, copyright statements, and so on. Templates include editable regions, which web authors use to add content. When a new Web page is created using a template, the static regions appear as defined by the template ensuring the integrity of the site design. Templates also allow for rapid global changes, because editing the original template file will cause the changes to propagate to each Web page created via the template.
Once a page is created based on a template, XML can be imported into the template's editable regions, provided the region names match elements in the XML file.
XML and Server Side Technologies in Dreamweaver
The second method for incorporating XML data to your Web site is through server side technologies such as ColdFusion, ASP or JSP. This removes the design-time-only restriction imposed by templates. Using these server side technologies to access XML, however, requires working in "Code View". Thus, there are no dialog boxes, wizards or other forms of prompting the user for the requisite information. Therefore, the developer must be well-versed in the language utilized by the server-side technology.
Server-Side XML Processing with ColdFusion
An obvious choice for server-side technology for DreamWeaver users is ColdFusion. Using ColdFusion to access XML files requires following these basic steps while in code view:
Load the XML file:
<CFSET MyXmlFile = ExpandPath("name_of_file.xml")>
This declares a variable called
MyXmlFileand sets it to the results of the
ExpandPath()method, which returns the path of the XML file supplied as the argument.
Read the XML file:
<CFFILE ACTION="READ" FILE="#MyXmlFile#" VARIABLE="MyXmlCode">
This reads a text file from the server. The "file" attribute points to the file to be read using the
MyXmlFilevariable declared above. At this point the variable
MyXmlCodecontains a text string of the XML file on the server.
Parse the XML file:
<CFSET MyXml = XmlParse(MyXmlCode)>
This sets a variable,
MyXml, to the result of the
XmlParse(). This result is a DOM (Document Object Model) tree.
Searching XML Documents
The following script illustrates searching through an XML document and outputting the search results to the Web browser.
<cfscript> MyXml = XmlParse(MyXmlCode); selectedElements = XmlSearch(MyXml, "Tag_A/Tag_B/Tag_C/*"); for (i = 1; i LTE ArrayLen(selectedElements); i = i + 1) writeoutput(selectedElements[i].XmlName & " = " & selectedElements[i].XmlText & "<br />"); </cfscript>
Figure 2. ColdFusion Script for searching XML
The main business of the search is done with the
XmlSearch() method. This
method accepts as an argument the XML DOM object to be searched and an XPath expression.
the example code in Figure 2, the elements being searched are all the children of
/*), where Tag_C is the child of Tag_B, which is the child of
The code will then loop through all of the searched elements and output the child element's name, and its text contents.
After you write the server-side code you can return to Dreamweaver's WYSIWYG "Design View". You can then access the live XML data as it would appear to the Web browser after processing by the Application Server. This view is accessed via the "Live View" button on the "Document Toolbar| (see Figure 3), from the View menu in the main menu bar (View a Live Data), or the keyboard equivalent "Control-Shift-R".
Figure 3. The Toolbar, with the "Live Data" button circled.
Directly Outputting XML
As well as using the
writeoutput function as explained above, XML DOM objects
can be more directly referenced in ColdFusion code. This requires first the loading,
and parsing of the XML file as explained above. The next step simply uses the ColdFusion
<cfoutput> to display the XML content, which is surrounded by
# symbol. Thus, with reference to Figure 2, the contents of Tag_C would be
output to the Web page as follows:
<cfoutput> #MyXml.Tag_A.Tag_B.Tag_C.XmlText# </cfoutput>
If you wish to process the individual children of Tag_C, you must loop over them:
<cfloop index="c" from="1" to="#ArrayLen(MyXml.Tag_A.Tag_B.Tag_C)#"> #MyXml.Tag_A.Tag_B.Tag_C[c].Tag_D.XmlText# </cfloop>
ColdFusion can also query XML files in a similar way to databases. Using a loop we
create a query of the XML file using the ColdFusion
<cfset numProducts = ArrayLen(MyXML.Product.XmlChildren)> <cfset productInfoQuery = QueryNew("ProductName, Size, Weight, Price") > <cfloop index="i" from = "1" to = #numProducts#> <cfset temp = QueryAddRow(productInfoQuery)> <cfset ProductName = QuerySetCell(productInfoQuery, "ProductName", #MyXml.Catalog.Product[i].ProductName.XmlText#)> <cfset Size = QuerySetCell(productInfoQuery, "Size", #MyXml.Catalog.Product[i].Size.XmlText#)> <cfset Weight = QuerySetCell(productInfoQuery, "Weight", #MyXml.Catalog.Product[i].Weight.XmlText#)> <cfset Price = QuerySetCell(productInfoQuery, "Price", #MyXml.Catalog.Product[i].Price.XmlText#)> </cfloop>
Like any database query, the results of this query can be used to display data in the website. ColdFusion can also be used to set the values of form fields dynamically, allowing for the creation of a dynamic search based on the users' parameters.
You can see through this introductory look, that Dreamweaver MX 2004 is capable of rudimentary work with XML and is often all a Web designer needs. The XML files created, viewed, edited and validated in Dreamweaver can then be accessed via the ColdFusion Markup Language. However, Dreamweaver falls short in comparison to XML editors such as XML Spy which include many more capabilities. Yet for the Web designer, who occasionally sees or creates XML files, and needs to edit or validate them, Dreamweaver MX 2004 is just the job. If you need to process XML for output, Macromedia ColdFusion as well as Macromedia Flash MX 2004 can be a good place to start.