Xojo Documentation Xojo Documentation

There are two ways to create dialog boxes in web applications. You can use the simple MsgBox command to display a simple dialog box or you can create a full-featured dialog box by creating a WebDialog.

MsgBox

Web MsgBox

MsgBox can only be used to display a simple text message with a single button.

MsgBox("File transfer complete!")

This line of code displays a message box with the message and one button that the user can click to dismiss the dialog.

The MsgBox command does not cause your code to wait until the MsgBox is closed. Your code continues running to the end of the method.

Web Dialog

Most of the time you will need a more advanced dialog box, perhaps with additional controls, or a more sophisticated layout than what MsgBox offers. To do this, you add a Web Dialog to your project, layout its design and add it to a web page. A web dialog has three display styles:

• Sheet: A sheet dialog drops down from the title or tab bar of the web browser. The rest of the page is inaccessible until the dialog is dismissed.
• Palette: A palette dialog is display in a floating box on the page. The user can drag this box around the page, but not outside of the page (or the web browser). A palette dialog can be closed using the close button on its title bar.
• Modal: A modal dialog displays in the center of the page. The rest of the page is inaccessible until the dialog is dismissed.

Web Dialog displayed as a sheet

On the dialog, you add the controls for the layout you need. In particular, remember to add a button that dismisses the dialog by calling the Close method.

Web Dialog displayed as a palette

Web Dialog displayed as modal

Regardless of the type of dialog you use, your code does not pause and wait for the dialog to be closed. Instead the code in your method (or event) continues to the end. The Dismissed event (shown below) is called when the dialog is closed.

Below is a list of commonly used events, properties and methods. Refer to WebDialog in the Language Reference for the complete list.

Events

Dismissed

The Dismissed event is called when the dialog closes by calling its Hide or Show methods. It is also called when the close button on the title bar is clicked for palette dialogs.

Properties

Type

You specify the type in the Inspector to indicate how the web dialog displays. The type can be Sheet, Palette or Modal.

Methods

Close

Call the Close method in a web dialog dismisses the dialog and calls its Dismissed event handler.

Show

Displays the web dialog. Remember, web dialogs do not cause your code to wait until the dialog is closed.

Usage

Using a Web Dialog

Here is how you can add a dialog to a web page:

1. Create a new Web Dialog called “TestDialog” using the Insert button on the toolbar or the Insert menu. Or you can drag a “Modal Dialog” from the Library.
2. Change its Type property in the Inspector to “Modal”.
3. Add two buttons to TestDialog. Name the buttons “OKButton” and “CancelButton” and change their captions to “OK” and “Cancel” respectively.
4. Add a public property called SelectedButton As WebButton.
5. In the Action event for each button, add this code:
   SelectedButton = Me
   Self.Close
   
6. Now you can add the dialog to the web page. Drag the dialog from the Navigator to the default web page. The dialog appears in the shelf at the bottom of the Layout Editor and it is called TestDialog1.
7. Double-click on TestDialog1 to add an event handler. Choose the Dismissed event from the list and click OK.
8. In the code editor add this code:
   Select Case Me.SelectedButton
   Case Me.OKButton
   MsgBox("OK pressed.")
   Case Me.CancelButton
   MsgBox("Cancel pressed.")
   End Select
   
9. Add a Button to the web page and name it “DialogButton” with a caption of “Test”.
10. Double-click DialogButton and add the Action event handler. Add this code:
    TestDialog1.Show
    

What you have created is a simple dialog that gets displayed when you click the Test button on the web page. When you click either OK or Cancel on the dialog, the SelectedButton property gets set to the button that was pressed (referred to by Me) and the dialog is closed. This calls the Dismissed event handler, where your code checks the SelectedButton property of the dialog (that you just set) and displays a message telling you which button was clicked.

Example Projects

• Examples/Web/Dialog Boxes/DialogsExample
• Examples/Web/Dialog Boxes/DynamicDialogsExample

See Also

WebDialog class; MsgBox method; UserGuide:Web UI topic