Flex 4 Spark List Itemrender - actionscript-3

Question

Here is my itemRenderer:
<?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%" height="40"
click="adCanvas.selected=data.object;" mouseDown="adCanvas.selected=data.object;"
creationComplete="init()" initialize="trace('initializing')" activate="checkActions()" dataChange="checkActions()" render="checkActions()">
<fx:Script>
<![CDATA[
import adBuilder.*;
import components.AdCanvas;
import events.AdLoadEvent;
import flash.display.Bitmap;
import flash.events.MouseEvent;
import flash.utils.describeType;
import interfaces.IAdObject;
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.CollectionEvent;
import mx.utils.*;
[Bindable] private var desc:String;
private var adCanvas:AdCanvas;
private var adBuilder:AdBuilder;
[Bindable]private var myvis:Boolean=false;
private const MAX_NAME_LENGTH:Number = 19;
private function init():void {
trace("!!!!!!!!!!!!!!!!!!!!! LAYER RENDERER !!!!!!!!!!!!!!!!!!!!!");
if (!data) data = {};
if (data.hasOwnProperty("first")) {
toggleEnabled(FlexGlobals.topLevelApplication.btnUp);
}
if (data.hasOwnProperty("last")) {
toggleEnabled(FlexGlobals.topLevelApplication.btnDown);
}
adCanvas = data.adCanvas;
if(IAdObject(data.object as IAdObject)){
if(IAdObject(data.object).animationObjects){
IAdObject(data.object).animationObjects.addEventListener(CollectionEvent.COLLECTION_CHANGE, checkActions);
checkActions();
}
}
iconType.source = findSource();
}
private function checkActions(e:Event=null):void{
try{
if(data){
if(IAdObject(data.object as IAdObject)){
if(IAdObject(data.object as IAdObject).animationObjects){
if(data.object.animationObjects.length>0){
this.myvis=true;
}else{
this.myvis=false;
}
}
}
}
iconType.source = findSource();
}catch(error:Error){
trace("LayerRenderer.mxml - checkActions(): " + error.message);
}
}
private function toggleEnabled(obj:UIComponent):void {
if (data.hasOwnProperty("first")) {
obj.useHandCursor = false;
obj.enabled = false;
obj.alpha = 0.5;
} else {
obj.useHandCursor = true;
obj.enabled = true;
obj.alpha = 1;
}
iconType.source = findSource();
}
private function hideLayers():void{
//dispatchEvent(new Event("Layer_Visible"));
trace("CLICKED EYE");
FlexGlobals.topLevelApplication.dispatchEvent(new Event('Layer_Visible'));
if (hideLayer.alpha == 1){
hideLayer.alpha = .5;
}
else if (hideLayer.alpha == .5){
hideLayer.alpha = 1;
}
//trace("parameters are " + ObjectUtil.toString(data));
}
private function findSource():*{
if (data){
//iconType.source = "";
if (data.type == "Image"){
//trace("data.name: " + data.name);
//trace("data.bitmapinfo: " + data.bitmapinfo);
return new Bitmap(data.bitmapinfo);
}
if (data.type == "Text"){
return("assets/images/Text2.png");
}
if (data.type == "Application"){
return
//return("assets/images/App.png");
}
if (data.type == "Button"){
return("assets/images/Button.png");
}
if (data.type == "Shape"){
return("assets/images/shape.png");
}
if (data.type == "SWF"){
return("assets/images/SWF.png");
}
else{
return "assets/images/placeholder.png";
}
}
else {
return "assets/images/placeholder.png";
}
}
private function truncateName(nameStr:String):String
{
var returnVal:String = (nameStr.indexOf(".") > -1) ? nameStr.substr(0, nameStr.indexOf(".")) : nameStr;
var extension:String = (nameStr.indexOf(".") > -1) ? nameStr.substr(nameStr.indexOf("."),nameStr.length) : "";
//trace("nameStr: " + nameStr);
//trace("extension: " + extension);
if (returnVal.length > MAX_NAME_LENGTH){
returnVal = returnVal.substr(0,MAX_NAME_LENGTH) + "...";
}/*else{
returnVal += extension;
}*/
return returnVal;
}
]]>
</fx:Script>
<s:Group id="layerGroup" width="100%" height="100%" top="10" left="5" bottom="10" right="10">
<s:HGroup left="0" verticalAlign="middle" width="100%">
<s:HGroup paddingBottom="40" paddingRight="10">
<mx:Image id="iconType" smoothBitmapContent="true" scaleContent="true" source="" height="20" width="20"/>
</s:HGroup>
<s:HGroup width="100%">
<s:Label toolTip="{data.name}" text="{truncateName(data.name)}" id="labelText" height="50" top="5" width="100%" maxDisplayedLines="1" left="0" color="#101010"/>
<s:Label toolTip="" text="{Math.ceil(data.fileSize/1000)+' K'}" textAlign="right" id="sizeText" height="50" top="5" width="70" maxDisplayedLines="1" left="0" color="#101010"/>
</s:HGroup>
<s:HGroup paddingBottom="40">
<mx:Image horizontalAlign="right" bottom="10" alpha="1" right="2" id="hideLayer" verticalAlign="middle" source="assets/images/visible.png" click="hideLayers()" useHandCursor="true"/>
<mx:Image id="actLabel" includeInLayout="false" visible="{this.myvis}" source="assets/images/star.png" />
</s:HGroup>
</s:HGroup>
</s:Group>
</s:ItemRenderer>
Here is the class that uses said renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
left="5" top="10" bottom="0"
creationComplete="init();" rollOver="rolledOver(event)" rollOut="rolledOut(event)"
backgroundColor="#F0F0F0" backgroundAlpha="1" borderAlpha="0" borderColor="#3a3a3a" width="100%" height="60" currentState="out">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="over"/>
<s:State name="out" />
</s:states>
<fx:Script>
<![CDATA[
import components.*;
import components.AdCanvas;
import events.AdCanvasObjectEvent;
import flash.system.LoaderContext;
import mx.collections.ArrayCollection;
import mx.controls.Image;
import mx.core.Application;
import mx.core.DragSource;
import mx.core.FlexGlobals;
import mx.core.IUIComponent;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.graphics.ImageSnapshot;
import mx.managers.DragManager;
import spark.components.Group;
import spark.layouts.*;
[Bindable]
private var _data: Object;
[Bindable]
private var context:LoaderContext;
[Bindable]
public var canvas: AdCanvas;
[Bindable]
public var index: int;
[Bindable]
public var maxPreviewWidth: int;
[Bindable]
public var maxPreviewHeight: int;
[Bindable]
public var isSelected: Boolean = false;
[Bindable]
private var adRect:Rectangle;
[Bindable]
private var ad:BitmapData;
[Bindable]
public var layerData:ArrayCollection = new ArrayCollection();
[Bindable]
private var application:Object = FlexGlobals.topLevelApplication;
//public var layerList:List;
private const MAX_HEIGHT:Number = 400;
private const MINIMUM_HEIGHT:Number = 60;
private var t:Timer;
private var t2:Timer;
private var t3:Timer;
[Bindable]private var siblings:Array = new Array();
/**
* Initialize the preview item
*/
public function init(obj: Object = null): void {
//layersList.data = FlexGlobals.topLevelApplication.getLayerList();
//trace("Layer data " + layersList.data);
canvas.screenPreview = this;
context = new LoaderContext(false);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.UPDATED, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.ADDED, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.DELETED, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.SELECTED_SINGLE, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.SELECTED_MULTIPLE, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener(AdCanvasObjectEvent.DESELECT, updateThumbnail);
FlexGlobals.topLevelApplication.addEventListener("updateThumbnail", updateThumbnail);
// This is to prevent the security error when there is a loaded swf trying to be accessed for bitmap
Security.loadPolicyFile(FlexGlobals.topLevelApplication.parameters.mediaUrl+"../crossdomain.xml");*/
//if(root.loaderInfo.url.indexOf('file://')==-1)img.loaderContext = new LoaderContext(true, ApplicationDomain.currentDomain, SecurityDomain.currentDomain);
canvas.updatePreview();
buildThumb();
titleBar.addEventListener(MouseEvent.CLICK, mouseClick);
(adCanvas.isDeletable || adCanvas.isDeletable == "true") ? screenDelete.addEventListener(MouseEvent.CLICK, mouseClick) : null;
//layersList.addEventListener(DragEvent.DRAG_ENTER, handleDragEnter);
//layersList.addEventListener(DragEvent.DRAG_DROP, handleDragDrop);
//layersList.addEventListener(DragEvent.DRAG_START, handleDragStart);
this.addEventListener(DragEvent.DRAG_ENTER, handleDragEnter);
this.addEventListener(DragEvent.DRAG_DROP, handleDragScreenDrop);
//setHeight();
//setYPos();
}
private function handleDragStart(event:DragEvent):void{
try{
var obj:Object = (event.dragInitiator as List).selectedItem;
canvas.selected = obj["object"];
}catch (error:Error){
trace("ERROR: ScreenPreview.mxml - handleDragStart() : " + error.message);
}
}
private function handleDragEnter(event:DragEvent):void {
trace("event.dragInitiator: " + event.dragInitiator);
if( event.dragInitiator is List){
DragManager.acceptDragDrop(this);
DragManager.showFeedback(DragManager.MOVE);
layersList.dropEnabled = true;
}else{
layersList.dropEnabled = false;
}
}
private function handleDragDrop(event:DragEvent):void {
t = new Timer(500);
t.addEventListener(TimerEvent.TIMER, checkLayerData);
t.start();
}
private function handleDragScreenDrop(event:DragEvent):void {
/*trace("\n");
trace("TEEEEE HEEEEEE");
trace("event.target: " + event.target);
trace("event.currentTarge: " + event.currentTarget);
trace("this: " + this);
trace("event.dragInitiator: " + (event.dragInitiator as List).selectedItem);
trace("event.draggedItem: " + event.draggedItem);
trace("event.dragSource: " + event.dragSource);
*/
try
{
var obj:Object = (event.dragInitiator as List).selectedItem;
var clone:UIComponent = obj["element"].clone();
/*for( var i:* in obj)
{
trace( "obj["+i+"]: " + obj[i]);
}
trace("obj: " + obj);
*/
this.canvas.addObjectToCanvas(clone);
obj["adCanvas"].removeScreenElement(obj);
}catch(error:Error){
trace("ERROR: ScreenPreview - handleDragDrop() : " + error.message);
}
//trace("\n");
}
private function checkLayerData(e:TimerEvent):void
{
t.stop();
t = null;
adCanvas.updateItemIndex();
}
public function setSizeText(val:Number):void
{
sizeText.text = (Math.ceil(val/1000) + " K");
if (isSelected)
{
t3 = new Timer(100);
t3.addEventListener(TimerEvent.TIMER, delayResize);
t3.start();
}
}
/**
* Update the bitmap data for the screen when something has changed.
*/
public function updateThumbnail(ev: AdCanvasObjectEvent = null): void {
try{
canvas.gridOff();
var adRect:Rectangle = canvas.adBox.getBounds(canvas);
var snapshot: BitmapData = ImageSnapshot.captureBitmapData((canvas as IBitmapDrawable));
var ad:BitmapData = new BitmapData(adRect.width, adRect.height);
ad.copyPixels(snapshot, adRect, new Point());
img.source = new Bitmap(ad);
canvas.gridOn();
}catch(e:Error){
trace(e+"System can't convert external swf files to bitmap.");
canvas.gridOn();
}
}
/**
* Controls visuals for when the button is selected.
*/
public function set selected(state: Boolean): void
{
isSelected = state;
trace("MY STATE IS: " + state);
if (isSelected)
{
layersList.includeInLayout=true;
stroke.color=0x878787;
strokeColor.color=0x878787;
bg.color = 0x979fa7;
layersList.visible = true;
//layersList.percentHeight = 100;
screenSettings.visible = true;
(adCanvas.isDeletable || adCanvas.isDeletable == "true") ? screenDelete.visible = true : screenDelete.visible = false;
//percentHeight=100;
siblings.splice(0,siblings.length);
siblings = new Array();
try
{
for(var i:int=0; i < Group(parent).numChildren; i++)
{
siblings.push(Group(parent).getElementAt(i));
}
}
catch (e:Error) {}
t2 = new Timer(100);
t2.addEventListener(TimerEvent.TIMER, delayResize);
t2.start();
}
else
{
stroke.color=0x3C3C3C;
strokeColor.color=0x3C3C3C;
bg.color = 0x636B73;
currentState="out";
layersList.includeInLayout=false;
}
}
private function delayResize(evt:TimerEvent):void{
if(t2){
t2.stop();
t2.removeEventListener(TimerEvent.TIMER, delayResize);
t2 = null;
}
if(t3){
t3.stop();
t3.removeEventListener(TimerEvent.TIMER, delayResize);
t3 = null;
}
setHeight();
setYPos();
}
public function setYPos():void
{
for(var i:int = 0; i < siblings.length; i++)
{
if(i>0)
{
siblings[i].y = ( siblings[i-1].y + siblings[i-1].height);
}
if (siblings[i] != this){
ScreenPreview(siblings[i]).selected = false;
ScreenPreview(siblings[i]).checkLayer();
}
}
}
public function setHeight():void
{
for(var i:int = 0; i < siblings.length; i++)
{
if( siblings[i] == this )
{
if( (MINIMUM_HEIGHT + totLayersHeight()) > MAX_HEIGHT){
height = MAX_HEIGHT;
}else{
height = MINIMUM_HEIGHT + totLayersHeight();
}
}
trace("###################################################");
trace("ScreenPreview - canvas: " + canvas);
trace("ScreenPreview - canvas.href: " + canvas.href);
trace("ScreenPreview - canvas.click_label: " + canvas.click_label);
trace("###################################################");
FlexGlobals.topLevelApplication.setMouseActionsFromObject();
}
}
private function totLayersHeight():Number{
trace("this.layerData.length: " + this.layerData.length);
var val:Number = 0;
//multiply by 40 because that is the height of each layer item
if( this.layerData.length > 0) val = (this.layerData.length + 1) * 40;
return val;
}
public function checkLayer ():void{
screenSettings.visible = false;
screenDelete.visible = false;
layersList.visible = false;
//percentHeight=15;
height = 60;
}
/**
* Controls visuals for when the button is rolled over.
*/
private function rolledOver(e:Event):void
{
str.color=0xffc423;
bg.color=0xBAC2CA;
}
/**
* Controls visuals for when the button is rolledout.
*/
private function rolledOut(e:Event):void{
if(!isSelected){
bg.color=0x636B73;
/*g1.color=0xCBCBCB;
g2.color=0xD9D9D9;
str.color=0xCBCBCB;
lg.rotation=-90;*/
}else{
bg.color=0x979fa7;
/*g1.color=0xCBCBCB;
g2.color=0xCBCBCB;
str.color=0xCBCBCB;
lg.rotation=90*/
}
}
/**
* Set up the canvas and SWF sizes, as well as label, for the screen thumbnail.
*/
public function buildThumb():void{
adRect = new Rectangle(15, 15, canvas.adBox.width, canvas.adBox.height);
ad = new BitmapData(adRect.width + 100, adRect.height + 100, true, 0);
setImageSize();
labelText.text = "Screen "+canvas.index;//+": "+canvas.adWidth+"x"+canvas.adHeight;
updateThumbnail();
}
/**
* Get the scaled-down screen size.
*/
private function getScaledDimensions(targetHeight:int=100, targetWidth:int=100): Object {
var xScaleFactor: Number = (maxPreviewWidth > targetWidth) ? (targetWidth/maxPreviewWidth) : 1;
var yScaleFactor: Number = (maxPreviewHeight > targetHeight) ? (targetHeight/maxPreviewHeight) : 1;
var scaleFactor: Number = (xScaleFactor < yScaleFactor) ? xScaleFactor : yScaleFactor;
var dimensions: Object = {
width: Math.round(adRect.width * scaleFactor),
height: Math.round(adRect.width * scaleFactor)
}
return dimensions;
}
/**
* Change the the thumb size and position based on the ad size.
*/
private function setImageSize():void
{
var w:Number = adRect.width + 100;
var h:Number = adRect.height + 100;
var scaler:Number = (w>h)?40/w:27/h;
img.width = w*scaler;
img.height = h*scaler;
rolledOut(null);
imgBox.left = 10;
if (w > (h*2)){
imgBox.top=15;
}
if (h > (w*2)){
imgBox.top = 5;
}
}
private function mouseClick(e:MouseEvent):void
{
trace("did the click");
e.stopImmediatePropagation();
if( e.currentTarget == screenDelete)
{
trace("DISPATCH DELETE SCREEN");
dispatchEvent(new Event('delete_screen_click'));
}else{
trace("DISPATCH MOUSE CLICK");
dispatchEvent(new Event('mouse_click'));
FlexGlobals.topLevelApplication.dispatchEvent(new AdCanvasObjectEvent(AdCanvasObjectEvent.DESELECT));
}
//FlexGlobals.topLevelApplication.updateLayerScreens();
}
private function deleteThisScreen(e:MouseEvent):void
{
dispatchEvent(new Event('delete_screen_click'));
}
/**
* Getter and setter for adcanvas that we are using for the thumbnail
*/
public function set adCanvas(canv: AdCanvas): void {
canvas = canv;
index = canv.index;
}
public function get adCanvas(): AdCanvas {
return canvas;
}
/**
* Getter for checking if this button has been selected.
*/
public function get selected(): Boolean {
return isSelected;
}
private function settingsMenu():void{
FlexGlobals.topLevelApplication.dispatchEvent(new AdCanvasObjectEvent(AdCanvasObjectEvent.DESELECT));
FlexGlobals.topLevelApplication.openSettings();
}
]]>
</fx:Script>
<s:VGroup left="1" right="1" top="1" height="100%" width="100%" paddingBottom="5">
<s:VGroup id="titleBar" height="55" top="20" width="100%">
<s:HGroup top="5" left="5" height="100%" width="100%">
<s:Group width="55" height="50">
<s:Rect id="fill" left="5" right="0" top="0" bottom="0" radiusX="0">
<s:fill>
<s:SolidColor id="bg" color="0x979fa7"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke id="stroke" color="0x3C3C3C" alpha="1"/>
</s:stroke>
</s:Rect>
<s:HGroup id="vg" height="50" width="100%" gap="0">
<s:Group height="15" top="2" width="100%">
<s:VGroup top="5" id="imgBox" width="15">
<mx:Image left="5" id="img" scaleContent="true" height="50" width="50" top="10" />
</s:VGroup>
</s:Group>
</s:HGroup>
<s:Rect left="1" right="1" top="1" bottom="1" radiusX="0" >
<s:stroke>
<s:SolidColorStroke id="str" color="0x979fa7" weight="2" alpha="0" />
</s:stroke>
</s:Rect>
</s:Group>
<s:Group left="0" top="0" height="60" width="100%">
<s:Rect top="0" left="5" right="0" bottom="0" bottomLeftRadiusX="0" bottomRightRadiusX="0">
<s:fill>
<s:SolidColor id="bg2" color="0xDCE4EC" alpha="0"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke id="strokeColor" color="0x3C3C3C" alpha="0"/>
</s:stroke>
</s:Rect>
<s:HGroup verticalAlign="middle" top="15" width="100%">
<mx:Text id="labelText" text="" selectable="false" color="#3a3a3a" width="100%" fontSize="10" textAlign="center" />
<mx:Text id="sizeText" text="" selectable="false" color="#3a3a3a" width="100%" fontSize="10" textAlign="right" />
</s:HGroup>
</s:Group>
<s:Group>
<mx:Image source="assets/images/trashcan-delete.png" visible="false" toolTip="Delete This Screen" id="screenDelete" top="15" right="45" useHandCursor="true"/>
<mx:Image source="assets/images/cog.png" visible="false" toolTip="Edit Screen Settings" top="15" right="11" id="screenSettings" click="settingsMenu()" useHandCursor="true"/>
</s:Group>
</s:HGroup>
</s:VGroup>
<s:VGroup id="layerPanel" includeInLayout="true" paddingBottom="1" height="100%" width="100%">
<s:List creationComplete="{trace('TEEEEEEEEEEEEE HEEEEEEEEEEEEEEE')}"
id="layersList"
dragStart="{handleDragStart(event)}" dragEnter="{handleDragEnter(event)}" dragDrop="{handleDragDrop(event)}"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
includeInLayout="true"
visible="true"
initialize="application.setUpLayers()"
dataProvider='{layerData}'
selectedIndex="{application.getLayerListIndex()}"
render='{layersList.selectedIndex=application.getLayerListIndex()}'
itemRenderer="renderers.LayerRenderer"
width="100%"
height="100%"
bottom="50"
alternatingItemColors="[#e2e2e2, #dedede]"
selectionColor="#787878"
rollOverColor="#949494"
borderVisible="false"
/>
</s:VGroup>
</s:VGroup>
</s:BorderContainer>
The problem I'm having is the itemRenderer never gets called. I put trace statements just to be sure and nothing. These two files once used mx:canvas and were converted. I've been beating my head against a wall for 2 days with this issue. Help is much appreciated.