Accessibility

Macromedia MAX 2005

Using the Power of XML with Dreamweaver
Track: Developing Web Sites and Applications
Product: Dreamweaver
Level: Novice
Type: Hands-on
Presenter: Alexandru Costin
Times:
  • Monday, 8:30 am — 10:00 am
  • Monday, 4:00 pm — 5:30 pm
  • Tuesday, 8:30 am — 10:00 am
  • Wednesday, 9:00 am — 10:30 am
  • Wednesday, 1:30 pm — 3:00 pm

MAX 2005 Session Preview: Using the Power of XML with Dreamweaver

The new XML support in Dreamweaver 8 will sure make a buzz at MAX 2005. This is a summary of my Dreamweaver-XML hands-on session.

Dreamweaver 8 has just been announced, and one of the hottest features is the improved XML and visual XSL support. I’m planning to showcase how to edit and how to transform XML documents using XSL stylesheets. I will teach you how to perform both client-side and server-side transformations, and help you understand the difference between the two.

I hope you’ll enjoy this exercise and learn something from it. XML is everywhere, and you will have to master it sooner or later, in order to stay ahead of your competitors.

Requirements

To complete this sneak peak tutorial, you need to install the following software and files:

  • Macromedia Dreamweaver 8

Note: This new version has just been announced, so you will have to wait a little bit until you’ll get your hands on it.

XML and XSL Support in Dreamweaver 8

I have the honor this year of presenting the top-notch feature in Dreamweaver 8 – the XML/XSL support. Being involved in the Dreamweaver 8 alpha and beta process, I had the chance to see this product growing, and adding my contribution from time to time.

My enthusiasm for XML-based technology dates back into my “teenage” years, when I was experimenting with an in-house IDE for XML and XSL visual editing. Unfortunately, that project was not easy enough to be used by designers, nor professional enough to be used by programmers. I’m glad to see that Macromedia embarked in the endeavor of creating an intuitive and visual XSL editor that suits both designers and developers.

Here is a brief overview of the XML/XSL features in Dreamweaver. These will be covered in greater detail in the hands-on session at MAX, where you'll get a chance to try them out:

  • Improved XML editing, with automatic closing tag completion.
  • DTD validation for XML documents and code-completion for XML tags.
  • Linking XSL stylesheets to XML datasources (both local and remote).
  • Data bindings with drag and drop functionalities.
  • Repeat regions and conditional regions on XML trees.
  • Server-side and client-side XSL transformations.
  • Improved XSL code-completion and reference.

Let’s see each of these features in action.

Editing XML Documents

When it comes to XML editing and writing, Dreamweaver 8 almost does the typing for you. The XML features in Code View focus on three aspects:

  • Viewing XML documents.
  • Code completion.
  • Easy navigation in the XML document

The first set of features includes XML syntax highlighting that will help you read the XML structure faster.

Second, the closing tag auto-completion that was already available for HTML, has now been extended to XML. After you type the opening tag of an element, such as <book>, all you have to do is start typing </, and Dreamweaver will automatically detect the element to be closed and will write </book> instead.

1

Figure 1. Code highlighting and auto-completion

The code collapse feature helps you navigate through your XML, hiding irrelevant elements and opening only the ones you need to work on. Just select your nodes and click on the “-“ icon in the left side of the Code View editor, to collapse the selected section. This will make your large documents much smaller, helping you focus on the sections that need attention.

2

Figure 2. Code collapsing

Finally, you get a powerful “Coding toolbar”, conveniently located in the left side of the text editor.

3

Figure 3. The Coding toolbar

The Coding toolbar helps you:

  • Collapse full tag.
  • Collapse parent tag.
  • Select parent tag.
  • Apply source formatting – this one can be very handy, as it will format your XML document hierarchically, indenting child elements as needed.

XML programmers will definitely find the Code editor features handy in their work. As they get used to the new features, they'll also learn about the many available shortcut keys that can help them speed up development.

Validating XML Documents

Dreamweaver 8 helps newbie XML developers create not just well-formed XML, but also valid XML, by offering DTD (Document Type Definition) validation and smart tag completion.

When editing a document that is linked to a valid DTD file, Dreamweaver will interpret it and will use the document definition to help you, the editor, be more productive.

First, you can instantly check the validity of your XML document using the Validate Current Document command in the Dreamweaver toolbar or by using File à Check Page à Validate as XML.

4

Figure 4. Validating an XML document against a DTD

In the Results tab, you can see all the errors. Just double-click them, to go directly to the specific lines in the XML document to correct them.

The DTD document is used to provide smart code completion to help you type the right nodes. Just open a tag, or start typing and press Ctrl + Space, and you will receive a list with the attributes or nodes allowed in the current document.

5

Figure 5. Code hints

