User Interface Basics3:Creating Dialogs

[kino]

Dialogs can provide order to your graphical controls. A Dialog is a subclass of Frame, therefore it can only hold a single graphical child; but that child (e.g. Table, HBox, VBox) can hold many other objects. A Dialog helps manage its child controls by:


•Controlling navigation between all child controls using the TAB key

•Allowing a single event to be broadcast to all child controls

•Allowing child controls to send events up to their parent Dialog


Tip: Dialog objects can also hold objects that are not GUI controls, such as text, images, and links.


Creating a Dialog
Use the Dialog class to create a dialog. From the definition, it only holds one graphical child. Therefore we must use a container, such as VBox to hold all the controls. In the example below, we are creating a simple Dialog that allows the user to enter values using three TextFields.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}


{value
   let first-name:TextField = {TextField}
   let last-name:TextField = {TextField}
   let occupation:TextField = {TextField}
   let name-dialog:Dialog =
       {Dialog
           {VBox
               width = 2in,
               spacing = 5pt,
               margin = 5pt,
               {bold First Name:},
               first-name,
               {bold Last Name:},
               last-name,
               {bold Occupation:},
               occupation
           }
       }
   name-dialog
}

Dialog Navigation
A good interface design does not force the user to shift gears very often. A user at the keyboard tends to stay at the keyboard, a user controlling navigation using a mouse tends to keep using the mouse. Anytime users have to take their hands off the keyboard to grab the mouse (or vice versa), it slows them down.


One way a Dialog helps this by allowing you to define the navigation order for the controls inside the Dialog. This allows users to tab through each control, keeping their hands on the keyboard. Once the user types into the TextField, by default, they can automatically TAB to the next control. You can also set the tab-index property on each control to define the TAB order of controls.


In this example, we have reversed the tab order.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{value
   let first-name:TextField = {TextField tab-index=3}
   let  last-name:TextField = {TextField tab-index=2}
   let  occupation:TextField = {TextField tab-index=1}
   let  name-dialog:Dialog =
       {Dialog
           {VBox
               width = 2in,
               spacing = 5pt,
               margin = 5pt,
               {bold First Name:},
               first-name,
               {bold Last Name:},
               last-name,
               {bold Occupation:},
               occupation
           }
       }
   name-dialog
}

Tip: The tab-index begins with the value of 1. The tab-index value of 0 is traversed at the end of the chain.


Committing the Dialog
Commit is fired at all child controls when the Dialog.commit method is called. By convention, Dialog.commit should be called any time the information entered in the dialog is considered to be complete. For example, an OK button should call Dialog.commit when it is clicked. The event signals that it is time to commit any pending changes.

Code:

{curl 6.0, 7.0 applet}
{curl-file-attributes character-encoding = "utf8"}

{let list:DropdownList = {DropdownList "Hiking",
                            "Biking", "Swimming"}
}
{let list2:DropdownList = {DropdownList "Spain",
                             "Italy", "France"}
}
{Dialog    
   {spaced-vbox        
       list,
       list2,      
       {CommandButton width = 1in,
           label = "Done",            
           {on Action at cb:CommandButton do                      
               {cb.dialog.commit}
           }
       }
   },    
   {on Commit do      
       {popup-message list.value & " " & list2.value}}
}

Standard dialogs provided by Curl, Inc. call the commit method when the user clicks the OK or Apply buttons.



For more information regarding dialogs, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphical User Interface > Dialogs and Controls > Using Dialogs