Adding scroll bars to an Spark Application container in Flex 4

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 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/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.

11 thoughts on “Adding scroll bars to an Spark Application container in Flex 4

  1. Flex4 really sucks in term of quantity of code needed to produce such a small thing.
    At least with flex3 it required … nothing !

  2. Kox comments are very apt. In flex 3 the scroll bars were enabled by default. I’ve already put a day into the upgrade on this issue alone!

    It would be great if you could show the example on this page. I know I can build it, but creating a dummy project, adding the two modules…. it’s a pain.

    Is there any flex 4 api reference available? I cannot find any documentation on-line.

  3. Hi Peter,

    is there a way to create a mouse draggable content (so that can show all its content) inside a Scroller?

    For example: a very large image (Image) inside a viewport (Group) that has scrollbars active (Scroller): Here you can drag the image to show the other parts of the image.

    thank you very much.

  4. scroll bars not working if i set the minWidth and minHeight properties on application, can you please help

  5. Your site is an excellent resource, and I really appreciate the work you’ve done in sharing your knowledge. With that said, my personal opinion is that Spark is a half-baked implementation that takes us a step backwards. I agree with kox that using 100+ lines of code to implement a simple scrollbar that is only partially functional is not my idea of flexibility or reusability. It may be more efficient, but that’s because half of the functionality is missing. I won’t even get into TLF. What a mess. Epic fail.

  6. it may be 100+ lines of code but its generated by flash builder all you have to do is just wrap the contentGroup with Scroller (its just a line of code that you write to get scroll bars). This way we can add scroll bars only if necessary instead of it being in the container always even if we dont need them.

  7. Hi Peter,

    is there a way to create a mouse draggable content (so that can show all its content) inside a Scroller?

    For example: a very large image (Image) inside a viewport (Group) that has scrollbars active (Scroller): Here you can drag the image to show the other parts of the image.

    thank you very much.

  8. Hello, I have a website based on flex 4 :)… Somewhere here I have to agree with some people like kumar, that Flex 4 is a step down. I like the skinning but prefer css, and many other things I don’t quite get why are added or removed… anyway :) to return to my point – the scroller is not working :(… I did what your example here says, even copy-pasted it as it is here – but no scrollers. So, my program is based on states, and it hes some other elements like panel and images and menubar and others… So if someone has any idea why the scrolling is not working I will appreciate it. Thank you in advance.
    P.S. I tried with this also:

  9. Hi Peter, I’m also having trouble displaying my scrollbars. They *were* there, but I lost them at some point when I wasn’t paying attention. I looked at the bug db and saw there are some known problems with width/height, so I tried playing with that. Also, my scroller is in the skin to a custom class that is used for the main content. So I tried changing where I applied the skin. As well as the metadata for the skin (between the custom class and SkinnableContainer), but no dice. By chance do you have any other ideas I could try? Anything you have heard of causing scrollers to not display?

Comments are closed.