In my current project, I have a custom component that extends TitleWindow. The client has provided skins for just about everything, including the close buttons for several components.
When I applied these skins and styles, I just could not get the close button to appear WHERE I wanted it to appear, nor did it seem to be the right size.
I tried adjusting nearly every style property I could find all with no results.
I next decided to override the
createChildren() method, then try to get a handle on the close button there. No luck.
Finally, I discovered an easy way to get a handle on the closeButton:
var closeButton:Button = this.mx_internal::closeButton;
//add new closeButton properties at will
closeButton.x += [new value]
closeButton.height = [new value]
closeButton.width = [new value]
I added this to the updateDisplayList
() handler instead of
createChildren() since I needed to see and adjust properties that would not have been set yet in
From there, I could at least see the darn thing in debugger and decide what properties to manually adjust.
1. I noticed that despite my defined styles for the component, that the
closeButton had it’s own non-inherited style properties for
paddingRight equal to 10. This was one of the culprits keeping my button from appearing where I wanted it to appear, although the main issue was solved by adjusting
closeButton.x by a few pixels.
2. Strangely enough – despite manually adjusting the
paddingLeft properties of
closeButton, only the first one altered would actually change. In my case, I made this the
paddingRight since it was the troubling setting. Still, there’s something odd about a setting being so stubborn. Maybe it has something to do with the draw/measure aspects of the component lifecycle.
Hopefully my headache will become your blessing!