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: arraycollectionID= "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: textareaID= "Textarea"
Verticalscrollpolicy= "On"
Width= "100%"
Height= "{Panel. Height }" />

</MX: Application>

View listitemvalueobject.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 ".