My First Foray into Flex

January 24, 2009

One of my hopes for my (which is, tragically, starting to fill up with actual work) is to learn Flex. In case you’re not familiar with it, Flex is an open source framework created by Adobe, used to create Rich Internet Applications (RIA). Flex can be used to create SWF files that run through the Flash engine in a Web browser or create AIR files that run through the AIR engine on the desktop. Simply put, Flex is Flash for programmers. As I have little to no graphical skills, it’s a much better candidate for me than Flash. Over the past week I’ve started to finally do something wth Flex, here are my thoughts thus far.An admission up front is that I don’t learn new things as perhaps I should. I always intend to sit down and deliberately learn something, going step by step through the progression of information. But I get antsy and want to start doing things. As a writer of books, who would prefer that readers work through my books sequentially, absorbing every word, it’s a bit ironic that I don’t do this myself, but to be human is to be ironic.

I started by working my way through Adobe’s really nice Flex in a Week video training series. And when I say “working my way through”, I really mean that I watched most of the videos for Day 1, Flex Basics. That’s it. I will watch the rest, because they are very good, but that’s all I got through before I started roaming into my own programming. I’ve also been reading the book Getting Started with Flex 3. It’s a short, introductory book, that both touches upon some of the features and concepts of Flex, as well as demonstrates some pratical uses of the technology.

As you can see, I haven’t really put a whole lot of time and effort into learning Flex, but I’m close to wrapping up my first AIR application. That’s pretty impressive. A lot of the credit goes to Flex Builder, which is an Eclipse-based IDE. It’s not a cheap application but it seems to be well worth the money. (Flex, as of version 3, is open source, and you can build Flex applications without spending any money, but you can arguably build them faster by paying for the Flex Builder IDE.) Like any IDE, Flex Builder writes code for you when you drag and drop different widgets onto the page.

There are two initial ideas I’m playing with for using Flex. One is a Web-based contact system that should improve the interaction when people go to contact me. The hope is that the form will insure that I get the information I need when questions are asked and that the information is all accurate. More on this in another post. The second idea is an AIR application for managing some of my site’s content. Last summer I started writing one using HTML and JavaScript. It’s been my intention to finish that during my sabbatical, but since I wanted to learn Flex, it made for a good practice example. This is the application that I’ve almost finished, in just about four hours over a couple of days.

I’m still all for writing AIR applications in HTML and JavaScript (I’m a big fan of AIR, period), but Flex did make several things much easier. For example, my application has one area for managing site news and another for managing book errata. In the HTML version, I had to tap into the YUI JavaScript framework to create tabs. This took a little time and learning. In the Flex app, I just dragged in a TabNavigator control into the work area (see the image):

The application's two tabs.

The application's two tabs.

The most important part of the application is the errata management. This is a multistep process. First I need to select the book involved, then I need to update the list of chapters for that book. I thought it’d also be a nice feature to show the current errata. For the HTML version of the application, I had already created a PHP script that sends the list of errata in XML format. I tied into this in my Flex version using an HTTPService object. Then a DataGrid object automatically turns the XML into a table. After editing one thing in the DataGrid’s configuration, this table immediately because sortable, which is a nice feature not easily added to the HTML version of the table I had previously made. Here’s what the errata management looks like:

Errata Management

As you can tell in the image, I haven’t done much to make the application look nice, but that’ll easily be tweaked later. You can tell from the single image, but when you select a new book from the top drop-down menu (a ComboBox object populated from an array), the drop-down menu of chapters and that DataGrid of current errata updates automatically. I’m pretty pleased and, again, it’s quite something to be able to put together in just a couple of hours.

I have a few more things to add to this, then I’ll finish actually learning Flex (because that’s the way I learn, apparently). I also need to read up on Flex and PHP, as I’m using the two technologies together.