Flex Examples » cornerRadius http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the corner radius on the Spark TitleWindow container in Flex 4 http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/ http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/#comments Wed, 28 Apr 2010 00:56:27 +0000 Peter deHaan http://blog.flexexamples.com/?p=2881 The following example shows how you can set the corner radius on the Spark TitleWindow container in Flex 4 by setting the cornerRadius style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/ --> <s:Application name="Spark_TitleWindow_cornerRadius_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:layout> <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" /> </s:layout> <s:controlBarContent> <s:Label text="cornerRadius:" /> <s:HSlider id="sl" maximum="15" /> </s:controlBarContent>   <s:TitleWindow id="tw1" title="Spark [...]]]> The following example shows how you can set the corner radius on the Spark TitleWindow container in Flex 4 by setting the cornerRadius style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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"?>
<!-- http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/ -->
<s:Application name="Spark_TitleWindow_cornerRadius_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:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:Label text="cornerRadius:" />
        <s:HSlider id="sl" maximum="15" />
    </s:controlBarContent>
 
    <s:TitleWindow id="tw1"
            title="Spark TitleWindow without control bar"
            cornerRadius="{sl.value}"
            controlBarVisible="true"
            width="250" height="120"
            horizontalCenter="0" verticalCenter="0">
        <s:Label text="Spark TitleWindow contents" left="10" top="10" />
    </s:TitleWindow>
 
    <s:TitleWindow id="tw2"
            title="Spark TitleWindow with control bar"
            cornerRadius="{sl.value}"
            controlBarVisible="true"
            width="250" height="120"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Label text="Control bar content" />
        </s:controlBarContent>
        <s:Label text="Spark TitleWindow contents" left="10" top="10" />
    </s:TitleWindow>
 
</s:Application>

View source is enabled in the following example.

You can also set the cornerRadius style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/ -->
<s:Application name="Spark_TitleWindow_cornerRadius_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:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|TitleWindow {
            cornerRadius: 15;
        }
    </fx:Style>
 
    <s:TitleWindow id="tw1"
                   title="Spark TitleWindow without control bar"
                   controlBarVisible="true"
                   width="280" height="120"
                   horizontalCenter="0" verticalCenter="0">
        <s:Label text="Spark TitleWindow contents" left="10" top="10" />
    </s:TitleWindow>
 
    <s:TitleWindow id="tw2"
                   title="Spark TitleWindow with control bar"
                   controlBarVisible="true"
                   width="280" height="120"
                   horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Label text="Control bar content" />
        </s:controlBarContent>
        <s:Label text="Spark TitleWindow contents" left="10" top="10" />
    </s:TitleWindow>
 
</s:Application>

Or you can se the cornerRadius style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/ -->
<s:Application name="Spark_TitleWindow_cornerRadius_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:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:Label text="cornerRadius:" />
        <s:HSlider id="sl" maximum="15" change="sl_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sl_changeHandler(evt:Event):void {
                tw1.setStyle("cornerRadius", sl.value);
                tw2.setStyle("cornerRadius", sl.value);
            }
        ]]>
    </fx:Script>
 
    <s:TitleWindow id="tw1"
                   title="Spark TitleWindow without control bar"
                   controlBarVisible="true"
                   width="280" height="120"
                   horizontalCenter="0" verticalCenter="0">
        <s:Label text="Spark TitleWindow contents" left="10" top="10" />
    </s:TitleWindow>
 
    <s:TitleWindow id="tw2"
                   title="Spark TitleWindow with control bar"
                   controlBarVisible="true"
                   width="280" height="120"
                   horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Label text="Control bar content" />
        </s:controlBarContent>
        <s:Label text="Spark TitleWindow contents" left="10" top="10" />
    </s:TitleWindow>
 
