+- Curl Global Community (https://communities.curl.com)
+-- Forum: Tutorials (https://communities.curl.com/forumdisplay.php?fid=3)
+--- Forum: Public Training (https://communities.curl.com/forumdisplay.php?fid=4)
+---- Forum: Curl Clues (https://communities.curl.com/forumdisplay.php?fid=5)
+---- Thread: User Interface Basics2:Adding Pop-ups (/showthread.php?tid=10)
User Interface Basics2:Adding Pop-ups - kino - 06-15-2011
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}
}
}
}
}
}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-upFor 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}
}
}
}
}
}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