To create the codehints for a static javascript class you need to follow this xml structure in your codehints file:

1
2
3
4
5
6
7

 
<menu pattern="exampleObject." casesensitive="true">
	<menuitem label="identifier" icon="shared/mm/images/hintProperty.gif" source="Example Project" object="exampleObject" />
	<menuitem label="onShow" icon="shared/mm/images/hintProperty.gif" source="Example Project" object="exampleObject" />
	<menuitem label="onHide" icon="shared/mm/images/hintProperty.gif" source="Example Project" object="exampleObject" />
</menu>
<function pattern="exampleObject.openURL(String url)" casesensitive="true" icon="shared/mm/images/hintFunction.gif" source="Example Project" />

Codehinting Example for Static Classes

To create the codehints for an instantiated javascript class you need to follow this xml structure in your codehints file:

1
2
3
4
5
6
7
8

 
<function pattern="ExampleItem()" casesensitive="true" icon="shared/mm/images/hintClass.gif" source="Example Project" />
<menu classpattern="ExampleItem">
	<method pattern="append(ExampleItem childExampleItem)" icon="shared/mm/images/hintFunction.gif" />
	<menuitem label="ExampleItemStateChanged" icon="shared/mm/images/hintEvent.gif" />	
	<menuitem label="onSelect" icon="shared/mm/images/hintProperty.gif" />
	<method pattern="remove(ExampleItem childExampleItem)" icon="shared/mm/images/hintFunction.gif" />
</menu>

Codehinting Example for Instantiated Class

The JavaScript codehinting works perfectly in .js files; however I’ve noticed that the codehints for instantiated JavaScript classes do not display when you are working within <script> tags in .html files.

I’ve included a simple example Dreamweaver Extension that implements the exampleObject and ExampleItem JavaScript classes in the codehints. You can use the Example_CodeHints.xml file in the source as a reference point.

Link to source code download.

There are three eventhandlers:

1. after save event – this is triggered when the changes to a file have been saved.
2. before save event – this is triggered before the changes to a file have been saved.
3. on open event – this is triggered when Dreamweaver (and when documents) are opened.

You can find the global events in Dreamweaver’s default Commands directory.

Mac: Macintosh HD:Applications:Adobe Dreamweaver CS4:configuration:Commands

Windows: C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\Commands

The eventhandler files are:

1. _afterSave.htm
2. _beforeSave.htm
3. _onOpen.htm

To create your own eventhandlers you simple create a prefixed version of the eventhandler command (e.g. alert_afterSave.htm). You can include the necessary JavaScript within <script> tags in your .htm file or you can write a corresponding .js (alert_afterSave.js) file that needs to be included in your .htm file.

I’ve created a very simple example extension that demonstrates how the eventhandlers work. The .mxp installer and source code can be downloaded at the end of this post. The example extension will install into your user account’s application data folder.

Mac: Macintosh HD:Users:<userName>:Library:Application Support:Adobe:Dreamweaver CS4:en_US:Configuration:Commands

Windows: C:\Documents and Settings\<userName>\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration\Commands

Link to source code download.