Flex custom component FadingTextInput (Edit in Place building block)

FadingTextInput is a Flex custom component based on TextInput that provides a background color fading effect when its content is modified.

If you’re just interested by the FadingTextInput component and its source code, check the first section below.

But if you’re curious on why I qualified it as an Edit in Place building block or want a clue concerning the next article, don’t forget to read the second section.

• FadingTextInput Flex custom component
• FadingTextInput: an “Edit in Place” building block

FadingTextInput Flex custom component

Here is an application demonstrating the FadingTextInput behavior (right click to view source code):

You can download the FadingTextInput class.

I hope that the source code is commented enough to explain the approach I took when building this Flex custom component. Anyway, if anything remains unclear for you, don’t hesitate to ask for clarifications by leaving a comment.

FadingTextInput: an “Edit in Place” building block

After having read Designing Web Interfaces by Theresa Neil and Bill Scott, I decided it would be fun to work on some Edit in Place components. And, of course, it would also be a good step in my Flex learning journey!

I decided to start by customizing a Flex TextInput such that, at the end of the editing process, its background color fades from the editing color to the regular background color.

My first result is the FadingTextInput custom component (see FadingTextInput in action above).

While developing this FadingTextInput custom component, I was having one new idea every two minutes! So it was quite difficult to remain focused on completing something instead of continuously wanting to change everything

The main aspects I kept in mind were: Invitation & Fading.

For the Invitation part, I added customizable tooltips and decided that the border of the FadingTextInput would be drawn only when hovering over the control.

For the Fading part, I was lucky to discover Darron Schall’s AnimateColor class since I’m not (yet) using Flex 4 (which provides this effect natively).

After having completed these two objectives, I looked at my todo list and found: “manage a prompt string when the field is empty”. Nice! Let’s google it… ouch… so many results! and all of them are, as my FadingTextInput, a customized version of TextInput.

So, now that I have a lot of brilliant TextInput sub classes providing very good implementations of the prompt string requirement, what do I do with my own FadingTextInput? Do I update it to incorporate extracts of the other classes I found? Do I contact the other developers asking them to integrate my own features in their components?

I don’t think so!

This made me realize that my approach could have been better¹.

But, this will be for the next article!