Bambookit Home    Bambookit GUI Tutorial

Back    Next   

II. GUI Basics

Chapter 8. Prebuilt Widgets




What is a Modal Dialog Box?

Usually it is some form of a message box.
It is the topmost Widget.
When it is active all other controls behind it are disabled.

There is no direct mechanism to setting a Modal dialog box in the XML GUI syntax, however it can be emulated.

<Widget> <Widget setName="modal" setVisible="false">..</Widget> <Widget setName="main"> .. </Widget> </Widget>
In the example above the modal box is always placed above all other widgets (so it becomes top most). Also the Widget "modal" (the modal dialog box) starts out as invisible. An event within the main panel would trigger the Modal to become visible and at the same time make itself, the widget main, to be disabled.

Event to trigger modal box

Let us create an event that would display the modal box.
<Widget> <Widget setName="modal" setVisible="false">..</Widget> <Widget setName="main"> <Button addActionTarget="action,modal,setVisible='true',action,main,setEnabled='false'"/> .. </Widget> </Widget>
>From the example above you can see on the event action, we execute two methods.
The widget "modal" is made visible,
action,modal,setVisible='true'

AND the widget "main" is disabled.
action,main,setEnabled='false'

Now that we have displayed the modal box, once done (by pressing OK), how do we re-enable the old view again?

Event to clear the modal box

Let us update the example above and add an action event or two to the modal widget.
<Widget> <Widget setName="modal" setVisible="false"> <Button addActionTarget="action,modal,setVisible='false',action,main,setEnabled='true'"/> .. </Widget> <Widget setName="main"> <Button addActionTarget="action,modal,setVisible='true',action,main,setEnabled='false'"/> .. </Widget> </Widget>
>From the example above the 'modal' widget's actions are the exact opposite of the 'main' widgets action.
The widget "modal" is made inivisible,
action,modal,setVisible='false'

AND the widget "main" is enabled.
action,main,setEnabled='true'

And that is all there is to it.

Back    Next