Using a CheckBox control as a list item renderer in Flex

The following example will show you how you can use a CheckBox control as a custom item renderer in a List control in Flex.
I haven’t done a lot of testing yet, so if you have any tips/suggestions/improvements, please, share them in the comments

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:vo="*"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            import mx.utils.ObjectUtil;

            private function init():void {
                arrColl.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
            }

            private function arrColl_collectionChange(evt:CollectionEvent):void {
                try {
                    var tArr:Array = arrColl.source.filter(selectedOnly);
                    textArea.text = ObjectUtil.toString(tArr);
                    lbl.text = tArr.length.toString() + " item(s) selected";
                } catch (err:Error) {
                    // ignore.
                }
            }

            private function selectedOnly(item:ListItemValueObject, idx:uint, arr:Array):Boolean {
                return item.isSelected;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <vo:ListItemValueObject label="One" isSelected="true" />
        <vo:ListItemValueObject label="Two" isSelected="true" />
        <vo:ListItemValueObject label="Three" isSelected="true" />
        <vo:ListItemValueObject label="Four" isSelected="true" />
        <vo:ListItemValueObject label="Five" isSelected="false" />
        <vo:ListItemValueObject label="Six" isSelected="false" />
        <vo:ListItemValueObject label="Seven" isSelected="false" />
        <vo:ListItemValueObject label="Eight" isSelected="false" />
        <vo:ListItemValueObject label="Nine" isSelected="false" />
        <vo:ListItemValueObject label="Ten" isSelected="false" />
        <vo:ListItemValueObject label="Eleven" isSelected="false" />
        <vo:ListItemValueObject label="Twelve" isSelected="false" />
    </mx:Array>

    <mx:ArrayCollection id="arrColl"
            source="{arr}"
            collectionChange="arrColl_collectionChange(event);" />

    <mx:Panel id="panel"
            title="Items"
            status="{arrColl.length} total"
            styleName="opaquePanel">
        <mx:List id="list"
                dataProvider="{arrColl}"
                alternatingItemColors="[#EEEEEE, white]"
                width="150"
                rowCount="8">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CheckBox selectedField="isSelected"
                            change="onChange(event);">
                        <mx:Script>
                            <![CDATA[
                                private function onChange(evt:Event):void {
                                    data.isSelected = !data.isSelected;
                                }
                            ]]>
                        </mx:Script>
                    </mx:CheckBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:List>
        <mx:ControlBar horizontalAlign="right">
            <mx:Label id="lbl" />
        </mx:ControlBar>
    </mx:Panel>

    <mx:TextArea id="textArea"
            verticalScrollPolicy="on"
            width="100%"
            height="{panel.height}" />

</mx:Application>

View ListItemValueObject.as

package {
    public class ListItemValueObject {

        [Bindable]
        public var label:String;

        [Bindable]
        public var isSelected:Boolean;

        public function ListItemValueObject() {
            super();
        }
    }
}

For lots more information on item renderers from somebody who knows what he’s talking about, check out Alex Harui’s excellent item renderer articles: “Thinking About Item Renderers” and “More Thinking About Item Renderers”.