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!
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.
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);
}
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
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?
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.
This is perfect! Thanks.
I every time spent my half an hour to read this webpage’s content everyday along with a cup of coffee.
Hi there, constantly i used to check web site posts here early in the morning,
because i like to find out more and more.
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!
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!
I visit daily some web pages and sites to read articles or reviews, however this website offers quality based posts.
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.
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.
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.
I just like the helpful information you provide for your articles. I will bookmark your blog and check again here regularly. I am moderately sure I will be told lots of new stuff proper here! Best of luck for the following!
วันสำคัญหลายๆ วันในชีวิตของเรา เช่นวันเกิด วันแต่งงาน วันสำคัญของสถานที่ต่างๆ.
id=”firstHeading” class=”firstHeading mw-first-heading”>Search гesults
Help
Engliah
Tools
Tools
mоve to sidebar hide
Acttions
website
Tһis is a topic that’s close tο mу heart… Τake
care! Exatly ԝhere are youｒ contact details tһough?
id=”firstHeading” class=”firstHeading mw-first-heading”>Search results
Ꮋelp
English
Tools
Tools
mоve to sidebar hide
Actions
Gｅneral
Excellent weblog right here! Also your website lots up fast!
What host are you using? Can I am getting your associate hyperlink to
your host? I wish my web site loaded up as fast as yours lol
Dapat info dari teman tentang blog ini, ternyata benar isinya daging semua, top markotop, Terima kasih, IDProperti.com | Pasang Iklan Properti
Dapat info dari teman tentang blog ini, ternyata benar isinya daging semua, top markotop, Terima kasih, IDProperti.com | Pasang Iklan Properti
Salam kenal admin, jangan lupa berkunjung ke website kita jg ya IDProperti.com | Pasang Iklan Properti
Your dedication to providing informative content is commendable Best regards from IDProperticom
May I asked for your contact? Reply to my email Agen888
Agen888 will visit this blog always, thanks
Your dedication to providing informative content is commendable Best regards from IDProperticom
Engaging and informative as always Thanks for sharing! IDProperticom
hello there and thank you for your info – I have
certainly picked up something new from right here.
I did however expertise some technical points using this web site, as I experienced to reload the site many times previous to I could
get it to load correctly. I had been wondering if your web
host is OK? Not that I am complaining, but slow loading instances times
will very frequently affect your placement in google and could damage your high
quality score if advertising and marketing with Adwords.
Anyway I’m adding this RSS to my e-mail and can look out for much more of
your respective intriguing content. Make sure you
update this again soon.
Agen888 secret service, watch the trailer now
Your articles consistently deliver Thank you for sharing your expertise IDProperticom
Thanks, this is a really great article Regards, Pasang Iklan Properti
They are additionally known for using face paint throughout rituals
which is applied in traces and dots of varied colours. Nevertheless, this
food plan modified after the arrival of the Spaniards, when the
usage of firearms led to the extinction of many food animals.