Flex Examples » Application (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Adding scroll bars to an Spark Application container in Flex 4 http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/#comments Wed, 03 Nov 2010 23:55:09 +0000 Peter deHaan http://blog.flexexamples.com/?p=3419 The following example shows how you can add scroll bars to a Spark Application container in Flex 4 by creating a custom skin, adding a Spark Scroller container around the contentGroup skin part, and setting the skinClass style on the Application tag.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ --> <s:Application name="Spark_Application_Scroller_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" skinClass="skins.CustomScrollingApplicationSkin"> [...]]]> The following example shows how you can add scroll bars to a Spark Application container in Flex 4 by creating a custom skin, adding a Spark Scroller container around the contentGroup skin part, and setting the skinClass style on the Application tag.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_Scroller_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"
        skinClass="skins.CustomScrollingApplicationSkin">
    <s:controlBarContent>
        <s:Label text="Rect height (px):" />
        <s:HSlider id="sl" minimum="100" maximum="1000" value="300" />
    </s:controlBarContent>
 
    <s:Rect top="20" horizontalCenter="0" width="50%" height="{sl.value}">
        <s:fill>
            <s:LinearGradient rotation="45">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="haloOrange" />
                <s:GradientEntry color="yellow" />
                <s:GradientEntry color="haloGreen" />
                <s:GradientEntry color="haloBlue" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
</s:Application>

And the custom skin class, skins/CustomScrollingApplicationSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
<s:Skin name="CustomScrollingApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" stateGroups="normalStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="normalWithControlBar" stateGroups="normalStates" />
        <s:State name="disabledWithControlBar" stateGroups="disabledStates" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                bgRectFill.color = getStyle('backgroundColor');
                bgRectFill.alpha = getStyle('backgroundAlpha');
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- 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 id="bgRectFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <!--- Application Control Bar -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                 includeIn="normalWithControlBar, disabledWithControlBar" >
 
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Scroller id="contentScroller" width="100%" height="100%" minWidth="0" minHeight="0">
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
        </s:Scroller>
 
    </s:Group>
 
</s:Skin>

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.

 
]]> http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/feed/ 10 Creating a bitmap fill on a Spark Application container control bar in Flex 4 http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/ http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/#comments Wed, 21 Apr 2010 21:38:04 +0000 Peter deHaan http://blog.flexexamples.com/?p=2837 The following example shows how you can set a bitmap fill on a Spark Application container control bar in Flex 4 by setting the skinClass style and using a BitmapFill.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/ --> <s:Application name="Spark_Application_skinClass_BitmapFill_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" controlBarVisible="{chckBx.selected}" skinClass="skins.CustomApplicationSkin"> <s:controlBarContent> <s:Button label="Control bar button" /> </s:controlBarContent>   <s:CheckBox id="chckBx" label="controlBarVisible" [...]]]> The following example shows how you can set a bitmap fill on a Spark Application container control bar in Flex 4 by setting the skinClass style and using a BitmapFill.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_BitmapFill_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"
        controlBarVisible="{chckBx.selected}"
        skinClass="skins.CustomApplicationSkin">
    <s:controlBarContent>
        <s:Button label="Control bar button" />
    </s:controlBarContent>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            left="20" top="20" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/ -->
<s:Skin name="CustomApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5"
        alpha.disabledWithControlBar="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                bgRectFill.color = getStyle("backgroundColor");
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- 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 id="bgRectFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <!--- Application Control Bar -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                 includeIn="normalWithControlBar, disabledWithControlBar" >
 
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
                <s:fill>
                    <s:BitmapFill source="@Embed('assets/pattern_143.gif')" fillMode="repeat" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.

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.

 
]]> http://blog.flexexamples.com/2010/04/21/creating-a-bitmap-fill-on-a-spark-application-container-control-bar-in-flex-4/feed/ 0 Setting the height of the control bar in a Spark Application container in Flex 4 http://blog.flexexamples.com/2010/04/21/setting-the-height-of-the-control-bar-in-a-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2010/04/21/setting-the-height-of-the-control-bar-in-a-spark-application-container-in-flex-4/#comments Wed, 21 Apr 2010 20:27:42 +0000 Peter deHaan http://blog.flexexamples.com/?p=2834 The following example shows how you can set an explicit height on the Spark Application container control bar by setting the height property on the controlBarGroup skin part.

By default the control bar sizes itself to its content, so I don’t really recommend setting an explicit height unless you really want to.

