User Guide

142 Chapter 7: Commands
commandButtons()
When the user clicks a menu item, the extension needs a mechanism that lets the user select
uppercase or lowercase. The UI provides this mechanism by defining two radio buttons to let the
user make that choice.
The
commandButtons() function causes Dreamweaver to supply the OK and Cancel buttons and
tells Dreamweaver what to do when the user clicks them. In the following example,
commandButtons() tells Dreamweaver to call changeCase() when the user clicks OK and to call
window.close() when the user clicks Cancel:
function commandButtons() {
return new Array("OK", "changeCase()", "Cancel", "window.close()");
}
For more information, see “Creating the UI” on page 139.
changeCase()
The
changeCase() function is a user-defined function that is called by the commandButtons()
function when the user clicks OK. This function changes the selected text to uppercase or
lowercase. Because the UI uses radio buttons, the code can rely on one choice or the other being
checked; it does not need to test for the possibility that the user makes neither choice.
The
changeCase() function first tests the property
document.forms[0].elements[0].checked. The document.forms[0].elements[0]
property refers to the first element in the first form of the current document object, which is the
UI for the extension. The
checked property has the value true if the element is checked
(or enabled) and
false if it is not. In the interface, elements[0] refers to the first radio button,
which is the Uppercase button. Because one of the radio buttons is always checked when the
user clicks OK, the code assumes that if the choice is not uppercase, it must be lowercase. The
function sets the variable
uorl to “u” or “l” to store the user’s response, as shown in the
following code:
function changeCase() {
var uorl;
// check whether user requested uppercase or lowercase
if(document.forms[0].elements[0].checked)
uorl = 'u';
else
uorl = 'l';
The remaining code in the function retrieves the selected text, converts it to the specified case,
and copies it back in place in the document.
To retrieve the selected text for the user’s document, the function gets the DOM again, as well as
the root element of the document, which is the
html tag. It then extracts the whole document
into the
theWholeDoc variable. The code looks like the following example:
// Get the DOM again
var theDOM = dw.getDocumentDOM();
// Get the outerHTML of the HTML tag (the
// entire contents of the document)
var theDocEl = theDOM.documentElement;
var theWholeDoc = theDocEl.outerHTML;