The Perils of Adjusting Close Buttons in TitleWindows

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 createChildren().

From there, I could at least see the darn thing in debugger and decide what properties to manually adjust.

Couple comments….
1. I noticed that despite my defined styles for the component, that the closeButton had it’s own non-inherited style properties for paddingLeft and 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 paddingRight and 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!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: