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 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>

0 thoughts on “Setting the corner radius on a NumericStepper control in Flex

  1. Al,

    This should work for the TextInput control, although I’m still not 100% certain how you would round the left edge of the NumericStepper control’s text input field:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:TextInput id="textInput"
                text="The quick brown fox jumped over the lazy dog"
                cornerRadius="10"
                borderStyle="solid"
                textIndent="2" />
    
        <mx:Button />
    
    </mx:Application>
    

    Peter

  2. Hi peterd,

    NumberFormatter work correctly. But I need widget support user editing and format currently. Given this pattern: ###,###,###.00. It mean’s user input
    300 -> 300
    3000 -> 3,000

    These code will format Price.text but text’s carret always set end of text. If user move to center and key number, then carret go end ==> confuse for user!

  3. Oh why my MXML code is missing!

    Here is code:

    mx:NumberFormatter id=”nf” formatString=”###,###,###.00″
    mx:TextInput id=”price” change=”price.text = nf.format(price.text)”

  4. Thanks Peter,

    Tried all ways to get at that inputField in the numeric stepper to change its cornerRadius…

    – mx_internal: can get inputField with numericStepper.mx_internal::inputField as TextInput;
    (the styleProxy filters out the cornerRadius)
    – subclassing NumericStepper and overriding get inputFieldStyleFilters() so that cornerRadius is in the list
    (nothing happens!)

    I could get round this graphically, but it’s become a bit of challenge now.

    Any ideas?

    Al

  5. Al,

    You could try creating a custom skin (PNG/JPG/GIF, SWF) with rounded corners and see if you can set a custom skin on the TextInput. No clue if that would work, but may be worth investigating. Apart from that, try asking on the FlexCoders mailing list.

    Peter

  6. I think I found a way to fake it, for now.

    put a TextInput under the NumericStepper,
    remove the themeColor of NumericStepper.

    <mx:Canvas x="400" y="400"  >
    <mx:TextInput id="ti" x="0" y="0" width="50" cornerRadius="10" borderStyle="solid" paddingLeft="10"/>
    <mx:NumericStepper id="ns" cornerRadius="10" x="2" y="0"  borderColor="#FFFFFF" borderStyle="none" backgroundAlpha="0" themeColor="#ffffff" paddingLeft="5"/>
    </mx:Canvas>
    
  7. var can1:Canvas=new Canvas();
    can1.width=215;
    can1.height=101;
    can1.setStyle('borderColor','#040404');
    can1.setStyle('solid','solid');
    can1.setStyle('backgroundColor','#FFFFFF');
    can1.setStyle('cornerRadius',6);
    

    The above code not working in application can any one check this.

  8. s i solved on problem corner radius. i made one mistaque at borderStyle i placed wrongly solid solid

    This is solved no problem but i added on more line to that

    can1.setStyle('alpha', 0.5);
    

    this is not working please give me any solution