Disabling a Spark Application container in Flex 4

7 Responses to Disabling a Spark Application container in Flex 4

1. Christian says:

   August 14, 2009 at 7:25 am

   Hi, excelent blog btw.

   Without trying to sound snoop, or similar:
   Regarding this post: Why would somebody want to do this?

   Christian

   Reply
   • Peter deHaan says:

     August 14, 2009 at 8:08 am

     @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

     Reply
2. Greg says:

   August 14, 2009 at 11:03 am

   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.

   Reply
3. Nick says:

   August 26, 2009 at 10:41 am

   Very useful, but how do you set backgroundDisabledColor and disabledOverlayAlpha in flex 4?

   Reply
   • Peter deHaan says:

     August 26, 2009 at 2:29 pm

     @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

     Reply
4. Nick says:

   August 27, 2009 at 6:43 am

   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;
   }

   Reply
5. Rami says:

   October 29, 2010 at 10:22 pm

   Thanks for the great post :) simple and great

   Reply