Как сделать простой ActionScript itemrenderer для Flex Mobile?

Question

Я делаю mxml itemRenderers, но из того, что я слышал в Adobe, для проектов Flex Mobile постоянно говорят: «Сделайте ваши средства визуализации элементов только с actioncript3, без mxml»

Итак ... Яу меня есть этот список, где я пытаюсь переделать itemRenderer в ActionScript, как я могу предположить, чтобы сделать это.кто-нибудь может дать мне знать, если я делаю что-то не так?Может быть, мне следует делать это в совершенно другом файле ... Я не знаю, это мой первый раз, когда я делаю все действия actioncript3 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            
    }