Untitled Document

This article will show how to create an extension package for Dreamweaver. Dreamweaver extensions are basically HTML and JavaScript files stored in a user's local configuration folder. To move an extension to a different machine or share it with other users, you can create an extension package. Dreamweaver comes with a free Extension Manager, which also includes a built-in packager for extensions.

In addition to packaging extensions, an extension package can change a Dreamweaver menu. Also, when you create a package with the Extension Manager, you know that the appropriate files are going to be added correctly in the multiuser Configuration folder.

Note: Dreamweaver version 6 added a sophisticated framework to the Dreamweaver platform that allows extensions to be installed into the folder of the current user, located in c:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver\Configuration on a Windows 2000 and higher machine. For more information on the local configuration folder, check Danilo's blog entry at CMXTraneous.

The process of creating a package is started by writing a Macromedia eXtension Information (MXI) file with all the information about your extension. The MXI file is in a limited XML (eXtensible Markup Language) format. It's not true XML, and as such shouldn't be edited in a dedicated XML editor; instead, it's a variation of XML that is recognized by the Extension Manager API.

To write your MXI file, you can use the template that's included in the Dreamweaver package, or you can modify an existing MXI file. When you install a third-party extension, the MXI files are unpacked to the Extensions folder under Configuration. These files don't have an editor associated with them, but they can be opened in Notepad or BBEdit, or any text editor. Make sure to save as plain text after you make your changes to the file.

The next section goes through the process of creating the MXI file and packaging an extension by using the Evaluate JavaScript floating panel that was featured in an earlier article.

Note: All files required for the Evaluate JavaScript floater are included in the download package at the end of the article, including the completed MXI and MXP files.

Main Tag

The main tag of the MXI file is the <macromedia-extension> tag. This tag specifies the name, version, type, and the optional attribute of requires-restart. In addition, if you submit the extension to the Macromedia Exchange, Macromedia will insert an ID number into this tag, which should not be edited.

<macromedia-extension
name="Evaluate JavaScript"
version="1.1.2"
type="floater"
requires-restart="true">

The name should be a unique name, and is usually the same as the title that you give to the extension in the HTML file of that extension. The version number consists of three digits representing the main version number, the revision number, and the minor revision number. For example, if you begin with 1.0.0 and submit the extension to Macromedia, and you are asked to make small changes in the extension, you should number the next version 1.0.1, and so on. If you make a major change in the extension, the middle number would change. If you create a completely new version, the first number would change.

The type attribute should be one of the extension types recognized by Dreamweaver. A list of available types is shown in the following table. The requires-restart attribute is optional and should be used if your extension requires the program to be restarted after the extension is installed.

object	command	behavior (or action)	translator	dictionary
browserProfile	encoding	floater	propertyInspector	jsExtension
query	template	thirdPartyTags	plugin	report
suite	dataSource	serverFormat	serverBehavior	serverModel
codesnippet	toolbar	samplecontent	site	taglibrary

Available Extension Types for Dreamweaver

Products and Authors Tags

The next tag is the <products> tag, which consists of the names of the programs that the extension will work with. Some extensions may only work with specific versions of Dreamweaver, such as this one which requires Dreamweaver 6 or higher.

Next is the <author name> tag, which you can use to identify the extension as written by you, or you can put a company name in here:

Description of the Extension

The next required tag is the <description> tag, which provides a description of the extension. Inside this tag is a CDATA attribute that sets off the start of your description data. The description should indicate the basic functionality and usage of the extension. The text of the <description> tag can contain some HTML limited to br tags and   characters:

Tip: If your extension description is complex, make liberal use of and   in your description—spaces, tabs, and newlines are ignored when the description is displayed in the Package Manager.

After the description of the extension is the UI-Access tag, in which you describe how the extension is accessed and applied to the Web page. The UI-Access tag also has the CDATA directive, and has the same HTML restrictions as the <description> tag:

<UI-Access>
<![CDATA[
To access this extension, choose CMX Evaluate JavaScript from
the Windows menu.
]]>
</UI-Access>

Putting Your Files into the Extension Package

Before you package your extension, you should copy all the files to a staging area, which can be a central folder for all of your extension packages, or a folder that mimics the directory structure of the Dreamweaver Configuration folder. Macromedia advises against packaging the extensions directly from within the Dreamweaver environment. You can try to keep a folder that has all of your extension packages in separate subfolders within a main extension package staging area. The child tag of the <files> tag is the <file> tag, in which you actually give the name of each file that is to be included in the extension package.

