The AS3 components in CS4 allow for visually showing that the component is focused, using a code generated or libary asset sprite as the focusRect. This can be changed using the focusRect property or through the #setStyle method inherited by all UIComponent’s. The outlying size of the focusRect can also be altered by setting the focusRectPadding style, which designates the number of pixels outside the size of the component that the focusRect sits. Unfortunately, if you are using TextInput, and likely TextArea, setting this padding to 0 results in hiding the focusRect behind the component skin (the grey outline for the TextInput). This is a result of the fact that the UIComponent#drawFocus sets the childIndex of the focusRect sprite to 0, essentially placing it behind the TextInput border. I wanted to create a subclass of TextInput for which I didn’t need to reset several defaults every time I used it, so I created the class below, which also fixes the 0 padding focusRect issue.
package {
import fl.controls.TextInput;
import fl.managers.IFocusManagerComponent;
/**
* Extends the TextInput component in order to set the default width and
* height, and sets the focusRectPadding to 0 (so the focus rectangle lies
* directly on top of the grey text input border skin.
*/
public class TextInput2 extends TextInput implements IFocusManagerComponent {
/**
* @constructor
*/
public function TextInput2() {
super();
textField.width = 1;
textField.height = 1;
width = 64;
height = 18;
setStyle("focusRectPadding", 0);
}
/**
* The UIComponent class, when the component is in focus, creates the
* uiFocusRect and sets it at childIndex 0. Unfortunately, the text input
* skin is then above the focus rect, and so the focus rect disappears
* when the focusRectPadding is 0. This calls the parent implementation,
* then ensures that the focus rect is visible by changing its
* child index.
*/
override public function drawFocus(draw:Boolean):void {
super.drawFocus(draw);
if (uiFocusRect != null) {
setChildIndex(uiFocusRect, numChildren - 1);
}
}
}
}UPDATE: I updated the above script to set the size of the TextField in the TextInput component to be 1×1. This also fixes the problem that the TextField is created as 100×100 pixels when it is first created (as are all dynamically generated text fields). This matters if you wish to use any customized layout (such as the Yahoo astra layout managers), and don’t want to have to call drawNow() or wait a frame to finalize layout settings in a UI.