Aboutme – blog

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!

Last saturday I went to the Adobe Usergroup meeting in Gent (Belgium). It featured the Adobe Prerelease tour, Christophe’s presentation about Prana and, last but not least a presentation about lovely charts. Loverly Charts is an application to created flowcharts and diagrams online. This reminded me of a project I’ve been working on now and then the last 3 years. It doesn’t have a title / name yet, but it is a flowcharting application aswell.

You can created flowcharts, which are stored in a database. The flowcharts have metadata, like the perspon who is responsable for that chart, name, description, etc… Each step in a flowchart has metadata aswell. Charts can be linked to eachother, so you can describe a main proces which links to sub-processes aswell.

I’ve put a little demo online at: http://labs.aboutme.be/charts/

Enjoy!