Layout | WebReference


The Left Button Panel

Click this button when you have completed your tool session. You will be reminded to copy the created script to your clipboard for pasting into your editor. This button provides the only "elegant" way to exit the tool.

Choose the dialog you want to build by selecting one of these four buttons. The green button denotes the current dialog type being created. The work area (on the right) changes to reflect the choice made. The four types of dialogs are fully described in column 22, JavaScript Enhancement with VBScript.

In Brief:

1. new Alert
replaces the JS alert() dialog for IE4.
  a. title bar display
  b. choice of icons
  c. choice of modality

2. new Confirm
replaces the JS confirm() dialog for IE4.
  a. title bar display
  b. icon toggle
  c. choice of default button
  d. choice of modality

3. new Prompt
replaces the JS prompt() dialog for IE4.
  a. title bar display

4. IEBox
creates a fully-featured IE4-only dialog.
  a. title bar display
  b. choice of icons
  c. choice of button group
  d. choice of default button
  e. choice of modality

This icon contains three toggle buttons:

1. Display/Hide Instructions
Toggles the display of the instruction box you are reading.
Instruction box visible - click to hide.
Instruction box hidden - click to display.

2. Enable/Disable Tool Tips
Toggles the display of pop-up tool tips like this.
Tool tips enabled - click to disable.
Tool tips disabled - click to enable.

3. Display/Hide Dialog Example
Toggles the display of a dialog example at the top of the work area.
Example visible - click to hide.
Example hidden - click to display.

Click this button to preview the dialog you are building. A real dialog will be created and displayed, so you must close it before continuing.

These two buttons control what is displayed in the text area labelled Code:. Clicking All Code causes the complete script necessary to appear in the text area, including all JS and VB functions and browser detection. The New Code button assures that only the script lines relevant to the dialog being built are shown, allowing for a less-cluttered display.

copy/paste commands to copy the script to your text editor. Once you have successfully pasted the code, you may exit the tool, or continue using it to build another dialog." document.write(copyStr); The Work Area

Enter the text you wish to appear in the dialog title bar here.
Available for all dialogs.

Enter the text you wish to appear in the dialog message area here. To include line breaks, simply press Enter. The tool will generate the escaped newline character automatically.
Available for all dialogs.

Select the icon to appear in your dialog by clicking the relevant image. Click NO ICON for a text-only dialog. The current selected icon has a green background.
Available, with different options, for all dialogs except newPrompt.

Select the button group and the default button (selected when the user presses the Enter key), by clicking the relevant image. The current selected button group/default button has a green background.
Available, with different options, for the newConfirm and IEBox dialogs, only.

Enter the text to be returned as a default response from the user, if no user response is entered.
Available for the newPrompt dialog, only.

If you want your dialog to return a value after it is closed by the user, then click Yes. The tool will automatically generate script to process the return value.
Available as an option for the IEBox dialog, only. The newConfirm and new Prompt dialogs always return a value, by default.

Click to define the modality of the dialog:
Application Modal:
The user must close the dialog before continuing work in the application (browser).
System Modal:
The dialog appears above all open application windows in the user's system.
Available for all dialogs except newPrompt.

The script necessary for your dialog appears here. View the complete code required, including all overhead, by clicking All Code in the left panel. Click New Code to view only the script generated for the dialog.

Click Step-by-Step, above, for a walk-through of the steps necessary to create a dialog using the tool.