Problem with itemRenderer and styling

[arjanpetersen]

Hi,

Im having a problem with an itemrenderer and the conditional styling of the background of a canvas in this itemrenderer. I have the following code for the itemrenderer.


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
>



<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.sampler.getSize;
import mx.charts.CategoryAxis;
import mx.collections.XMLListCollection;
import com.adobe.empdir.model.Employee;
import mx.events.FlexEvent;
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;


[Bindable]private var st:String;
[Bindable]private var dayHrs:ArrayCollection = new ArrayCollection();
private var obj:Object;

private var Hours:String;
private var Wbs:String;
private var _xmlcol:XMLListCollection;
private var _xml:XML;
public var myTip:ToolTip;



override public function set data(value:Object):void {
if(value != null) {
super.data = value;
_xml = value as XML;
_xmlcol = new XMLListCollection(_xml.children() as XMLList);
dayHrs.removeAll();


if (_xmlcol.length >= 2)
{
var i:int = 0;

while ( i < _xmlcol.length )
{
try{
//dayHrs[i] =new Array(_xmlcol.getItemAt(i).WorkingHrs,_xmlcol.getI temAt(i).@wbs);
obj = new Object();
Hours = _xmlcol.getItemAt(i).WorkingHrs.toString();
Wbs = _xmlcol.getItemAt(i).@wbs.toString();
obj.Hours = Hours;
obj.Wbs = Wbs;

dayHrs.addItem(obj);

}catch(error:Error){
//dayHrs[0] =new Array(0,0);
}
i++;
}

} else {
try{
//dayHrs[0] =new Array(_xmlcol.getItemAt(0).WorkingHrs,_xmlcol.getI temAt(0).@wbs);
obj = new Object();
Hours = _xmlcol.getItemAt(i).WorkingHrs.toString();
Wbs = _xmlcol.getItemAt(i).@wbs.toString();
obj.Hours = Hours;
obj.Wbs = Wbs;

dayHrs.addItem(obj);

}catch(error:Error){
//dayHrs[0] =new Array("","700000");
}

}

}
//Dispatch the dataChange event.
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));


}



private function setBackground():void
{
var i:int = 0;
var totalHours:int = 0;

while (i <dayHrs.length){
totalHours += parseInt(dayHrs.getItemAt(i).Hours);
i++;
}

//#D12929

if (totalHours > 8){
containerVBox.setStyle("backgroundColor", 0xFBC8C8);

//return 0xFBC8C8;

} else containerVBox.setStyle("backgroundColor", null);
// return 0;
}
]]>
</mx:Script>

<mx:VBox id="containerVBox"
verticalGap="0"
horizontalAlign="center"
verticalAlign="top"
textAlign="center"
rollOver="createBigTip(event)"
rollOut="destroyBigTip(event)"
height="52" paddingLeft="0"
paddingRight="0"
paddingTop="0"
paddingBottom="0"
verticalScrollPolicy="off">
<mx:Repeater id="myRep" dataProvider="{dayHrs}">
<mx:Canvas textAlign="center" width="{getWidth(myRep.currentItem.Hours)}" height="{getSize(myRep.currentItem.Hours)}" verticalScrollPolicy="off">
<mx:Text text="{myRep.currentItem.Hours}" textAlign="center" fontSize="12" blendMode="invert" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" kerning="false"/>
</mx:Canvas>
</mx:Repeater>

</mx:VBox>

</mx:VBox>


I want to use the setBackground function to set the styling of the containerVBox based upon the amount of hours. I am facing some problems here:

- When changing data the styling becomes a mess. It is styling VBOX with wrong color. Somehow the databinding is not correct.
- When I fire setBackground() with dataChange = "setBackground()" I get an errormessage that I want to reference a null object. In other words the Vbox is not created yet.

How can I do this? I want to change the background after the vbox is created.

Thanks!