Thursday, February 4, 2010

Image CheckBox and RadioButton

Here are two custom components that extend the CheckBox and RadioButton classes to render an image in between the checkbox/radiobutton icon and label.

The main property to set is imageSource which acts just like the Image.source property.

The image position depends on the labelPlacement property (left, right, top, bottom) and the horizontalGap style.

You can also set the imageWidth and imageHeight properties to scale the image down. If you only set one of those properties then the other one is calculated to keep the image's width and height ratio the same.

Note that the ImageCheckBox actually extends my flex.utils.ui.CheckBox class and not the expected mx.controls.CheckBox class.

The flex.utils.ui.CheckBox class supports backgroundColor and backgroundAlpha styles, and as a result the background is always painted. But the default alpha value is 0, so usually you won't see the background unless you set the background color and alpha. The reason for this is that the default mx.controls.CheckBox class has a gap between the checkbox icon and the label (which is the horizontalGap style). This gap causes mouse out events to fire when your cursor moves from the icon or label into this gap. As a result the checkbox tooltip will disappear, and the checkbox will not have the rollover styles. So by painting an invisible background color over the whole area of the checkbox this problem doesn't occur. Same thing applies with the RadioButton class.


WeeJavaDude said...

Excellent post, this is exactly what we need to do with an app for the company I am working with. Would it be ok to use your example as a starting point to add this functionality into our product.

Chris Callendar said...

Yes, feel free to use this component in your product.

WeeJavaDude said...

Thanks.. I have added your blog to follow. Looks like some good info and look forward to reading more posts.

امیرحسین said...

Dear Chris,
I couldn't find a contact in your blog, so ask my question here (excuse me):
Is it possible to leverage Jambalaya for visualizing the OWL in a standalone application (not protege) with a web interface as shows here:
Is it take a long time to customize it?

Chris Callendar said...
This comment has been removed by the author.
WeeJavaDude said...


Another question. If one would want to do something similar to your checkbox but for a radio button would the code be similar or would you recommend a different approach?

Chris Callendar said...

Hi WeeJavaDude,

I just added an ImageRadioButton class that is identical to the ImageCheckBox class except that it extends RadioButton instead of CheckBox.

I don't if there is a better way to do it. This way works for me :)


Luiz said...

wonderful components, thanks a lot.
My question is a little bit off topic. Do you know about or maybe you have one - a tree-based component with the leaves presented by radio buttons? Thank you in advance for your kind advise.

Chris Callendar said...

Hi Luiz,

I haven't seen a radio button item renderer used on a tree. But I would think that it should be pretty straight forward by setting the itemRenderer property on the tree to a RadioButton... give it a try!


Wallas said...

tks a lot.
i'm too using this in my work place.
i confess that i have thought in make a script like your. But i dont want recreate the wheel.
I'm put the link and you name in comments inside the code.
Congratulations Chris

Matthew said...

Is it possible to use these imageradiobuttons within an existing radio button group?

Matthew said...

Ok, it throws an error when you try to sneak an imageRadioButton into an existing radiobuttongroup in .. (spark, flex 4)
Just create a new RBG object and use the group="{obj}" instead of groupName="string" and it all works fine.