Q. How can I make an interactive Object extension?

A. Creating Objects is the simplest form of extension writing. With a little JavaScript and not a lot else, you too can make a simple extension. To learn how to do this, see the tutorial below..

The Making of a Simple, but Useful Dreamweaver Extension

Author: Colm Gallagher
Author's Site: ColmGallagher.com
Reference ID: 15621

What'll we make today?

I'm going to show you how to make an extension which will allow you to create advanced email links from within the dreamweaver user interface. OK, so there are plenty of extensions to do this, but it's a simple one and it will give you a good idea about how an extension works.

Theory:
The Dreamweaver API (Application Programming Interface) is used to add extensions to the program in order to add greater functionality to the program. These extensions can be Objects, Behaviours, Panels, menu Commands, etc. The simplest type of extension is an Object. An Object simply inserts code into a HTML page. It can contain a form to gather information to insert.

The extension we're going to make here will be an Object. We will use a form to gather the required information and our script will insert it into the HTML document.

What documents will we need to create?
We could get away with using just one HTML document to create our extension. Anyone wanting to use the extension would have to copy it to their dreamweaver/configuration/objects/common folder. The default Dreamweaver icon would be used in the Objects Panel. But we're not going to do it that way.

We want our users to be able to install the extension through the Extension Manager. Just click on the .mxp file and the extension will be installed into the correct directory. We also want to have a little custom icon in the Object Panel. To achieve all this we need to create just three files, our HTML document, our GIF icon and a .mxi file.

I know what HTML and GIF files are, but what's a .mxi file?
The .mxi file carries all the information about the name of the extension, who authored it, what type of extension it is, what files belong to it and where they are to be installed. We're not going to write one from scratch. We've much better things to be doing so we're just going to take an existing .mxi file and change the bits we need. Then we'll rename and save the file. Easy!

What sort of GIF file do we need to create?
The GIF file will be displayed at 18x18 pixels. If the file is of larger dimensions than that, DW will shrink it.

What about the HTML file?
The file will be quite simple. A little bit of JavaScript and a form, that's all.

Where do we start?
OK, first we need to decide what we want to achieve. In this case we want to create a mailto link in dreamweaver without having to type in any code. So we'll need to understand the structure of a mailto link. It might go something like this:

<a href="mailto:?To=email&Subject=Subjecttext&cc=ccemail&body=message>Email</a> or, alternatively,
<a href="mailto:email?Subject=Subjecttext&cc=ccemail&body=message>Email</a>

Both formats are acceptable. We'll go with the first one.
For more information on mailto links see the special links tutorial.

So let's break it down. Most of the link will never change. There can be up to five variables in a mailto link. I've highlighted them in the examples above. The only two that are required for the link to work are the recipient's email address and the Text which will appear in the browser. So we'll need to declare five variables in our script and we'll have five input fields in our form. Let's get started...