Flex Dashboards

Yesterday afternoon my client team presented their redesign work to their senior executive, and it was quite well received. One of the suggestions coming out of the meeting, and something we'd already thought a little bit about, was producing a dashboard for all the major indicators. Last night I had a bit of a play and got something working, and today I've refined it a little.

The idea is that the user will be able to choose which graphs in the dashboard are displayed, and that the layout scales to fully utilise the screen real-estate. Flex has some built-in Container objects that have some smarts for this sort of thing but none quite did what I wanted. VBox and HBox are the closest, but only allow one column or row (respectively) of objects. Tile looked promising but they don't dynamically scale particularly well. There's a whole heap of dashboard libraries available online, but they seemed like overkill for what is really a fairly simple task.

In the end I went with a simple solution: two HBoxes in a VBox, and code to move objects in and out of the HBoxes based on how the objects need to be displayed.

Now that I've got the UI working fairly well, I need to go back and clean up a lot of the code to make the adding of graphs more dynamic (currently it's all hard coded). Then without too much more work I think it would be possible to put the whole config for the dashboard into an XML doc, resulting in a dynamic, re-usable dashboard. Sweet.

It's also rather nice that I didn't need to change any of the graph-building code to get this to work - justifies some of the refactoring decisions I made recently.

I thought it might be nice if my dashboard allowed users to double-click on an graph and have it 'maximised', then double-click again to restore the previous view. That seems simple enough, and in the end it wasn't too difficult. But for some reason I managed to spend way too long going about things all wrong. In part, it's because Flex/ActionScript doesn't have a particularly useful Hashtable equivalent, and in part because I was just overthinking things.

You can use an Object as an associative array for key/value pair type data, but that's not particularly feature rich. In particular it's difficult (or impossible) to get a key based on the object you have. When looking for workarounds I came across DevelopmentArc, a company that have released a library of useful stuff under the very open MIT license. Thankfully, this includes an implementation of a hashtable that's quite nice (although reverse-lookups are still a little bit of work).

Here's a screenshot of the dashboard so far. At a later date I'll put up the most interesting bits of the code. Keep in mind the UI-gurus haven't had a play with this yet, so it's nowhere near pretty.

comments powered by Disqus