Flex Examples
The following example shows how you can disable an Alert control for a specified number of milliseconds before the user can dismiss the dialog by setting the enabled property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/17/disabling-an-alert-control-in-flex/ -->
<mx:Application name="Alert_enabled_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
private const ENABLE_DELAY:uint = 3000; // 3 seconds
private var a:Alert;
private function showAlert():void {
a = Alert.show("You have been logged out.", "Goodbye");
a.enabled = false;
setTimeout(enableAlert, ENABLE_DELAY, a);
}
private function enableAlert(target:Alert):void {
target.enabled = true;
// PopUpManager.removePopUp(target);
}
]]>
</mx:Script>
<mx:Button id="button"
label="Logout"
click="showAlert();" />
</mx:Application>
View source is enabled in the following example.
Update (10/18/2007): If you don’t want to disable the entire Alert control, you can loop over the internal button array and disable each of the button controls individually, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/17/disabling-an-alert-control-in-flex/ -->
<mx:Application name="Alert_enabled_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.utils.ObjectUtil;
import mx.controls.Alert;
import mx.managers.PopUpManager;
private const ENABLE_DELAY:uint = 3000; // 3 seconds
private var a:Alert;
private function showAlert():void {
a = Alert.show("You have been logged out.", "Goodbye");
toggleButtons(a, false);
setTimeout(enableAlert, ENABLE_DELAY, a);
}
private function enableAlert(target:Alert):void {
toggleButtons(target, true);
}
private function toggleButtons(target:Alert, isEnabled:Boolean):void {
var buttonArr:Array = target.mx_internal::alertForm.mx_internal::buttons;
var btn:Button;
for each (btn in buttonArr) {
btn.enabled = isEnabled;
}
}
]]>
</mx:Script>
<mx:Button id="button"
label="Logout"
click="showAlert();" />
</mx:Application>
Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Not Bad,
Would be better if just the button was disabled, rather than the whole alert, makes the Alert hard to read.
Dale Fraser,
I agree. I’ll update the article and show how you can loop over the mx_internal button array and disable just the buttons. It seems you can still dismiss the Alert control immediately using the Escape key, but I can try and look into that later.
Peter
In Flex3, Adobe recommend using the Timer class instead of setTimeout().
See: http://livedocs.adobe.com/flex/3/html/08_Dates_and_times_4.html#122960
First of all, you work too hard. Secondly, your “About the Author” blurb on adobe.com states that both this blog and your other blog are rarely updated. So untrue! Tell those Dev Center people to change that blurb.
xo
Peter,
Thanks for all your useful examples.
I needed to disable the Escape key, as you mention above, so that the user cannot close the alert until I’m ready. I added this line in your loop for disabling the buttons:
btn.addEventListener(KeyboardEvent.KEY_DOWN, alertKeyDownHandler, false, 100); // High priority so we can stop propagation
and added this handler function:
private function alertKeyDownHandler(event:KeyboardEvent):void {
event.stopImmediatePropagation();
}
If at some point you want to give the user back the ability to escape, calling removeEventListener(KeyboardEvent.KEY_DOWN, alertKeyDownHandler) restores normal functionality.
Best,
Micah