Adding a dialog box

You can add a form to your object to let the user enter parameters before Adobe Dreamweaver inserts the specified code (for example, the Hyperlink object requests the text, link, target, category index, title, and access key values from the user). In this example, you add a form to the Strikethrough object from the previous example. The form opens a dialog box that provides the user with the option to change the text color to red as well as add the strike-through tag.

This example assumes you have already created a separate JavaScript file called Strikethrough.js.

First, in Strikethrough.js, you add the function that the form calls if the user changes the text color. This function is similar to the objectTag() function for the Strikethrough object, but is an optional function.

To create the function:

1. After the objectTag() function in Strikethrough.js, create a function called fontColorRed() by entering the following code:

   function fontColorRed(){ var dom = dw.getDocumentDOM(); if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){  var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") == 'TRUE');   // Manually wrap tags around selection. if (upCaseTag){ dom.source.wrapSelection('<FONT COLOR="#FF0000">','</FONT>'); }else{ dom.source.wrapSelection('<font color="#FF0000">','</font>'); } }else if (dw.getFocus() == 'document'){ dom.applyFontMarkup("color", "#FF0000"); }  // Just return -- don't do anything else. return;}

   NOTE

   Because dom.applyCharacterMarkup() doesn't support font color changes, you need to find the appropriate API function for font color changes. (For more information, see dom.applyFontMarkup() in the Adobe Dreamweaver API Reference).

2. Save the file as Strikethrough.js.

Next, in the Strikethrough.htm file, you add the form. The form for this example is a simple checkbox that calls the fontColorRed() function when the user clicks on it. You use the form tag to define your form, and the table tag for layout control (otherwise, the dialog box might wrap words or size awkwardly).

To add the form:

1. After the body tag, add the following code:

   <form><table border="0" height="100" width="100"> <tr valign="baseline"> <td align="left" nowrap> <input type="checkbox" name="red" onClick=fontColorRed()>Red text</input> </td> </tr></table></form>

2. Save the file as Strikethrough.htm.
3. Reload the extensions (see Reloading extensions).

To test the dialog box:

1. Click the Red Text checkbox.

   

2. Click OK to perform the objectTag() function, which adds the strike-through: