Interesting skin sizing scenario

Question

Hi folks.  I'm getting behavior that I wouldn't expect and I'm just wondering if someone can give me some logical reasoning behind it.  I've found some workarounds so I'm okay there I'm more just wanting to learn what the purpose is behind how things are happening.
Here's the main app file:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            xmlns:mx="library://ns.adobe.com/flex/mx">
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <s:Group width="100" height="100">
          <s:SkinnableContainer skinClass="MySkin" width="50%" height="50%"/>
     </s:Group>
</s:WindowedApplication>
Here's the MySkin file:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    <fx:Metadata>
    <![CDATA[
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.SkinnableContainer")]
    ]]>
    </fx:Metadata>
    <fx:Script>
        <![CDATA[        
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                super.updateDisplayList(unscaledWidth, unscaledHeight);
          trace(unscaledWidth, unscaledHeight);
        ]]>       
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:Rect width="200" height="200">
          <s:fill>
               <s:SolidColor color="#ff0000"/>
          </s:fill>
     </s:Rect>
</s:Skin>
So, pop quiz...what would you expect unscaledWidth and unscaledHeight to trace out in the skin?
Answer is: 200 x 200 (the size of the internal rect).  However, I would expect 50 x 50 because that's the size the component will actually be taking up in the parent's layout.  Am I crazy?
Thanks.
Aaron

Answer 1

Hi,
In this case, the Rect inside the skin forces the measuredMinWidth/measuredMinHeight to be 200/200, causing the unscaledWidth/unscaledHeight to be 200/200 as well. measuredMinWidth/measuredMinHeight just mean in this case the minimum width and height that fits every element into your skin.This is because on your SkinnableContainer, there are only percent sizes (which indicate that the size is flexible) and so the measured minimums are taken into account. However, if you set width/height on your SkinnableContainer to be explicit values (like 50/50), then the SkinnableContainer will size to those values instead. To avoid these cases, I would suggest not using explicit widths and heights in your skin and instead using constraints (left/right/top/bottom) or percent sizes. Then, you can size the component in your application without worry.
I'd be interested to hear what use case you have for using explicit sizing inside your skin. And please let me know if the explanation is unclear!
Thanks,
-Kevin