<?xml [...]]]> The following example shows how you can set an explicit height on the Spark Application container control bar by setting the height property on the controlBarGroup skin part.

By default the control bar sizes itself to its content, so I don’t really recommend setting an explicit height unless you really want to.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2010/04/21/setting-the-height-of-the-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarGroup_height_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">
    <s:controlBarContent>
        <mx:Form backgroundAlpha="0.3" backgroundColor="red"
                creationComplete="sldr.value = controlBarGroup.height;">
            <mx:FormItem label="controlBarGroup.height:" direction="horizontal">
                <s:HSlider id="sldr"
                        minimum="30" maximum="150"
                        change="controlBarGroup.height = sldr.value;" />
                <s:Label id="txt"
                        fontWeight="bold"
                        enterFrame="txt_enterFrameHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            protected function txt_enterFrameHandler(evt:Event):void {
                if (controlBarGroup) {
                    txt.text = controlBarGroup.height.toString();
                }
            }
        ]]>
    </fx:Script>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            change="controlBarVisible = chckBx.selected;" />
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/04/21/setting-the-height-of-the-control-bar-in-a-spark-application-container-in-flex-4/feed/ 0 Setting the background color on a Spark Application control bar in Flex 4 http://blog.flexexamples.com/2009/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/ http://blog.flexexamples.com/2009/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/#comments Sun, 04 Oct 2009 17:05:53 +0000 Peter deHaan http://blog.flexexamples.com/?p=1972 The following example shows how you can set the background fill color on a Spark Application container’s control bar in Flex 4 by setting the skinClass style and modifying the control bar fill:

<!-- layer 1: control bar fill --> <s:Rect left="1" right="1" top="1" bottom="2"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x333333" /> <s:GradientEntry color="0x666666" /> </s:LinearGradient> [...]]]> The following example shows how you can set the background fill color on a Spark Application container’s control bar in Flex 4 by setting the skinClass style and modifying the control bar fill:

<!-- layer 1: control bar fill -->
<s:Rect left="1" right="1" top="1" bottom="2">
   <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0x333333" />
            <s:GradientEntry color="0x666666" />
        </s:LinearGradient>
   </s:fill>
</s:Rect>

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_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"
        skinClass="skins.CustomApplicationSkin"
        backgroundColor="black">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Button" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <fx:Style>
        #topGroup {
            color: white;
        }
    </fx:Style>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/ -->
<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:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 
 
    <!-- fill -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor color="{getStyle('backgroundColor')}" />
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="white" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2">
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0x333333" />
                        <s:GradientEntry color="0x666666" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>

You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_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"
        backgroundColor="black">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Button" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Application {
            skinClass: ClassReference("skins.CustomApplicationSkin");
        }
 
        #topGroup {
            color: white;
        }
    </fx:Style>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</s:Application>

Or you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_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"
        backgroundColor="black">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Set skinClass" click="button1_click(event);" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomApplicationSkin;
            import mx.core.FlexGlobals;
 
            protected function button1_click(evt:MouseEvent):void {
                FlexGlobals.topLevelApplication.setStyle("skinClass", CustomApplicationSkin);
            }
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        #topGroup {
            color: white;
        }
    </fx:Style>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</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.

 
]]> http://blog.flexexamples.com/2009/10/04/setting-the-background-color-on-a-spark-application-control-bar-in-flex-4/feed/ 0 Toggling the application control bar in a Spark Application container in Flex 4 http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/#comments Sat, 03 Oct 2009 17:07:30 +0000 Peter deHaan http://blog.flexexamples.com/?p=1964 The following example shows how you can toggle the application control bar in a Spark Application container in Flex 4 by setting the Boolean controlBarVisible property.

The controlBarVisible property was added in Flex 4.0.0.10693 beta SDK.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ --> <s:Application name="Spark_Application_controlBarVisible_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" controlBarVisible="{chckBx.selected}"> <s:controlBarContent> <s:Label id="sdkVer" initialize="sdkVer.text = [...]]]> The following example shows how you can toggle the application control bar in a Spark Application container in Flex 4 by setting the Boolean controlBarVisible property.

The controlBarVisible property was added in Flex 4.0.0.10693 beta SDK.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarVisible_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"
        controlBarVisible="{chckBx.selected}">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

