development


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

Somehow I missed the announcement, but the Flash Player 9 beta for Linux is now available on Adobe labs. If you’re a Linux user/developer, don’t forget that you can develop Flash applications today using the free Flex SDK, which runs on Linux.

I’m going to be at MAX in Las Vegas next week—I’m not speaking, but will be hanging out with the Flex folks (and hopefully playing some poker). If you see me there (my badge has my full name, “Narciso Jaramillo”), say hello!

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

The Flex team has started posting some free components on the Adobe Flex Exchange. The first one up is an auto-completing text input component. I haven’t looked at it yet, but it looks like it works the same way as a normal TextInput, with the addition of a dataProvider property that you can set to give it the list of possible completions. You can also specify a custom filter function that lets you implement other kinds of matching against the completion list (the default is to find entries with the user’s typed string as a prefix). Check it out!

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

Hi! I haven’t posted anything in awhile because (besides my usual laziness) I’ve been travelling a lot lately, visiting customers as part of our user research for the next version of Flex and Flex Builder. We did a mix of watching people work and showing them some early feature concepts, and as always, both parts were very enlightening.

This post is about a simple but useful Flex component I wrote recently: the “self-labeling” text input field. Instead of labeling a text field the usual way, by putting a label to the left of the field, you can put the label inside the text input field itself (in a light gray color); when the user clicks in the field, the label automatically goes away. It’s a nice way to conserve real estate and make the UI less visually noisy. Here’s an example:

(The search box at the bottom is another little component that uses the self-labeling text input field. In this case, the borders of the actual field are hidden, so it blends into the surrounding container. I implemented it in AS for no particularly good reason—it could easily have been an MXML component with a tiny bit of script.)

You have to be a little careful when choosing to use this type of field, because the user can’t actually see the label when they’re typing in it, or when the field is already filled in. So it’s best used when:

  • the field’s meaning is obvious from context (e.g. the caption under a photo), or
  • there’s an icon associated with the field (as in the search box above), or
  • the form is very familiar, and the meaning of the fields is obvious even when they’re filled with actual content (as in the address example above; a username/password form would be another possible example).

Here’s the source code. Using the SelfLabelingTextInput is simple—it’s just like a TextInput with one extra parameter, label, that sets what the field should show when it’s empty.

Hope you find this useful!

[Update: Per Stacy Young’s suggestion, I made it so the label also gets set as the tooltip for the field, so you can figure out what the field is even if it has content in it.]

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

Brian Riggs of the Kiwi project has worked out a way to load graphical Flex skins at runtime. This could be useful if you want to create different themes for the same app without compiling them all in at once, or if you want to create an app like WinAmp that other people can skin without recompiling your source code.

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

Jason Langdon took my reflection component and made a new version that adds blur, which actually makes it look a good deal more realistic (higher levels of blur make it look like it’s on a less polished “table”). Very cool.

Digg!digg this | del.icio.usdel.icio.us | 1 Comment

UPDATE 2/21/2008: See this post for the latest version of Reflector.as. I’ll reintegrate it into the source code linked to from this post eventually, but for now you’ll need to download the code from this post, then replace Reflector.as with the version from the newer post.

Okay, enough highfalutin’ chatter. This entry actually has (arguably) useful code in it.

The reflection effect is destined to become one of those gratuitous UI clichés, like brushed metal and gleaming highlights. But hey, the kids seem to like it, so I figured I’d try to make a similar component in Flex.

Before jumping into the explanation, here’s the demo:

You can drag the panel around to watch the reflection follow it, and play with the sliders to tweak the look of the reflection.

I’m not the first to attempt this: Trey Long created a reflection effect in an early beta of Flex 2 (the demo pointed to from that link no longer works with the shipping version of Flash Player 9). However, his version created static reflections—so, for example, you could see the reflection of a Button, but if you moused over or clicked on it, the reflection wouldn’t update to reflect (no pun intended) the visual changes to the Button.

I decided to make the reflection “live”—as you interact with the components being reflected, the reflection actually updates in (near) real-time. I also componentized the reflector itself, so you can just target it at a component and it automatically positions itself appropriately. I used code very similar to Trey’s reflection filter to render the reflection bitmap, though the way I actually draw it to the screen is a little different.

Read on for an explanation of the code: (more…)

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

« Previous Page