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.
<?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.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
0 Responses to Setting the corner radius on a NumericStepper control in Flex
Leave a Reply Cancel reply
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


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