如何为Flex Mobile制作简单的动作脚本itemrenderer？

Question

我一直在制作mxml itemRenderers，但据我在adobe上听到的消息，对于Flex Mobile项目，他们一直说：“仅使用actionscript3制作项目渲染器，不使用mxml”

所以...我有此列表，我将尝试以最佳方式重新制作动作脚本中的itemRenderer。 有人可以让我知道我做错了什么吗？ 也许我应该在一个完全不同的文件中执行此操作。我不知道这是我第一次制作所有actionscript3 IR。

文本出现，但是现在我的scollToBottom（）函数现在不再起作用。 我将其与我的mxml itemrenderer一起使用，效果很好。 所以我想也许我在这里做错了...所以这是我的主要问题，我认为我在执行itemrenderer时出现了问题，这就是为什么滚动到底部功能不再起作用的原因。

//my scroll to bottom function that i run after i put something in the list. since its a chat, this way it auto scrolls down for the user to read the latest message.
protected function scrollToBottom():void {
                // update the verticalScrollPosition to the end of the List
                // virtual layout may require us to validate a few times
                var delta:Number = 0;
                var count:int = 0;
                while (count++ < 10){
                    chat_list.validateNow();
                    delta = chat_list.layout.getVerticalScrollPositionDelta(NavigationUnit.END);
                    chat_list.layout.verticalScrollPosition += delta;

                    if (delta == 0)
                        break;
                }
            }







<?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" width="100%" height="100%" autoDrawBackground="false" contentBackgroundAlpha=".3" creationComplete="itemrenderer1_creationCompleteHandler(event)">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        @font-face {
            src: url("assets/fonts/mpb.ttf");
            fontFamily: "myFont";
            embedAsCFF: true;
            advancedAntiAliasing: true;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.core.UIComponent;
            import mx.events.FlexEvent;

            import spark.components.Label;
            import spark.components.VGroup;

            private var msgTxt:Label = new Label();
            private var nameLabel:Label = new Label();
            private var mainContainer:VGroup = new VGroup();


            protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
            {

                maxWidth=this.width;
                mainContainer.paddingBottom=10;
                mainContainer.paddingTop=10;
                mainContainer.verticalAlign="bottom";
                mainContainer.explicitWidth=this.width;
                this.addElement(mainContainer);

                msgTxt.setStyle("fontFamily","myFont");
                msgTxt.setStyle("color","#000000");
                msgTxt.setStyle("fontSize","35");
                msgTxt.setStyle("paddingRight","15");
                msgTxt.setStyle("paddingTop","10");
                msgTxt.setStyle("paddingLeft","15");
                msgTxt.explicitWidth=this.width;
                mainContainer.addElement(msgTxt);

                nameLabel.setStyle("fontFamily","myFont");
                nameLabel.setStyle("color","#666666");
                nameLabel.setStyle("paddingLeft","5");
                nameLabel.setStyle("fontSize","24");
                nameLabel.explicitWidth=this.width;
                mainContainer.addElement(nameLabel);


            }



            override public function set data(value:Object):void {
                super.data = value;
                if (data == null)
                    return;

                if(data.systemMsg)
                {

                }
                if(data.name)
                {
                    nameLabel.text=data.name;
                    if(data.name == "You: ")
                    {
                        nameLabel.setStyle("textAlign","right");
                        msgTxt.setStyle("textAlign","right");
                        nameLabel.setStyle("paddingRight","5");

                    }
                    else if(data.name == "Them: ")
                    {
                        nameLabel.setStyle("textAlign","left");
                        msgTxt.setStyle("textAlign","left");
                    }
                    else
                    {
                        nameLabel.setStyle("textAlign","left");
                        msgTxt.setStyle("textAlign","left");
                    }
                }

                if(data.icon)
                {

                }
                if(data.msg)
                {
                    msgTxt.text=data.msg;
                }




            }



        ]]>
    </fx:Script>
</s:ItemRenderer>

Answer 1

您缺少的是一些需要重写的函数调用，以便在工作流程中的正确位置正确测量项目的大小和位置。 这是默认Flex模板中代码的复制/粘贴。

而且，从外观上看，您似乎正在尝试将as3代码放入Flex ItemRenderer中，但这并不能帮助您提高性能。 您将需要一个纯AS3类来扩展Class，例如LabelItemRenderer

/**
     * @private
     *
     * Override this setter to respond to data changes
     */
    override public function set data(value:Object):void
    {
        super.data = value;
        // the data has changed.  push these changes down in to the 
        // subcomponents here           
    } 

    /**
     * @private
     * 
     * Override this method to create children for your item renderer 
     */ 
    override protected function createChildren():void
    {
        super.createChildren();
        // create any additional children for your item renderer here
    }

    /**
     * @private
     * 
     * Override this method to change how the item renderer 
     * sizes itself. For performance reasons, do not call 
     * super.measure() unless you need to.
     */ 
    override protected function measure():void
    {
        super.measure();
        // measure all the subcomponents here and set measuredWidth, measuredHeight, 
        // measuredMinWidth, and measuredMinHeight              
    }

    /**
     * @private
     * 
     * Override this method to change how the background is drawn for 
     * item renderer.  For performance reasons, do not call 
     * super.drawBackground() if you do not need to.
     */
    override protected function drawBackground(unscaledWidth:Number, 
                                               unscaledHeight:Number):void
    {
        super.drawBackground(unscaledWidth, unscaledHeight);
        // do any drawing for the background of the item renderer here              
    }

    /**
     * @private
     *  
     * Override this method to change how the background is drawn for this 
     * item renderer. For performance reasons, do not call 
     * super.layoutContents() if you do not need to.
     */
    override protected function layoutContents(unscaledWidth:Number, 
                                               unscaledHeight:Number):void
    {
        super.layoutContents(unscaledWidth, unscaledHeight);
        // layout all the subcomponents here            
    }