How to override the renderer of af:selectManyCheckbox to add images

Question

My goal is to add an image and the handler of the image for each SelectItem of af:selectManyCheckbox.
I'm defining the customized renderer like below, but I'm not sure about the "???" part. Any advice/sample will be appreciated. Runnable project will be even better.
public class MyCheckboxRenderer extends SelectManyCheckboxRenderer{
@Override
public void encodeBegin(FacesContext context,
UIComponent component) throws IOException {
ResponseWriter writer = context.getResponseWriter();
for(SelectItem item : component.getChildren()){
if(item instanceof MySelectItem){
???writer.write(the checkbox);
???writer.write(item.image);
???register the handler for the image
???writer.write(item.label);
}else if(item instanceof SelectItem){
???render as default;
super.encodeBegin(context, component);
public class MySelectItem extends SelectItem{
String image;
In faces-config.xml
<render-kit>
<renderer>
<component-family>???</component-family>
<renderer-type>???</renderer-type>
<renderer-class>MyCheckboxRenderer</renderer-class>
</renderer>
</render-kit>
Thanks.
Edited by: Leon Zeng on Jul 19, 2012 9:55 AM

Answer 1

Seems I need override the encodeSelectItem() method.
But not sure which class is the renderer for af:selectManyCheckbox. And how to set below
<component-family>???</component-family>
<renderer-type>???</renderer-type>
Edited by: Leon Zeng on Jul 19, 2012 2:18 PM