How to make simple actionscript itemrenderer for Flex Mobile?

Question

I've been making mxml itemRenderers, but from what I hear at adobe, for the Flex Mobile projects they keep saying "make your item renderers with only actionscript3, no mxml"

So...I have this list where im trying to remake the itemRenderer in actionscript the best way I can guess to do so. can some one let me know if im doing something wrong? Maybe I should be doing it in a whole different file..i dont know this is my first time making an all actionscript3 IR.

The text appears, but now my scollToBottom() function no longer works now. I used it with my mxml itemrenderer and it worked fine. so i thought maybe I was doing something wrong here...So this is my primary problem, im assuming something is wrong with how im doing the itemrenderer and thats why the scroll to bottom function wont work anymore.

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

Bob Bob · Accepted Answer · 2011-11-20T15:09:47

what you are missing are a few function calls that need to be overwritten so that the size and position of your items are correctly measured at the right point in the work flow. Here is a copy/paste of the code from the default Flex Template.

Also, from the look of things is looks like you are trying to put as3 code into a Flex ItemRenderer, but that isn't going to help you performance wise. You are going to need a pure AS3 class that extends a Class such as 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            
    }

How to make simple actionscript itemrenderer for Flex Mobile?

1 Answers