Checkbox in List (Source code included)
Hi,
Code below displays a checkbox control in Spark lists:
Instructions for use:
- Create a Spark list and add the ChecBoxIconItemRenderer as itemRenderer.
- Use the checkBoxField or checkBoxFunction properties to select/unselect checkboxes from list data.
- Capture the checkBoxIconItemRendererChanged event to be notified when users click on a checkbox.
Example of use:
===============================================
<s:List width="100%" height="100%" id="my_list">
<s:itemRenderer>
<fx:Component>
<controls:CheckBoxIconItemRenderer
labelField="<...>"
checkBoxField="selected"
checkBoxIconItemRendererChanged="onCheckBoxIconItemRendererChangedHandler(event)">
<fx:Script>
<![CDATA[
protected function onCheckBoxIconItemRendererChangedHandler(event:Event):void
{
data.selected=CheckBoxIconItemRenderer(event.target).checkBox.selected;
}
]]>
</fx:Script>
</controls:CheckBoxIconItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
===============================================
Source code:
CheckBoxIconItemRenderer.mxml
===============================================
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
[Event(name="checkBoxIconItemRendererChanged", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import spark.components.CheckBox;
public var checkBox:CheckBox;
private var checkBoxChanged:Boolean;
private var _checkBoxField:String;
private var _checkBoxFunction:Function;
public function get checkBoxFunction():Function{
return _checkBoxFunction;
}
public function get checkBoxField():String{
return _checkBoxField;
}
public function set checkBoxFunction(value:Function):void{
if(_checkBoxFunction==value){
return;
}
_checkBoxFunction=value;
checkBoxChanged=true;
invalidateProperties();
}
public function set checkBoxField(value:String):void{
if(_checkBoxField==value){
return;
}
checkBoxChanged=true;
_checkBoxField=value;
invalidateProperties();
}
override public function set data(value:Object):void
{
checkBoxChanged=true;
super.data = value; //->invalidateProperties();
}
override protected function createChildren():void
{
super.createChildren();
checkBox = new CheckBox();
checkBox.width=32;
checkBox.height=32;
checkBox.scaleY=.5;
checkBox.scaleX=.5;
addChild(checkBox);
checkBox.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{
dispatchEvent(new Event("checkBoxIconItemRendererChanged"));
});
}
override protected function measure():void
{
super.measure();
measuredWidth+=getStyle("horizontalGap")+checkBox.width*checkBox.scaleY;
measuredHeight=Math.max(measuredHeight, checkBox.height*checkBox.scaleY);
}
override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
{
var paddingLeft:Number = getStyle("paddingLeft");
var paddingRight:Number = getStyle("paddingRight");
var paddingTop:Number = getStyle("paddingTop");
var paddingBottom:Number = getStyle("paddingBottom");
var horizontalGap:Number = getStyle("horizontalGap");
var verticalAlign:String = getStyle("verticalAlign");
setStyle("paddingLeft",paddingLeft+checkBox.width*checkBox.scaleX+horizontalGap);
super.layoutContents(unscaledWidth, unscaledHeight);
setStyle("paddingLeft",paddingLeft);
var vAlign:Number;
if (verticalAlign == "top")
vAlign = 0;
else if (verticalAlign == "bottom")
vAlign = 1;
else // if (verticalAlign == "middle")
vAlign = 0.5;
var viewHeight:Number = unscaledHeight - paddingTop - paddingBottom;
var checkBoxDisplayY:Number = Math.round(vAlign * (viewHeight - checkBox.height*checkBox.scaleY)) + paddingTop;
checkBox.x=paddingLeft;
checkBox.y=checkBoxDisplayY;
}
override protected function commitProperties():void
{
super.commitProperties();
if(checkBoxChanged){
checkBoxChanged=false;
if (checkBoxFunction != null)
{
checkBox.selected=checkBoxFunction(data);
}
else if (checkBoxField)
{
try
{
if (checkBoxField in data && data[checkBoxField] != null)
checkBox.selected=data[checkBoxField];
}
catch(e:Error)
{
trace(e.message);
}
}
}
}
]]>
</fx:Script>
</s:IconItemRenderer>
===============================================
Hope it helps.
Pablo.
AdChoices