Wednesday, 6 February 2008

Flex UI Experiment

This is a Flex UI experiment that I knocked together in a few hours last night. I kind of had an Eclipse feeling at the time, which may explain why it looks the way it does. It's for a game that I'm writing in my "spare" time, which may or may not go somewhere...
webwar_06022008.swf

The main thing I wanted to play with last night was the “graph” in the middle section, which is “SpringGraph” by Mark Shepherd (Flex Builder team). The graph uses a custom renderer in order to draw the pie charts and show a tool tip. I had started writing my own and realised this graph view had probably been in the past so did a quick Google and there was SpringGraph.

The pie charts are just drawn as “wedges” on a custom component created using a Drawing library from Ric Ewing updated for AS2 by Kevin Williams and now for Flex by me. You can get a copy of it using the link below.
Draw.as

My main change was to pass a graphics context in to each of the methods and a few other bits of tidying up. It's pretty cool and lets you easily draw polygons, stars, wedges and "gears". Very handy for weird shaped custom components. Just subclass Canvas and draw using this library. Flex is neat in that by default it only seems to detect mouse events over drawn areas making those weird shaped components feel as though they are really weirdly shaped rather than just a rectangle with a drawing in them.

No comments: