Determining the inner content dimensions in a Spark Panel container in Flex 4

The following example shows how you can determine the internal content dimensions in a Spark Panel container in Flex 4 by checking the contentGroup skin parts width and height properties.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<s:Application name="Spark_Panel_contentGroup_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="Spark Panel controlBarVisible" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function lbl1_enterFrameHandler(evt:Event):void {
                lbl1.text = pnl.width + "x" + pnl.height;
            }
 
            protected function lbl2_enterFrameHandler(evt:Event):void {
                lbl2.text = pnl.contentGroup.width + "x" + pnl.contentGroup.height;
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            controlBarVisible="{chckBx.selected}"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Button label="Spark Panel control bar contents" />
        </s:controlBarContent>
 
        <mx:Form>
            <mx:FormItem label="Panel width/height:">
                <s:Label id="lbl1" enterFrame="lbl1_enterFrameHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="Panel contentGroup width/height:">
                <s:Label id="lbl2" enterFrame="lbl2_enterFrameHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:Panel>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.