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>