Hey gang,
I’m a beginner/intermediate flex guy but I’ve run into a problem with Lists, specifically building custom ItemRenderers.
I’m building fairly simple item renderers, in fact, here’s the code for one of them…
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IListItemRenderer"
borderColor="0x666666"
borderSides="bottom"
borderStyle="solid"
verticalScrollPolicy="off"
height="100%"
xmlns:controls="qs.controls.*"
paddingBottom="3"
paddingTop="3"
buttonMode="true"
useHandCursor="true"
>
<mx:Script>
<![CDATA[
// imports
import mx.controls.Text;
import qs.controls.SuperImage;
import mx.core.UIComponent;
private var _data:Object;
// color variables
private var _border:uint = 0x000000;
private var _hoverColor:uint = 0x00ccff;
private var _text:uint;
private var _color:uint = 0xffffff;;
// variables
private var _image:String;
private var _title:String;
private var _link:String;
// flex pieces
private var _superImage:SuperImage;
private var _itemTitle:Text;
private var _s:Sprite;
private var _com:UIComponent;
override public function get data():Object
{
return _data;
}
override public function set data($data:Object):void
{
_data = $data;
if (_data != null)
{
_image = $data.image;
_title = $data.title;
_link = $data.link;
_color = $data.textColor;
_hoverColor = $data.hoverColor;
}
}
override protected function createChildren():void
{
// thumbnail
// create super image component
_superImage = new SuperImage();
_superImage.id = "image";
// set size
_superImage.height = 55;
_superImage.width = 70;
// set border
_superImage.setStyle("borderThickness", 1);
_superImage.setStyle("borderColor", _border);
_superImage.setStyle("borderStyle", "solid");
// add to canvas
this.addChild(_superImage);
// text
// create text piece
_itemTitle = new Text();
_itemTitle.id = "title";
// styles
_itemTitle.selectable = false;
_itemTitle.mouseChildren = false;
_itemTitle.percentWidth = 100;
_itemTitle.setStyle("fontFamily", "Helvetica");
_itemTitle.setStyle("fontWeight", "bold");
_itemTitle.setStyle("fontSize", 14);
_itemTitle.setStyle("color", _color);
// add to canvas
this.addChild(_itemTitle);
// hit area
_com = new UIComponent();
_com.useHandCursor = true;
_com.buttonMode = true;
_com.addEventListener(MouseEvent.ROLL_OVER, _rollOver);
_com.addEventListener(MouseEvent.ROLL_OUT, _rollOut);
_com.addEventListener(MouseEvent.CLICK, _clicked);
this.addChild(_com);
}
override protected function commitProperties():void
{
// set title
_itemTitle.text = _title;
// set source
if (_image != null)
{
_superImage.source = _image;
}
else
{
_superImage.includeInLayout = false;
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// hit area
_s = new Sprite();
_s.graphics.clear();
_s.graphics.lineStyle();
_s.graphics.beginFill(0x000000, 0);
_s.graphics.drawRect(0, 0, this.width, this.height);
_s.graphics.endFill();
_com.addChild(_s);
_com.x = 0;
_com.y = 0;
_com.setActualSize(unscaledWidth, unscaledHeight);
// image
_superImage.x = 5;
_superImage.y = (this.height - _superImage.height) / 2;
_superImage.setActualSize(70, 55);
// text
_itemTitle.truncateToFit = true;
_itemTitle.y = (this.height - _itemTitle.height) / 2;
if (_superImage.includeInLayout)
{
_itemTitle.x = _superImage.x + _superImage.width + 10;
}
else
{
_itemTitle.x = 5;
}
}
private function _rollOver($e:MouseEvent):void
{
_itemTitle.setStyle("color", _hoverColor);
_superImage.setStyle("borderColor", _hoverColor);
}
private function _rollOut($e:MouseEvent):void
{
_itemTitle.setStyle("color", _color);
_superImage.setStyle("borderColor", _border);
}
private function _clicked($e:MouseEvent):void
{
navigateToURL(new URLRequest(_link));
}
]]>
</mx:Script>
</mx:Canvas>
It’s a really simple renderer that has an image and some text sitting next to it, or just the text if no image is in that item’s data provider. There is also some basic rollover, rollout and click functionality…
So my question: Why is it that if my list needs to scroll it gets messed up? By “messed up” I mean that the text changes from being to the right of the image (when image is present) to moving over top of the image, as if it isn’t realizing that the image is there. There’s also sometimes an issue of the item renderer shrinking down so there is no longer anything even visible in the box (just some black with a grey border on the bottom about 5 - 10 pixels big…
I’m wondering if maybe my item renderer is too complex? I’m having the same issue with text working like that in another renderer, but no images, just text placed in certain positions (as well as some strage blue tints showing up at the top or bottom depending on how I am scrolling)
Sorry for the long post but this is something I’d love to get out of the way and any help would be appreciated…
By the way… here is the MXML where I am initializing my list…
<mx:Canvas width="100%" height="100%" id="list">
<mx:List
width="100%"
height="100%"
backgroundColor="{_bgColor}"
dataProvider="{_titleDataProvider}"
itemRenderer="com.theredspace.whitelabel.components.ListItem"
variableRowHeight="true"
useRollOver="false"
selectable="false"
/>
</mx:Canvas>
