如何为 Flex Mobile 制作简单的 actionscript 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 类来扩展 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            
    }