</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.

 
]]> http://blog.flexexamples.com/2010/04/27/setting-the-corner-radius-on-the-spark-titlewindow-container-in-flex-4/feed/ 5 Setting the corner radius on a Spark BitmapImage control in Flex 4 http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/#comments Mon, 08 Feb 2010 07:46:14 +0000 Peter deHaan http://blog.flexexamples.com/?p=2448 The following example shows how you can set the corner radius on a Spark BitmapImage control in Flex 4 by creating a mask with a corner radius (in this case a Spark BorderContainer container with the cornerRadius style set).

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ --> <s:Application name="Spark_BitmapImage_cornerRadius_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> <mx:Form> <mx:FormItem label="cornerRadius:"> [...]]]> The following example shows how you can set the corner radius on a Spark BitmapImage control in Flex 4 by creating a mask with a corner radius (in this case a Spark BorderContainer container with the cornerRadius style set).

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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"?>
<!-- http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_cornerRadius_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>
        <mx:Form>
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="sl"
                        minimum="0"
                        maximum="{bmpImg.height/2}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:BitmapImage id="bmpImg"
            source="@Embed('assets/image1.jpg')"
            horizontalCenter="0" verticalCenter="0">
        <s:mask>
            <s:BorderContainer id="bmpMask"
                    cornerRadius="{sl.value}"
                    width="{bmpImg.width}" height="{bmpImg.height}" />
        </s:mask>
    </s:BitmapImage>
 
</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/ -->
<s:Application name="Spark_BitmapImage_cornerRadius_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.core.FlexGlobals;
            import mx.events.ResizeEvent;
 
            import spark.components.BorderContainer;
            import spark.components.HSlider;
            import spark.primitives.BitmapImage;
 
            [Embed("assets/image1.jpg")]
            protected const IMG:Class;
 
            protected var sl:HSlider;
            protected var bmpImg:BitmapImage;
            protected var bmpMask:BorderContainer;
 
            protected function init():void {
                var image:Object = new IMG();
 
                sl = new HSlider();
                sl.maximum = image.height / 2;
                sl.addEventListener(Event.CHANGE, sl_changeHandler);
 
                var frmItm:FormItem = new FormItem();
                frmItm.label = "cornerRadius:";
                frmItm.addElement(sl);
 
                var frm:Form = new Form();
                frm.addElement(frmItm);
 
                Application(FlexGlobals.topLevelApplication).controlBarContent = [frm];
 
                bmpMask = new BorderContainer();
                bmpMask.setStyle("cornerRadius", sl.value);
                bmpMask.width = image.width;
                bmpMask.height = image.height;
 
                bmpImg = new BitmapImage();
                bmpImg.source = image;
                bmpImg.mask = bmpMask;
                bmpImg.horizontalCenter = 0;
                bmpImg.verticalCenter = 0;
                addElement(bmpImg);
            }
 
            protected function sl_changeHandler(evt:Event):void {
                bmpMask.setStyle("cornerRadius", sl.value);
            }
        ]]>
    </fx:Script>
 
</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.

 
]]> http://blog.flexexamples.com/2010/02/07/setting-the-corner-radius-on-a-spark-bitmapimage-control-in-flex-4/feed/ 4 Setting the corner radius on a Spark Border container in Flex 4 http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/#comments Sat, 05 Sep 2009 06:18:29 +0000 Peter deHaan http://blog.flexexamples.com/?p=1843 The following example shows how you can set the corner radius on a Spark Border container in Flex 4 by setting the cornerRadius style.

Full code after the jump.

The following example requires Flex SDK 4.0.0.10008 or later.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ --> <s:Application name="Spark_Border_cornerRadius_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:controlBarContent> <s:Label text="cornerRadius:" /> <s:HSlider [...]]]> The following example shows how you can set the corner radius on a Spark Border container in Flex 4 by setting the cornerRadius style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

The following example requires Flex SDK 4.0.0.10008 or later.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <s:Label text="cornerRadius:" />
        <s:HSlider id="slider"
                minimum="0"
                maximum="100"
                value="2" />
    </s:controlBarContent>
 
    <s:Border id="brdr"
            cornerRadius="{slider.value}"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="lbl"
                 text="width:{brdr.width}, cornerRadius:{brdr.getStyle('cornerRadius')}"
                 horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</s:Application>

View source is enabled in the following example.


You can also set the cornerRadius style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Border {
            cornerRadius: 50;
        }
    </fx:Style>
 
    <s:Border id="brdr"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="lbl"
                 text="width:{brdr.width}, cornerRadius:{brdr.getStyle('cornerRadius')}"
                 horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</s:Application>

Or you can set the cornerRadius style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <s:controlBarContent>
        <s:Label text="cornerRadius:" />
        <s:HSlider id="slider"
                minimum="0"
                maximum="100"
                value="2"
                change="slider_change(event);"/>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function slider_change(evt:Event):void {
                brdr.setStyle("cornerRadius", slider.value);
            }
        ]]>
    </fx:Script>
 
    <s:Border id="brdr"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="lbl"
                 text="width:{brdr.width}, cornerRadius:{brdr.getStyle('cornerRadius')}"
                 horizontalCenter="0" verticalCenter="0" />
    </s:Border>
 
</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.

 
]]> http://blog.flexexamples.com/2009/09/04/setting-the-corner-radius-on-a-spark-border-container-in-flex-4/feed/ 10 Setting the corner radius on an MX MenuBar control in Flex 4 http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/ http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/#comments Sun, 23 Aug 2009 14:08:57 +0000 Peter deHaan http://blog.flexexamples.com/?p=1704 The following example shows how you can set the corner radius on a Halo MenuBar control in Flex 4 by creating a custom skin and setting the radiusX and radiusY properties.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/ --> <s:Application name="Halo_MenuBar_cornerRadius_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> <mx:Form paddingTop="0" paddingBottom="0"> <mx:FormItem label="cornerRadius:"> <s:HSlider [...]]]> The following example shows how you can set the corner radius on a Halo MenuBar control in Flex 4 by creating a custom skin and setting the radiusX and radiusY properties.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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"?>
<!-- http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/ -->
<s:Application name="Halo_MenuBar_cornerRadius_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>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="slider"
                        minimum="0"
                        maximum="{menuBar.height/2}"
                        value="2" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            cornerRadius="{slider.value}"
            backgroundSkin="skins.CustomButtonSkin"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:XML source="data.xml" />
        </mx:dataProvider>
    </mx:MenuBar>
 
</s:Application>

