Mastering the Tao of Personal Computing

Awesome! This helped big time.

Hi, Anna,
If you read carefully, you’ll see that the sample above is suitable only for components inheriting the Flex Container component. The TextArea component inherits from the ScrollControlBase component, which does not have rawChildren, but has verticalScrollBar and horizontalScrollBar properties. The problem you need to solve is how to access these properties when they are declared as protected. It’s easy - you just need to extend the Flex TextArea in the following way:

package
{
    import mx.controls.TextArea;
    import mx.controls.scrollClasses.ScrollBar;

    public class TextArea extends mx.controls.TextArea
    {
        public function getVerticalScrollBar() : ScrollBar
        {
            return verticalScrollBar;
        }

        public function getHorizontalScrollBar() : ScrollBar
        {
            return horizontalScrollBar;
        }

        public function TextArea()
        {
            super();
        }
    }
}

Now these protected properties are exposed through public methods and you can use them just like in the samples above.

Cheers

Hi Vladimir,

I need to have the vertical scrollbar of a container, let’s say a Canvas, outside the Canvas. What Im doing right now is hidind the verticalScrollBar of the Canvas and using an independent VScrollBar component.

On creationcomplete of the container, I set the values for the scrollbar just like:

scrollbar.maxScrollPosition = container.verticalScrollBar.maxScrollPosition;
scrollbar.invalidateDisplayList();

It seems to work fine BUT the thumbSize of the independent scrollbar is not sized correctly; the min and max values are correct but the thumbSize is smaller than the canvas’ vertical scroll bar.

Do you know how can I fix this?

Thank you in advance.

Alberto

Hi Vladimir,

First of all, thank you for your fast and good response.

Yesterday, browsing the code of the ScrollBar component, I found the same solution you point out: using setScrollProperties() you can set all the scrollbar properties of an independent scrollbar.

