Intro: HTML to Flex in a matter of days

My first project at my new job is to create usage reports for our product. I started building a UI with HTML, Jquery and ColdFusion, but I soon realized that we were going to need a more fluid interface to the data.

Collecting Data

The original UI was a basic HTML layout: Enter a date range and choose some options. There are a series of related select menus that have to be populated as you select different options.

For Javascript, I chose JQuery. I’ve heard a lot of great things about it and hadn’t had a chance to use it on a project yet.

For Ajax with ColdFusion, at first I chose AjaxCFC. The installation went fine, but I soon found that the standard version has conflicts with JQuery. There’s an Alpha version that resolves the conflicts, but I feltlike I was spinning my wheels at that point, so I looked for something else.

Lo and behold, I found that you can have JQuery work directly with a CFC to transfer data. Once I figured out a few syntax issues, I was off and running.

Charting Data

Many people know and love CFCHART. Personally, I haven’t used it since somewhere around 1999. I remembered a post by Ray Camden about going directly to the library that powered CFCHART. That post led me to another by one by Christopher Wigginton. Using Christopher’s code, I was able to chart a lot of data comparing District average vs. an Individual School over some time period.

The problem was that I either had to submit the form to an action page that would create the chart, thus losing all the data I’d entered, or I would have to pop-up a window that contained the chart. And pop-ups are just annoying no matter what.

I really needed a way to keep the form and the chart on the same page, change data in the form and reflect those changes in the chart as fast as possible.

That’s when I downloaded Flex Builder.

Collecting and Charting Data

Now I can collect data and display different charts on the same page.

My biggest hurdles in learning Flex past the basic lessons that ship with Flex Builder were going from “how is this handled by the DOM” and moving to “how is this handled by Flex and Actionscript”.

My next few posts will be about how I went from HTML to Flex in a matter a days.