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".

Obviously, with the current state of HTML and browser technologies, the alert() Javascript method 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 /project/qcubed/Control/Dialog.php

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:

1. A simple "display only" dialog box.
2. A modal dialog that asks for user input.
3. 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.
4. A dialog that demonstrates how to specify validation, confirmation and additional styling with the AddButton method.
5. 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.