September 2006

While rooting around on some backup disks last night, I ran into a bunch of stuff from when I was first working on Dreamweaver. In addition to an early build of Dreamweaver 2 (which I can’t seem to launch on a modern machine), I found some old internal splash screens made by various people on the team (many of whom are still around, working on Flex and Flash as well as Dreamweaver).

These splash screens were generally only visible in internal builds, but a couple of them showed up in betas. One of the ones I made ended up being the one we shipped with the first private beta of Dreamweaver 1, sometime in the fall of 1997:

Now that takes me back.

Digg!digg this | | 1 Comment

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 | | 17 Comments