Flex Mobile用の簡単なアクションスクリプトitemrendererの作成方法は？

Question

mxml itemRenderersを作成しましたが、Flex Mobileプロジェクトの場合は、「mobilescript3、mxmlのみを使用してアイテムレンダラーを作成してください」

だから私はこのリストを持っていますどこで私がそうするように推測できるのか、actionscriptで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に入れようとしているように見えますが、それはパフォーマンスの向上には役立ちません。 LabelItemRendererなどのクラスを拡張する純粋なAS3クラスが必要になります

/** 
    * @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    
    }