Setting the corner radius on a NumericStepper control in Flex at Flex Examples

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>

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

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

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

May 2008
M	T	W	T	F	S	S
« Apr		Jun »
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

May 2008

« Apr

Jun »

12 Responses to “Setting the corner radius on a NumericStepper control in Flex”

Feed for this Entry View blog reactions

1 Al May 13th, 2008 at 3:11 pm

Is it possible to set the corner radius of the text too? Or any text for that matter?

2 peterd May 13th, 2008 at 6:16 pm

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:

Peter

3 Trần Quang Khánh May 13th, 2008 at 9:01 pm

Hi all!

After two days google, I can’t found any text input widget support input
number formatter use patter as ###,###,##0.00. I’m porting some Eclipse RCP
application to Flex. Please refer
http://www.eclipse.org/nebula/widgets/formattedtext/formattedtext.php

Sorry, my english not well
4 peterd May 14th, 2008 at 7:18 am

Trần Quang Khánh,

Will the NumberFormatter class work? See the Adobe Flex 3 NumberFormatter documentation for more information.

Peter
5 Trần Quang Khánh May 14th, 2008 at 7:57 pm

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!
6 Trần Quang Khánh May 14th, 2008 at 7:59 pm

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)”
7 Al May 15th, 2008 at 2:41 pm

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
8 peterd May 15th, 2008 at 4:32 pm

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

9 Willy Ci Jun 6th, 2008 at 11:37 am

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

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

10 Raaz Jul 14th, 2008 at 11:18 pm

var can1:Canvas = new Canvas();
can1.setStyle('cornerRadius', 6);

11 Raaz Jul 14th, 2008 at 11:19 pm

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

12 Raaz Jul 14th, 2008 at 11:27 pm
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