Home > Adobe Flex > Extending the Flex TextInput control to colorize background on focus

Extending the Flex TextInput control to colorize background on focus

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!

Categories: Adobe Flex Tags:
  1. March 20th, 2009 at 08:49 | #1

    Hey Erich,

    Thanks for your work. I am definitely a “newbe” (the newbeest one) in Flex and actually looking to find a way to extend Flex pre-built components library with my own.
    I am searching “Degrafa” tool now for tiles and repetitive patterns in application background. Kinda confusing at this point.

  2. Ismael
    May 25th, 2009 at 12:19 | #2

    A simpler implementation, using the fucusIn and focusOut events:

    private function textFocusIn(ev:FocusEvent):void {
    TextInput(ev.currentTarget).setStyle(“backgroundColor”, 0xffff00);
    }

    private function textFocusOut(ev:FocusEvent):void {
    TextInput(ev.currentTarget).setStyle(“backgroundColor”, 0xffffff);
    }

  3. September 9th, 2009 at 08:53 | #3

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  4. September 17th, 2009 at 11:34 | #4

    Hey Erich,
    Good posts… very clean and simple. I did what you listed here and it worked perfect!! Nice to see a blog where that actually happens.
    I am new to Flex and i was wondering if you had time to answer a question? I would like to change the way the required=true works in the form Item tag. Instead of that red asterisk appearing next to the label is there a way to get an image inside the text input box? I would like a small image to appear in the upper right corner of the box. Any suggestions?

  5. February 4th, 2010 at 22:42 | #5

    Step 1. On focusIn, left side of flex textinput control become light blue,
    Step 2. At the validation, entire control border become red and left side of the control become,

    thick red vertical line,
    Step 3. Now when I gradually delete additional letters from the textinput control, entire red

    outline border automatically removed, but I can see red think line of the left side of the textinput

    control is still there,

    My requirements are,
    1. Validation colors need to change.
    2. After validation, remain left red think vertical line need to change to normal focusIn

    color(light blue)
    Can anyone help me to achieve this, is that event fire, CSS changes, function overwrite.

    Thanks in advanced.

  6. September 27th, 2010 at 21:16 | #6

    This is perfect! Thanks. :)

  7. April 14th, 2014 at 22:56 | #7

    I every time spent my half an hour to read this webpage’s content everyday along with a cup of coffee.

  8. April 18th, 2014 at 22:44 | #8

    Hi there, constantly i used to check web site posts here early in the morning,
    because i like to find out more and more.

  9. April 19th, 2014 at 14:13 | #9

    We absolutely love your blog and find many of your
    post’s to be what precisely I’m looking for. Would you offer guest writers
    to write content to suit your needs? I wouldn’t mind producing a post or elaborating on a
    few of the subjects you write related to here. Again, awesome
    blog!

  10. April 20th, 2014 at 17:42 | #10

    A person essentially assist to make severely posts I might state.
    That is the very first time I frequented your
    website page and up to now? I amazed with the analysis you
    made to create this actual publish amazing. Fantastic job!

  11. May 15th, 2014 at 22:58 | #11

    I visit daily some web pages and sites to read articles or reviews, however this website offers quality based posts.

  12. June 26th, 2014 at 00:27 | #12

    Most toilets will have a waterline that is etched into the tank wall to help
    as a guide. It’s very vital that you get Plumbing
    Alameda work made by a specialist. The body definitely contained a high volume of mucous and yeast.

  13. July 25th, 2014 at 09:52 | #13

    Body scrubs are one of the easiest homemade beauty products to make.
    Basically the foremost vital thing with skin care products is their
    selection. It becomes difficult to treat these
    scars and therefore acne must be treated with the help of
    oral drugs and topical creams and lotions.

  14. May 27th, 2015 at 01:32 | #14

    I have read so many articles or reviews concerning the
    blogger lovers except this paragraph is actually a nice piece
    of writing, keep it up.

  1. No trackbacks yet.