Setting the focus thickness on a NumericStepper control in Flex

In a previous example, “Setting the focus alpha on a NumericStepper control in Flex”, we saw how you could set the alpha of the focus rectangle for a Flex NumericStepper control by setting the focusAlpha style.

The following example shows how you can set the focus thickness of the focus rectangle by setting the focusThickness style on the Flex NumericStepper control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-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[
            import mx.events.NumericStepperEvent;

            private function numericStepper_change(evt:NumericStepperEvent):void {
                // reset focus rect
                focusManager.setFocus(btn);
                focusManager.setFocus(numericStepper);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="click here to remove focus" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="focusThickness:">
            <mx:NumericStepper id="numericStepper"
                    minimum="0"
                    maximum="10"
                    focusThickness="{numericStepper.value}"
                    change="numericStepper_change(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

You can also set the focusThickness style using 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/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            focusThickness: 10;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="click here to remove focus" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="focusThickness:">
            <mx:NumericStepper id="numericStepper"
                    minimum="0"
                    maximum="10" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

Or, you can set the focusThickness style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-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[
            import mx.events.NumericStepperEvent;

            private function numericStepper_change(evt:NumericStepperEvent):void {
                numericStepper.setStyle("focusThickness", evt.value);
                // reset focus rect
                focusManager.setFocus(btn);
                focusManager.setFocus(numericStepper);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="click here to remove focus" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="focusThickness:">
            <mx:NumericStepper id="numericStepper"
                    minimum="0"
                    maximum="10"
                    change="numericStepper_change(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>