Have you been wondering what all the hype was about Adobe Flex? Ever wondered what it was, or what it could do for you? Well, Dan Suceava and I spent a day or two looking into it, and this is just a quick and simple example of what we came up with.

We downloaded the latest version of Adobe Flex Builder and Flex Charts and start digging around, after a lot of trial and error we eventually managed to throw together something that we were both quite happy with. As usual, I'll start with the eye-candy before going into details, so check out this video recording of our 'OnTime SDK Flex Chart Demo' (included in the OnTime SDK Examples).

As you can see in the video, we created an 'advanced' charting tool with Adobe Flex, ActionScript and a custom .NET Web Service.  This was all, for the most part, fairly simple, once we wrapped our heads around the concept of coding in ActionScript and the oddities that are Flex Component Design. When I first looked into Flex, I was overly impressed with the look and feel, and the demo's and marketing pages from Adobe made it look so cool, I just had to try it out.  After fiddling around for quite some time with it, and producing this seemingly simple sample, my enthusiasm quickly dissipated.

Not to say that Flex is horrible, it's just not my style.  You create MXML files, which contain 'components' which are, for the most part, custom controls.  In these controls, you can place other controls (very similar to .NET User Controls).  All your controls, in the designer anyhow, are created through Markup, which is ... again, very similar to ASP.NET Markup.  The tools available for the creation of Flex application, Adobe Flex Builder (built on Eclipse), are ... how do I say this right ... lacking? Very clunky, IntelliSense works ...sometimes, Code Highlighting ... almost all the time, type-ahead ... ack, it works, and it does things that drove me nuts! Granted, most of these tool related issues are probably configurable in the options somewhere, but wow, the defaults drove me mad.

I won't speak for Dan, but I'm pretty sure he wasn't digging the tool set either.

All in all, I can see Flex working for quite a large majority of developers, I'm just not one of them.  I attempted a few various projects at home on my free time, and couldn't get most of what I wanted to do accomplished without extending the default controls (which, thanks to Adobe, full ActionScript source is provided for all tools, which was nice!). 

So, with all that said, let me explain how we put this whole thing together.

Requirements:

• Visual Studio 2005 (Web Service)
  
• Adobe Flex Builder 2 (Trial is OK to Build Demo)
  
• OnTime SDK
  
• Adobe Flex Charts (Trial is OK)
  

Time Invested: 16 work hours (10 hours research, 6 hours code)

First, we installed Adobe Flex Builder, along with the Flex SDK. We then created a new Flex Application Project, and added a Flex Application, and 3 Flex Components.  The first component was called 'ChartWindow'. We placed the 'ChartWindow' component into our Flex Application.  The ChartWindow component contained our Application menu and the User List box, which we attempted to have populated directly from the OnTime SDK.  However, ActionScript was not able to understand the DataSet XML Structure returned by the OnTime SDK, so we whipped together a really quick wrapper Service that tied everything together fairly neatly.  I believe it also helped reduce some of the more hassling code we would have to have written if ActionScript did understand the DataSet structure.

NOTE: Dan did some research on the DataSet issue and found that there was at least one commercial ActionScript component which was able to understand the full range of .NET Web Service XML Structures, including DataSets. 

For the Web Service Wrapper, we wrote a GetProjects and GetUsers method, which simply returned an ArrayOfUser and ArrayOfProject (we actually created wrapper classes for OnTime Users and Projects, to reduce the bandwidth overhead for the Flex Application).  We then placed a Flex Web Service component into the ChartWindow code and attached it to the wrapper and binded to the two methods.  We wrote 'result' handlers which basically built a collection of objects in ActionScript (this was actually pretty cool, ActionScript automatically converted the returned XML into Objects for us) and then added the drop-down lists and listbox code to populate from these collections.

After we got all this working, we immediately started tackling the Charting and we decided to split the top and bottom charts into separate components to help manage the code a little easier.  We started with the chart on the top, since it's the controlling chart.  We spent some time playing around with different features and functionalities available and eventually wound up with what you saw in the above video.

When the user changes there filtering options (clicks a User in the List or changes a Drop-down value), we call an 'update' method which basically retrieves all of the data from the wrapper Web Service again, using the filtering options currently selected.  In the 'result' handler for this call, we build an Items Collection and then pass this collection into the two charts.  Each chart component (top and bottom) handles the collections differently, the top chart always aggregates on the Status or Priority and shows an overall 'big picture' pie chart, while the bottom chart is provided with the top charts current selection and shows the 'overall details' of the current selection.  We also thought that a nice Bar Chart showing Estimated vs. Actual durations would be somewhat fun, so we tossed that in there as well.

When we finished with all of the coding, we grabbed a backup of the Axosoft production database for the OnTime product and gave it a test whirl.  It performed spectacularly, almost no hesitation, even when loading large sets of data (1000+ items for a single user). I must say, after going through the struggle of getting this demo finished, both myself and Dan were extremely happy with the results.  I personally had some issues with the path to completion, but wow ... it's like hiking up a large rugged mountain, the hike can kill, but it's all worth it when you reach the top and look at the view below. 

Flex has quite a few really cool things, and I can't really knock it too much cause I did have fun writing this charting demo.  I just can't see myself doing this type of coding for a living -- but the next time I need something visually stunning and web-based (with Apollo, you can even make it Desktop based, Oh no!) I am definitely going to give Flex the benefit of the doubt and try to utilize it.  Hopefully, with some more time invested into the technology, it may wind up being the next greatest development platform (who knows -- could happen). 

To download the full source to this sample, goto the download page.