So the problem was: I have one container with things and I dont want this container to show its internal scrollbar but I want this scrollbar outside the container. The way to do this is using an independent scrollbar and copy all the settings of the container scrollbar to this new scrollbar. But, what if I dont have access to the container scrollbar( scrollpolicies are set to “off”? What If I cant access container.verticalScrollbar.pageSize or maxScrollposition, etc? How can I calculate the needed parameters for the setScrollProperties method?

Thanks.

Alberto

Nice hearing from you, Alberto,

Basically you’ve done a custom component - when you do custom components you should always ask yourself the question: “Do I really need a custom component?”
Very often after nice thorough discussion with a designer you’ll find ways how to fit most of the things with nesting components, using constraints, styles etc. Doing this will prevent numerous hours of coding, testing and fixing bugs - after all the guys from Adobe have done lots of stuff with and inside the Flex Framework - try first utilizing the most of it.
When you have a solution based on off- the-shelf Flex Framework components, you can start analyzing is it OK in terms of performance and construction complexity. The conclusions from such analysis will lead you to the decision whether you need to code brand new components.
Nevertheless, you can always base your custom implementation on top of the Flex Framework implementation - the Flex components are priceless source of ideas and code that you can use - sometimes by just copying useful fragments, like I suppose you’ve done in your solution after careful reading of the Container’s code.

Best Regards,
Vladimir

Hi, Mano,
I’m not sure what is supposed to do the code fragment you have put in your comment, and to which component you’re trying to apply this programmatic skin.

The article is definitely not written as a tutorial - it is more like a programmers guide for how to make a fixed sized scroll thumb. And it’s a bit hard to read and understand if you’re a designer, involved only with skinning and styling, but not in writing custom Flex components. So, I’ll try to dumb down my article in a set of steps, that are easy to follow from a designer:

1. Define the skin for the scroll-bar:

VScrollBar
{
    down-arrow-skin: ClassReference("VScrollBar_downArrowSkin");
    up-arrow-skin: ClassReference("VScrollBar_upArrowSkin");
    track-skin: ClassReference("VScrollBar_trackSkin");
    thumb-skin: ClassReference("VScrollBar_thumbSkin");
    thumb-icon: ClassReference("VScrollBar_thumbIcon");
}

This skin defines how your scroll-bar is going to look like. But this step is not enough to have a scroll-bar with a fix sized scroll thumb.

2. Download the source code from the samples in the article from here.
Copy-paste into your project the component and util packages from the code you’ve just downloaded.

3. Define the skin for the fix sized scroll thumb:

FixedSizeScrollThumb
{
    thumbWidth: 4;
    thumbHeight: 4;
    hitAreaPadding : 10;
}

The styling in the fragment above defines the fixed dimensions of the scroll thumb. In cases of really tiny scroll thumb you can set a padding area with a particular size that, so you can grab the thumb everywhere inside this area, not just on the visible dimensions.

4. Replacing the scroll bar scroll thumb with a fixed size scroll thumb. This is the step where you need a programmer to get involved, but you can try it yourself.

First, you need to identify which is the container that will have a scroll bar. Let’s imagine this Canvas is that container:

<mx:Canvas id="longTextContainer" width="240" height="200" clipContent="true" x="0" y="0"
    updateComplete="ScrollBarUtil.replaceScrollThumb(longTextContainer.verticalScrollBar);">
    <mx:Text width="90%" text="{loremIpsumLong}"/>
</mx:Canvas>

All you need to do is to add this attribute to the Canvas MXML:

updateComplete="ScrollBarUtil.replaceScrollThumb(longTextContainer.verticalScrollBar);"

The direction you’ve chosen for your solution has the advantage of declaratively skin all scroll thumbs in an application, instead of using programming logic to selectively skin just the scroll thumbs of the containers you’re interested in.

Good luck!

Mano, I have tried your approach with the programmatic skin, but I had no luck with it - the visual appearance of the ScrollThumb is like it has a fixed size, but it actual dimensions are not. I’ve tried to override setActualSize, but again no luck - something else is setting the actual dimensions.

So, you have to stick with the steps I’ve described you in my previous response.

First, you should do steps 1, 2, 3.

Then, check out my MXML file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.core.mx_internal;
            import util.ScrollBarUtil;

            use namespace mx_internal;
        ]]>
    </mx:Script>

    <mx:Style>
	.fixedThumbScrollBar
        {
            down-arrow-skin: ClassReference(null);
            up-arrow-skin: ClassReference(null);
            track-skin: ClassReference(null);
            thumb-skin: ClassReference(”skin.ScrollThumbSkin”);
        }

        FixedSizeScrollThumb
        {
            thumbWidth: 15;
            thumbHeight: 15;
            hitAreaPadding : 10;
        }
    </mx:Style>

    <mx:TextArea id=”textArea” verticalScrollBarStyleName=”fixedThumbScrollBar” x=”20″ y=”20″ width=”200″ height=”90″
        updateComplete=”ScrollBarUtil.replaceScrollThumb(textArea.scroll_verticalScrollBar)”/>

</mx:Application>

In this sample I use a programmatic skin very similar to yours:

skin/ScrollThumbSkin.as

package skin
{
    import mx.controls.scrollClasses.ScrollThumb;
    import mx.skins.ProgrammaticSkin;

    public class ScrollThumbSkin extends ProgrammaticSkin
    {
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            var scrollThumb : ScrollThumb = ScrollThumb(parent);

            var thumbWidth : Number = scrollThumb.getStyle("thumbWidth");
            var thumbHeight : Number = scrollThumb.getStyle("thumbHeight");

            if (!isNaN(thumbWidth) && !isNaN(thumbHeight))
            {
                graphics.clear();
                graphics.beginFill(0x000000);
                graphics.drawRect(thumbWidth/2, 0, thumbWidth, thumbHeight);
                graphics.endFill();
            }
        }

    }
}

Please, follow the steps carefully and try it like this!

Hi,
I’ve been trying to apply your code to the TileList. Seems like it can’t find the rawChildren property at all. Any idea on how to go about it??

Thanks,
Damian

Hi there, i was trying to use your scrollbar, i wonder how do you do the glow effect in your ScrollThumb,

Thanks
Alex

I spent two days looking how to do this. I tried to override the setHeight on the scrollThumb, but it won’t work. You really made my day today.