Disabling a Spark Application container in Flex 4

In a previous example, “Disabling an Application in Flex 3”, we saw how you could disable an entire Flex Application in Flex 3 by setting the Boolean enabled property on the application object.

The following example shows how you can disable an entire Spark Application in Flex 4 by setting the Boolean enabled property on the static FlexGlobals.topLevelApplication object.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/ -->
<s:Application name="Spark_Application_enabled_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.FlexGlobals;
 
            protected const tmr:Timer = new Timer(3000, 1);
 
            protected function init():void {
                tmr.addEventListener(TimerEvent.TIMER_COMPLETE, tmr_complete);
            }
 
            protected function tmr_complete(evt:TimerEvent):void {
                FlexGlobals.topLevelApplication.enabled = true;
                Alert.show("I'm back!", "Alert title");
            }
 
            protected function btn_click(evt:MouseEvent):void {
                FlexGlobals.topLevelApplication.enabled = false;
                tmr.start();
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <s:Button id="btn"
                label="Disable application (3 seconds)"
                chromeColor="red"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:TextInput id="txtInput" text="Spark TextInput" />
        <s:TextArea id="txtArea" text="Spark TextArea" />
        <s:List id="list">
            <s:dataProvider>
                <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
            </s:dataProvider>
        </s:List>
    </s:HGroup>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

7 thoughts on “Disabling a Spark Application container in Flex 4

    1. @Christian,

      Not exactly sure, but it came up internally at the office, so I stole the idea and turned it into a post. :)
      Actually, the context was that they were doing a server call and wanted to temporarily disable the Flex application until they got a result from the server.

      Peter

  1. That’s the same reason I’m doing it. The users of our app are less than technically savy, so disabling the app and not allowing them to click around while loading, uploading etc. is a great feature for us. We a little popup with some info about what’s going on while the app is disabled so they don’t think they broke anything.

    1. @Nick,

      I haven’t looked at those styles very closely lately, but you could probably do something similar using a custom Spark Application skin (see %Flex SDK%\frameworks\projects\spark\src\spark\skins\spark\ApplicationSkin.mxml) and then tweak the background color for the disabled state as desired:

      <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
          <s:fill>
              <s:SolidColor color="{hostComponent.backgroundColor as uint}" color.disabled="red" />
          </s:fill>
      </s:Rect>

      Or if that doesn’t give you what you’re looking for, you may need to create a new Rect which appears AFTER the contentGroup Group which is the same size as the Flex application/content group and only include the overlay Rect in the ‘disabled’ state. Basically, a little something like this:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application name="Spark_Application_disabledOverlayAlpha_test"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/halo"
              enabled="{ch.selected}"
              skinClass="skins.CustomApplicationSkin">
       
          <fx:Style>
              @namespace s "library://ns.adobe.com/flex/spark";
              @namespace mx "library://ns.adobe.com/flex/halo";
       
              s|Application {
                  backgroundDisabledColor: red;
                  disabledOverlayAlpha: 0.5;
              }
          </fx:Style>
       
          <fx:Script>
              <![CDATA[
                  import mx.core.FlexGlobals;
                  import flash.utils.setTimeout;
       
                  private function enableApp():void {
                      FlexGlobals.topLevelApplication.enabled = true;
                      ch.selected = true;
                  }
              ]]>
          </fx:Script>
       
          <s:CheckBox id="ch"
                  selected="true"
                  change="setTimeout(enableApp, 3000);" />
       
      </s:Application>

      And the custom Spark Application skin class, skins/CustomApplicationSkin.mxml, is as follows:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin name="CustomApplicationSkin"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              alpha.disabled="0.5" >
          <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
          </s:states>
       
          <fx:Metadata>
              [HostComponent("spark.components.Application")]
          </fx:Metadata>
       
          <!-- fill -->
          <!--- A rectangle with a solid color fill that forms the background of the application. The color of the fill is set to the Application's backgroundColor property. -->
          <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
              <s:fill>
                  <s:SolidColor color="{hostComponent.backgroundColor as uint}" />
              </s:fill>
          </s:Rect>
       
          <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" />
       
          <s:Rect id="overlayRect" left="0" right="0" top="0" bottom="0" includeIn="disabled">
              <s:fill>
                  <s:SolidColor color="{getStyle('backgroundDisabledColor')}" alpha="{getStyle('disabledOverlayAlpha')}" />
              </s:fill>
          </s:Rect>
       
      </s:Skin>

      Note: And note that the backgroundDisabledColor and disabledOverlayAlpha styles don’t exist on the Spark Application container, so you would need to define those custom styles via CSS and not directly in MXML.

      Hope that helps,
      Peter

  2. Thanks for the reply on this. I took your rectangle idea and since I have several states as it is, and I don’t want to have to create a disabled state for each, I created a rectangle:

    Then I toggled it’s mouseEnabled property to lock down or free up the controls.

    //*******************************************************************
    private function enableApp():void
    {
    	//FlexGlobals.topLevelApplication.enabled = true;
    	clearBlocker.mouseEnabled = false;
    }
     
    private function disableApp():void
    {
    	//FlexGlobals.topLevelApplication.enabled = false;
    	clearBlocker.mouseEnabled = true;
    }

Comments are closed.