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”,
scaleGridLeft=”44″,
scaleGridRight=”360″,
scaleGridTop=”54″,
scaleGridBottom=”219″);
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.