Function for setting segment color and inner labels

[dkritz]

Based on your sample, I have added this code to my chart:

                                       <gantt:CustomGanttSegmentComponent id="segment"
                                                                      color="{(data.percentComplete == 0 ? 0xFA0000 : (data.percentComplete == 100 ? 0x9ACD32 : 0xFFA500))}"
                                                                      drawAsComposedTask="{data.task.isComposed}"
                                                                      height="100%">
                                          <mx:Label text="{data.percentComplete} %" minWidth="0" width="100%"/>
                                       </gantt:CustomGanttSegmentComponent>


I would like to use a custom function so that more complex business logic to determine the segment color and inner label text. 

How could I do this?

Thanks.

[Gabriela]

Hello,

There are several ways to achieve your objective. One solution: override the data setter, and execute your logic that adjusts the appearance:

Code:

override public function set data(value:Object):void {
super.data = value;
updateUI(value);
}

private function updateUI(value:Object):void {
color = ...;
myLabel.text = ...;
}

If you also want to listen to properties (e.g. binding), you might want to do the following:

Code:

override public function set data(value:Object):void {
if (data != null)
model.removeEventListener(PropertyChangeEvent.PROPERTY_CHANGE, myHandler);

super.data = value;

var model:Task = Task(value);
model.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, myHandler);
updateUI(value);
}

private function myHandler(event:PropertyChangeEvent):void {
if (event.property == "name")
updateUI(data);
}

private function updateUI(value:Object):void {
color = ...;
myLabel.text = ...;
}

Best regards,
Gabriela.