Thread Rating:
  • 495 Vote(s) - 2.81 Average
  • 1
  • 2
  • 3
  • 4
  • 5
User Interface Basics3:Creating Dialogs
06-15-2011, 03:55 PM, (This post was last modified: 06-16-2011, 10:41 AM by kino.)
#1
User Interface Basics3:Creating Dialogs
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



Messages In This Thread
User Interface Basics3:Creating Dialogs - by kino - 06-15-2011, 03:55 PM

Possibly Related Threads...
Thread Author Replies Views Last Post
  Getting Started1:Creating a Simple Applet: Hello World kino 2 6,323 08-15-2016, 03:50 PM
Last Post: dyoshida
  Styling3:Creating Styles with the Style Designer kino 0 5,086 06-16-2011, 09:52 AM
Last Post: kino
  Forms1:Creating Forms kino 0 5,336 06-15-2011, 04:55 PM
Last Post: kino
  User Interface Basics7:Stretching Graphical Objects kino 0 4,781 06-15-2011, 04:12 PM
Last Post: kino
  User Interface Basics6:Object Layout kino 0 4,507 06-15-2011, 04:08 PM
Last Post: kino
  User Interface Basics5:Swapping UI Content kino 0 3,500 06-15-2011, 04:03 PM
Last Post: kino
  User Interface Basics4:Populating Control List Data kino 0 3,709 06-15-2011, 03:58 PM
Last Post: kino
  User Interface Basics2:Adding Pop-ups kino 0 3,718 06-15-2011, 03:52 PM
Last Post: kino
  User Interface Basics1:Linking to Content kino 0 3,672 06-15-2011, 03:48 PM
Last Post: kino
  Getting Started5:Creating Lists kino 0 3,380 06-15-2011, 03:15 PM
Last Post: kino
Forum Jump:


Users browsing this thread:
1 Guest(s)

MyBB SQL Error

MyBB has experienced an internal SQL error and cannot continue.

SQL Error:
1017 - Can't find file: 'mybb_threadviews' (errno: 2)
Query:
INSERT INTO mybb_threadviews (tid) VALUES('11')