And the custom skin class, skins/CustomButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:local="mx.skins.spark.*"
        minWidth="21" minHeight="19" 
        alpha.disabled="0.5">
    <!-- states -->
    <local:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </local:states>
 
    <fx:Script>
        <![CDATA[
            /* Define the border items.*/
            static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
 
            override protected function get borderItems():Array {
                return borderItem;
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:Number id="cornerRad">{getStyle("cornerRadius")}</fx:Number>
    </fx:Declarations>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1"
            radiusX="{cornerRad}" radiusY="{cornerRad}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                        color.downStates="0xFFFFFF"
                        alpha="0.01"
                        alpha.downStates="0" />
                <s:GradientEntry color="0x000000" 
                        color.downStates="0xFFFFFF" 
                        alpha="0.07"
                        alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            radiusX="{cornerRad}" radiusY="{cornerRad}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                        color.selectedUpStates="0xBBBDBD"
                        color.overStates="0xBBBDBD" 
                        color.downStates="0xAAAAAA" 
                        alpha="0.85" 
                        alpha.selectedOver="1" />
                <s:GradientEntry color="0xD8D8D8" 
                        color.selectedUpStates="0x9FA0A1"
                        color.over="0x9FA0A1" 
                        color.selectedOver="0x8E8F90"
                        color.downStates="0x929496" 
                        alpha="0.85"
                        alpha.selectedOver="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9"
            radiusX="{cornerRad}" radiusY="{cornerRad}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9"
            radiusX="{cornerRad}" radiusY="{cornerRad}">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                    alpha="0.33" 
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22" 
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1"
            radiusX="{cornerRad}" radiusY="{cornerRad}"
            excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8"
                        alpha.overStates="0.22"
                        alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="69" height="20"
            radiusX="{cornerRad}" radiusY="{cornerRad}">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1" 
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry id="borderEntry2" 
                        alpha="0.75" 
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</local:SparkSkinForHalo>

View source is enabled in the following example.

You can also set the backgroundSkin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/ -->
<s:Application name="Halo_MenuBar_cornerRadius_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>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="slider"
                        minimum="0"
                        maximum="{menuBar.height/2}"
                        value="2" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|MenuBar {
            backgroundSkin: ClassReference("skins.CustomButtonSkin");
        }
    </fx:Style>
 
    <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            cornerRadius="{slider.value}"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:XML source="data.xml" />
        </mx:dataProvider>
    </mx:MenuBar>
 
</s:Application>

Or, you can set the backgroundSkin style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/ -->
<s:Application name="Halo_MenuBar_cornerRadius_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>
        <mx:Form paddingTop="0" paddingBottom="0">
            <mx:FormItem label="cornerRadius:">
                <s:HSlider id="slider"
                        minimum="0"
                        maximum="{menuBar.height/2}"
                        value="2" />
            </mx:FormItem>
            <mx:FormItem>
                <s:ToggleButton id="tBtn"
                        label="CustomButtonSkin"
                        change="tBtn_changeHandler(event)" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonSkin;
            import mx.skins.spark.ButtonSkin;
 
            protected function tBtn_changeHandler(evt:Event):void {
                if (tBtn.selected) {
                    menuBar.setStyle("backgroundSkin", CustomButtonSkin);
                } else {
                    menuBar.setStyle("backgroundSkin", ButtonSkin);
                }
            }
        ]]>
    </fx:Script>
 
    <mx:MenuBar id="menuBar"
            labelField="@label"
            showRoot="false"
            cornerRadius="{slider.value}"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <fx:XML source="data.xml" />
        </mx:dataProvider>
    </mx:MenuBar>
 
</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.

 
]]> http://blog.flexexamples.com/2009/08/23/setting-the-corner-radius-on-a-halo-menubar-control-in-flex-4/feed/ 3 Setting the corner radius on the Halo Alert control in Flex 4 http://blog.flexexamples.com/2009/06/20/setting-the-corner-radius-on-the-halo-alert-control-in-flex-4/ http://blog.flexexamples.com/2009/06/20/setting-the-corner-radius-on-the-halo-alert-control-in-flex-4/#comments Sun, 21 Jun 2009 06:59:38 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/20/setting-the-corner-radius-on-the-halo-control-in-flex-4/ The following example shows how you can set the corner radius on the Halo TextArea control (with default Spark skin) in Flex 4 by creating a custom skin and setting the radiusX and radiusY properties on the Rect objects (in Flex 3 and earlier this was done by setting the cornerRadius style directly).

