| DialogWidget

Building the DialogWidget Component

The JSBDocs are generated as part of the process that packages the JavaScript bean in a JAR file along with supporting files -- all complete Components, regardless of whether they are written in in JavaScript or Java, should be packaged in a JAR along with their icons and help files. The `netscape/samples/widgets/dialog.jsb` file specifies that the JSBDocs will be used as the "Component Info" file:

       ...
       <JSB_DESCRIPTOR
            NAME="netscape.samples.widgets.dialog"
            DISPLAYNAME="Movable HTML Dialog"
            HELP_URL="netscape/samples/widgets/dialog_jsb.html">

       <JSB_ICON ICONNAME="n_s_w_dialog">
       ...

The JSBDocs for the Dialog JavaScript Bean are linked below. By using JSBDoc on your re-usable JavaScript components, it can help you or other programmers modify, understand, and build on your work, making your re-usable JavaScript code even more valuable. For more information on using JSBDoc, see JSBDoc Tool:

- the JSBDocs for the Dialog component

The JAR file containing the JavaScript bean is created by a script called `BuildDialog` (either ".bat" or ".sh" depending on your platform).

A sample is here. If you import this page into Visual Javascript and inspect the dialog component you can see how the values were collected from the form fields and displayed in a simple alert window.

Creating Sample Crossware

Wiring up a sample page is easy:

- Import the JAR file to the Visual JavaScript palette
- Drag the Dialog icon that appears on the palette to the page
- Drag an HTML Button to the page
- Drag the connection point of the button to the dialog component:
  - Connect the `onClick` event to the `openDialog()` method of the Dialog JavaScript Bean
- Hit the Preview button and click on the button that appears on the page: up pops an HTML Dialog in a layer!
- Going back to Visual JavaScript, if you double click on the component and bring up the Inspector, you can customize the type of dialog that appears.

Hitting the Cancel button on the dialog closes it. The function that gets triggered by pressing the OK button can be any function accessible on the page.

To access the value of textfields (or other elements) in the dialog, use code like the following:

- `abstractDialog.win.con.document.texfieldName`

Note: For more sample components that use Layers, take a look at the SimpleClientServer example, which includes a very basic LayerController component which can take relative or fully qualified URLs to HTML pages and embed them.

Additional Note: The basic dialog.jsb component uses native buttons, which means it will look differently when run on Unix systems. The DynamicDialog.jsb included in the JAR file and in the netscape/samples/widgets/ directory is a more advanced component that creates DynamicHTML buttons, thus allowing the look and feel on all browsers (Unix, Mac, Windows) to be more similar than possible using native buttons.

The DynamicDialog sample also automatically re-opens itself on a resize event, which is more sophisticated behavior than the basic dialog.jsb.

( return to the top of the page )