actionscript 3 - Flex Mobile - Custom Spark List ItemRenderer -

i looking guidance create custom spark list itemrenderer flex mobile application developing.

overview: section list each item has checkbox control, label, button control 1 - opens accordion list below item, button control 2 - opens camera ui.

what struggling creating itemrenderer allows accoridion list visible , populated.

update: here's existing code

<fx:metadata>      [event(name="checkboxiconitemrendererchanged", type="flash.events.event")]     [event(name="cameraiconitemrendererchanged", type="flash.events.event")]  </fx:metadata> <fx:script>     <![cdata[         import spark.components.label;         import spark.components.checkbox;         import spark.components.hgroup;         import spark.components.image;         import spark.layouts.horizontalalign;          import flashx.textlayout.formats.verticalalign;         //camera stuff         public var cameraicon:image;         public var friendsicon:image;          //checkbox stuff start         public var checkbox:checkbox;         private var checkboxchanged:boolean;         private var _checkboxfield:string;         private var _checkboxfunction:function;          //list item group         public var listgroup:hgroup;          private var datasource:idatainput;          public function checkboxfunction():function{                 return _checkboxfunction;         }          public function 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();              listgroup = new hgroup();             var testlabel:label = new label();             testlabel.text = "test item";             listgroup.addelement(testlabel);             //listgroup.addchild(testlabel);             listgroup.visible = false;             listgroup.includeinlayout = false;             addchild(listgroup);              checkbox = new checkbox();               //checkbox.skin = skins.challengecheckbox; //throws error in skin             checkbox.width=64;//32             checkbox.height=64;//32             checkbox.scaley=1;//.5             checkbox.scalex=1;//.5             addchild(checkbox);             //listgroup.addchild(checkbox);              checkbox.addeventlistener(mouseevent.click, function(event:mouseevent):void{                     dispatchevent(new event("checkboxiconitemrendererchanged"));             });              friendsicon = new image();             friendsicon.source = "assets/controls/eye_lightgray.png";             friendsicon.verticalalign = verticalalign.middle;             //cameraicon.horizontalalign = horizontalalign.right;             friendsicon.width = 85;             friendsicon.height = 85;             //cameraicon.x = 275;             friendsicon.x = capabilities.screenresolutionx - 205;             friendsicon.buttonmode = true;             friendsicon.addeventlistener(mouseevent.click,showfriends);             addchild(friendsicon);             //listgroup.addchild(friendsicon);              cameraicon = new image();             cameraicon.source = "assets/controls/uncheckedbox.png";             friendsicon.verticalalign = verticalalign.middle;             //cameraicon.horizontalalign = horizontalalign.right;             cameraicon.width = 85;             cameraicon.height = 85;             //cameraicon.x = 275;             cameraicon.x = capabilities.screenresolutionx - 105;             cameraicon.buttonmode = true;             cameraicon.addeventlistener(mouseevent.click,launchcameraui);             addchild(cameraicon);         }          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);                        }                    }                }         }         //end          private var _backgroundsection:number = 0xdddddd; //this grey          public function set backgroundsection(value:number):void {             _backgroundsection = value;         }          private var _normallabelfield:string = "kick";          public function normallabelfield():string {             return _normallabelfield;         }          public function set normallabelfield(value:string):void {             _normallabelfield = value;         }          private var _sectionfield:string = "points";          public function sectionfield():string {             return _sectionfield;         }          public function set sectionfield(value:string):void {             if (value == _sectionfield)                 return;              _sectionfield = value;             invalidateproperties();         }          /**          * change style based on data: section item or regular item          */         override public function set data(value:object):void {             //checkbox             checkboxchanged=true;              if (value[_sectionfield]) {                 labelfield = _sectionfield;                 labeldisplay.setstyle("textalign", "center");                 labeldisplay.setstyle("fontweight", "bold");             } else {                 labelfield = _normallabelfield;                 labeldisplay.setstyle("textalign", "left");                 labeldisplay.setstyle("fontweight", "normal");                 //labeldisplay.width = 300;                 //labeldisplay.wordwrap = true;                 //labeldisplay.multiline = true;             }              super.data = value;             }          override protected function drawbackground(unscaledwidth:number, unscaledheight:number):void {             super.drawbackground(unscaledwidth, unscaledheight);             //change background if render section title item             if (data[_sectionfield]) {                 graphics.beginfill(_backgroundsection, 1);                 graphics.linestyle();                 graphics.drawrect(0, 0, unscaledwidth, unscaledheight);                 graphics.endfill();                 //adding .parent each, adding listgroup parent reference                 /*if (checkbox.parent.parent != null)                     listgroup.removechild(checkbox);                 if (friendsicon.parent.parent != null)                     listgroup.removechild(friendsicon);*/                  if (checkbox.parent != null)                     removechild(checkbox);                 if (friendsicon.parent != null)                     removechild(friendsicon);                 if (cameraicon.parent != null)                     removechild(cameraicon);             }         }          protected function launchcameraui(event:mouseevent):void         {             var cui:cameraroll = new cameraroll();             if( cameraroll.supportsbrowseforimage )             {                 cui.addeventlistener( mediaevent.select, imageselected );                 cui.addeventlistener( event.cancel, browsecanceled );                 cui.addeventlistener( errorevent.error, mediaerror );                 cui.browseforimage();             }             else             {                 trace( "image browsing not supported on device.");             }          }          protected function imageselected(event:mediaevent):void         {             trace( "media selected..." );                   var imagepromise:mediapromise = event.data;             datasource = imagepromise.open();              if( imagepromise.isasync )             {                 trace( "asynchronous media promise." );                 var eventsource:ieventdispatcher = datasource ieventdispatcher;                             eventsource.addeventlistener( event.complete, onmedialoaded );                      }             else             {                 trace( "synchronous media promise." );                 readmediadata();             }         }          protected function browsecanceled(event:event):void         {             // todo auto-generated method stub          }          protected function mediaerror(event:errorevent):void         {             // todo auto-generated method stub          }          private function onmedialoaded( event:event ):void         {             trace("media load complete");             readmediadata();         }          private function readmediadata():void         {             //do data         }          protected function showfriends(event:mouseevent):void         {             // todo auto-generated method stub              if (listgroup.visible == true)             {                 listgroup.visible = false;                 listgroup.includeinlayout = false;                 trace("hide friends drop down");             }             else             {                 listgroup.visible = true;                 listgroup.includeinlayout = true;                 trace("show friends drop down");             }         }      ]]> </fx:script> 

im using following base code: http://corlan.org/2011/07/04/creating-flex-mobile-section-lists/

update: create following layout checkbox independent of list item & when touch eye icon opens accordian style list: