Tuesday, March 25, 2008

White Easter!

Just passed a long weekend of Easter holiday..!!! And it was a white Easter! Even this morning was snowing hard.. it was beautiful, I love it....love it love it!

Last week before the Easter holiday we were busy with the smileys! We supposed to put smileys beside the project score. We almost spent 4 days for this feature! And finally we succeeded with the help from our colleague, Yuri Vrancken.

Originally, we planned to put the smiley in the Bar Chart of our the project score, just beside the score. We have tried using the Grid, ItemRenderer, chart annotations, etc and it didn't work. After 4 days-struggle, we decided to have another data grid just showing the project name and smileys. We realized that customizing a chart is possible but require lots of work. And we don't want to waste lots of time in this feature since we have a long list of features to be implemented.

So, we decided to use a two-column datagrid, one column for projectname and the other for the corresponding smileys. To be able to insert an image into a datagrid, we need to use ItemRenderer. The trick is to specify in the datagrid that it would render an image.

Here is the snippet of our datagrid code:

mx:DataGrid id="dGrid1" dataProvider="{scores}" width="100%" height="100%"
mx:columns

mx:DataGridColumn headerText="Project Name" dataField="Project"
/mx:DataGridColumn

mx:DataGridColumn headerText="Well-being" dataField="ImagePath" itemRenderer="mx.controls.Image">
/mx:DataGridColumn

/mx:columns
/mx:DataGrid



And the datafield of ImagePath is a column of an ArrayCollection contains the path of where the image is located.


[Bindable]
private var pathString:String = "../src/images/Smiley_";

if(scores.getItemAt(f).Score<=30)
{
scores.getItemAt(f).ImagePath=pathString+"sad.JPG";
}

No comments: