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.

Hi, Peter,

I’ve just downloaded the ZIP and imported it directly into Flex Builder 3 (the plugin version) and compiled it with Flex SDK 3.2, and it works just as expected - no errors whatsoever.

How do you import the ZIP into your workspace?

My guess is that you loose somehow the reference to the scrollAssets.swc library.

Hi,
Thank You very much. You saved my day.
Now I’ve got my list with custom scrollbar thumb

Simply said, YES!

Andreas, thank you for contributing further to this article!

Even though I had to do some workarounds (for whatever reasons, Styles didn’t work as expected in my evironment), this was a GREAT help.

THANKS!!!!!

joey

Have you tried this way:

<mx:Style>
    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");
    }

    HScrollBar
    {
        down-arrow-skin: ClassReference("VScrollBar_downArrowSkin");
        up-arrow-skin: ClassReference("VScrollBar_upArrowSkin");
        track-skin: ClassReference("HScrollBar_trackSkin");
        thumb-skin: ClassReference("HScrollBar_thumbSkin");
        thumb-icon: ClassReference("HScrollBar_thumbIcon");
    }

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

You need to produce assets for the:
HScrollBar_trackSkin
HScrollBar_thumbSkin
HScrollBar_thumbIcon

Let me know if that worked for you!

So Greeeeeaaaaaaaat!!
I love you, all!
bT_T)=b

My CSS :

FixedSizeScrollThumb
{
	thumbWidth: 13;
	thumbHeight: 28;
	hitAreaPadding : 13;
}

VScrollBar
{
	upArrowSkin: ClassReference(null);
	downArrowSkin: ClassReference(null);
	trackSkin: Embed(source="scroll_line.png");
	thumbSkin: ClassReference("com.util.ScrollBarUtil");
	thumbIcon: Embed(source="scrollThumb.png");
}

scrollThumb.png is 13*28

Hi Jim,

You’ve noticed that correctly. It has never been a public property - it is an mx_internal.
Please, read the code I’ve provided with the article and especially the FixedSizeScrollThumb.as . You’ll see I’m using the following lines:

import mx.core.mx_internal;

use namespace mx_internal;

But keep in mind that even with these lines added to your code, the Flex Builder code completion won’t hint you the mx_internal properties - you need to write them correctly to avoid compile errors.

Cheers,
Vladimir

It’s not a hack, it is a proper usage of a Flex internal property. It is another question what are the available options for extending Flex components. Using mx_internal is one option, which has the disadvantage of being dependent on the Flex team and the modification they might make in the future.

When you design and develop a component, you’re thinking of limited scenarios for its usage. Basically, it is impossible to cover an infinite set of requirements. So, in the Flex team no one thought about having a fixed-size scroll-bar, probably because from usability standpoint this is a strange requirement… And when you need such very custom behavior you have no other choice but to use Flex internal properties.

I’m sorry about my problem.
I didn’t read clearly your solutions.

Thanks.

Hi Admin!
I got some problem with FCKEditor but I don’t know where I can post the question?
Please tell me.
Thank you and bless you.

Hi George,

Please read the comments from Jul 7th, 2010. These comments answer your question!

Thanks a lot, Kyle!

The feeling of appreciation and receiving such comment on a pressured Friday is just awesome

I realize this is a pretty old post, but it came up in the top Google results as I was recently trying to do this same thing. I solved it a bit differently, using just a skin class, and the mx_internal namespace.

In my skin class (extends Border):

override public function get measuredWidth():Number { return 25; }
override public function get measuredHeight():Number { return 45; }

private var _isActualSizeSet: Boolean = false;

override public function setActualSize(newWidth:Number, newHeight:Number):void
{
	super.setActualSize(measuredWidth, measuredHeight);

	if(_isActualSizeSet) return;
	_isActualSizeSet = true;

	var scrollThumb: ScrollThumb = parent as ScrollThumb;
	var scrollBar: ScrollBar = scrollThumb.parent as ScrollBar;

	scrollThumb.setActualSize(measuredWidth, measuredHeight);
	scrollThumb.setRange(0,
						 scrollBar.virtualHeight -
						 scrollThumb.height,
						 scrollBar.minScrollPosition,
						 scrollBar.maxScrollPosition);

	var hitArea: Sprite = new Sprite();
	hitArea.graphics.beginFill(0xff6600);
	hitArea.graphics.drawRect(0, 0, measuredWidth, measuredHeight);
	hitArea.visible = false;

	scrollThumb.addChild(hitArea);
	scrollThumb.hitArea = hitArea;
}

…then all one need do is set the skin style in CSS, like:

ScrollBar
{
	thumb-skin: ClassReference("com.whatever.skins.FixedSizeThumbSkin");
}

…you could even use the nifty custom CSS selectors to control the size of the thumb this way too!

Thanks for the great post!

//Matt