A simple floating panel example, Creating the floating panels – Adobe Extending Dreamweaver CS4 User Manual
Page 229
223
EXTENDING DREAMWEAVER CS4
Floating panels
When one of the files inside the Configuration folder calls the
dw.getFloaterVisibility(floaterName)
,
dw.setFloaterVisibility(floaterName)
, or
dw.toggleFloater(floaterName)
functions, the following events
occur:
1
If
floaterName
is not one of the reserved floating panel names, Dreamweaver searches the Configuration/Floaters
folder for a file called floaterName.htm. (For a complete list of reserved floating panel names, see the
dreamweaver.getFloaterVisibility()
function in the Dreamweaver API Reference. If floaterName.htm is not
found, Dreamweaver searches for floaterName.html. If no file is found, nothing happens.
2
When the floating panel file is loaded for the first time, the
initialPosition()
function is called, if it is defined,
to determine the default position of the floating panel on the screen. In the same manner, the
initialTabs()
function is called, if it is defined, to determine the default tab grouping of the floating panel.
3
The
selectionChanged()
and
documentEdited()
functions are called on the assumption that changes probably
occurred while the floating panel was hidden.
4
When the floating panel is visible, the following actions occur:
•
When the selection changes, the
selectionChanged()
function is called, if it is defined.
•
When the user changes the document, the
documentEdited()
function is called, if it is defined.
•
Event handlers that are attached to the fields in the floating panel interface execute as the user encounters them.
(For example, a button with an
onClick
event handler that executes
dw.getDocumentDOM().body.innerHTML=''
removes everything between the opening and closing
body
tags
in the document when it is clicked.)
Floating panels support two special events on the
body
tag:
onShow()
and
onHide()
.
5
When the user quits Dreamweaver, the current visibility, position, and tab grouping of the floating panel are saved.
The next time Dreamweaver starts up, it loads the floating panel files for any floating panels that were visible at the
last shutdown. Then Dreamweaver displays the floating panels in their last position and tab grouping.
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 creating floating panels, writing JavaScript code, and 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.
Create the HTML file header
1
Create a new blank document.
2
Enter the following: