Adding Pop-ups

VERSION 7 Published

Created on:Oct 23, 2007 10:20 AM by CurlEducation - Last Modified:  Oct 28, 2007 5:52 PM by CurlEducation

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.


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.


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.


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.

/wiki/samples/images/help.jpg 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


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.


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 Creating Dialogs Curl Cue for examples.

/wiki/samples/images/help.jpg 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

Average User Rating
(0 ratings)




Mar 31, 2008 2:36 AM Click to view hamamitahar's profile hamamitahar says:

I do not understand why : {selection-view.close "value-same"}
is here.

Mar 31, 2008 7:06 AM Click to view cbarber's profile cbarber says: in response to: hamamitahar

{selection-view.close "value-same"} closes the dialog and sets its 'return-state' attribute to the string "value-same". In this example, the 'return-state' is used to determine whether to update the value displayed in 'radio-selection' Frame from the dialog. Note that in this example hitting Cancel does not revert the dialog's selection state to its previous value, so the dialog's default value may not match the value shown in 'radio-selection' after cancel was pressed. In a real application, you would probably want to either have the cancel action reset the dialog state or always set the dialog state to appropriate defaults before showing it.