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.
<?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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Is it possible to set the corner radius of the text too? Or any text for that matter?
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
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
Trần Quang Khánh,
Will the NumberFormatter class work? See the Adobe Flex 3 NumberFormatter documentation for more information.
Peter
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!
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)”
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
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
I think I found a way to fake it, for now.
put a TextInput under the NumericStepper,
remove the themeColor of NumericStepper.
var can1:Canvas = new Canvas(); can1.setStyle('cornerRadius', 6);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.
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