Setting a border on specific sides of a NumericStepper control in Flex

The following example shows how you can apply a border to specific sides (top, bottom, left, right) of a Flex NumericStepper control by setting the borderStyle and borderSides styles.

The borderSides style is only supported when the borderStyle style is set to “solid”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/27/setting-a-border-on-specific-sides-of-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 checkBox_change(evt:Event):void {
                var sidesStr:String;
                var sidesArr:Array = [];
                if (leftCheckBox.selected) {
                    sidesArr.push("left");
                }
                if (rightCheckBox.selected) {
                    sidesArr.push("right");
                }
                if (topCheckBox.selected) {
                    sidesArr.push("top");
                }
                if (bottomCheckBox.selected) {
                    sidesArr.push("bottom");
                }
                sidesStr = sidesArr.join(" ");
                numericStepper.setStyle("borderSides", sidesStr);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="border left:">
                <mx:CheckBox id="leftCheckBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="border right:">
                <mx:CheckBox id="rightCheckBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="border top:">
                <mx:CheckBox id="topCheckBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="border bottom:">
                <mx:CheckBox id="bottomCheckBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="borderThickness:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        value="4"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            borderStyle="solid"
            borderThickness="{slider.value}"
            borderSides="left right top bottom" />

</mx:Application>

View source is enabled in the following example.

You can also set the borderSides 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/05/27/setting-a-border-on-specific-sides-of-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            borderStyle: solid;
            borderSides: top, bottom;
        }
    </mx:Style>

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

    <mx:NumericStepper id="numericStepper"
            borderThickness="{slider.value}" />

</mx:Application>

One thought on “Setting a border on specific sides of a NumericStepper control in Flex

  1. Sir,
    In my application i need a custom numericstepper. My problem is, i want to display a values in two units using a numericstepper and on changing the unit ,the numericstepper should display it. For example if the value of a numericStepper is 2.8 with step size 0.1,the changed value in another unit is 2.8*3.02 with step size 0.25. But instead of get ting 8.4 , i’m getting only 8.25 as result ..

    pls help me
    thanks in advance
    regards
    Ajit

Comments are closed.