User Interface Basics2:Adding Pop-ups

[kino]

Pop-up dialogs are an easy way to provide information to your users. A pop-up window is a separate, independent window that is usually smaller than a standard browser window and does not have features such as tool bars or status bars that are commonly found on browser windows.


In general the following are the ways to utilize pop-up dialogs:


1.Display help or information to a user

2.Request additional information or instructions from a user

3.Notify a user of an error condition

The invocation of the pop-up is dependent on the purpose of the pop-up window. A help pop-up window can be displayed when the user clicks on a 'help' link or button. An error pop-up can be displayed when an operation requested by a user cannot be performed.


Pop-up Dialog Procedures
The following pop-up dialogs are shortcut procedures that use the Dialog API to create a pop-up window in the following ways:


•popup-message: displays a message with an OK button

•popup-text-query: displays a text control

•popup-question: displays a yes-or-no question


In the following example, a simple pop-up using popup-message is displayed.

Code:

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

{CommandButton label = "Click me!",
   {on Action do  
       {popup-message
           "Your order has been entered successfully",
           title = "Merchandise Order"}  
   }
}

One major difference between Curl pop-ups and HTML-based pop-ups is that the HTML pop-up opens a new Web browser window. A Curl pop-up displays content using a Curl applet window. The applet window is part of the running application, therefore it makes it easy to directly pass information between the windows.


Since each pop-up is a Curl window, we can easily display pop-up windows sequentially based on the user's input. In the following example, we can display alternate messages based on the selected answer. Here we are combining two pop-up dialogs.

Code:

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

{CommandButton
   label = "Click me!",
   {on Action do
       let x:String =  
           {popup-question
               cancel?=true,
               "Would you like to enter another order?",
               title = "Another Order?"
           }
       {popup-message
           cancel? = true,
           {if x == "yes" then "Please wait a moment..."
            elseif x == "no" then "Proceeding to current order summary..."
            else "Thank you for your business"
           }
       }
   }
}

Tip: Notice that cancel?=true is used to display the cancel button.


Using a Pop-up to Gather Data
Since the message portion of a popup-message can be any graphical object, it can combine other controls and objects. The following is example shows how to embed radio buttons inside a popup-message dialog.

Code:

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

{value
   let radio-selection:Frame =  {Frame "a"}

   let selection:RadioFrame =
       {radio-buttons
           "a",
           "b",
           "c",
           value = "a"  || initial selection
       }

   {spaced-vbox
       {bold The selected value is: {value radio-selection}},
       {CommandButton label = "Select another value",
           {on Action do
               let result:String =
                   {popup-message
                       title = "Selection",
                       cancel? = true,
                       {spaced-vbox
                           selection
                       }
                   }
               {if (result == Dialog.ok) then
                   {radio-selection.add  selection.value, replace?=true}
               }
           }
       }
   }
}

Tip: With popup-message, a modal pop-up dialog is created by default. A modal dialog is one that must be responded to before proceeding. To specify a non-modal dialog, use modal? = false.



For more information regarding pop-up dialog procedures, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Graphical User Interface > Dialogs and Controls > Using Dialogs > Dialog Procedures > Creating Simple Pop-up Dialogs

Code:

Displaying a Dialog as a Pop-up

For simple pop-up windows, it is easy to use Curl's related procedures to create simple dialogs that display a message, obtain a yes/no answer, and obtain a String by way of a TextField. You may, however, want to have full control over the visual layout and functionality of the displayed dialog. In these cases we will need to use the Dialog class.


The following example produces the same result as the previous example. Notice that the dialog needs to be explicitly viewed using Dialog.show and closed using Dialog.close.

Code:

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

{value
   let radio-selection:Frame =  {Frame "a"}
  
   let selection:RadioFrame =
       {radio-buttons
           "a",
           "b",
           "c",
           value = "a"  
       }
  
   let selection-view:Dialog =
       {Dialog
           margin = 8pt,
           {spaced-vbox
               selection,
               {HBox
                   spacing = 6pt,
                   {CommandButton
                       width = .75in,
                       label = "Ok",
                       {on Action do
                           {selection-view.close "value-changed"}
                       }
                   },
                   {CommandButton
                       width = .75in,
                       label = "Cancel",
                       {on Action do
                           {selection-view.close "value-same"}
                       }
                   }    
               }
           }
       }

   {spaced-vbox
       {bold The selected value is: {value radio-selection}},
       {CommandButton label = "Choose another selection!",  
           {on Action do
               {selection-view.show style="resizable", title = "Selection"}
               {if selection-view.return-state == "value-changed" then
                   {radio-selection.add  selection.value, replace?=true}
               }
           }
       }
   }
}

As you can see, using the Dialog class requires many more lines of code, therefore for simple cases it is recommended that popup-message, popup-question, or popup-text-query should be used. Please refer to the http://developers.curl.com/docs/DOC-1121 Curl Cue for examples.



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