I’m back from MAX, and it was a great time. I’m amazed by how much traction Flex seems to have gotten—granted, the MAX attendees are people who already love Adobe/Macromedia, but it was still great to meet so many people who were enthusiastic about Flex. It was also very cool to see the first public demos of Apollo—I think they really helped people understand why we’re excited about it.

(Oh yeah, and I won a lot of money at no-limit hold ‘em. One of my adversaries turned out to be an analyst; after I put him all-in and won a big hand, he told me he was so totally going to write bad stuff about Adobe in retribution. I’m pretty sure he was joking.)

But now to business.

Here’s something I hacked up during MAX. (If any of my coworkers are reading this: No, I didn’t work on it during your talk. Okay, maybe I did, just a little.)

Click: Anatomy of a simple Flex app. (I recommend maximizing the browser window.)

The sample app in it is one you’ve probably seen before—a simple Flickr browser. The more interesting part is the annotated source view, which you can get to by clicking “FlickrBrowser.mxml” at the top. You can click on annotations, click on links within the annotations, or step through the walkthrough using the arrows on the right.

So, what’s this about?

While looking through some sample Flex apps, it occurred to me that it would be good to have a nicer way to document sample code. Having a bunch of comments in the code explaining conceptual stuff disrupts the readability of the code, while having a completely separate article walking through the app makes it so you have to keep bopping back and forth between the code and the article. So I hacked up this annotated code viewer.

This particular sample is obviously pretty simple if you already know Flex, but I thought it might be a good intro for people who are new to the platform, and you could imagine applying it to more complicated samples like FlexStore. If you know anyone who’s curious about Flex, feel free to forward this to them and see if it helps them understand what it’s about.

The code for the annotated viewer is hacky/ugly and not generalized yet, but I thought I’d put this out there to see if anyone would be interested in seeing more code samples annotated like this (or using it for their own code). If so, please let me know, and I’ll spend more time making a nice reusable version. And, of course, thoughts on how to improve it (either the viewer itself or the content/annotations within it) are welcome.

(By the way, there’s a known bug that if you scroll the code viewer, the annotations don’t scroll with it. I haven’t found a good workaround for this problem yet.)

Let me know what you think. Thanks!

(Update: I obscured my Flickr API key in the app and the source—thanks to my coworker Jono for pointing this out. You can get your own at http://www.flickr.com/services/api/keys/.)

Digg!digg this | del.icio.usdel.icio.us | 19 Comments