How Dreamweaver Is Configured | Dreamweaver MX Extensions

Like other commercial applications, the core of the Dreamweaver application is written in the C programming language. Unlike other programs, however, the Dreamweaver core allows the application to call on external files to construct much of its interface and execute its various functions. These external files are written in a combination of HTML, JavaScript, and XML. They are stored in the Dreamweaver application folder, in a subfolder called Configuration. Unlike the core application, the configuration files are easily and fully editable within a text editor, so they are open to examination and alteration.

note

Why can't we open and edit most commercial programs or the core Dreamweaver application? Programming languages such as C are compiled languages, which means that programs written in those languages must be compiled into non-editable packages called executables. JavaScript, on the other hand, which creates the functionality of Dreamweaver extensions, is an interpreted language. Script files that are created in JavaScript remain in editable text format and are processed at runtime by an interpreting application, such as a browser or the Dreamweaver core application.

The Configuration Folder

Open the Dreamweaver application folder, and you'll find the Configuration folder. This is the heart of Dreamweaver extensibility. Open up the Configuration folder and you'll see subfolders representing each major interface element (as well as other folders whose purpose may not be as immediately evident). You'll see folders for Menus , Objects, Behaviors, Commands, Inspectors, Floaterseach one contains the functionality for that part of the interface. (In case you were wondering, "inspectors" are Property inspectors; all other panels are " floaters ," or floating panels. Objects are items in the Insert bar and Insert menu.) If you examine the files within the folders, you'll see a combination of XML, HTML, and JS files whose names match Dreamweaver commands and other functions. Inside the Objects folder, for instance, you'll find a folder corresponding with each tab in the Insert barCommon, Forms, Media, Frames, and so on. In the Common folder, you'll find Table.htm, Navigation Bar.htm, E-Mail Link.htm, all of which should be familiar to you as the items found in the Common tab of the Insert bar. Figure 1.1 shows the Configuration folder and its contents.

Figure 1.1. The Configuration folder showing its subfolders.

graphics/01fig01.gif

note

Actually, the structure of the Configuration folder is not always that straightforward. If you look in the Commands folder, for instance, you'll see files representing things that you might not think of as Dreamweaver CommandsJump Menu or Insert Nav Bar, for instance. For the most part, though, it's easiest (and perfectly safe) to think of each folder containing elements related to its name .

The Structure of Configuration Files

The Configuration folder contains four main kinds of file: HTML, JS (JavaScript), GIF, and XML. Each has a specific purpose in how Dreamweaver looks and works.

Each different thing Dreamweaver can doeach object or behavior to be inserted, command to be executed, inspector to be displayed, and so forthis coded into an HTML extension file. The visual components of that elementdialog boxes and panel interfacesare built from the <body> content of the HTML file, including a form and form elements for collecting user input. If the visual interface uses any graphic elements, these are created from GIF images linked to the HTML file. The functional part of the extension is created from JavaScript, either written into the HTML file or saved in a separate JS file that is linked to the HTML file.

How the Dreamweaver interface ties all these extensions together is determined by the Configuration folder's XML files. For instance, the menus.xml file (found in Configuration/Menus) determines which menus will appear, which items each menu will hold, and what will happen when a menu item is selected. The insertbar.xml file (Configuration/Objects) determines what buttons will appear in the Insert bar and how they'll behave when clicked. The various XML files in the Configuration/ ExtensionData folder determine what code the Dreamweaver Live Data objects will insert.

A simple example of how this works is the Table.htm file, which is in the Objects/Common folder. This is the file that Dreamweaver launches every time a user clicks the Table object in the Insert bar or chooses Insert > Table. Open Table.htm in a text editor and you'll see that it contains the standard code for an HTML page. This HTML page contains a form that creates the dialog box we see whenever we insert a table in Dreamweaver. The file's functionalitythe bit that makes Dreamweaver insert table code into a user's page when the user clicks the OK button in the dialog boxis contained in an external JS file, to which this document links.

If you open the Table.js file to examine that JavaScript code, you'll see some JavaScript functions you're probably not familiar with, such as objectTag() and isDomRequired() . These are part of The Dreamweaver JavaScript API; we'll be learning about them in the course of this book.

Multiple Configuration Folders

How many Dreamweaver Configuration folders are there on your computer? If you're working with Dreamweaver MX (and not one of the earlier versions of the program), you may have two, three, or more Configuration folders. To successfully extend your Dreamweaver application, you need to know your way around them.

Previously Installed Versions

If you already had Dreamweaver installed on your computer when you installed Dreamweaver MXfor instance, if you upgraded from an earlier version or if you've re-installed Dreamweaver MXyour Dreamweaver application folder will include an extra Configuration folder called Configuration-1, containing the configuration files from the previous installation. If you've upgraded or re-installed a number of times, you might even have a Configuration-2 and even a Configuration-3 folder.

These are inactive folders. They're present in case you want to access any special configuration information, such as custom extensions, from your previous installation. For purposes of doing the exercises in this book, you can ignore these folders.

User-Specific Configuration Files

If your computer's operating system supports multiple user setups (Windows, Mac OS X), Dreamweaver creates two sets of configuration files: In addition to the main Configuration folder located in the Dreamweaver application folder, it also creates a Configuration folder for each user that contains a personalized set of files that will be used only when that user launches Dreamweaver. For Dreamweaver/Windows, each user's personal Configuration folder is stored in:

 c:\documents and settings\  username  \application data\macromedia\dreamweaver mx\  configuration\

For Dreamweaver/Mac OS X, they're stored in:

 /users/  username  /library/application support/dreamweaver mx/configuration

(For each user, substitute the correct user name for username .) This folder is created the first time the user launches Dreamweaver.

Examine one of these extra folders, and you'll see that it isn't a complete duplicate of the main Configuration folder. It contains only certain files, representing interface elements that individual users may want to customize only for their own use. Application preferences such as code coloring, menus that can be customized with keyboard shortcuts, commands recorded using the History panel, and objects that save their dialog box settings from one work session to another, are all saved as files in the individual user's Configuration folder.

How does Dreamweaver determine which configuration files to use? It always begins by checking to see whether a certain file is present in the user's Configuration folder. If not, it looks for the file in the main Configuration folder.

How does this affect you as an extension developer? If your extension project involves editing menus.xml or some other user-customizable extension file, you'll need to know which version of the file to open and edit. You can also create your own extensions that include user-specific features by telling Dreamweaver to save them to the user's Configuration folder. If you like, you can also isolate your extension files in progress by storing them in a user-specific Configuration folder. If you create a special Dreamweaver Developer user for your computer, you can log on as that user to do your developing and then log on as another user when you need to use Dreamweaver for your day-to-day web authoring jobs. That way, you won't risk compromising your program's stability as you develop your extensions.

For the exercises in this book, it's assumed you're working on the main Configuration folder unless otherwise specified.