Receiving Information Back From and Customizing The Flex Alert Control
You can customize the Flex 2.0 Alert control to include other buttons besides the default OK button. For example, you can ask a user to confirm an action and have a YES and NO button in the alert. How can you tell which button the user clicks on? In the arguments you provide to the alert control's show method, you can specify a function to be called automatically whenever the user clicks on one of the buttons being displayed by the alert control. In the arguments you provide to the show method you can also specify which buttons to show.
References:
- Flex 2 Developer's Guide, Alert control
- Flex 2 Language Reference, Class Alert
- Flex 2 Language Reference, Class CloseEvent
View my example and source code (right click on the application).
For example, to show an alert control with specific buttons:
Alert.show("Are you sure you want to delete all the records?",
"Delete All Records", Alert.YES | Alert.NO,
startPanel, alertClickHandler, alertIcon, Alert.NO);
The arguments are:
- message to display
- title to display
- tells the alert control to display the Yes and No buttons (separate the buttons with the pipe symbol)
- id of the parent this alert control should display over (the default is the entire application)
- the name of the function to call when the user clicks on a button displayed by the alert control
- an icon to show to the left of the message
- default button that will be clicked if user types the enter key after the alert control is displayed
You can also customize the text displayed on the Yes and No buttons by using the static class properties yesLabel and noLabel. Note that the the button's text will be changed for all Alert Yes and No buttons. You may also need to change the width of the buttons to accomodate the longer text (the default is 60).
Alert.yesLabel = "Yes, delete all";
Alert.noLabel = "NO! don't delete";
Alert.buttonWidth = 140;
Below is the code for the alertClickHandler function:
private function alertClickHandler(event:CloseEvent):void {
if (event.detail == Alert.YES)
updateResultTxt("All Records Deleted!", "#ff0000", 14);
else
updateResultTxt("Deletion Cancelled", "#000080", 12);
}
The parameter for the function must be of type CloseEvent. The detail property of the CloseEvent object can be used to determine which button the user clicked (see the if statement above).
You can also customize the appearance of the alert control by using the setStyle method. Check out the references above for more ways to use the Alert control.
The one problem I could not solve was how to get the Alert control to display in a specific position. The documentation describes an x and y property that specifies the alert control's horizontal and vertical position. But when I set the x and y to a specific value the Alert control still shows up in the middle (either the middle of the overall application or of the specific parent). Please post a comment if you know how to set the specific position for displaying the Alert control.
alertBox.x=50;
alertBox.y=50;
What wouldn't work for me at first was the centering of the the alert box. I had to explicitly call :
PopUpManager.centerPopUp( alertBox );
Good luck.
Bruce commented that the x and y parameters did not work for Alerts, not for title windows that are spawned with the PopUpManager.
For instance doing the following does not work:
import mx.controls.Alert;
var a:Alert;
a.x = 50; //These will not
a.y = 50; //generate a compile or runtime error.
a.show("Blah Blah Blah","Some Title For Window");
But this does work:
import mx.controls.Alert;
var a:Alert;
a = Alert.show("Blah Blah Blah","Some Title For Window");
a.validateNow();
a.move(100,100);
The reason, is even with an instance of the type, there is no object created until the show method is called. So you can only tweak the instances properties after it is shown.
Thanks for the post Bruce!
Frank Krul
Thanks for the solution.
Just wanted to add that after the validateNow(), one can also use the coordinates to position the alert. Extending your example
-- snip
a.validateNow()
a.x = 100
a.y = 100
-- snip