我目前正在开发一个在消息字段中支持 HTML 的自定义图标项渲染器。
我有两个文件。
- view1.mxml - 包含 spak 列表组件
- 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>
和 view1.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 移动方面取得突破。
下面是屏幕截图
感谢