K L I P P I N G: Dreamweaver TUTORIAL

XML and Dreamweaver

by Kevin Ruse
June 09, 2004

While certainly not a full-blown XML editor, Dreamweaver MX 2004 includes a fair amount of support for XML. This latest release eases the web designers' transition into the area of structured markup. Many web designers using Dreamweaver rarely view their code, preferring instead to stay within the safe confines of the Dreamweaver Design View. Other designers frequent Code View often while writing JavaScript, CSS or simply because they are well-versed in HTML and prefer to write code as opposed to the WYSIWIG, drag-and-drop methods. Viewing or writing XML files will force the designer into Code View and may provide for all the functionality that's needed for web designers working with XML. This will prevent the need for the web designer to open additional software such as XML Spy, which is an excellent tool but provides for more than what is needed.

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 MyXmlFile and 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 MyXmlFile variable declared above. At this point the variable MyXmlCode contains 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. In the example code in Figure 2, the elements being searched are all the children of Tag_C (indicated by /*), where Tag_C is the child of Tag_B, which is the child of Tag_A.

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".

Toolbar with the 'Live Data' button
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, reading and parsing of the XML file as explained above. The next step simply uses the ColdFusion output tag <cfoutput> to display the XML content, which is surrounded by the # 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 can create a query of the XML file using the ColdFusion QueryNew() function.

<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.

Conclusion

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.

K L I P P I N G

Friday, May 22, 2009

Dreamweaver TUTORIAL