You can also set the controlBarVisible property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarVisible_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">
    <s:controlBarContent>
        <s:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
 
            protected function chckBx_changeHandler(evt:Event):void {
                Application(FlexGlobals.topLevelApplication).controlBarVisible = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
    <s:CheckBox id="chckBx"
            label="controlBarVisible"
            selected="true"
            horizontalCenter="0" verticalCenter="0"
            change="chckBx_changeHandler(event);"/>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarVisible_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.core.FlexGlobals;
 
            import spark.components.CheckBox;
            import spark.components.Label;
 
            private var chckBx:CheckBox;
 
            private function init():void {
                var sdkVer:Label = new Label();
                sdkVer.text = mx_internal::VERSION;
                Application(FlexGlobals.topLevelApplication).controlBarContent = [sdkVer];
 
                chckBx = new CheckBox();
                chckBx.label = "controlBarVisible";
                chckBx.selected = true;
                chckBx.horizontalCenter = 0;
                chckBx.verticalCenter = 0;
                chckBx.addEventListener(Event.CHANGE, chckBx_changeHandler);
                addElement(chckBx);
            }
 
            protected function chckBx_changeHandler(evt:Event):void {
                Application(FlexGlobals.topLevelApplication).controlBarVisible = chckBx.selected;
            }
        ]]>
    </fx:Script>
 
</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.

 
]]> http://blog.flexexamples.com/2009/10/03/toggling-the-application-control-bar-in-a-spark-application-container-in-flex-4/feed/ 10 Creating a vertical application control bar on a Spark Application container in Flex 4 http://blog.flexexamples.com/2009/09/23/creating-a-vertical-application-control-bar-on-a-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2009/09/23/creating-a-vertical-application-control-bar-on-a-spark-application-container-in-flex-4/#comments Thu, 24 Sep 2009 06:59:14 +0000 Peter deHaan http://blog.flexexamples.com/?p=1969 The following example shows how you can create a vertical application control bar on a Spark Application container in Flex 4 by creating a custom Application skin and setting the skinClass style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/23/creating-a-vertical-application-control-bar-on-a-spark-application-container-in-flex-4/ --> <s:Application name="Spark_Application_skinClass_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" skinClass="skins.CustomApplicationSkin"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" [...]]]> The following example shows how you can create a vertical application control bar on a Spark Application container in Flex 4 by creating a custom Application skin and setting the skinClass style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/09/23/creating-a-vertical-application-control-bar-on-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_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"
        skinClass="skins.CustomApplicationSkin">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <s:Button label="Button" />
        <s:CheckBox label="CheckBox" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
        <s:RadioButton label="RadioButton" />
    </s:controlBarContent>
 
    <mx:ColorPicker />
    <mx:DateChooser />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/23/creating-a-vertical-application-control-bar-on-a-spark-application-container-in-flex-4/ -->
<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:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata>
 
    <!-- fill -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor color="{getStyle('backgroundColor')}" />
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:HorizontalLayout gap="0" verticalAlign="justify" />
        </s:layout>
 
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                includeIn="normalWithControlBar, disabledWithControlBar" >
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
               <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
               </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect  right="0" top="0" bottom="0" width="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>

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.

 
]]> http://blog.flexexamples.com/2009/09/23/creating-a-vertical-application-control-bar-on-a-spark-application-container-in-flex-4/feed/ 0 Adding a gradient background to a Spark Application container control bar in Flex 4 http://blog.flexexamples.com/2009/09/03/adding-a-gradient-background-to-a-spark-application-container-control-bar-in-flex-4/ http://blog.flexexamples.com/2009/09/03/adding-a-gradient-background-to-a-spark-application-container-control-bar-in-flex-4/#comments Thu, 03 Sep 2009 13:32:07 +0000 Peter deHaan http://blog.flexexamples.com/?p=1796 The following example shows how you can create a gradient background Spark Application control bar in Flex 4 by creating a custom skin and setting the skinClass style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/03/adding-a-gradient-background-to-a-spark-application-container-control-bar-in-flex-4/ --> <s:Application name="Spark_Application_skinClass_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" skinClass="skins.CustomApplicationSkin"> <s:controlBarContent> <s:RichText text="color:" /> <mx:ColorPicker id="colorPicker" /> </s:controlBarContent> <s:controlBarLayout> [...]]]> The following example shows how you can create a gradient background Spark Application control bar in Flex 4 by creating a custom skin and setting the skinClass style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/09/03/adding-a-gradient-background-to-a-spark-application-container-control-bar-in-flex-4/ -->
<s:Application name="Spark_Application_skinClass_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"
        skinClass="skins.CustomApplicationSkin">
    <s:controlBarContent>
        <s:RichText text="color:" />
        <mx:ColorPicker id="colorPicker" />
    </s:controlBarContent>
    <s:controlBarLayout>
        <s:HorizontalLayout verticalAlign="middle"
                paddingLeft="10" paddingRight="10"
                paddingTop="10" paddingBottom="10" />
    </s:controlBarLayout>
 
    <s:RichEditableText id="sdkVer"
            color="{colorPicker.selectedColor}"
            editable="false" selectable="false"
            fontSize="96"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="sdkVer.text = mx_internal::VERSION;" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/03/adding-a-gradient-background-to-a-spark-application-container-control-bar-in-flex-4/ -->
