May 13

One of Dreamweaver CS4′s new features is the ability to create codehints for JavaScript classes.

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

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

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.