AutoHiding Custom Scrollbar Flex 4

Question

Hello,

I have a custom scrollbar that controls a group as its viewport.

<s:HGroup>
        <s:Group width="520" height="380" clipAndEnableScrolling="true" id="descriptionBox" >
            <s:RichText  text="Test Test Test Test Test Test Test "
                        width="490" textAlign="justify" fontFamily="Arial" fontSize="12" color="#999999" />
        </s:Group>
        <s:VScrollBar viewport="{descriptionBox}" 
                left="{descriptionBox.x + descriptionBox.width + 10}" 
                top="10" 
                height="{descriptionBox.height}"
                fixedThumbSize="true"
                skinClass="VScrollBarSkin"/>
    </s:HGroup> 

I want to make that scrollbar autohide when the contents of that group is not larger than the view, any idea how to do that generically (meaning that I dont want to depend on a component inside the viewport group)?

Thanks.

Answer 1

Hey there,

The Scroller component in Flex 4 does exactly that:

• Autohides/shows horizontal and vertical scrollbars on a GroupBase (Group or DataGroup, which are IViewports)
• Allows you to customize the scrollbars through skins

Here's the code that would do what you're describing:

<s:Application
    xmlns="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <Script>
        <![CDATA[

            private var times:int = 400;

            private function updateText(type:String):void
            {
                var newText:String = "";
                var i:int = 0;
                var n:int = times;
                for (i; i < n; i++)
                {
                    newText += "Test ";
                }
                var text:String = richText.text;
                if (type == "add")
                    text += newText;
                else
                    text = newText.replace(text) + '';
                richText.text = text;
            }

        ]]>
    </Script>
    <s:HGroup>
        <s:Button label="+" click="updateText('add')"/>
        <s:Button label="-" click="updateText('remove')"/>
    </s:HGroup>
    <s:Scroller width="520" height="380" id="scroller" minViewportInset="1" focusEnabled="false">
        <s:Group clipAndEnableScrolling="true" id="descriptionBox">
            <s:RichText id="richText" creationComplete="updateText('add')"
                width="490" textAlign="justify" fontFamily="Arial" fontSize="12" color="#999999" />
        </s:Group>
    </s:Scroller>
</s:Application>

You wouldn't want to add explicit width/height on your group, as it is dependent on its childrens' sizes. If you wrap it in a Scroller, it handles all the details for you.

You can check out the VScrollBarSkin, VScrollBarThumb, VScrollBarTrack, etc., if you want to customize the graphics on those elements. And if you don't want a Horizontal ScrollBar, you can just not include it in your MyScrollerSkin class.

Hope that helps, Lance