Flex Mobile - Custom Spark List ItemRenderer - actionscript-3

Question

I am looking for some guidance to create a custom Spark List ItemRenderer for an Flex Mobile application I am developing.
Overview: Section List where each item has a checkbox control, Label, button control 1 - opens an accordion list below the item, button control 2 - opens Camera UI.
What I am struggling with is creating an itemrenderer that allows the accoridion list to be visible and be populated.
Update: Here's my 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 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();
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 the 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 is a grey
public function set backgroundSection(value:Number):void {
_backgroundSection = value;
}
private var _normalLabelField:String = "kick";
public function get normalLabelField():String {
return _normalLabelField;
}
public function set normalLabelField(value:String):void {
_normalLabelField = value;
}
private var _sectionField:String = "points";
public function get sectionField():String {
return _sectionField;
}
public function set sectionField(value:String):void {
if (value == _sectionField)
return;
_sectionField = value;
invalidateProperties();
}
/**
* Change the style based on the 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 the background if we render for a section title item
if (data[_sectionField]) {
graphics.beginFill(_backgroundSection, 1);
graphics.lineStyle();
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
//adding .parent to each, adding listGroup as 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 is not supported on this 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 as 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 something with the 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 the following as the base code: http://corlan.org/2011/07/04/creating-flex-mobile-section-lists/
UPDATE: Ultimately I would like to create the following layout where the checkbox is independent of the list item & when you touch the eye icon it opens an accordian style list: