Flex Examples
I’ve seen this come up a few times in various lists, and figured maybe somebody out there may find this useful.
The following example shows how you can prevent user input in a Flex application by setting the enabled property to false in the <mx:Application /> tag, or by setting the Application.application.enabled property.
Any suggestions? Leave them in the comments!
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/20/disabling-user-input-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function disableApplication():void {
Application.application.enabled = false;
btn.enabled = false;
setTimeout(enableApplication, 3000);
}
private function enableApplication():void {
btn.enabled = true;
Application.application.enabled = true;
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object product="Flex" version="3" />
<mx:Object product="Flash" version="CS3" />
<mx:Object product="Dreamweaver" version="CS3" />
<mx:Object product="Fireworks" version="CS3" />
<mx:Object product="Photoshop" version="CS3" />
<mx:Object product="Illustrator" version="CS3" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Button id="btn"
label="Disable Application (3 seconds)"
emphasized="true"
click="disableApplication();" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid" dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn dataField="product"
headerText="Product:" />
<mx:DataGridColumn dataField="version"
headerText="Version:" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
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
Can the disabled state be styled?
That was my question too, can it be styled?
can the disabled application’s transparency be changed?
Sure,
You could do something like the following to set the disabled background color and alpha of the disabled state:
<mx:Style> Application { backgroundDisabledColor: black; disabledOverlayAlpha: 0.9; } </mx:Style>Peter
A fantastic site, and brilliant effort. A great piece of work.,
I’ve tried this, but it does not work if a popup is opened.
The background view is correctly disabled but the user can still interact with the popup.
Any solution for this?
Thanx ;)
I am looking for a way to capture click events on a disabled Box.
Any idea?
@EDW,
You could probably just wrap the disabled Box in another container (like mx:Canvas) and try listening for events on the parent Canvas instead (maybe).
Peter