Normal Flex TextInput controls automatically give you that “halo” border whenever the user highlights or sets focus to a text field. Although when Flex first came out, I thought the halo border was a very slick way to show focus, but now I want it to be even more obvious to the user as they tab through a form a select a field for text entry.

First thing I did was create a new ActionScript component that extended TextInput. My new control would work every bit the same as the standard TextInput and only wanted to alter what happens when the fields focus event was fired. Luckily, all I had to do was override the focusIn and focusOut handler’s, call super() to execute any standard logic in the parent method, and set my styles.

The resulting component ended up like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package components
{
	import flash.events.FocusEvent;
 
	import mx.controls.TextInput;
 
	/**
	 * Extends normal TextInput control but overrides focusIn and focusOut handlers
	 * to colorize the background color of the TextInput control differently when
	 * highlighted/focused
	 */
	public class MyTextInput extends TextInput
	{
		/**
		 * Constructor
		 */
		public function MyTextInput()
		{
			super();
		}
 
		/**
		 * Overrides focusInHandler to colorize background on focusIn events
		 */
		override protected function focusInHandler(event:FocusEvent):void
		{
			super.focusInHandler( event );
 
			//backgroundFocusInColor derived from master style-sheet
			this.setStyle('backgroundColor', getStyle('backgroundFocusInColor'));
		}
 
		/**
		 * Overrides focusOutHandler to reset background on focusOut events
		 */
		override protected function focusOutHandler(event:FocusEvent):void
		{
			super.focusOutHandler( event );
 
			//backgroundFocusOutColor derived from master style-sheet
			this.setStyle('backgroundColor', getStyle('backgroundFocusOutColor'));
		}
	}
}

Note the getStyle function calls. Typically, I keep all style-related colors and property values stored in a master style-sheet for my applications. This keeps the style-related values out of the views so I can easily manage them in one place.

For this new control, I defined a component-level type (or “class”) selector in my master CSS. Since this component extends TextInput, the normal styles for TextInput also apply, whereas the styles specified in the MyTextInput selector apply only to this control. Keep in mind, the “backgroundFocusInColor” and “backgroundFocusOutColor” properties are entirely made up and are not real component style properties, but it is totally legal to come up with your own style properties!

1
2
3
4
5

MyTextInput
{
	backgroundFocusInColor	: #DFF8FF;
	backgroundFocusOutColor : #FEFFAF;
}

Lastly, anywhere in my views I wish to use this component, I simply specify the newly built control:

1

<components:MyTextInput id="myTextInput" />

That’s it!