A simple floating panel example | Developing Extensions for Macromedia Dreamweaver 8

< Day Day Up >

In this example, you create a Script Editor extension that creates a floating panel to display the JavaScript code that underlies a selected script marker in Design view. The Script Editor displays the JavaScript code in the textarea element of an HTML form that is defined in a floating panel called scriptlayer. If you make changes to the selected code in the floating panel, the extension calls the updateScript() function to save your changes. If you have not selected a script marker when you invoke the Script Editor, the extension displays (no script selected) in a floating panel called blanklayer.

You create this extension by performing the following steps:

Creating the floating panels
Writing the JavaScript code
Creating a menu item

Creating the floating panels

The beginning of the HTML file for this extension contains the standard document header information and a title tag that puts the words Script Editor in the title bar of the floating panels.

To create the HTML file header:

Create a new blank document.

Enter the following:

 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Script Editor</title> <script language="JavaScript">

The extension defines two floating panels that display either (no script selected) if the user has not selected a script marker or the JavaScript code that underlies a selected script marker. The following code defines these two floating panels, or layers, called blanklayer and scriptlayer:

To create the two floating panels:

Add the following code after the header in the HTML file:


 <body> <div  style="position:absolute; width:422px; height:181px; z-index:1; left:  8px; top: 11px; visibility: hidden"> <center> <br> <br> <br> <br> <br> (no script selected) </center> </div> <div  style="position:absolute; width:422px; height:181px; z-index:1; left : 8px; top: 11px; visibility: visible"> <form name="theForm"> <textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" onBlur="updateScript()">< /textarea> </form> </div> </body> </html>

Save the file as scriptEditor.htm in the Configuration/Floaters folder.

Both div tags use the style attribute to specify the position (absolute), size (width:422px and height:181px), and default visibility setting (visible) of the floating panels. The blanklayer panel uses the center attribute and a series of break (br) tags to position the text in the center of the panel. The scriptlayer panel creates a form with a single textarea to display the selected JavaScript code. The textarea tag also specifies that when an onBlur event occurs, indicating that the selected code has changed, the updateScript() function is called to write the changed text back to the document.

Writing the JavaScript code

The JavaScript code for the Script Editor consists of one floating panel function that Dreamweaver calls, selectionchanged(), and one user-defined function, updateScript().

selectionChanged(): is a script marker selected?

The selectionChanged() function determines whether a script marker has been selected in Design view. A script marker appears in Design view if there is a JavaScript routine in the BODY section of a document and if Scripts is selected on the Invisible Elements section of the Preferences dialog box. The following figure shows a script marker icon:

The selectionChanged() function first calls the dw.getDocumentDOM() function to get the Document Object Model (DOM) for the user's document. It then calls the getSelectedNode() function to see if the selected node for that document is, first, an element and, second, a SCRIPT tag. If both these conditions are true, the selectionChanged() function makes the scripteditor floating panel visible and loads it with the underlying JavaScript code. It also sets the visibility property of the blanklayer floating panel to the value hidden. The following figure shows the scriptlayer floating panel with the selected JavaScript code:

If the selected node is not an element, or it is not a SCRIPT tag, the selectionChanged() function makes the blanklayer floating panel visible and hides the scriptlayer panel. The blanklayer floating panel displays the text (no script selected), as shown in the following figure:

To add the selectionChanged() function:

Open the file scriptEditor.htm that is in the Configuration/Floaters folder.

Enter the following code in the header section of the file.

 function selectionChanged(){   /* get the selected node */   var theDOM = dw.getDocumentDOM();   var theNode = theDOM.getSelectedNode();   /* check to see if the node is a script marker */   if (theNode.nodeType == Node.ELEMENT_NODE && theNode.tagName == "SCRIPT"){     document.layers['scriptlayer'].visibility = 'visible';     document.layers['scriptlayer'].document.theForm. scriptCode.value = theNode.innerHTML;     document.layers['blanklayer'].visibility = 'hidden';   }else{     document.layers['scriptlayer'].visibility = 'hidden';     document.layers['blanklayer'].visibility = 'visible';   } }

Save the file.

updateScript(): write back changes

The updateScript() function writes back the selected script when an onBlur event occurs in the textarea of the scriptlayer panel. The textarea form element contains the JavaScript code, and the onBlur event occurs when textarea loses input focus.

To add the updateScript() function:

Open the scriptEditor.htm file that is in the Configuration/Floaters folder.

Enter the following code in the header section of the file.

 /* update the document with any changes made by    the user in the textarea */   function updateScript(){   var theDOM = dw.getDocumentDOM();   var theNode = theDOM.getSelectedNode();   theNode.innerHTML = document.layers['scriptlayer'].document. theForm.scriptCode.value; } </script> </head>

Save the file.

Creating a menu item

It is not sufficient to save the Script Editor code in the Configuration/Floaters folder. You must also call either the dw.setFloaterVisibility('scriptEditor',true) function or the dw.toggleFloater('scriptEditor') function to load the floating panel and make it visible. The most obvious place from which to invoke the Script Editor is from the Window menu, which is defined in the menus.xml file. You need to create the menuitem tag that creates an entry for the Script Editor extension on the Window menu, as shown in the following figure:

If you select a script marker in Design view for the current document and then select the Script Editor menu item, it invokes the Script Editor floating panel and displays the JavaScript code that underlies the script marker. If you select the menu item when a script marker has not been selected, it displays the blanklayer panel that contains the text (no script selected).

To add the menu item:

1.	Open the menus.xml file in the Configuration/Menus folder.
2.	locate the tag that begins `<menuitem name="Tile _Vertically"` and position the cursor after the closing `/>` of the tag.
3.	On a new line, insert the following: <menuitem name="Script Editor" enabled="true" command="dw.toggleFloater('scriptEditor')" checked="dw.getFloaterVisibility('scriptEditor')" />
4.	Save the file.

< Day Day Up >