More, when you are editing a tag in the source view, you have the possibility to edit it’s attributes in the Tag Inspector. You have a powerful way of changing your XML document by making sure you preserve the validity.

6

Figure 6. Tag editor

XSL Code Editing and Integrated Reference

Of course, Dreamweaver is also packed with documentation and quick reference features to make your life easier while editing XSL files. First, you get a solid code-completion library for your XSL nodes:

7

Figure 7. XSL code completion

For quick XML and XSL reference, you can look up O’Reilly's pocket books in the Reference tab, which will surely help you hit the ground running.

8

Figure 8. O'Reilly Quick Reference

The best is yet to come: in this new build of the O’Reilly reference, you can copy and paste code samples in the code editor! That’s one feature I’ve always craved for.

Transforming XML Documents Visually with XSL

In this section, you'll use the XSL transformation features in Dreamweaver to process an XML document and produce HTML output. First, I'll show you how to convert an HTML page to an XSL template. Dreamweaver 8 includes features for easily creating XSL stylesheets that represent full HTML pages or only sections of them.

9

Figure 9. Converting HTML to XSL

After conversion, you need to link the XSL stylesheet to a XML document (clicking the Source link in the Application panel > Bindings tab).

You can either use a local XML file, or a remote XML, such as a RSS or Atom feed.

10

Figure 10. Specifying the XML datasource

After linking the XML file, you will be presented in the Bindings tab with a canonized version of the XML tree. A canonized version is a simplified representation of the XML tree, using the following symbols:

  • <> for simple elements.
  • <>+ for repeating elements.
  • @ for attributes.

11

Figure 11. XML tree in Bindings tab

The nodes that repeat are shown only once, but marked as “repeated”.

In this example, the <book> node is marked as a repeating node.

In order to process particular XML elements in the newly created XSL stylesheet, just drag and drop them from the Bindings tab into the Dreamweaver Design View.

12

Figure 12. Dragging and dropping XML nodes

As it is, the XSL transformation displays only the first book from the XML document. In order to display all the books, you need to apply an XSL Repeat Region that loops through all the XML <book> nodes:

  • Select the second row of the table (the one containing the book details from the XML document).
  • Go to the Insert bar and select the XSLT tab.
  • Click the Repeat Region button.

13

Figure 13. Apply XSL Repeat Region

  • In the displayed dialog box, select to loop by the <book> node.

14

Figure 14. Selecting the node to loop by

This is how the final output looks in Design View, after clicking OK.

15

Figure 15. Viewing the result in Design View

To preview the output in the browser, just hit F12 (Windows) or Option+F12 (Macintosh).

16

Figure 16. Viewing the result in the browser

As you can see, it takes just a few minutes to create an XML document, an XSL stylesheet to process it, and generate the a basic HTML table with your content. Of course, there's a lot more that you can play with when developing XML-based applications:

  • Create dynamic links, based on other XML nodes.
  • Import RSS feeds in your site and style them to match your site's look and feel.
  • Display or hide XML data when a specific condition is met, in order to generate filtered lists of items.

This should give you a clear idea of what you can achieve with Macromedia Dreamweaver 8 when developing XML-based applications. The visual approach to XSL transformations will certainly make Dreamweaver a productivity tool for both newbie designers and experienced programmers.

MAX 2005: What You Can Expect

Make sure you join me at MAX 2005, if you want to learn more about server-side and client-side XSL transformation and see how easy it is to import and consume a RSS feed in your site.

While waiting for Dreamweaver 8 to be released in order to play with the XML/XSL features, you should take the time to register for MAX and get a chance to learn what's buzzing in the Macromedia world this year.

Along with the XML and XSL support, there are other significant improvements in Dreamweaver 8, from unified CSS support to better file management and powerful code editing features. Regarding server-side development, Dreamweaver 8 includes ColdFusion 7 support and PHP 5 code-hints.

I hope I’ve raised your interest in Dreamweaver 8. See you in Anaheim.

About the Author

Alexandru is President of Products Division with InterAKT Online. He is proficient in several web programming languages, includingJava, PHP and ColdFusion,and led several consulting projects to success. For Macromedia, he was in charge with the development of the ColdFusion MX 7 and the PHP 5 support in Dreamweaver. Alexandru was also involved in designing PHAkt, the first PHP server model for Ultradev 4. Currently, he is in charge with researching and designing the new line of software products for InterAKT Online, and defining the company's philosophy. MX Kollection 3, a professional suite of Dreamweaver extensions, is his most recent success in the attempt toimprove the way developers and designersdevelop web applications. Alexandru is an active contributor to Dreamweaver forums and other developer communitiesand is a writer for the MXDJ and CFDJ magazines, and he keeps a blog with InterAKT insights and tales from web conferences.

 

Pre-Conference Events

 

Sponsors and Exhibitors

 

MAX 2005

 

Partner Summit

 

Hotel & Travel