custom components

[sa6k0o0]

is there any way to make the scrollbar without the arrows ?
Or the way is just to build a new scrollbar component in flex ?

And I have build already many components in flash 8 (UI Components and more complex like Menu etc)
is it possible to use them in flex2, or it is needed to rebuild them in flash 9 with actionscript3 ?

[Assertnfailure]

A scrollbar without arrows would be a VSlider.

You can't use AS 2 code with flex 2, you'd have to rewrite them...

[sa6k0o0]

But I don't thing that I can skin the vslider so that to become a real scrollbar.
I just want the scrollbar to have specific Scroll Track and specific Scroll Thumb, and to get rid of the buttons up and down (arrows).

It is supposed to be something like the about section in http://www.espacestudio.com ( there is a scrollbar without arrows[scrollUp,scrollDown])

thanks

Alex

[sa6k0o0]

Well if there is no way to do this on an easy way , I am ready to make my own scrollbar component in flex or flash9 ( I don't thing that my scrollbar component in flash 8 will work in flex2)

So if somebody can give me some directions I really will appreciate it.

[Tink]

You can write your own ScrollArrowSkin class and assign it to as VScrollBar or HScrollBar as downArrowDisabledSkin, downArrowDownSkin, downArrowOverSkin, downArrowUpSkin, upArrowDisabledSkin, upArrowDownSkin, upArrowOverSkin, upArrowUpSkin.

take a look at the deafult class in Adobe/Flex Builder 2 Plug-in/Flex SDK 2/frameworks/source/mx/skins/halo/ScrollArrowSkin.as

The arrow is drawn at line 359

		// Draw up or down arrow
		g.beginFill(arrowColor);
		if (upArrow)
		{
			g.moveTo(w / 2, 6);
			g.lineTo(w - 5, h - 6);
			g.lineTo(5, h - 6);
			g.lineTo(w / 2, 6);
		}
		else
		{
			g.moveTo(w / 2, h - 6);
			g.lineTo(w - 5, 6);
			g.lineTo(5, 6);
			g.lineTo(w / 2, h - 6);
		}
		g.endFill();

[sa6k0o0]

I removed the scroll arrows, that is cool, but now the scrollthumb doesn't go all the way up and all the way down.

I put also to my CustomScrollArrowSkin class

override public function get measuredHeight():Number
{
return 0;
}

but it still is not working exactly on the way it is supposed to be.....

Here is the final example http://code-craft.net/Sa6k0o0/test/flex/1/Aurora.html

If somebody knows what else has to be chanded , in which class should I look or just some information how to continue it would be great.

[colfaxrev]

i say keep the arrows. some people DO use them!

[sa6k0o0]

I have a specific design that I have to follow, and there are no arrows.
I didn't chane the core classes for the arrows, I made just a css that has ClassReference('CustomScrollArrowSkin' ); where CustomScrollArrowSkin is my specific class for building arrows ( in this case the class is almost empty).

But for the project I am doing I have somehow to get rid of the arrows.

[Tink]

looks like ScrollBar uses Button.getExplicitOrMeasuredHeight(). It then adds your skins to the button.

                                scrollThumb.setRange(upArrow.getExplicitOrMeasuredHeight() + 0,
                                 virtualHeight -
                                 downArrow.getExplicitOrMeasuredHeight() -
                                 scrollThumb.height,
                                 this.minScrollPosition,
                                 this.maxScrollPosition);

try extending VScrollBar and overriding setScrollProperties()

    override public function setScrollProperties(pageSize:Number,
                                        minScrollPosition:Number,
                                        maxScrollPosition:Number,
                                        pageScrollSize:Number = 0):void
    {
        var thumbHeight:Number;

        this.pageSize = pageSize;

        _pageScrollSize = (pageScrollSize > 0) ? pageScrollSize : pageSize;

        this.minScrollPosition = Math.max(minScrollPosition, 0);
        this.maxScrollPosition = Math.max(maxScrollPosition, 0);

        _scrollPosition = Math.max(this.minScrollPosition, _scrollPosition);
        _scrollPosition = Math.min(this.maxScrollPosition, _scrollPosition);

        // If the ScrollBar is enabled and has a nonzero range ...
        if (this.maxScrollPosition - this.minScrollPosition > 0 && enabled)
        {
            upArrow.enabled = true;
            downArrow.enabled = true;

            addEventListener(MouseEvent.MOUSE_DOWN,
                             scrollTrack_mouseDownHandler);
            addEventListener(MouseEvent.MOUSE_OVER,
                             scrollTrack_mouseOverHandler);
            addEventListener(MouseEvent.MOUSE_OUT,
                             scrollTrack_mouseOutHandler);

            if (!scrollThumb)
            {
                scrollThumb = new ScrollThumb();

                scrollThumb.focusEnabled = false;

                // Add the thumb above the up arrow but below the down arrow
                addChildAt(scrollThumb, getChildIndex(downArrow));

                scrollThumb.styleName = this;

                // This button is a 4-state Button
                // that by default uses the ScrollThumbSkin.
                scrollThumb.upSkinName = "thumbUpSkin";
                scrollThumb.overSkinName = "thumbOverSkin";
                scrollThumb.downSkinName = "thumbDownSkin";
                scrollThumb.iconName = "thumbIcon";
            }

            thumbHeight = trackHeight < 0 ? 0 : Math.round(
                pageSize /
                (this.maxScrollPosition - this.minScrollPosition + pageSize) *
                trackHeight);

            if (thumbHeight < scrollThumb.minHeight)
            {
                if (trackHeight < scrollThumb.minHeight)
                {
                    scrollThumb.visible = false;
                }
                else
                {
                    thumbHeight = scrollThumb.minHeight;
                    scrollThumb.visible = true;
                    scrollThumb.setActualSize(_minWidth, scrollThumb.minHeight);
                }
            }
            else
            {
                scrollThumb.visible = true;
                scrollThumb.setActualSize(_minWidth, thumbHeight);
            }

            scrollThumb.setRange( 0,
                                 virtualHeight - scrollThumb.height,
                                 this.minScrollPosition,
                                 this.maxScrollPosition);

            scrollPosition = Math.max(Math.min(scrollPosition, this.maxScrollPosition), this.minScrollPosition);
        }
        else
        {
            upArrow.enabled = false;
            downArrow.enabled = false;

            if (scrollThumb)
                scrollThumb.visible = false;
        }
    }

[Tink]

bugger that has private props in it. try

    public function setScrollProperties(pageSize:Number,
                                        minScrollPosition:Number,
                                        maxScrollPosition:Number,
                                        pageScrollSize:Number = 0):void
    {
        super.setScrollProperties(pageSize
                                        minScrollPosition,
                                        maxScrollPosition,
                                        pageScrollSize)

        // If the ScrollBar is enabled and has a nonzero range ...
        if (this.maxScrollPosition - this.minScrollPosition > 0 && enabled)
        {

scrollThumb.setRange( 0,
                                 virtualHeight - scrollThumb.height,
                                 this.minScrollPosition,
                                 this.maxScrollPosition);

    }

}

its a bit hacky