I had to create bigger scrollbars, for a flex project which had to run on touchscreens. Their isn’t a real style or property which enables you to do this, but thanks to programmatic skinning, it is quite easy.
First of all, create a class which extends mx.skins.halo.ScrollTrackSkin. In this class, you override the measuredWidth() and updateDisplayList() functions:
override public function get measuredWidth():Number
{
return 50;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(50, h);
} |
After that, create a class which extends mx.skins.halo.ScrollThumbSkin. In this class, you have to provide the same methods:
override public function get measuredWidth():Number
{
return 50;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(50, h);
} |
The last class you have to create, is for the scrollbar arrows. This class extends mx.skins.halo.ScrollArrowSkin. Again, you have to override some methods: measuredWidth, measuredHeight and updateDisplayList:
override public function get measuredWidth():Number
{
return 50;
}
override public function get measuredHeight():Number
{
return 50;
}
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(50, 50);
} |
The final step, is to link these classes in your css file:
ScrollBar
{
trackSkin: ClassReference("com.mydomain.BigScrollTrackSkin");
downArrowDisabledSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
downArrowDownSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
downArrowOverSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
downArrowUpSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
thumbDownSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
thumbOverSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
thumbUpSkin: ClassReference("com.mydomain.BigScrollThumbSkin");
upArrowDisabledSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
upArrowDownSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
upArrowOverSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
upArrowUpSkin: ClassReference("com.mydomain.BigScrollArrowSkin");
} |
Programmatic skinning allows you to do even more, you can completely control the layout, and drawing of the components through code.
Good luck!
