Adobe 38040334 Extending Dreamweaver - Page 226

DREAMWEAVER CS3 220 Extending Dreamweaver A simple floating panel example 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" on page 220 • "Writing the JavaScript code" on page 221 • "Creating a menu item" on page 223 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: 1 Create a new blank document. 2 Enter the following: Script Editor 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 absolutely positioned (AP) elements, called blanklayer and scriptlayer: To create the two floating panels: 1 Add the following code after the header in the HTML file: (no script selected)