Disabling user input in a Flex Application

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.

View MXML

<?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.

8 thoughts on “Disabling user input in a Flex Application

  1. 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

  2. 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 ;)

    1. @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

Comments are closed.