A CheckBox in Flex is essentially a Button with a built in icon to visually describe the checked/unchecked state. The difference however becomes obvious when skinning. If you skin the CheckBox the same way you skin a normal Button, you’ll end up changing the whole area of the CheckBox. What you actually want is to change the icon of the CheckBox. And the example here adequately describes the details of this process. The only problem is when you add a label to the CheckBox, the text will be off. This is because the icon is not registering (or is registering 0) any width or height values. After hours of investigation and debugging I found out about overriding the measuredWidth and measuredHeight properties inherited from ProgrammaticSkin. So after adding the following lines to the MXML skin the label aligned correctly:
override public function get measuredWidth():Number
{
return 14; // The desired width of the "box"
}
override public function get measuredHeight():Number
{
return 14; // The desired height of the "box"
}
0 Responses to “Skinning a CheckBox in Degrafa: The Missing Override”