You can get the application by going to:
http://airquickfix.appspot.com/

All of the source code can be found in the air-quick-fix project on Google Code.

The division of work between Dick and I worked really well. Dick worked on the back-end code in Python while I worked in Flex on the front-end. We used PyAMF to connect the back-end to the front-end. PyAMF made the whole process very easy. The only challenge was in figuring out how to transform the data types correctly. The first version of the application came together in a couple of hours.

The back-end Python code is really simple. Here is the method that is called from the client (trimmed down a bit):

def fiximage(data):
 
  image_in = Image(str(data))
  image_in.im_feeling_lucky()
 
  image_out = ByteArray()
  image_out.write(image_in.execute_transforms())
 
  return image_out

In this code, the data which is passed to the method is just a ByteArray containing the image. The data is turned into an Image, the im_feeling_lucky transform is specified, then run – taking the bytes and sending them back to the client.

The front-end Flex code that sends the image to the back-end is also really simple:

The RemoteObject (AMF networking API in Flex) is defined as:

<mx:RemoteObject id="ro" destination="image" endpoint="http://airquickfix.appspot.com/image/">

The function which actually makes the request to the back-end is:

var stream:FileStream = new FileStream();
stream.open(startFile, FileMode.READ);
var imageData:ByteArray = new ByteArray();
stream.readBytes(imageData);
ro.fiximage(imageData);

In this Flex code the image file is opened, read into a ByteArray, then sent to the fiximage method on the back-end.

There is a bunch of other Flex code that creates the UI, handles selecting, saving, and dragging and dropping images but is all pretty straightforward.

Dick and I really enjoyed creating this application together. It shows off some of the strengths of each technology well and shows how easy it is to use the technologies together. Let us know what you think about the application.

The week following CodeMash there will be a RIA Jam in Ann Arbor. The RIA Jam will be hosted by SRT Solutions and Bruce Eckel. My friend and co-RIA-conspirator, Josh Holmes, will also be there helping people learn Silverlight while I help people learn Flex and AIR. In February Bruce will also be hosting another Flex Jam in Crested Butte, Colorado. The Jam in February will cover Flex, TurboGears, integrating the two and hopefully some exploratory work into integrating Flex with Lift, the new Scala based web framework. I will be there helping people learn Flex and undoubtedly learning some new things myself.

The Jam and Open Spaces style events that Bruce hosts are my favorite events of the year. The events in Crested Butte are always so refreshing. While most conferences keep me indoors for days at a time, Bruce’s event encourage attendees to get outside, into open spaces. For me this helps to relax my mind which makes it much easier to learn and focus. At the Crested Butte events in the summer we hike for a few hours every day and in the winter we ski / snowshoe. These events are also incredibly affordable since there isn’t a high cost associated with putting them on. And as a bonus attendees to the Jams will receive a free copy of Flex Builder 2. If you are learning Flex, no matter what level, you will learn more in these few days than you will at any other conference. They are hands-on events so you actually learn through experimentation and peer interaction.

I’ll be at many other events in 2008 and hope to see many of you somewhere along the way. Until then have a happy and safe holiday season.

Continue reading to learn more about what we built, how we built it, and how you can use it…

The DisplayShelf is similar to the iTunes cover art display. It’s built with the free Flex SDK, open source, and MIT licensed. Earlier in the week I made the DisplayShelf work with TurboGears, but it wasn’t yet a reusable widget. Kevin walked me through the process of converting my test application to a real widget. In about twenty minutes we had most of the widget setup. To expedite the process we used an existing project to test the new widget. This particular project had previously been used to get the DisplayShelf running, sans-widget. Very few times in my sixteen years of programming adventures have things with this many moving parts worked on the first try. I coded the 3 lines nessecary to use the new widget, went to my browser and hit reload, one hundred percent convinced I would see an error message. I saw the DisplayShelf, which I thought was actually still cached somewhere from my previous project. I reloaded again, expecting to see an error. No error. I reloaded the TurboGears server, again expecting to see an error. No error. What is wrong? Where is the error? Surely this didn’t work first try! I viewed the source of the web page and sure enough it was using the new DisplayShelf widget! Everyone (excluding Kevin) was pretty amazed. I guess Kevin is accustomed to these types of successes with TurboGears.

The next step was to upload the new widget to the Cheese Shop, a home for Python based widgets. Kevin walked me though the process. I expected this to be tedious… Packaging things up in some strange way, navigating a difficult web site, uploading, etc. Kevin again blew us away with the simplicity of doing this sort of thing. Literally it was two commands to get our widget on the Cheese Shop. Again everyone except Kevin is amazed.

Now that the widget was built and posted in the Cheese Shop it was time to test using the widget from scratch. I did this with Kevin’s help, while someone else tired on their own computer. Within a few minutes we both had applications which were using the new widget! Again everyone except Kevin is amazed. See the recurring theme? Coming from a variety of backgrounds we couldn’t believe how easy it was to build web applications and use widgets with TurboGears. Kevin just smiled as we all had epiphanies.

Using Flex for rich widgets in TurboGears applications is a great combination of technologies. You get two great programming models and seamless interaction with both the FABridge and with TurboGears’s JSON support. A few months ago Bruce Eckel and I recorded a screencast of us building an application with a Flex front-end and a TurboGears back-end. The application we built used JSON to expose the TurboGears back-end to Flex. We had really great success with this approach. At CodeMash we took another approach and used the FABridge to pass objects from TurboGears to a Flex application. Both approaches work really well and depending on what you are building, one may be more applicable than another.

Now lets walk through how you can use the DisplayShelf component in your TurboGears applications. This assumes that you already have TurboGears installed.

1) Get the DisplayShelf component from the Cheese Shop:

2) Create a new TurboGears application using the quickstart wizard:

3) In the created project directory, start the TurboGears server with the created start script (your start script name is based on your package name):

4) Add the DisplayShelf widget to your controllers.py file:

5) Return the DisplayShelf widget in your default template:

6) Copy some images into the static/images directory.

7) Replace the body of the welcome.kid file with the DisplayShelf (specify an array of the images in your static/images directory):

8) Load http://localhost:8080/ in your browser.

That’s it! You are now using the DisplayShelf in your TurboGears app! If you start the TurboGears toolbox and go to http://localhost:7654/widgets/ you will also find the DisplayShelf in the Widget Browser.

It’s that easy! Thanks Kevin and Mark for all your help this past week getting me up-to-speed on TurboGears! TurboGears truly is a world class web application framework! And the widget system is by far the best I’ve ever seen! Now lets get some more Flex based widgets created! :)

Recently Bruce Eckel and I had the chance to record a screencast of us pair programming with Flex & TurboGears:
http://www.adobe.com/devnet/flex/articles/eckel_video.html

The results were great – a fantastic UI on top of a simple back-end! Both Bruce and I learned a lot creating this screencast and I hope you will enjoy watching it.