Search Flex Samples

Using a border skin for a TitleWindow in Flex 3

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.


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples