UserGuide

Web Dialog Boxes

From Xojo Documentation

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

MsgBox

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

MessageBox("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 MessageBox command does not cause your code to wait until the MessageBox 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 MessageBox offers. To do this, you add a Web Dialog to your project, layout its design and add it to a web page. 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.

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

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. Add two buttons to TestDialog. Name the buttons “OKButton” and “CancelButton” and change their captions to “OK” and “Cancel” respectively.
  3. Add a public property called SelectedButton As WebButton.
  4. In the Pressed event for each button, add this code:
    SelectedButton = Me
    Self.Close
  5. 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.
  6. Double-click on TestDialog1 to add an event handler. Choose the Dismissed event from the list and click OK.
  7. In the code editor add this code:
    Select Case Me.SelectedButton
    Case Me.OKButton
    MessageBox("OK pressed.")
    Case Me.CancelButton
    MessageBox("Cancel pressed.")
    End Select
  8. Add a Button to the web page and name it “DialogButton” with a caption of “Test”.
  9. Double-click DialogButton and add the Pressed 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; MessageBox method; UserGuide:Web UI topic