<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:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </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 left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <!--- Application Control Bar -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                includeIn="normalWithControlBar, disabledWithControlBar">
            <!-- layer 0: control bar background -->
            <s:Rect left="0" right="0" bottom="0" top="1" rotation="90">
                <s:fill>
                    <s:LinearGradient>
                        <s:GradientEntry color="white" />
                        <s:GradientEntry color="haloSilver" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
 
            <!-- layer 1: control bar divider line -->
            <s:Rect left="0" right="0" top="0" height="1" >
                <s:fill>
                    <s:SolidColor color="0xCDCDCD" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
    </s:Group>
 
</s:Skin>

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.

 
]]> http://blog.flexexamples.com/2009/09/03/adding-a-gradient-background-to-a-spark-application-container-control-bar-in-flex-4/feed/ 1 Setting the control bar layout on a Spark Application container in Flex 4 http://blog.flexexamples.com/2009/09/02/setting-the-control-bar-layout-on-a-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2009/09/02/setting-the-control-bar-layout-on-a-spark-application-container-in-flex-4/#comments Thu, 03 Sep 2009 04:16:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=1793 In a previous example, “Adding a control bar to a Spark Application container in Flex 4″, we saw how you could add a control bar to a Spark Application container in Flex 4 by setting the controlBarContent property.

The following example shows how you can change the layout direction of a control bar in [...]]]> In a previous example, “Adding a control bar to a Spark Application container in Flex 4″, we saw how you could add a control bar to a Spark Application container in Flex 4 by setting the controlBarContent property.

The following example shows how you can change the layout direction of a control bar in a Spark Application container in Flex 4 by setting the controlBarLayout property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/09/02/setting-the-control-bar-layout-on-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarLayout_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">
    <s:controlBarContent>
        <s:Button label="Button 1" />
        <s:Button label="Button 2" />
        <s:Button label="Button 3" />
        <s:Button label="Button 4" />
    </s:controlBarContent>
    <s:controlBarLayout>
        <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
    </s:controlBarLayout>
 
    <s:RichEditableText id="sdkVer"
            editable="false" selectable="false"
            fontSize="96"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="sdkVer.text = mx_internal::VERSION;" />
 
</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.

 
]]> http://blog.flexexamples.com/2009/09/02/setting-the-control-bar-layout-on-a-spark-application-container-in-flex-4/feed/ 0 Adding a control bar to a Spark Application container in Flex 4 http://blog.flexexamples.com/2009/09/01/adding-a-control-bar-to-a-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2009/09/01/adding-a-control-bar-to-a-spark-application-container-in-flex-4/#comments Tue, 01 Sep 2009 17:45:42 +0000 Peter deHaan http://blog.flexexamples.com/?p=1790 The following example shows how you can add a control bar to a Spark Application container in Flex 4 by setting the controlBarContent property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/01/adding-a-control-bar-to-a-spark-application-container-in-flex-4/ --> <s:Application name="Spark_Application_controlBarContent_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"> <s:controlBarContent> <mx:Form paddingTop="0" paddingBottom="0"> <mx:FormItem label="contentBackgroundColor:"> <mx:ColorPicker id="colorPicker" selectedColor="white" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   [...]]]> The following example shows how you can add a control bar to a Spark Application container in Flex 4 by setting the controlBarContent property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/09/01/adding-a-control-bar-to-a-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_controlBarContent_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">
    <s:controlBarContent>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            contentBackgroundColor="{colorPicker.selectedColor}"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
    </s:Panel>
 
</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.

 
]]> http://blog.flexexamples.com/2009/09/01/adding-a-control-bar-to-a-spark-application-container-in-flex-4/feed/ 0 Disabling a Spark Application container in Flex 4 http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/ http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/#comments Fri, 14 Aug 2009 14:05:45 +0000 Peter deHaan http://blog.flexexamples.com/?p=1589 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 [...]]]> 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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

 
]]> http://blog.flexexamples.com/2009/08/14/disabling-a-spark-application-in-flex-4/feed/ 7