Flex 4 Spark List Itemrenderer

时间:2013-09-26 20:27:36

标签: actionscript-3 flex

这是我的itemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true"
                width="100%" height="40"
                click="adCanvas.selected=data.object;" mouseDown="adCanvas.selected=data.object;"
                creationComplete="init()" initialize="trace('initializing')" activate="checkActions()" dataChange="checkActions()" render="checkActions()">

    <fx:Script>
    <![CDATA[
        import adBuilder.*;

        import components.AdCanvas;

        import events.AdLoadEvent;

        import flash.display.Bitmap;
        import flash.events.MouseEvent;
        import flash.utils.describeType;

        import interfaces.IAdObject;

        import mx.core.FlexGlobals;
        import mx.core.UIComponent;
        import mx.events.CollectionEvent;
        import mx.utils.*;

        [Bindable] private var desc:String;
        private var adCanvas:AdCanvas;
        private var adBuilder:AdBuilder;
        [Bindable]private var myvis:Boolean=false;
        private const MAX_NAME_LENGTH:Number = 19;

        private function init():void {
            trace("!!!!!!!!!!!!!!!!!!!!! LAYER RENDERER !!!!!!!!!!!!!!!!!!!!!");
            if (!data) data = {};
            if (data.hasOwnProperty("first")) {
                toggleEnabled(FlexGlobals.topLevelApplication.btnUp);
            }
            if (data.hasOwnProperty("last")) {
                toggleEnabled(FlexGlobals.topLevelApplication.btnDown);
            }

            adCanvas = data.adCanvas;
            if(IAdObject(data.object as IAdObject)){
                if(IAdObject(data.object).animationObjects){
                    IAdObject(data.object).animationObjects.addEventListener(CollectionEvent.COLLECTION_CHANGE, checkActions);
                    checkActions();

                }
            }

            iconType.source = findSource();

        }

        private function checkActions(e:Event=null):void{
            try{
                if(data){
                    if(IAdObject(data.object as IAdObject)){
                        if(IAdObject(data.object as IAdObject).animationObjects){
                            if(data.object.animationObjects.length>0){
                                this.myvis=true;
                            }else{
                                this.myvis=false;
                            }
                        }
                    }
                }

                iconType.source = findSource();
            }catch(error:Error){
                trace("LayerRenderer.mxml - checkActions(): " + error.message); 
            }
        }

        private function toggleEnabled(obj:UIComponent):void {
            if (data.hasOwnProperty("first")) {
                obj.useHandCursor = false;
                obj.enabled = false;
                obj.alpha = 0.5; 
            } else {
                obj.useHandCursor = true;
                obj.enabled = true;
                obj.alpha = 1;
            }
            iconType.source = findSource();
        }

        private function hideLayers():void{
            //dispatchEvent(new Event("Layer_Visible"));
            trace("CLICKED EYE");
            FlexGlobals.topLevelApplication.dispatchEvent(new Event('Layer_Visible'));
            if (hideLayer.alpha == 1){
                hideLayer.alpha = .5;
            }

            else if (hideLayer.alpha == .5){
                hideLayer.alpha = 1;
            }
            //trace("parameters are " + ObjectUtil.toString(data));
        }

        private function findSource():*{
            if (data){
                //iconType.source = "";
                if (data.type == "Image"){
                    //trace("data.name: " + data.name);
                    //trace("data.bitmapinfo: " + data.bitmapinfo);     
                    return new Bitmap(data.bitmapinfo);
                }

                if (data.type == "Text"){
                    return("assets/images/Text2.png");
                }

                if (data.type == "Application"){
                    return
                    //return("assets/images/App.png");
                }

                if (data.type == "Button"){
                    return("assets/images/Button.png");
                }

                if (data.type == "Shape"){
                    return("assets/images/shape.png");
                }

                if (data.type == "SWF"){
                    return("assets/images/SWF.png");
                }

                else{
                    return "assets/images/placeholder.png";
                }
            }
            else {
                return "assets/images/placeholder.png";
            }
        }

        private function truncateName(nameStr:String):String
        {
            var returnVal:String = (nameStr.indexOf(".") > -1) ? nameStr.substr(0, nameStr.indexOf(".")) : nameStr; 
            var extension:String = (nameStr.indexOf(".") > -1) ? nameStr.substr(nameStr.indexOf("."),nameStr.length) : "";

            //trace("nameStr: " + nameStr);
            //trace("extension: " + extension);

            if (returnVal.length > MAX_NAME_LENGTH){
                returnVal = returnVal.substr(0,MAX_NAME_LENGTH) + "...";
            }/*else{
            returnVal += extension;
            }*/

            return returnVal;
        }
    ]]>
    </fx:Script>


    <s:Group id="layerGroup" width="100%" height="100%" top="10" left="5" bottom="10" right="10">
        <s:HGroup left="0" verticalAlign="middle" width="100%">
            <s:HGroup paddingBottom="40" paddingRight="10">
                <mx:Image id="iconType" smoothBitmapContent="true" scaleContent="true" source="" height="20" width="20"/>
            </s:HGroup> 
            <s:HGroup width="100%">
                <s:Label toolTip="{data.name}" text="{truncateName(data.name)}" id="labelText" height="50" top="5" width="100%" maxDisplayedLines="1" left="0" color="#101010"/>
                <s:Label toolTip="" text="{Math.ceil(data.fileSize/1000)+' K'}" textAlign="right" id="sizeText" height="50" top="5" width="70" maxDisplayedLines="1" left="0" color="#101010"/>
            </s:HGroup>
            <s:HGroup paddingBottom="40">
                <mx:Image horizontalAlign="right" bottom="10" alpha="1" right="2" id="hideLayer" verticalAlign="middle" source="assets/images/visible.png" click="hideLayers()" useHandCursor="true"/>
                <mx:Image id="actLabel" includeInLayout="false" visible="{this.myvis}" source="assets/images/star.png" />
            </s:HGroup>
        </s:HGroup>
    </s:Group>

