Flex custom component FadingInjector

Apply the fading background color effect available in my Flex FadingTextInput in any UIComponent by injecting it using FadingInjector (post updated following a comment from João).

Check the first section below for a demonstration of the FadingInjector and access to its source code.

But, if you want more details and a follow-up of my learning journey, read also the second section!

• FadingInjector Flex custom component
• FadingTextInput or FadingInjector?

FadingInjector Flex custom component

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

Click to download the FadingInjector class.

Use the first ColorPicker to change the controls background color or the second ColorPicker to change the editing color.

Use the “Highlight on Focus” check box to choose between the two available behaviors:

• When checked, the injector changes the control background color into the editing color as soon as the control takes the focus. It then changes it back into the initial control background color on focus out. The change into the initial background color is immediate if the value wasn’t changed; it is done through a fading effect if the value has been changed.
• When unchecked, the control background color is changed into the editing color on focus out, and only if the value has changed.

As usual, if you have any question on this component, please leave a comment.

FadingTextInput or FadingInjector?

As I was explaining in my FadingTextInput article, I would have liked my FadingTextInput custom component to support additional features such as a prompt string or a clear button.

I consider that there are already very good implementations of such goodies. Let’s just take two examples:

• The PromptingTextInput component available in flexlib library
• The Clearable TextInput available in Justin W. Opitz’s library

So, instead of extracting these features and incorporating them in my FadingTextInput, I decided to do “the opposite”: extracting my fading behavior and “incorporating” it in these existing components.

Of course, I cannot modify the flexlib or Justin components so why not injecting my behavior in their classes?

The FadingInjector is just an extract from my FadingTextInput component (the part managing and triggering the fading effect) that now applies the fading effect on an external control instead on itself. In other words, you can attach “any” existing control to my FadingInjector and this will add the fading behavior to the control.

I quoted any because my FadingInjector relies on two mandatory elements to be able to monitor a control. The control must support a backgroundColor style and a String property providing its “value” (that can be configured using the valuePropertyName property of FadingInjector). As long as a control has these two elements, the FadingInjector can inject the fading color behavior into the control. As, by default, the value property is defined as “text”, injecting the fading behavior to a TextInput/TextArea (or any subclass of TextInput/TextArea) just requires writing:

<blogagic:FadingInjector id="myInjector" control="{myTextInput}">

So, what’s better compared to my initial FadingTextInput is that I can now easily add my fading logic to any existing customized text input component.

That seems great but… there’s still something bothering me… without really thinking about it, I put my FadingInjector in my com.blogagic.control directory. I don’t think that it’s really a control… so what? You’ll know it by reading my next article!

Note:
Following João’s comment, I added an option to change the background color of the monitored control as soon as it gets the focus.

You should anyway note that this leads to a minor issue when using the ClearableTextInput. Indeed, when tabulating to exit the control, the focus is moved to its internal clear button. So, if you want the fading effect to happen, don’t leave the field using tab, but click on any other control.

By the way, implementing João’s suggestion, I had to modify Darron Schall’s AnimateColor class such that it correctly sets the target values when being interrupted: one less bug, great; thanks again João!