Need a QuickFix? Try Google App Engine, Adobe AIR, and Flex

Last week I spent a few hours with Dick Wall of the Java Posse working on an application which combines Google App Engine, Adobe AIR, and Flex. This was a fun experiment that turned into a pretty cool application. The application, named QuickFix, sends an image to Google App Engine which does an “I’m Feeling Lucky” transformation on the image and sends it back. Here’s a screenshot of it fixing one of the photos I took at the Java Posse Roundup this past winter:

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.

Upcoming Events: CodeMash, RIA Jam, Flex-TurboGears Jam

It’s hard to believe that 2007 is almost over. It’s been an amazing year! Thanks for reading and contributing. I’m looking forward to another great year in 2008. And it all begins when I hit the road the second week of January for CodeMash 2008. I went to CodeMash last year and really enjoyed the conference, especially the water slides. :) I’ll be speaking again at CodeMash 2008 about Adobe AIR and Flex.

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.

Flex and TurboGears at CodeMash – DisplayShelf Widget

This past week I spoke at the CodeMash conference. It was a really great event full of stimulating conversation. Even more fun than trying to surf in the wave machine was an Open Spaces style session that Kevin Dangoor (creator of TurboGears) and I hosted. We had planned to just sneak off into a corner and turn Ely Greenfield‘s DisplayShelf component into a TurboGears Widget. However, word quickly spread that we were going to do this and everyone wanted to watch as we coded. We had a bunch of fellow geeks huddled around every spare laptop and monitor we could find. I shared my screen with VNC so that everyone could watch what Kevin and I were doing. It was by far the best geek-out session I have had in a long time! Check out a screenshot of the DisplayShelf widget in a TurboGears application, showing a picture of our geek-out session:

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

Read more

Bruce Eckel is Thinking in Flex!

Update: You can download the source code for this screencast here.

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.