how can I write a generic property modification function in Flex/Actionscript3?

Question

I'm new to Flex, although not new to programming. I want to write a generic event handler that will be called by all my textinput boxes when they receive focus. When they have focus, I want to change the colour of the textinput box. When they lose focus, I want to restore the "inactive" color profile. I could write an ActionScript event handler for each textinput box, but we all know that's lame. :o) What I need, then, is a way to access the object which is calling the event handler.

In Delphi, I'd have written a function which passes in the Sender object, allowing me to access the calling object's properties. I'm guessing ActionScript/Flex has a completely different architecture, which is why I'm having difficulty doing this.

Thanks in anticipation!

Answer 1

You should subclass TextInput and handle the focus events in there. I think this would be the simplest way to achieve what you are looking for without having any complex code.

Answer 2

I hope I'm understanding what you're asking for... are you talking about event delegation?

This worked for me:

// 'focusOut' for blur
stage.addEventListener('focusIn', function(e:Event):void {
    // The focused control is e.target
});

Answer 3

If you want to change the look of the focused input box, you can do this by setting the focusSkin property. If you want this to happen globally, you can put a style declaration in your CSS file.

In this CSS example I'm replacing the default focusSkin (mx.skins.halo.HaloFocusRect) with an embedded PNG file.

TextInput {
  focusSkin: Embed(source="focus.png");
}

TextInput has a few properties for altering the look of the focus, like changing the opacity of the focus skin (focusAlpha property). Check the TextInput documentation for more info.