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
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Accessing Dreamweaver's JavaScript API
Pages: 1, 2

  Related Reading:
DreamWeaver 4: The Missing Manual

DreamWeaver 4: The Missing Manual
By Dave McFarland
July 2001 (est.)
0-596-00097-9, Order Number: 0979
420 pages (est.), $24.95 (est.)

Menu configuration

Earlier versions of Dreamweaver stored its menu structure in a set of HTML documents. Beginning in version 3, the complete menu structure is stored in one XML file, Dreamweaver_Home/Configuration/Menus/menu.xml. This file defines menubars and shortcut lists that are associated to the different Dreamweaver windows by their ID. For instance, the shortcut list and menubar of the main document window are identified by DWMainWindow.



So, open this file and search for a menubar element with ID DWMainWindow, this menubar holds all menus displayed in sequential order like File, Edit, etc. in menu elements. The name attribute of a menu element defines the name displayed. Adding an underscore in front of a letter causes this item be become selectable with the keyboard when selecting the menu via the "Alt" key.

Inside each menu you can find two different types of elements, either a menuitem or menuseparator element. Since menu.xml pretends to be an XML document (which it's not, as it lacks a document element), you have to take care to close those elements properly when you create new ones, i.e. use a slash before the closing bracket to create a well-formed element.

Creating a new menu item

Creating a new entry for our command is a very straight-forward task. Use the Commands menu for this task. Search for the menu with ID DWMenu_Commands. You're free to create a new menuitem like the one below wherever you want inside the menu element:

<menuitem name="Count W_ords" key="Cmd+Alt+o" file="Commands/CountWords.htm" />

Screen shot of reloading the extensions in Dreamweaver.
Figure 1. Reloading extensions in Dreamweaver

The key attribute creates a hotkey combination for the item. The file attribute points to the command file to be loaded. You can also specify JavaScript code directly in an item by using the command attribute. Additionally, the enabled and checked attributes can be used to describe the behavior.

Setting the enabled attribute value to false causes this menu item be become grayed out and unselectable. The checked attribute can be used to add a checkmark in front of the item with an attribute value of true. Both attributes can only be used if you don't use a file-based command and if they can also contain JavaScript code.

Make sure you create a well-formed document, and when you're finished, just save the file. In case you messed up menu.xml, you can find a default version in the same menu, menu.bak, which just needs to be saved over your edited file to restore the default behavior.

Before you can reload the configuration files, make sure that your command file is in place or you'll get an error. You'll find a the recent version of the file in our JavaScript library. Just download it and save the file in your Dreamweaver_Home/Configuration/Commands/ folder as CountWords.htm.

In order to have Dreamweaver reload its configuration, you can restart the application. Much easier is the following trick.

Reloading the configuration

Fortunately you don't have to restart Dreamweaver every time you change something in your configs. Simply open the objects palette (Ctrl-F2), and click the small triangle on the upper right while holding the Ctrl key (see Figure 1).

You'll find a new menu item at the bottom, Reload Extensions. Selecting it causes Dreamweaver to read the configuration files again, and recreate all configurable items like objects, menus, commands, etc.

Get the example files for this article -- plus information and files for other scripts -- in our JavaScript library.

To work with the new command, just select it via the Commands menu, or use the hotkeys if they are available. To count all of the words, don't select any text and you'll get a count for the entire document. Otherwise, make a selection and call the command for a count of a specific area.

What's next?

We're finished with the first part of this series. In the next column I'll explain the tools needed to access Dreamweaver and it's documents: the JavaScript-API. We'll cover the basics and differences of the implemented object model, explain today's solution, and highlight some other interesting features. Stay tuned!

Claus Augusti is O'Reilly Network's JavaScript editor.


Read more Essential JavaScript columns.

Return to the JavaScript and CSS DevCenter.