Flex 4.5 Rect size issues when using percentages

Question

I have tried playing around with various combinations of the following MXML component:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="80%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:DropShadowFilter id="mainDSF" color="0x000000" alpha=".7" blurX="20" blurY="20" quality="1" distance="0" />
    </fx:Declarations>

    <s:Graphic>

        <s:Rect width="200" height="200" bottomLeftRadiusX="10" bottomLeftRadiusY="10"
                    bottomRightRadiusX="10" bottomRightRadiusY="10" filters="{[mainDSF]}"
                    horizontalCenter="0">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0x57DDF5" ratio=".05" />
                        <s:GradientEntry color="0x32D2F2" ratio=".25" />
                        <s:GradientEntry color="0x01B7E6" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
    </s:Graphic>
</s:Group>

I have been unsuccessful in my attempts to do something that should be very simple. I simply want to draw a gradient filled box with a dropshadow which, when created using the popupManager in my main MXML file, will be 80% of the screen width and 15% of the screen height.

The values currently in my code example above are in pixels but that is not desirable. They are there since FlashBuilder 4.5 makes things disappear from view as soon as I change these to percentages.

I've tried wrapping the Rect with a Graphic tag, tried various combinations of width, percentageWidth, left & right values.. etc etc etc (Note, the left, right, top and bottom properties would also be undesirable as I wish to move this box from just off the top of the screen into the top section of the MXML document)

Any help with this would be most appreciated.

This is a great question btw Gary. Good code sample and well written. — Gray

Brian Genisio Brian Genisio · Accepted Answer · 2011-06-29T01:42:32

Something odd is happening with the calculation of the percentages because of the way the popup manager works. I can't quite put my finger on it. I hacked it to work, though. Maybe someone can come up with something better, but take a look:

I removed the height/width from the root element
I removed the Graphic node
I set the rectangle to use 100% height and width
On initialization, I set the height/width to be a function of the parent.

Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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>
        <s:DropShadowFilter id="mainDSF" color="0x000000" alpha=".7" blurX="20" blurY="20" quality="1" distance="0" />
    </fx:Declarations>

    <s:initialize>
        height = parent.height * 0.15;
        width = parent.width * 0.8;
    </s:initialize>

    <s:Rect width="100%" height="100%" bottomLeftRadiusX="10" bottomLeftRadiusY="10"
                bottomRightRadiusX="10" bottomRightRadiusY="10" filters="{[mainDSF]}"
                horizontalCenter="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x57DDF5" ratio=".05" />
                <s:GradientEntry color="0x32D2F2" ratio=".25" />
                <s:GradientEntry color="0x01B7E6" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

</s:Group>

Hope this helps. Again, it is a hack, but it looks like it works ;)

Flex 4.5 Rect size issues when using percentages

1 Answers