Couple of days ago, I had to write a custom container that would layout its children in a very specific way (four items in a diamond formation) and I also had to create a skin that would draw some lines connecting each of these items. I started by overriding the updatedisplaylist function, and put some code in to determine positions by the unscaledwidth and unscaledheight. Great!, next I added a sprite to the rawchildren on the container and programmatically drew some lines, Great! Perfect!
Then the spec changes…. They wanted a double border added to the container skin, to give it a nicer look (it also had to be controlled from CSS). So off I went to extend the haloborder skin to add another innerborder. Now, all skins that change the size of the border must also change its borderMetrics function, so that whenever a container uses this new border skin, it can know how much space it can use to draw its child objects.
After running it, I discovered that all the uicomponents were out of alignment to programmatically drawn lines, they all seemed to be slightly offset. Turns out that if you use extend container, all child UIcomponents will automatically take into account the edgemetrics from the chrome, and position themselves accordingly. That’s even after you use UIcomponent(someObj).move(x,y)! thats where viewMetricsAndPadding():EdgeMetrics comes in. This will tell you how much padding you need to save for when the scrollbar or thickend border comes into play. So anytime you are writing a custom component for non standard layout, don’t forget to check how much space you actually have!