Category Archives: TitleWindow

Using a border skin for a TitleWindow in Flex 3

Happy Valentines Day, everyone! In celebration of the day, I thought I’d put together a very cheesy, border skin with a lot of hearts to use for a TitleWindow. It’s pretty simple to use a border skin with a TitleWindow, but, in my opinion, it’s not obvious what you have to do to make your content layout correctly.

In the following example, I am using a png asset that I’ve created as the skin. When embedding it, I am defining a scale-9 grid:

border-skin: Embed(“hearts_skin.png”,

This ensures that the area of my skin that I want to have as a border for the TitleWindow stretches or shrinks correctly regardless of the content in my container. Next, I define where my content will live inside the TitleWindow by using the padding styles:

paddingTop: 55;
paddingLeft: 45;
paddingRight: 45;
paddingBottom: 40;

If you do not specify padding styles in the TitleWindow, your content will overlap with the title and/or close button.

Have fun with this example!

Demo: skinnedTitleWindow.swf

Source: skinnedTitleWindow.mxml, hearts_skin.png

In the example, you can click the button “add child to TitleWindow” to see the TitleWindow grow, but, it should keep the correct proportions of the borders.


Get every new post delivered to your Inbox.