Actionscript 3 Flex Mobile-自定义Spark列表项渲染器

我正在寻找一些指导，为我正在开发的Flex Mobile应用程序创建自定义Spark List ItemRenderer

概述：部分列表，其中每个项目都有一个复选框控件、标签、按钮控件1-在项目下方打开一个手风琴列表，按钮控件2-打开相机UI

我正在努力创建一个itemrenderer，它允许Accodion列表可见并填充

更新：这是我现有的代码

<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>

[事件（name=“checkboxiconitemrenderchanged”，type=“flash.events.Event”）]
[事件（name=“CameraConitemRenderChanged”，type=“flash.events.Event”）]
无效属性（）；
}*/
重写受保护的函数createChildren（）：void
{
super.createChildren（）；
listGroup=新的HGroup（）；
var testLabel:Label=新标签（）；
testLabel.text=“测试项目”；
添加元素（testLabel）；
//addChild（testLabel）；
listGroup.visible=false；
listGroup.includeInLayout=false；
addChild（列表组）；
复选框=新复选框（）；
//checkBox.skin=skins.ChallengeCheckBox；//在皮肤中抛出错误
checkBox.width=64；//32
checkBox.height=64；//32
复选框.scaleY=1；/.5
复选框.scaleX=1；/.5
addChild（复选框）；
//listGroup.addChild（复选框）；
addEventListener（MouseEvent.CLICK，函数（事件：MouseEvent）：void{
dispatchEvent（新事件（“CheckBoxIConitemRenderChanged”）；
});
friendsIcon=新图像（）；
friendsIcon.source=“assets/controls/eye\u 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）；
//addChild（friendsIcon）；
cameraIcon=新图像（）；
cameraIcon.source=“assets/controls/uncheckedbox.png”；
friendsIcon.verticalAlign=verticalAlign.MIDDLE；
//cameraIcon.horizontalAlign=horizontalAlign.RIGHT；
cameraIcon.width=85；
cameraIcon.高度=85；
//cameraIcon.x=275；
cameraIcon.x=Capabilities.screenResolutionX-105；
cameraIcon.buttonMode=true；
cameraIcon.addEventListener（MouseeEvent.CLICK，launchCameraUI）；
addChild（cameraIcon）；
}
重写受保护的函数度量值（）：void
{
super.measure（）；
measuredWidth+=getStyle（“水平间隙”）+checkBox.width*checkBox.scaleY；
measuredHeight=Math.max（measuredHeight，checkBox.height*checkBox.scaleY）；
}
覆盖受保护的函数layoutContents（unscaledWidth:Number，unscaledHeight:Number）：无效
{
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 verticalign:String=getStyle（“verticalign”）；
setStyle（“paddingLeft”，paddingLeft+checkBox.width*checkBox.scaleX+水平间隙）；
超级.布局内容（未标度宽度、未标度高度）；
设置样式（“paddingLeft”，paddingLeft）；
var vAlign：数字；
如果（垂直对齐=“顶部”）
vAlign=0；
否则如果（垂直对齐=“底部”）
vAlign=1；
else//if（垂直对齐=“中间”）
vAlign=0.5；
var viewHeight:Number=unscaledHeight-paddingTop-paddingBottom；
var checkBoxDisplayY:Number=Math.round（vAlign*（viewHeight-checkBox.height*checkBox.scaleY））+paddingTop；
复选框.x=左填充；
checkBox.y=checkBoxDisplayY；
}
重写受保护的函数commitProperties（）：void
{
super.commitProperties（）；
如果（复选框已更改）{
checkBoxChanged=false；
if（checkBoxFunction！=null）
{
checkBox.selected=checkBox函数（数据）；
}
else if（复选框字段）
{
尝试
{
if（数据中的checkBoxField&&data[checkBoxField]！=null）
checkBox.selected=数据[checkBoxField]；
}
捕获（e：错误）
{
跟踪（e.message）；
}   
}   
}
}
//结束
私有变量_backgroundSection:Number=0xDDDDDD//这是灰色的
公共功能集backgroundSection（值：Number）：无效{
_背景部分=数值；
}
private var\u normalLabelField:String=“kick”；
公共函数get normalLabelField（）：字符串{
返回_normalLabelField；
}
公共函数集normalLabelField（值：字符串）：void{
_normalLabelField=值；
}
private var\u sectionField:String=“points”；
公共函数get sectionField（）：字符串{
返回部分字段；
}
公共函数集sectionField（值：字符串）：void{
如果（值==\u节字段）
返回；