My First Foray into Flex

January 24, 2009 — 4 Comments

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.

If you enjoyed this post, then please consider following me using your favorite social media, the RSS feed, and/or by subscribing to my newsletter. Or go crazy, and buy one or more of my books . Thanks!

4 responses to My First Foray into Flex

  1. Flex is in one word …cool. It plays extremely well with PHP, Java, MySQL and others.
    Check out what the folks at Fantasy-Interactive did with their
    kontain.com site and the FWA theater site.

    • Thanks for the comment. Yes, Flex seems to be pretty cool. I like how easy it is to add things to a page, like tabs and datagrids. Programming is programming, so using ActionScript isn’t that different from using JavaScript, but getting help with the layout and visual tools is a big plus. I spent another hour on my first program yesterday and completed it. In the end, it took me less time to create the complete application using Flex (which, again, I don’t fully know yet) than it took me to write just part of the program in HTML/JavaScript some months ago. I’m definitely intrigued!

  2. I just picked up a copy of your book Adobe Air with AJAX, read through the first 3 chapters which was similar to the Adobe hello world tutorial but yours was definitely much better. I’ve seen Flex mentioned around sitepoint and scattered around on the cover of books but didn’t know what it was exactly. Thank you for this quick summary of it and your first impressions. Did you get your App finished and working?

    • Hello Jason. Thanks for your post and for the nice words on the book and this post. In answer to your question, I did what I often do: completed about 90% of the job and then moved on to the next thing (this is more acceptable when it’s work you’re doing for yourself!). So it’s not as complete as it will be some day, but I’ve easily added a couple of more features here and there and am still quite impressed with Flex.

Comments are great, but I'd strongly prefer any requests for assistance get made in the support forums. Thanks!