Full code [...]]]> The following example shows how you can set the corner radius on the Halo TextArea control (with default Spark skin) in Flex 4 by creating a custom skin and setting the radiusX and radiusY properties on the Rect objects (in Flex 3 and earlier this was done by setting the cornerRadius style directly).

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/20/setting-the-corner-radius-on-the-halo-control-in-flex-4/ -->
<s:Application name="Alert_SparkSkin_cornerRadius_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";

        mx|Alert {
            borderSkin: ClassReference("skins.CustomAlertSkin");
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </fx:Script>

    <s:Button id="btn"
            label="show Alert"
            click="Alert.show('The quick brown fox jumps over the lazy dog.', 'Alert title');"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

And the custom Alert skin class is as follows:

View skins/CustomAlertSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/20/setting-the-corner-radius-on-the-halo-control-in-flex-4/ -->
<s:SparkSkin name="CustomAlertSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        implements="mx.core.IRectangularBorder">

    <fx:Script>
        <![CDATA[
        import mx.core.EdgeMetrics;
        import mx.core.IUIComponent;

        /* Define the skin elements that should not be colorized.
           For panel, border and title backround are skinned, but the content area and title text are not. */
        static private const exclusions:Array = ["background"];
        override public function get colorizeExclusions():Array {return exclusions;}

        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array {return contentFill};

        private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
        public function get borderMetrics():EdgeMetrics {
            var hasPanelParent:Boolean = isPanel(parent);
            var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;

            if (controlBar && controlBar.includeInLayout) {
                _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
            } else {
                _metrics.bottom = 1;
            }
            return _metrics;
        }

        public function get backgroundImageBounds():Rectangle {
            return null;
        }

        public function set backgroundImageBounds(value:Rectangle):void {
        }

        public function get hasBackgroundImage():Boolean {
            return false;
        }

        public function layoutBackgroundImage():void {
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            var em:EdgeMetrics = borderMetrics;

            if (em.bottom > 1) {
                cbbg.height = em.bottom - 1;
                cbdiv.bottom = cbbg.height;
                cbbg.visible = cbdiv.visible = true;
            } else {
                cbbg.visible = cbdiv.visible = false;
            }
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        private static var panels:Object = {};

        private static function isPanel(parent:Object):Boolean {
            var s:String = getQualifiedClassName(parent);
            if (panels[s] == 1) {
                return true;
            }
            if (panels[s] == 0) {
                return false;
            }
            if (s == "mx.containers::Panel") {
                panels[s] == 1;
                return true;
            }

            var x:XML = describeType(parent);
            var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
            if (xmllist.length() == 0) {
                panels[s] = 0;
                return false;
            }
            panels[s] = 1;
            return true;
        }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:Number id="rad">10</fx:Number>
    </fx:Declarations>

    <!-- drop shadow -->
    <s:Rect left="0" top="0" right="0" bottom="0" radiusX="{rad}" radiusY="{rad}">
        <s:filters>
            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
        </s:filters>
        <s:fill>
            <s:SolidColor color="0" />
        </s:fill>
    </s:Rect>

    <!-- layer 1: border -->
    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="{rad}" radiusY="{rad}">
        <s:stroke>
            <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
        </s:stroke>
    </s:Rect>

    <!-- layer 2: background fill -->
    <s:Rect id="background" left="1" top="1" right="1" bottom="1" radiusX="{rad}" radiusY="{rad}">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" id="bgFill" />
        </s:fill>
    </s:Rect>

    <!-- layer 5: control bar background -->
    <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20" radiusX="{rad}" radiusY="{rad}">
        <s:fill>
            <s:SolidColor color="0xE8E8E8" />
        </s:fill>
    </s:Rect>

    <!-- layer 6: control bar divider line -->
    <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
        <s:fill>
            <s:SolidColor color="0xCDCDCD" />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

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.

 
]]> http://blog.flexexamples.com/2009/06/20/setting-the-corner-radius-on-the-halo-alert-control-in-flex-4/feed/ 6 Setting the corner radius of a LinkButton control in Flex http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/ http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/#comments Wed, 03 Sep 2008 03:02:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/ The following example shows how you can set the corner radius on a Flex LinkButton control by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/ --> <mx:Application name="LinkButton_cornerRadius_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="cornerRadius:"> <mx:HSlider id="slider" minimum="0" maximum="10" value="4" snapInterval="1" [...]]]> The following example shows how you can set the corner radius on a Flex LinkButton control by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_cornerRadius_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="cornerRadius:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="4"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="false" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton"
            cornerRadius="{slider.value}" />

    <mx:Label text="Roll over the link button to see corner radius" />

</mx:Application>

View source is enabled in the following example.

You can also set the cornerRadius style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_cornerRadius_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkButton {
            cornerRadius: 10;
        }
    </mx:Style>

    <mx:LinkButton id="linkButton"
            label="LinkButton" />

    <mx:Label text="Roll over the link button to see corner radius" />

</mx:Application>

Or, you can set the cornerRadius style in ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/ -->
<mx:Application name="LinkButton_cornerRadius_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                linkButton.setStyle("cornerRadius", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="cornerRadius:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="4"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="false"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LinkButton id="linkButton"
            label="LinkButton" />

    <mx:Label text="Roll over the link button to see corner radius" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/02/setting-the-corner-radius-of-a-linkbutton-control-in-flex/feed/ 0 Rounding specific corners on a focus rectangle in the TextInput control in Flex http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/#comments Fri, 13 Jun 2008 05:52:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ The following example shows how you can apply a corner radius to specific corners of a Flex TextInput control’s focus rectangle by setting the focusRoundedCorners style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { var corners:Array [...]]]> The following example shows how you can apply a corner radius to specific corners of a Flex TextInput control’s focus rectangle by setting the focusRoundedCorners style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var corners:Array = [];
                if (tLeft.selected) {
                    corners.push("tl");
                }
                if (tRight.selected) {
                    corners.push("tr");
                }
                if (bLeft.selected) {
                    corners.push("bl");
                }
                if (bRight.selected) {
                    corners.push("br");
                }
                var str:String = corners.join(" ");
                textInput.setStyle("focusRoundedCorners", str);
                focusManager.setFocus(textInput);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="top left (tl):">
                <mx:CheckBox id="tLeft"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top right (tr):">
                <mx:CheckBox id="tRight"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="bottom left (bl):">
                <mx:CheckBox id="bLeft"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top right (br):">
                <mx:CheckBox id="bRight"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>

View source is enabled in the following example.

You can also set the focusRoundedCorners style in MXML, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10"
            focusRoundedCorners="tl br" />

</mx:Application>

Or, you can set the focusRoundedCorners style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TextInput {
            focusRoundedCorners: "tl br";
        }
    </mx:Style>

    <mx:TextInput id="textInput"
            focusThickness="10"
            cornerRadius="10" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/06/12/rounding-specific-corners-on-a-focus-rectangle-in-the-textinput-control-in-flex/feed/ 4 Setting the corner radius on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/13/setting-the-corner-radius-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/13/setting-the-corner-radius-on-a-numericstepper-control-in-flex/#comments Tue, 13 May 2008 07:49:02 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/13/setting-the-corner-radius-on-a-numericstepper-control-in-flex/ The following example shows how you can set the corner radius on a Flex NumericStepper control by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/13/setting-the-corner-radius-on-a-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function init():void { slider.value = numericStepper.getStyle("cornerRadius"); } ]]> </mx:Script> <mx:ApplicationControlBar [...]]]> The following example shows how you can set the corner radius on a Flex NumericStepper control by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/13/setting-the-corner-radius-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = numericStepper.getStyle("cornerRadius");
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="cornerRadius:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            cornerRadius="{slider.value}"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

You can also set the cornerRadius style in an external .CSS file, or in an <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    NumericStepper {
        cornerRadius: 0;
    }
</mx:Style>

Or, you can set the cornerRadius style using ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            numericStepper.setStyle("cornerRadius", 0);
        }
    ]]>
