20
Feb
08

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.


2 Responses to “Disabling user input in a Flex Application”


  1. 1 Jim Thompson Jul 7th, 2008 at 7:25 am

    Can the disabled state be styled?

  2. 2 John Sep 23rd, 2008 at 2:14 am

    That was my question too, can it be styled?

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".