Creating the UI
The UI is a form that contains two radio buttons that let the user select uppercase or lowercase.
To create the user interface:
- Create a new blank file.
- Add the following code to the file to create the form:
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 5.0//dialog"><HTML><HEAD><!-- Copyright 2001-2002 Adobe, Inc. All rights reserved. --><Title>Make Uppercase or Lowercase</Title><SCRIPT SRC="Change Selection Case.js"></SCRIPT></HEAD><BODY> <form name="uorl"> <table border="0"> <!--DWLayoutTable--> <tr> <td valign="top" nowrap> <p> <label> <input type="radio" name="RadioGroup1" value="uppercase" checked> Uppercase</label> <br> <label> <input type="radio" name="RadioGroup1" value="lowercase"> Lowercase</label> </p></td> </tr> </table> </div></form></BODY></HTML>
- Save the file as Change Case.htm in the Configuration/Commands folder.
The contents of the Title
tag, Make Uppercase or Lowercase
, appears in the top bar of the dialog box. Within the form, a table with two cells controls the layout of the elements. Within the table cells are the two radio buttons, Uppercase and Lowercase. The Uppercase button has the checked
attribute, making it the default selection and ensuring that the user must either select one of the two buttons or cancel the command.
The form looks like the following figure.
The commandButtons() function supplies the OK and Cancel buttons that let the user submit the choice or cancel the operation.