Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Essential JavaScript

Extending Dreamweaver: Let Dreamweaver Create Your Menus


Welcome to the third part of my Dreamweaver series. While part one was an introduction to Dreamweaver's menu configuration and commands, we created our own first command in the second part by introducing the Dreamweaver DOM basics.

Today's menu is a bit more sophisticated; we'll be using various features and API functions to build a new object that will have Dreamweaver create a tree-style menu for your site's navigation in a single click.


Just as with our previous columns, you will need Dreamweaver or Dreamweaver Ultradev version 3 or later to use our examples. You can download a free 30-day evaluation copy of Dreamweaver 4 at Macromedia. A recommended additional reading is Macromedia's Extending Dreamweaver, which contains the complete docs and lists and explains all JavaScript APIs.

In order to deploy the new object we will create on your site, you will need to activate JavaScript and some basic CSS support, as the object uses CSS's display property. Be sure to check for your target audience before using this object in your projects -- some of the platforms supported are Mozilla/Netscape 6, Internet Explorer 5.x for Windows and Macintosh, and Opera.

The Idea

So, what's this all about? In many cases, when you're building your site, you'll organize the files in such a manner that your directory structure can be directly modeled into a navigation system. For hierarchical structures, a tree-style menu has proven to be very useful, since it's a natural way to display this kind of structure.

The idea is actually simple: use a bunch of Dreamweaver API functions, which will scan your complete site or a subfolder of it to build a tree-style hierarchical menu widget automatically. The menu items are being created from the file names -- an enhanced version could also scan the files for their titles. See the examples page for samples of the menus being created.

Working with Files

Dreamweaver defines dozens of functions to work with files that are divided into different APIs. The File I/O API contains 10 different functions that form a basic set to work with files; for example, you can create, read, or delete files and folders or their attributes. The methods of the File I/O API can be accessed via the DWfile object.

Also in Essential JavaScript:

Extending Dreamweaver with its JavaScript API

Accessing Dreamweaver's JavaScript API

Creating Themes with CSS and JavaScript

You're limited to working with file:// URIs with this API; in order to access a document out on the Web, you have to use the HTTP API, which is unfortunately only available in Dreamweaver 4. The HTTP API consists of only seven functions; these are enough to let you get and post data to any valid HTTP server.

The file manipulation functions are responsible for opening, browsing, and saving documents and style sheet files inside the editor environment. The largest function group, containing about 50 functions, handles the site files and site map. Among other things, these functions allow you to check links, make and retrieve selections, access current sites, define new sites, check out files. These functions are invoked as methods of the site object that are always available.

Step 1: Get the Selection

OK, this is where we need to start. We must access the selection and make sure that it's only a single folder; it will later act as the menu structure's root node (I'll only excerpt the interesting parts of the source code -- you can either browse the code directly or download it from our library):

var sel = site.getSelection(); // return an array of selected file names
  var folder = sel[0]; // get the first file of the selection
  if (DWfile.getAttributes(folder) != "D") { // is it a directory?
    // error

getSelection() returns an array of strings, which are absolute file:// URIs of the files selected. The next function, getAttributes(), is part of the File I/O API; it returns either R (read only), D (directory), H (hidden) or S (system). After checking all values, we could continue by reading the contents of the folder by calling the listFolder() method which returns an array of file names:

var files = DWfile.listFolder(folder);

But things are a little more complicated than that. What happens if this folder contains one or more sub-folders? listFolder() only operates on the selected folder itself; it won't descend into any containing folders. We have to solve this task in our algorithm.

The solution comes in the form of one of the most powerful programming techniques: recursion.

Pages: 1, 2

Next Pagearrow