Rounding a Panel container’s corners using the cornerRadius style

Another quick sample (I’m cleaning out my Flex projects from the past year). This time we look at controlling a Panel container’s roundness versus squareness by setting the cornerRadius style.

Just drag the slider to control the corner radius of the two panels (one with a ControlBar and one without).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function dataTipFormatFunc(item:Number):String {
                return "cornerRadius = " + item;
            }
        ]]>
    </mx:Script>

    <mx:HBox id="hBox">
        <mx:Panel title="Panel w/o ControlBar" cornerRadius="{slider.value}" width="160" height="100">
            <mx:Text text="Lorem ipsum..." />
        </mx:Panel>

        <mx:Panel title="Panel w/ ControlBar" cornerRadius="{slider.value}" width="160" height="100">
            <mx:Text text="Lorem ipsum..." />
            <mx:ControlBar>
                <mx:Label text="I'm a ControlBar" />
            </mx:ControlBar>
        </mx:Panel>
    </mx:HBox>

    <mx:Spacer height="10" />

    <mx:HSlider id="slider" width="{hBox.width}" minimum="0" maximum="25" liveDragging="true" snapInterval="1" tickInterval="1" dataTipFormatFunction="dataTipFormatFunc" />

</mx:Application>