Gradient Colors in flex 4 Application background with Scroll Bar

As Flex 4 markets itself as “Get what you pay...” some developers may find little bit confusing how to achieve same thing as flex 3 applications. Here I have discussed two important requirements for Applications in flex 4.

In Flex 3 one can add multiple colors in the backgroundColors style of the Application container to get a gradient style background. To make it happen in Flex 4 you need to add a custom skin to the Application.

If the Flex Application height and width is greater than the browser height and width, in .Flex 3 it automatically adds scrollbars if the horizontalScrollPolicy and verticalScrollPolicy are set to auto or on. In flex 4 you have to add a Spark Scroller in the custom skin you added to the Application.

Following code snippet shows how you can add gradients and scroll bars to your Spark application.

<s:Application 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="assets.skins.ApplicationSkin">
    
    <s:layout>
        <s:VerticalLayout gap="10" horizontalAlign="center"/>
    </s:layout>
    <s:Button label="Label 1"/>
    <s:Button label="Label 2"/>
    <s:Button label="Label 3"/>
    <s:Button label="Label 4"/>
    <s:Button label="Label 5"/>
    <s:Button label="Label 6"/>
    <s:Button label="Label 7"/>
    <s:Button label="Label 8"/>
    <s:Button label="Label 9"/>
    <s:Button label="Label 10"/>
</s:Application>

Custom Skin for the Application:

<s:Skin 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">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * A strongly typed property that references the 
         * component to which this skin is applied.
         */
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" />
        <s:State name="disabledWithControlBar" />
    </s:states>
    
    <!-- fill -->
    <!--- 
        A rectangle with a Gradient 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>
            <!--- @private -->
            <s:LinearGradient id="bgRectFill" rotation="90">
                <s:GradientEntry color="0xCCCCCC"/>
                <s:GradientEntry color="0x222222"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
        
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <!--- 
            @private
            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 -->
            <!--- @copy spark.components.Application#controlBarGroup -->
            <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>

        <!--- Here a Scroller added to support scroll bar 
        in the application -->
        <s:Scroller id="applicationScroller" 
                    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>

You can download the application from here.