Skip navigation
Currently Being Moderated

Checkbox in List (Source code included)

Dec 15, 2011 5:07 PM

Tags: #android #mobile #list #itemrenderer #spark #flex4

Hi,

 

Code below displays a checkbox control in Spark lists:

 

http://darkculturegames.com/android/tutorials/extendedcheckboxlist/content/Image.jpg

 

 

Instructions for use:

  1. Create a Spark list and add the ChecBoxIconItemRenderer as itemRenderer.
  2. Use the checkBoxField or checkBoxFunction properties to select/unselect checkboxes from list data.
  3. 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.selecte d;

                             }                           

                        ]]>

                    </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.scal eY;

                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+hor izontalGap);                   

                    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.

 
Replies
  • Currently Being Moderated
    Dec 16, 2011 6:56 AM   in reply to pbeltranl

    very useful indeed , thx for sharing with us!!

     
    |
    Mark as:
  • Chriszzzzzzzzzzzz
    18 posts
    Jul 7, 2011
    Currently Being Moderated
    Feb 24, 2012 9:04 AM   in reply to pbeltranl

    Thanks for the code. Do you know how to add persistence to each checkbox as i am trying to use in a multi view app. I have tried some code but its not working.

     

    override protected function createChildren():void
    
                {
    
                    super.createChildren();
    
                    checkBox = new CheckBox();
    
                    checkBox.width=45;
    
                    checkBox.height=45;
    
                    checkBox.scaleY=1.0;
    
                    checkBox.scaleX=1.0;
    
                    addChild(checkBox);
    
                    checkBox.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{
    
                        var saveManager:PersistenceManager = new PersistenceManager();
                        saveManager.setProperty(selected, checkBox.selected);    
    
                        event.stopImmediatePropagation();
    
                        dispatchEvent(new Event(checkBoxIconItemRendererChanged));
    
                    });
    
                }
    
                protected function addHandler(event:FlexEvent):void
                {
                    var loadManager:PersistenceManager = new PersistenceManager();
                    if (loadManager.load())
                    {
                        var savedData:Object = loadManager.getProperty(selected);
                        if(savedData)
                            checkBox.selected = savedData.valueOf();    
                    }    
                }
    

     

     

    It works on all checkboxes as a whole, but not individually

     
    |
    Mark as:
  • Chriszzzzzzzzzzzz
    18 posts
    Jul 7, 2011
    Currently Being Moderated
    Feb 24, 2012 9:59 AM   in reply to pbeltranl

    Thanks for your help but i am new to flex and dont know how to apply this to my situation. I have used the exact setup in your first post but under itemRenderer I have a dataprovider. I want each checkbox to be selectable and correspond to each object. So if a user selects the checkbox next to "1" it will stay selected. Is this possible?

     

     

    </s:itemRenderer>
    
    <s:dataProvider>
    <s:ArrayList>
    <fx:Object id="1" label="1"...
    <fx:Object id="2" label="2"...
    <fx:Object id="3" label="3"...
    <fx:Object id="4" label="4"...
    <fx:Object id="5" label="5"...
    <fx:Object id="6" label="6"...
    ...
    </s:ArrayList>
    </s:dataProvider>
    </s:List>
    
     
    |
    Mark as:
  • Chriszzzzzzzzzzzz
    18 posts
    Jul 7, 2011
    Currently Being Moderated
    Feb 27, 2012 6:28 AM   in reply to Chriszzzzzzzzzzzz

    Please can anyone help, im really stuck.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (2)