If you keep the MXI file within this same staging area folder as your files, you can keep your packaging paths simple for the <file> tag. This path is always a relative path to the actual file that you are packaging:

Note: The filename in the source attribute of the <file> tag always has to be a relative path to the file from the MXI file. By using a staging area, you can eliminate the complex use of paths in your filenames.

The filename is given, and must be listed as a relative path to the MXI file. The destination is also given as a path, with the path referencing the Dreamweaver root folder by using a $dreamweaver directive. This is a built-in variable that refers to the program that is receiving the installation, and can be used for both Dreamweaver and UltraDev. Other options at the present time are $fireworks for a Fireworks extension and $flash for a Flash extension.

Changing the Dreamweaver Menus

Next are the configuration changes. These are the additions to the various menus within Dreamweaver. In fact, you can build an extension that is nothing but menu changes. Suppose you want a Close All Files command to be accessible from the contextual menu to conform to your work habits. You could edit the menus.xml file by hand, or you could create an MXI file with the menu change spelled out in a configuration-changes tag. This way, you can undo the changes by simply removing the extension from Dreamweaver. This is just a better way to handle your menus so that you can document and undo the changes you make to the menu if needed.

The <configuration-changes> tag for this particular extension is as follows:

<configuration-changes>
<menu-insert insertAfter="DWMenu_Window_PrevDocument">
 <separator id="CMX_DWMenu_Window_SeparatorEvalJS" />
 <menuitem id="CMX_DWMenu_Window_EvalJS" name="CMX Evaluate JavaScript"
 enabled="true" command="dw.toggleFloater('EvaluateJavaScript')"
 checked="dw.getFloaterVisibility('EvaluateJavaScript')" />
 </menu-insert>
</configuration-changes>

Notice the ID attribute that is added to the menu items. The ID should be something unique to your extension. Macromedia recommends adding a unique prefix to the beginning of the menu item. For instance, the preceding code adds a menu item to the DWMenu_Window menu. The new ID is given a name CMX_DWMenu_Window_EvalJS with a unique prefix (CMX) and a unique suffix (EvalJS). The final ID is CMX_DWMenu_Window_EvalJS, and will be unique to this extension. This is necessary to avoid conflicts with other extensions written by yourself or other people. A separator was also inserted with it's own unique identifier.

Wrapping Up the Package

After completing all of the required tags, you must close out the main tag:

</macromedia-extension>

Now that you have an MXI file for the extension, you can open it in the Macromedia Extension Manager. On a PC, right-click the MXI file and click Open With Macromedia Extension Manager; on a Mac, open the Extension Manager and click File | Open. Newer versions of the Extension Manager will open if you double-click the MXI file. Next, you are prompted for Extension to Package and the filename to Save Package As. After you complete this process, you can install the extension in any machine by using the MXP file that is the result of the packaging operation. The MXP file contains all the files of your extension, as well as the MXI file to tell Dreamweaver where to put the files and what changes to make to the Dreamweaver menus. When the extension is installed, the MXI file is installed to the Extensions folder under Configuration, so that the Extension Manager can keep track of which extensions are installed.

Note: The Extension Manager has gone through many changes since it was created. Some versions had serious bugs in them. You should read the help files that came with the version on your computer, and check the Macromedia Web site for the newest version of the Extension Manager.

You can submit packaged extensions to the Macromedia Exchange and share them with other users. The submission process is outlined on the Macromedia Exchange Web site, at http://www.macromedia.com/exchange. In addition to the submission, there is also an option for a Macromedia seal of approval, which verifies that the extension has been tested for bugs and compatibility issues by the Macromedia Quality Assurance engineers, and is a good indication that the extension is safe to install. Whether you choose to submit your extension to the Exchange or not, you should package your extensions. Packaging the extensions offers these advantages:

It allows you to keep track of installed extensions more easily.
Uninstalling an extension is much easier, because all extension files are removed at once.
Changes to the menu files are reversible when the extension is uninstalled.
Transporting the extension is easier, because all of the individual files contained in the extension are in one package.
Extensions can be “turned off” by unchecking the package in the Extension Manager interface—they still show up in the Extension Manager, but are inactive in Dreamweaver.

Conclusion

Macromedia has added to the success of Dreamweaver by allowing third parties to easily delve into the inner workings of the program. If you have the desire to extend Dreamweaver, the next step is packaging extensions. This article has outlined the process of extension packaging.