Extending Panels to Create Modal "Dialog Boxes"
In general UI programming, there are two kinds of dialog boxes: modal and non-modal. Modal dialog boxes are
the most common. When a program displays a modal dialog box, the user cannot switch between the dialog box
and the program's main UI. The user must explicitly close the dialog box, usually by clicking either "Ok" or "Cancel".
is still the only true way to have any level of a modal dialog interaction. And unfortunately,
alert() has very few features in terms of functionality.
By default, QCubed implements the JQuery UI dialog box as a standard extension to the Panel, which gives you
the ability to create modal and modeless dialog boxes with a wide range of capabilities and complexities.
The Bootstrap library also has its version of the dialog. You can configure which you want to use in the
Because it extends the Panel control, you have full use of all the Panel's resources
to build and design the content of the dialog box itself, including using separate template files and
adding child controls, events, actions and validation.
And since it also uses the JQuery UI Dialog control, you have full access to all of the JQuery UI
capabilities as well, and a few extra extensions. In particular,
you can call addButton() to add buttons to the dialog that will be placed in standard
dialog locations and colored with the current theme. Attach actions to the DialogButton event to react
to a user's click of the buttons on the dialog,
and use the strParameter variable to detect which of these buttons were clicked. If for some reason
you don't want to use the JQuery UI buttons through AddButton, you
can put standard QCubed buttons on the dialog instead.
The four examples show:
- A simple "display only" dialog box.
- A modal dialog that asks for user input.
- A more complex dialog box that is meant to be a
"calculator widget" with intra-control communication, where the contents of the calculator in the dialog box
can be copied into a textbox on the main form.
- A dialog that demonstrates how to specify validation, confirmation and additional styling
with the AddButton method.
- An alert dialog that can be styled as an error or info message using the
Themeroller styles provided with JQueryUI.
Note that Dialogs are rendered automatically once they are attached to a form. You should not
call render() on the dialog instance.
This is a standard, no-frills dialog box.
Notice how the contents of the dialog box can scroll, and notice how everything else in the application is grayed out.
Because we set MatteClickable to true (by default), you can click anywhere outside of this dialog box to "close" it.
Additional text here is just to help show the scrolling capability built-in to the panel/dialog box via the "Overflow" property of the control.