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

by Peter deHaan on May 27, 2008

in NumericStepper

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>

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: