9. Advanced AJAX
Modal "Dialog Boxes"
<< Resizing Block Controls   |   Back to Main   |   Next >>

View Source
will open in a new window
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. Some web applications do attempt to use pop-up windows with onblur() events as a way to mimick dialog modality, but this is not considered a very clean or usable approach.

In Qcodo, a standard extension to the QPanel control is the QDialogBox, which gives you modal-like qualities in a control that can look and act like a stand-alone modal dialog box.

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.

The two examples below show a simple "display only" dialog box, 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.
Simple Message Example



Calculator Widget Example

Current Value: