Extending QPanels 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 unfortuantely, alert() has very few features in terms of functionality.

QCubed implements a JQuery UI dialog box as a standard extension to the QPanel, which gives you the ability to create modal and modeless dialog boxes with a wide range of capabilities and complexities.

Because it extends the QPanel control, you have full use of all the QPanel'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 QDialog_ButtonEvent event, and use the ClickedButton attribute to detect which of these buttons were clicked. Of course, you could use standard QCubed buttons as well.

The three examples below show a simple "display only" dialog box, a modal dialog that asks for user input, and 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.