Question

I am having some issues when trying to skin the scrollbar on a horizontalList with Degrafa. The scrollbar doesn’t show up at all. I checked to see if the scrollbar is supposed to show up without the skinning, and it does. Are there any gotchas with doing this?
Here is some code:

This is where I define the HorizontalList where I want a skinned scrollbar

<mx:HorizontalList horizontalScrollBarStyleName="thumbnailScrollbar"/>

Here is where I define the ClassReference for the skins (null for the arrows so they dont show up).

.thumbnailScrollbar
{
    up-arrow-skin:      ClassReference(null);
    down-arrow-skin:    ClassReference(null);
    trackSkin:      ClassReference("ScrollBarTrackSkin");
    thumbSkin:      ClassReference("ScrollBarThumbSkin");
}

ScrollBarTrackSkin:

<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin  xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns="http://www.degrafa.com/2007">
    <fills>
        <SolidFill id="upFill" color="#FFFFFF" alpha="0.8"/>
    </fills>

    <geometry>
        <RoundedRectangle id="track" x="-8" cornerRadius="16" width="{this.skinWidth}" height="{this.skinHeight}" fill="{upFill}"/>
    </geometry>

</GraphicBorderSkin>

ScrollBarThumbSkin:

<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin  xmlns:mx="http://www.adobe.com/2006/mxml" 
                       xmlns="http://www.degrafa.com/2007">

    <fills>
        <SolidFill id="background" color="#333333" alpha=".8"/>
    </fills>

    <geometry>
        <RoundedRectangle id="thumb" cornerRadius="16" width="{this.skinWidth}" height="{this.skinHeight}" fill="{background}"/>
    </geometry>
</GraphicBorderSkin>

I am populating the HorizontalList with more items than are viewable, and like I said before the scrollbar shows up when I remove the skinning.

Answer 1

Where is your skinHeight and skinWidth being set? Typically, degrafa examples do something like this in the skin to update the height/width:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                awidth = unscaledWidth;
                aheight = unscaledHeight;

            }

In addition to that, I needed to do this:

override public function get measuredWidth():Number {return 16; }
override public function get measuredHeight():Number {return 10;}

in my scrollbar skins to get the height and width I wanted. (same for both V & H as they do rotation internally). There was some hacky code in the Flex scrollbar skins and my bars weren’t showing up either.

But I’m not currently using degrafa for my skins, so there may be another issue. I don’t have any examples in front of me.