Dreamweaver Code Completion Mods

Once again we will be discussing Dreamweaver and how to enhance its abilities. Let’s review a couple of handy features that Dreamweaver offers for developers. Code Coloring in Dreamweaver will turn certain pieces of code into specific colors (see figure 1 below).

These colors can be user defined by using the preferences within Dreamweaver. In a Windows environment, these can be found in Edit and then Preferences and then Code Coloring and choose the type of code you want to redefine and click on Edit Coloring Scheme.

Code Hints in Dreamweaver will assist you with language functions. As you complete a language function name, Dreamweaver will display the parameters of the function. It’s a very handy feature in case you can’t remember every parameter requirement for every function.

See figure 2 below for an example of Code Hints. Also, see this post to review how to edit and modify these two features:

Configure Code Hints and Code Coloring in Dreamweaver

Figure 1:

Figure 2:

A third feature that really completes Dreamweaver’s development abilities is Code Completion. As you type a language function name, Dreamweaver has the ability to make suggestions in order to help you complete the function’s name.

This is a very handy feature. For example, let’s say you wanted to use one of the mysql_fetch functions. Once you type mysql_fetch_ you should see a popup similar to this image:

Code Coloring, Code Hints and Code Completion are wonderful features of Dreamweaver. But, what if you want to add functions in the Code Completion that are not already included? For example, the always loved oci_ functions. Here’s what our Dreamweaver looks like when we type in oci_ :

Dreamweaver, our beloved Swiss Army Knife of development tools, has no code completion for the php oci_ functions. That just won’t do. In this post, we’re going to show you how to modify Dreamweaver’s Code Completion capabilities. We will work with the oci_fetch functions as examples.

Preparation

As always, MAKE A BACKUP COPY OF YOUR ORIGINAL FILES. Never save over a file without making a backup of the original.

Also, you will need to be able to view hidden files. You can make hidden files visible in Windows Explorer by clicking on Tools and then Folder Options, then click on the View tab and under Hidden files and folders, click Show hidden files and folders.

One final reminder, NEVER use Dreamweaver to modify a Dreamweaver configuration file. It’s like sending a text to a fellow IT employee complaining about the Director of your IT Department, except you accidently send it to the Director of your IT Department. Bad things will happen.

Modifying the Code Completion File

The file we want to modify is titled CodeHints.xml and in CS3 and CS4 it is located in Program Files, Adobe, Adobe Dreamweaver (version number), Configuration and then CodeHints. We have previously modified our file to already contain the oci_fetch functions. A section of our CodeHints.xml file looks like this:

You will want to find the line that contains the first oci_fetch function pattern. In our file, that’s line 2078. In the line preceding (2077) you want to insert this piece of code:

<menu pattern=”oci_fetch_” doctypes=”PHP_MySQL” caseSensitive=”true”>

Next, you will need a line similar to the following for each oci_fetch function that exists:

<menuitem label=” all” value=”all(” icon=”ThirdPartyTags/PHP.gif”/>

And finally, you want to add the following line to wrap up the menu pattern:

</menu>

Our completed code block for this section looks like this:

<menu pattern=”oci_fetch_” doctypes=”PHP_MySQL” caseSensitive=”true”>

<menuitem label=”all” value=”all(” icon=”ThirdPartyTags/PHP.gif”/>

<menuitem label=”array” value=”array(” icon=”ThirdPartyTags/PHP.gif”/>

<menuitem label=”assoc” value=”assoc(” icon=”ThirdPartyTags/PHP.gif”/>

<menuitem label=”object” value=”object(” icon=”ThirdPartyTags/PHP.gif”/>

<menuitem label=”row” value=”row(” icon=”ThirdPartyTags/PHP.gif”/>

</menu>

Next, save the modified CodeHints.xml file and s tart Dreamweaver. If you already had Dreamweaver open, you will need to restart it. Open a PHP page and try out the new oci_fetch_ code completion feature. Ours looks like this now:

As you can see, when we type oci_fetch_ we Dreamweaver pops up the code completion window and offers the 5 oci_fetch_ functions we entered in the menu pattern code sample above.

Explanation of Modification

Let’s review the code we added to the CodeHints.xml file to achieve the oci_fetch_ code completion feature. The first line:

<menu pattern=”oci_fetch_” doctypes=”PHP_MySQL” caseSensitive=”true”>

This line explains to Dreamweaver that we are instituting a pattern for Code Completion. The pattern is everything in quotes after the first equal sign. So, anytime you type oci_fetch_ Dreamweaver needs to display the following menuitem labels as code completion options. The first menuitem label looks like this:

<menuitem label=”all” value=”all(” icon=”ThirdPartyTags/PHP.gif”/>

The label portion of this line is the text to be displayed in the code completion pop up. The value is what to display if we choose this code completion option. Once you choose an option from the code completion pop up, it will automatically include the pattern and the value.

So, if you choose array from the code completion pop up, Dreamweaver will insert oci_fetch_array( into the code for you. Finally, Because we like to be complete nerds, the icon feature is the icon that should appear in the code completion pop up.

Obviously, since we are working with PHP functions, we want the PHP icon to appear. The last line that we added was used to notify Dreamweaver the menu pattern was ending:

</menu>

If you already have the code hint for the oci_fetch_ functions in the CodeHints.xml file, you should also see the parameters listed for the function you choose from the code completion pop up box. We picked array from the code completion pop up box and our code hint looks like this:

You will also notice, since we have the oci_fetch_array function in our PHP.xml file under the CodeColoring directory, it appears blue on the screen.

Wrap Up

In this post we covered how to modify Dreamweaver’s code completion feature. Feel free to experiment with code completion in Dreamweaver. Please remember to make a backup copy of anything you are going to modify.