</mx:Script>
 
]]> http://blog.flexexamples.com/2008/05/13/setting-the-corner-radius-on-a-numericstepper-control-in-flex/feed/ 0 Setting the corner radius on a Flex PopUpButton control http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/#comments Thu, 31 Jan 2008 16:43:10 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ The following example shows how you can set the corner radius on the PopUpButton control in Flex by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: normal; textAlign: left; [...]]]> The following example shows how you can set the corner radius on the PopUpButton control in Flex by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
            leftIconGap: 0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            private function init():void {
                var menu:Menu = new Menu();
                menu.dataProvider = arr;
                popUpButton.popUp = menu;
            }

            private function resizePopUp():void {
                popUpButton.popUp.width = popUpButton.width;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object type="separator" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="cornerRadius:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="{popUpButton.height / 2}"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item..."
            cornerRadius="{slider.value}"
            arrowButtonWidth="{popUpButton.height}"
            openAlways="true"
            initialize="init();"
            creationComplete="resizePopUp();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/feed/ 0 Setting the button link corner radius on a Flex LinkBar control http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/#comments Tue, 22 Jan 2008 07:05:12 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ The following example shows you how to set the corner radius on the link buttons in a LinkBar control in Flex by setting the linkButtonStyleName and cornerRadius styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> LinkBar { backgroundAlpha: 1.0; backgroundColor: [...]]]> The following example shows you how to set the corner radius on the link buttons in a LinkBar control in Flex by setting the linkButtonStyleName and cornerRadius styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkBar {
            backgroundAlpha: 1.0;
            backgroundColor: haloBlue;
            linkButtonStyleName: myCustomLinkButtonStyleName;
        }

        .myCustomLinkButtonStyleName {
            cornerRadius: 0;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/21/setting-the-button-link-corner-radius-on-a-flex-linkbar-control/feed/ 1