</s:ItemRenderer>

以下是使用该渲染器的类:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   left="5" top="10" bottom="0"
                   creationComplete="init();" rollOver="rolledOver(event)" rollOut="rolledOut(event)" 
                   backgroundColor="#F0F0F0" backgroundAlpha="1" borderAlpha="0" borderColor="#3a3a3a" width="100%" height="60" currentState="out">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:states>
        <s:State name="over"/>
        <s:State name="out" />
    </s:states>

    <fx:Script>
    <![CDATA[


        import components.*;
        import components.AdCanvas;

        import events.AdCanvasObjectEvent;

        import flash.system.LoaderContext;

        import mx.collections.ArrayCollection;
        import mx.controls.Image;
        import mx.core.Application;
        import mx.core.DragSource;
        import mx.core.FlexGlobals;
        import mx.core.IUIComponent;
        import mx.core.UIComponent;
        import mx.events.DragEvent;
        import mx.graphics.ImageSnapshot;
        import mx.managers.DragManager;

        import spark.components.Group;
        import spark.layouts.*;

        [Bindable]
        private var _data: Object;

        [Bindable] 
        private var context:LoaderContext;
        [Bindable]
        public var canvas: AdCanvas;

        [Bindable]
        public var index: int;

        [Bindable]
        public var maxPreviewWidth: int;
        [Bindable]
        public var maxPreviewHeight: int;

        [Bindable]
        public var isSelected: Boolean = false;

        [Bindable]
        private var adRect:Rectangle;

        [Bindable]
        private var ad:BitmapData;

        [Bindable] 
        public var layerData:ArrayCollection = new ArrayCollection();

        [Bindable]
        private var application:Object = FlexGlobals.topLevelApplication;
        //public var layerList:List;

        private const MAX_HEIGHT:Number = 400;
        private const MINIMUM_HEIGHT:Number = 60;

        private var t:Timer;
        private var t2:Timer;
        private var t3:Timer;

        [Bindable]private var siblings:Array = new Array();

        /**
         * Initialize the preview item
         */
        public function init(obj: Object = null): void {
            //layersList.data = FlexGlobals.topLevelApplication.getLayerList();
            //trace("Layer data " + layersList.data);

            canvas.screenPreview = this;

            context = new LoaderContext(false);

            FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.UPDATED, updateThumbnail);
            FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.ADDED, updateThumbnail);
            FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.DELETED, updateThumbnail);
            FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.SELECTED_SINGLE, updateThumbnail);
            FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.SELECTED_MULTIPLE, updateThumbnail);
            FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.DESELECT, updateThumbnail);
            FlexGlobals.topLevelApplication.addEventListener("updateThumbnail", updateThumbnail);

            // This is to prevent the security error when there is a loaded swf trying to be accessed for bitmap

            Security.loadPolicyFile(FlexGlobals.topLevelApplication.parameters.mediaUrl+"../crossdomain.xml");*/

            //if(root.loaderInfo.url.indexOf('file://')==-1)img.loaderContext = new LoaderContext(true, ApplicationDomain.currentDomain, SecurityDomain.currentDomain);
            canvas.updatePreview();
            buildThumb();
            titleBar.addEventListener(MouseEvent.CLICK, mouseClick);
            (adCanvas.isDeletable || adCanvas.isDeletable == "true") ? screenDelete.addEventListener(MouseEvent.CLICK, mouseClick) : null;

            //layersList.addEventListener(DragEvent.DRAG_ENTER, handleDragEnter);
            //layersList.addEventListener(DragEvent.DRAG_DROP, handleDragDrop);
            //layersList.addEventListener(DragEvent.DRAG_START, handleDragStart);

            this.addEventListener(DragEvent.DRAG_ENTER, handleDragEnter);
            this.addEventListener(DragEvent.DRAG_DROP, handleDragScreenDrop);

            //setHeight();
            //setYPos();
        }

        private function handleDragStart(event:DragEvent):void{
            try{
                var obj:Object = (event.dragInitiator as List).selectedItem;
                canvas.selected = obj["object"];
            }catch (error:Error){
                trace("ERROR: ScreenPreview.mxml - handleDragStart() : " + error.message);
            }
        }

        private function handleDragEnter(event:DragEvent):void {
            trace("event.dragInitiator: " + event.dragInitiator);

            if( event.dragInitiator is List){
                DragManager.acceptDragDrop(this);
                DragManager.showFeedback(DragManager.MOVE);
                layersList.dropEnabled = true;
            }else{
                layersList.dropEnabled = false;
            }
        }

        private function handleDragDrop(event:DragEvent):void {             
            t = new Timer(500);
            t.addEventListener(TimerEvent.TIMER, checkLayerData);
            t.start();
        }

        private function handleDragScreenDrop(event:DragEvent):void {
            /*trace("\n");
            trace("TEEEEE HEEEEEE");
            trace("event.target: " + event.target);
            trace("event.currentTarge:  " + event.currentTarget);
            trace("this: " + this);
            trace("event.dragInitiator: " + (event.dragInitiator as List).selectedItem);
            trace("event.draggedItem: " + event.draggedItem);
            trace("event.dragSource: " + event.dragSource);
            */
            try
            {
                var obj:Object = (event.dragInitiator as List).selectedItem;
                var clone:UIComponent = obj["element"].clone();

                /*for( var i:* in obj)
                {
                trace( "obj["+i+"]: " + obj[i]);
                }

                trace("obj: " + obj);
                */
                this.canvas.addObjectToCanvas(clone);

                obj["adCanvas"].removeScreenElement(obj);
            }catch(error:Error){
                trace("ERROR: ScreenPreview - handleDragDrop() : " + error.message);
            }
            //trace("\n");
        }

        private function checkLayerData(e:TimerEvent):void
        {
            t.stop();
            t = null;

            adCanvas.updateItemIndex();

        }

        public function setSizeText(val:Number):void
        {
            sizeText.text = (Math.ceil(val/1000) + " K");

            if (isSelected)
            {
                t3 = new Timer(100);
                t3.addEventListener(TimerEvent.TIMER, delayResize);
                t3.start();
            }
        }

        /**
         * Update the bitmap data for the screen when something has changed.
         */
        public function updateThumbnail(ev: AdCanvasObjectEvent = null): void {
            try{
                canvas.gridOff();
                var adRect:Rectangle = canvas.adBox.getBounds(canvas);
                var snapshot: BitmapData = ImageSnapshot.captureBitmapData((canvas as IBitmapDrawable));
                var ad:BitmapData = new BitmapData(adRect.width, adRect.height);
                ad.copyPixels(snapshot, adRect, new Point());
                img.source = new Bitmap(ad);
                canvas.gridOn();

            }catch(e:Error){
                trace(e+"System can't convert external swf files to bitmap.");
                canvas.gridOn();
            }
        }

        /**
         * Controls visuals for when the button is selected.
         */
        public function set selected(state: Boolean): void 
        {
            isSelected = state;

            trace("MY STATE IS: " + state);

            if (isSelected) 
            {
                layersList.includeInLayout=true;
                stroke.color=0x878787;
                strokeColor.color=0x878787;
                bg.color = 0x979fa7;
                layersList.visible = true;
                //layersList.percentHeight = 100;
                screenSettings.visible = true;
                (adCanvas.isDeletable || adCanvas.isDeletable == "true") ? screenDelete.visible = true : screenDelete.visible = false;
                //percentHeight=100;

                siblings.splice(0,siblings.length);
                siblings = new Array();
                try 
                {
                    for(var i:int=0; i < Group(parent).numChildren; i++)
                    {                   
                        siblings.push(Group(parent).getElementAt(i));
                    }
                }
                catch (e:Error) {}

                t2 = new Timer(100);
                t2.addEventListener(TimerEvent.TIMER, delayResize);
                t2.start();
            } 
            else 
            {
                stroke.color=0x3C3C3C;
                strokeColor.color=0x3C3C3C;
                bg.color = 0x636B73;
                currentState="out";
                layersList.includeInLayout=false;
            }
        }

        private function delayResize(evt:TimerEvent):void{

            if(t2){
                t2.stop();
                t2.removeEventListener(TimerEvent.TIMER, delayResize);
                t2 = null;
            }

            if(t3){
                t3.stop();
                t3.removeEventListener(TimerEvent.TIMER, delayResize);
                t3 = null;
            }
            setHeight();
            setYPos();
        }

        public function setYPos():void
        {
            for(var i:int = 0; i < siblings.length; i++)
            {
                if(i>0)
                {
                    siblings[i].y = ( siblings[i-1].y + siblings[i-1].height); 
                }

                if (siblings[i] != this){
                    ScreenPreview(siblings[i]).selected = false;
                    ScreenPreview(siblings[i]).checkLayer();
                }
            }
        }

        public function setHeight():void
        {               
            for(var i:int = 0; i < siblings.length; i++)
            {                   
                if( siblings[i] == this )
                {
                    if( (MINIMUM_HEIGHT + totLayersHeight()) > MAX_HEIGHT){
                        height = MAX_HEIGHT;
                    }else{
                        height = MINIMUM_HEIGHT + totLayersHeight();
                    }
                }

                trace("###################################################");
                trace("ScreenPreview - canvas: " + canvas);
                trace("ScreenPreview - canvas.href: " + canvas.href);
                trace("ScreenPreview - canvas.click_label: " + canvas.click_label);
                trace("###################################################");

                FlexGlobals.topLevelApplication.setMouseActionsFromObject();
            }
        }

        private function totLayersHeight():Number{
            trace("this.layerData.length: " + this.layerData.length);
            var val:Number = 0;
            //multiply by 40 because that is the height of each layer item
            if( this.layerData.length > 0) val = (this.layerData.length + 1) * 40;
            return val;
        }

        public function checkLayer ():void{
            screenSettings.visible = false;
            screenDelete.visible = false;
            layersList.visible = false;
            //percentHeight=15;
            height = 60;
        }

        /**
         * Controls visuals for when the button is rolled over.
         */
        private function rolledOver(e:Event):void
        {
            str.color=0xffc423;
            bg.color=0xBAC2CA;
        }

        /**
         * Controls visuals for when the button is rolledout.
         */
        private function rolledOut(e:Event):void{
            if(!isSelected){
                bg.color=0x636B73;

                /*g1.color=0xCBCBCB;
                g2.color=0xD9D9D9;
                str.color=0xCBCBCB;
                lg.rotation=-90;*/
            }else{
                bg.color=0x979fa7;

                /*g1.color=0xCBCBCB;
                g2.color=0xCBCBCB;
                str.color=0xCBCBCB;
                lg.rotation=90*/
            }
        }


        /**
         * Set up the canvas and SWF sizes, as well as label, for the screen thumbnail.
         */
        public function buildThumb():void{
            adRect = new Rectangle(15, 15, canvas.adBox.width, canvas.adBox.height);
            ad = new BitmapData(adRect.width + 100, adRect.height + 100, true, 0);
            setImageSize();
            labelText.text = "Screen "+canvas.index;//+": "+canvas.adWidth+"x"+canvas.adHeight;
            updateThumbnail();
        }

        /**
         * Get the scaled-down screen size.
         */
        private function getScaledDimensions(targetHeight:int=100, targetWidth:int=100): Object {
            var xScaleFactor: Number = (maxPreviewWidth > targetWidth) ? (targetWidth/maxPreviewWidth) : 1;
            var yScaleFactor: Number = (maxPreviewHeight > targetHeight) ? (targetHeight/maxPreviewHeight) : 1;
            var scaleFactor: Number = (xScaleFactor < yScaleFactor) ? xScaleFactor : yScaleFactor;

            var dimensions: Object = {
                width: Math.round(adRect.width * scaleFactor),
                    height: Math.round(adRect.width * scaleFactor)
            }

            return dimensions;
        }

        /**
         * Change the the thumb size and position based on the ad size.
         */
        private function setImageSize():void
        {
            var w:Number = adRect.width + 100;
            var h:Number = adRect.height + 100;
            var scaler:Number = (w>h)?40/w:27/h;
            img.width = w*scaler;
            img.height = h*scaler;
            rolledOut(null);

            imgBox.left = 10;

            if (w > (h*2)){
                imgBox.top=15;
            }

            if (h > (w*2)){
                imgBox.top = 5;
            }   
        }

        private function mouseClick(e:MouseEvent):void
        {
            trace("did the click");

            e.stopImmediatePropagation();

            if( e.currentTarget == screenDelete)
            {
                trace("DISPATCH DELETE SCREEN");
                dispatchEvent(new Event('delete_screen_click'));
            }else{
                trace("DISPATCH MOUSE CLICK");
                dispatchEvent(new Event('mouse_click'));
                FlexGlobals.topLevelApplication.dispatchEvent(new AdCanvasObjectEvent(AdCanvasObjectEvent.DESELECT));
            }
            //FlexGlobals.topLevelApplication.updateLayerScreens();
        }

        private function deleteThisScreen(e:MouseEvent):void
        {
            dispatchEvent(new Event('delete_screen_click'));
        }

        /**
         * Getter and setter for adcanvas that we are using for the thumbnail
         */
        public function set adCanvas(canv: AdCanvas): void {
            canvas = canv;
            index = canv.index;
        }
        public function get adCanvas(): AdCanvas {
            return canvas;
        }

        /**
         * Getter for checking if this button has been selected.
         */
        public function get selected(): Boolean {
            return isSelected;
        }

        private function settingsMenu():void{
            FlexGlobals.topLevelApplication.dispatchEvent(new AdCanvasObjectEvent(AdCanvasObjectEvent.DESELECT));
            FlexGlobals.topLevelApplication.openSettings();
        }
    ]]>
    </fx:Script>

    <s:VGroup left="1" right="1" top="1" height="100%" width="100%" paddingBottom="5">
        <s:VGroup id="titleBar" height="55" top="20" width="100%">
            <s:HGroup top="5" left="5" height="100%" width="100%">
                <s:Group width="55" height="50">
                    <s:Rect id="fill" left="5" right="0" top="0" bottom="0" radiusX="0">
                        <s:fill>
                            <s:SolidColor id="bg" color="0x979fa7"/>
                        </s:fill>
                        <s:stroke>
                            <s:SolidColorStroke id="stroke" color="0x3C3C3C" alpha="1"/>
                        </s:stroke>
                    </s:Rect>
                    <s:HGroup id="vg" height="50" width="100%" gap="0">
                        <s:Group height="15" top="2" width="100%">
                            <s:VGroup top="5" id="imgBox" width="15">
                                <mx:Image left="5" id="img" scaleContent="true" height="50" width="50" top="10" />
                            </s:VGroup>
                        </s:Group>
                    </s:HGroup>
                    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="0" >
                        <s:stroke>
                            <s:SolidColorStroke id="str" color="0x979fa7" weight="2" alpha="0" />
                        </s:stroke>
                    </s:Rect>
                </s:Group>
                <s:Group left="0" top="0" height="60" width="100%">
                    <s:Rect top="0" left="5" right="0" bottom="0" bottomLeftRadiusX="0" bottomRightRadiusX="0">
                        <s:fill>
                            <s:SolidColor id="bg2" color="0xDCE4EC" alpha="0"/>
                        </s:fill>
                        <s:stroke>
                            <s:SolidColorStroke id="strokeColor" color="0x3C3C3C" alpha="0"/>
                        </s:stroke>
                    </s:Rect>
                    <s:HGroup verticalAlign="middle" top="15" width="100%">
                        <mx:Text id="labelText" text="" selectable="false" color="#3a3a3a" width="100%" fontSize="10" textAlign="center" />
                        <mx:Text id="sizeText" text="" selectable="false" color="#3a3a3a" width="100%" fontSize="10" textAlign="right" />
                    </s:HGroup>
                </s:Group>
                <s:Group>
                    <mx:Image source="assets/images/trashcan-delete.png" visible="false" toolTip="Delete This Screen" id="screenDelete" top="15" right="45" useHandCursor="true"/>
                    <mx:Image source="assets/images/cog.png" visible="false" toolTip="Edit Screen Settings" top="15" right="11" id="screenSettings" click="settingsMenu()" useHandCursor="true"/>
                </s:Group>
            </s:HGroup>
        </s:VGroup>
        <s:VGroup id="layerPanel" includeInLayout="true" paddingBottom="1" height="100%" width="100%">
            <s:List creationComplete="{trace('TEEEEEEEEEEEEE HEEEEEEEEEEEEEEE')}"
                id="layersList" 
                dragStart="{handleDragStart(event)}" dragEnter="{handleDragEnter(event)}" dragDrop="{handleDragDrop(event)}"
                dragEnabled="true"
                dropEnabled="true"
                dragMoveEnabled="true"
                includeInLayout="true"
                visible="true"
                initialize="application.setUpLayers()"
                dataProvider='{layerData}'
                selectedIndex="{application.getLayerListIndex()}"
                render='{layersList.selectedIndex=application.getLayerListIndex()}'
                itemRenderer="renderers.LayerRenderer"
                width="100%" 
                height="100%"
                bottom="50"
                alternatingItemColors="[#e2e2e2, #dedede]"
                selectionColor="#787878" 
                rollOverColor="#949494"
                borderVisible="false"
                />
        </s:VGroup>
    </s:VGroup>

</s:BorderContainer>

我遇到的问题是itemRenderer永远不会被调用。我把跟踪陈述只是为了确定而没有。这两个文件曾经使用过mx:canvas并进行了转换。这个问题,我一直在墙上撞了两天。非常感谢帮助。

0 个答案:

没有答案