In AS3/MXML, why does binding a component's height to height / 2 work better than binding it to 50%?

Question

Take the following AS3/MXML code:

<?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="*"
        backgroundColor="#000000" showStatusBar="false" width="400" height="400"
        minWidth="0" minHeight="0">
    <s:Rect width="50%" height="50%">
        <s:fill>
            <s:SolidColor color="#0000FF"/>
        </s:fill>
    </s:Rect>
</s:WindowedApplication>

This mostly works. As I increase or decrease the size of the program, the Rect's size will scale to be 50% of the width and height of the WindowedApplication. But as I keep decreasing the window's height, the scaling down stops several pixels short of 0. This is as small as I can get the Rect to be along the y-axis:

After it gets to this point, even if I keep decreasing the size of the WindowedApplication, nothing happens. The Rect stays at exactly the same height until I start increasing the window's size again. What's more is that the Rect is 12 pixels in height, which is a pretty arbitrary number for it to be stopping on.

However if I change:

    <s:Rect width="50%" height="50%">

to:

    <s:Rect width="{width / 2}" height="{height / 2}">

the problem magically goes away:

The WindowedApplication's height is 5, and the Rect's height is about "two-and-a-half".

Why is there a distinction like this? In the previous example, I did try increasing, then decreasing the size again a few times, even slowly, but it always got stuck in the same spot. Thanks!

Answer 1

There are actually a few separate properties in play here:

• height
• percentHeight
• explicitHeight

height is really just some smoke and mirrors behind percentHeight and explicitHeight.

In the first approach, even though you are specifying the height property as a percent in MXML; the Flex Compiler does some magic behind the scenes to check for the percent character '%' and set the percentHeight property instead of width.

Since no explicit height is given when setting the percent height; the s:Rect's validateSize() method should execute. This method seems like a parallel to the measure() method of the Flex Component lifeCycle.

The validateSize() method does some checking against the explicitMinHeight property

if (!isNaN(explicitMinHeight) && measuredHeight < explicitMinHeight)
    measuredHeight = explicitMinHeight;

So, in essence, there is a minimum height; which the component's height will not go lower than.

However, in your second approach, you are not specifying a percentage you are specifying an actual value. As such the explicitHeight value is set. Because an explicit height is set that is given precedence and there is no need to execute the validateSize() method. This line in the validateSize() skips it:

if (!canSkipMeasurement())
    measure();

And

protected function canSkipMeasurement():Boolean
{
    return !isNaN(explicitWidth) && !isNaN(explicitHeight);
}

So, hopefully that makes sense.

In summary; if you set a percent height; then Flex calculates the height and there is a minimum value. If you set an explicit height; then Flex uses that value and skips its own internal calculations.

[I only did a cursory review of the Flex framework code, so you'll have to review code to dig down deeper]