Flex : Datagrid with embedded icon lookup
I am rewriting gTraffic in Flex. My intention is to open source the code when it’s complete to serve as an example for other people of a Flex map site. I have written quite a bit but mostly to integrate my initial prototype with the Cairngorm framework.
This article and hopefully other future articles will hopefully serve as a guide to the code. I intend to write them as I go along so here is the first…
The existing gTraffic site has the ability to list the loaded events from a region not only onto the map but onto a list view on the right hand side.
The events list contains a summary description of each event and also a panel icon coloured to indicate the severity (green=slight, yellow=medium and red=severe). In my flex implementation I use a DataGrid to display the events in a similar fashion. The data for the events list if fetched using an HTTPService and the xml is processed by the application using e4x into an mx:ArrayCollection of ‘Value Objects’ (basically objects which hold the fetched values).
The code for the DataGrid is as follows
[
dataProvider="{ events }"
change="updateSelectedEvent( event );"
dragEnabled="false"
variableRowHeight="true"
height="100%" width="100%">
dataField="severity"
width="70"
itemRenderer="com.netthreads.traffic.view.renderer.PanelSeverityRenderer"/>
dataField="summary"
wordWrap="true"
textAlign="left"/>
]You will see that the first column of the grid uses an ItemRenderer to render the contents. This is a powerful and handy feature for the mx:DataGrid and means you can push visual components into the grid cell which don’t have to be text. For reasons which I can’t figure out the itemRenderer reference needs the full namespace path to the relevant component in the code space. That means you can’t just import the relevant class into the script area which is a bit of a pain.
What we want is a renderer which will take the current rows data item severity and place the appropriately coloured icon in the cell. I initially tried to see if this was possible with pure Actionscript and it does seem to be, but once I got into it I realised ‘why bother’. The mxml version is so straightforward in comparison that you would have to be some sort of Flex masochist to subject yourself to creating all the appropriate calls. That is, of course if you just need something simple like an image. You know I searched quite a bit for a straightforward example of this and I didn’t really find a good source so if you need to to something similar then this here is the renderer code.
The panel icons are stored in a class which has the icons embedded into it. A reference to each of these is stored against severity strings in a dictionary.
private function init():void
{
if (dict==null)
{
dict = new Dictionary();
dict[TXT_SEVERITY_UNKNOWN] = model.assets.transportPanelSlight;
dict[TXT_SEVERITY_VERYSLIGHT] = model.assets.transportPanelSlight;
dict[TXT_SEVERITY_SLIGHT] = model.assets.transportPanelSlight;
dict[TXT_SEVERITY_UNSPECIFIED] = model.assets.transportPanelSlight;
dict[TXT_SEVERITY_MEDIUM] = model.assets.transportPanelMedium;
dict[TXT_SEVERITY_SEVERE] = model.assets.transportPanelSevere;
dict[TXT_SEVERITY_VERYSEVERE] = model.assets.transportPanelSevere;
}
}
This init function is called on the creation of each cell. But notice that I test to see if the static table has already be initialised. This mean that the dictionary object is only filled once.
The renderer creates an mx:Image object. This takes it source from the results of the ‘getSeverityIcon’ function (see the code).
public function getSeverityIcon(severity:String):Class
{
var result : Class = null;
result = dict[severity];
if (result==null)
{
result = model.assets.transportPanelSlight;
}
return result;
}
The severity string from the value object is used as the lookup for the appropriate embedded image. If the result of the lookup is null then the severity string can’t find a match in the dictionary. If this is the case then a default of ’slight’ is used.
And that’s it. Not rocket science but it might come in handy for someone else.
Comments
3 Responses to “Flex : Datagrid with embedded icon lookup”
Leave a Reply
Hi Alistair,
this is a great help, but the post (Datagrid with embedded icon lookup) seems to be missing some of the initial code…
Do you have any more details you could send me?
Thanks,
Jim
For some bizarre reason wordpress has knobbled my code formatting! I will look into this tomorrow.
Al.
Looking back at this I can see that there are later posts which might prove fruitful if you are interested in getting a datagrid with icons. Please start from the top of the site and go back and I’m sure you will find a link to actual source code you can use.