帶HTML支持的IconItemRenderer

Question

我目前正在開發一個在消息字段中支持HTML的自定義圖標項渲染器。

我有兩個文件。

1. view1.mxml - 包含SPAK列表組件
2. htmlRenderer.mxml - 圖標項目渲染

代碼

htmlRenderer.mxml

<?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" 
      xmlns:mx      = "library://ns.adobe.com/flex/mx" 
      autoDrawBackground       = "true" 
      width       = "100%" 
      creationComplete="callLater(renderHtml, ['test'])"> 


      <fx:Script> 
        <![CDATA[ 

           import flash.display.Shape; 

           import mx.core.FlexGlobals; 
           import mx.core.UIComponent; 
           import mx.events.FlexEvent; 

           import spark.components.*; 
           import spark.components.supportClasses.StyleableTextField; 
           import spark.primitives.Rect; 


           public var mainWrapper:VGroup = new VGroup(); 
           public var mainContainer:HGroup = new HGroup(); 

           //Icon Item Renderer 
           public var iconItemWrapper:HGroup = new HGroup(); 
           public var iconItemImage:Image = new Image(); 
           /* Text elements */ 
           public var iconItemTextGroup:VGroup = new VGroup(); 
           public var iconItemLabel:Label = new Label(); 
           public var iconItemHtmlMessagex:TextArea = new TextArea(); 
           /* Star rating */ 
           public var iconItemRaterGroup:HGroup = new HGroup(); 
           public var iconItemRater:*; 

           //Decorator 
           public var decoratorGroup:VGroup = new VGroup(); 
           public var decoratorText:Label = new Label(); 
           public var counterGroup:Rect = new Rect(); 
           public var counterText:Label = new Label(); 
           public var decoratorImage:Image = new Image(); 

           //Icon Item Borders 
           public var iconItemTopBorder:Rect = new Rect(); 
           public var iconItemBottomBorder:Rect = new Rect(); 
           public var iconItemBackground:Rect = new Rect(); 

           import flash.display.Graphics; 
           import mx.graphics.LinearGradient; 
           import mx.graphics.GradientEntry; 

           protected function drawHeader():void 
           { 
             decoratorText.setStyle("fontFamily","Roboto"); 
             decoratorText.setStyle("fontSize","16"); 
             decoratorText.setStyle("fontWeight","bold"); 
             decoratorText.setStyle("color","#ffffff"); 
             decoratorText.setStyle("paddingRight","5"); 
             decoratorText.setStyle("paddingTop","5"); 
             decoratorText.setStyle("paddingLeft","5"); 
             decoratorText.setStyle("paddingBottom","5"); 
             decoratorText.text = data.Location 
             addElement(decoratorText); 

           } 

           protected function renderIconItem():void 
           { 

             //main wrapper 
             iconItemWrapper.paddingBottom=5; 
             iconItemWrapper.paddingTop=5; 
             iconItemWrapper.paddingLeft=5; 
             iconItemWrapper.verticalAlign="top"; 


             addElement(iconItemWrapper); 



             //icon 
             iconItemImage.source = data.Image; 

             if(iconItemImage.sourceWidth > 64){ 
                iconItemImage.width = 64; 
                iconItemImage.height = 64; 
             }else{ 
                iconItemImage.width = iconItemImage.sourceWidth; 
                iconItemImage.height = iconItemImage.sourceHeight; 
             } 

             iconItemImage.sourceWidth 
             iconItemWrapper.addElement(iconItemImage); 

             iconItemTextGroup.gap = 0; 
             iconItemTextGroup.paddingBottom=0; 
             iconItemTextGroup.paddingTop=0; 
             iconItemTextGroup.verticalAlign="top"; 
             iconItemWrapper.addElement(iconItemTextGroup); 

             //title 
             iconItemLabel.setStyle("fontFamily","Roboto"); 
             iconItemLabel.setStyle("fontWeight","bold"); 
             iconItemLabel.setStyle("color","#000000"); 
             iconItemLabel.setStyle("fontSize","16"); 
             iconItemLabel.setStyle("paddingRight","0"); 
             iconItemLabel.setStyle("paddingTop","0"); 
             iconItemLabel.setStyle("paddingLeft","0"); 
             iconItemLabel.setStyle("paddingBottom","0"); 
             iconItemLabel.text = data.Product; 
             iconItemTextGroup.addElement(iconItemLabel); 

             //message 
             iconItemHtmlMessagex.focusEnabled = false; 
             iconItemHtmlMessagex.selectable = false; 
             iconItemHtmlMessagex.setStyle("paddingLeft","0"); 
             iconItemHtmlMessagex.setStyle("paddingTop","0"); 
             iconItemHtmlMessagex.setStyle("borderVisible","false"); 
             iconItemHtmlMessagex.setStyle("contentBackgroundAlpha","0"); 
             iconItemTextGroup.addElement(iconItemHtmlMessagex); 
             renderMessageText(); 

             //iconItemRaterGroup 
             //iconItemRaterGroup.paddingTop=0; 
             //iconItemRaterGroup.verticalAlign="bottom"; 
             //iconItemTextGroup.addElement(iconItemRaterGroup); 

             //decoratorGroup 
             decoratorGroup.paddingTop=10; 
             decoratorGroup.verticalAlign="bottom"; 
             iconItemWrapper.addElement(decoratorGroup); 

             //decoratorText 
             decoratorText.setStyle("fontFamily","Roboto"); 
             decoratorText.setStyle("fontSize","12"); 
             decoratorText.setStyle("fontWeight","bold"); 
             decoratorText.setStyle("color","#777777"); 
             decoratorText.setStyle("paddingRight","0"); 
             decoratorText.setStyle("paddingTop","0"); 
             decoratorText.setStyle("paddingLeft","0"); 
             decoratorText.setStyle("paddingBottom","0"); 
             decoratorText.text = data.Location 
             decoratorGroup.addElement(decoratorText); 



             //decoratorImage 
             decoratorImage.width = 32; 
             decoratorImage.height = 32; 
             decoratorImage.source = "recycle-icon.png"; 
             decoratorImage.sourceHeight 
             decoratorImage.sourceWidth 
             decoratorGroup.addElement(decoratorImage); 

           } 
           public var myStyleSheet:StyleSheet = new StyleSheet(); 

           private function renderMessageText():void { 

             var styles:String = "p{ font-size: 11px; } 
                     a{ font-size: 11px; color: #0C81F5; text-decoration: underline; } 
                     a:hover { color: #CCDEF0; text-decoration: underline; }"; 

             myStyleSheet.parseCSS(styles); 
             StyleableTextField(iconItemHtmlMessagex.textDisplay).htmlText = data.Description2; 

           } 

           public function renderHtml(varx:String):void{ 
             setTimeout(renderHtmlTimeout, 1); 
           } 

           public function renderHtmlTimeout():void{ 
             StyleableTextField(iconItemHtmlMessagex.textDisplay).styleSheet = myStyleSheet; 

           } 

           override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
           { 
             super.updateDisplayList(unscaledWidth, unscaledHeight); 

                renderIconItem(); 
                this.graphics.clear(); 
                this.graphics.beginGradientFill(GradientType.LINEAR, [0xffffff,0xefefef], [1,1], [0,255],verticalGradientMatrix(0,0,unscaledWidth, unscaledHeight)); 
                this.graphics.drawRect(0,0,unscaledWidth, unscaledHeight); 

           } 

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

和廠景.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        creationComplete="ini();"> 
      <fx:Declarations> 
        <s:HTTPService id="xmlDataResource" url="properties.xml" 
                result="xmlDatasource = xmlDataResource.lastResult.slist.products"/> 
      </fx:Declarations> 
      <fx:Script> 
        <![CDATA[ 
           import mx.collections.ArrayCollection; 

           [Bindable] 
           public var xmlDatasource:ArrayCollection; 

           public function ini():void{ 

             xmlDataResource.send(); 

           } 


        ]]> 
      </fx:Script> 


      <s:List id="categoryList" left="0" right="0" top="0" bottom="0" borderAlpha="0.5" 
           itemRenderer="htmlRenderer" 
           dataProvider="{xmlDatasource}"> 
      </s:List> 


</s:View> 

問題是，當列表加載數據時，只會顯示視圖端口中的列表項並隱藏其餘信息。 任何幫助我們即將在flex mobile上取得突破。

下面

是屏幕截圖

感謝

Answer 1

基本上，其餘的不是隱藏的，這是根本不存在:)

的List基類/組件的Flex中的概念，唯一可見的數據被分配和渲染。如果例如你的清單有高度顯示8項，然後它將創建10個項目並重新使用它們。如果向上滾動並且物品離開視口，它將被放置在列表的底部並獲取新數據。

如果要創建所有對象並滾動它們，請嘗試在Scroller內包裝VGroup。