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.

10 responses

  1. next time, ask someone else to do the “create a png asset” step.

  2. It’s all programmer art. I definitely do NOT claim to be a graphics artist 🙂

  3. Very handy, thanks!

  4. When using a custom border-skin for a TitleWindow the scrollbars of the titleWindow are not offset by the padding values. In other words, your scrollbars will cover the entire length and width of the titlewindow, not just its contentarea. Do you know of a fix for this??

  5. I have looked at the script.,

  6. I love the great insight!,

  7. Thanks! This tip saved my day

  8. Tahir Alvi-Pakistan | Reply

    Very nice, i used it , it help me to clear my vision about the skin.
    Really Thanks

  9. Very nice… I don’t really like the way the internal scaling works, so when I create panels, I nest a canvas with top,right,bottom,left constraints. It works pretty well.

  10. Thank you so much! That’s awesome.

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: