Flex Examples » NumericStepper http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a border on specific sides of a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/27/setting-a-border-on-specific-sides-of-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/27/setting-a-border-on-specific-sides-of-a-numericstepper-control-in-flex/#comments Tue, 27 May 2008 13:55:30 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/27/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 [...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/05/27/setting-a-border-on-specific-sides-of-a-numericstepper-control-in-flex/feed/ 1 Setting the border thickness on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/27/setting-the-border-thickness-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/27/setting-the-border-thickness-on-a-numericstepper-control-in-flex/#comments Tue, 27 May 2008 08:21:02 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/27/setting-the-border-thickness-on-a-numericstepper-control-in-flex/ The following example shows how you can set the border thickness on a Flex NumericStepper control by setting the borderThickness style.

The borderThickness 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-the-border-thickness-on-a-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can set the border thickness on a Flex NumericStepper control by setting the borderThickness style.

The borderThickness 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-the-border-thickness-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

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

</mx:Application>

View source is enabled in the following example.

You can also set the borderThickness 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-the-border-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 {
            borderStyle: solid;
            borderThickness: 10;
        }
    </mx:Style>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/27/setting-the-border-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.SliderEvent;

            private function init():void {
                numericStepper.setStyle("borderStyle", "solid");
            }

            private function slider_change(evt:SliderEvent):void {
                numericStepper.setStyle("borderThickness", evt.value);
            }
        ]]>
    </mx:Script>

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

    <mx:NumericStepper id="numericStepper"
            initialize="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/27/setting-the-border-thickness-on-a-numericstepper-control-in-flex/feed/ 1 Setting the border color on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/26/setting-the-border-color-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/26/setting-the-border-color-on-a-numericstepper-control-in-flex/#comments Tue, 27 May 2008 05:16:11 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/26/setting-the-border-color-on-a-numericstepper-control-in-flex/ The following example shows how you can set the border color on a Flex NumericStepper control by setting the borderColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/26/setting-the-border-color-on-a-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="borderColor:"> <mx:ColorPicker id="colorPicker" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:NumericStepper [...]]]> The following example shows how you can set the border color on a Flex NumericStepper control by setting the borderColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/26/setting-the-border-color-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            borderColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the borderColor style using an external .CSS file or in an <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/26/setting-the-border-color-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 {
            borderColor: red;
        }
    </mx:Style>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/26/setting-the-border-color-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.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                numericStepper.setStyle("borderColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/26/setting-the-border-color-on-a-numericstepper-control-in-flex/feed/ 0 Setting the icon color on a disabled NumericStepper control in Flex http://blog.flexexamples.com/2008/05/25/setting-the-icon-color-on-a-disabled-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/25/setting-the-icon-color-on-a-disabled-numericstepper-control-in-flex/#comments Mon, 26 May 2008 03:53:51 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/25/setting-the-icon-color-on-a-disabled-numericstepper-control-in-flex/ In a previous example, Setting the text color on a disabled NumericStepper control in Flex, we saw how to set the text color for a disabled Flex NumericStepper control by setting the disabledColor style.

The following example shows how you can set the icon color for a disabled Flex NumericStepper control by setting the [...]]]> In a previous example, Setting the text color on a disabled NumericStepper control in Flex, we saw how to set the text color for a disabled Flex NumericStepper control by setting the disabledColor style.

The following example shows how you can set the icon color for a disabled Flex NumericStepper control by setting the disabledIconColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/25/setting-the-icon-color-on-a-disabled-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="disabledIconColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            enabled="{checkBox.selected}"
            disabledIconColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the disabledIconColor 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/25/setting-the-icon-color-on-a-disabled-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            disabledIconColor: red;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            enabled="{checkBox.selected}" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/25/setting-the-icon-color-on-a-disabled-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.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                numericStepper.setStyle("disabledIconColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="disabledIconColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            enabled="{checkBox.selected}" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/25/setting-the-icon-color-on-a-disabled-numericstepper-control-in-flex/feed/ 0 Setting the text color on a disabled NumericStepper control in Flex http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/#comments Mon, 26 May 2008 03:42:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ Continuing on the theme of NumericStepper examples, the following example shows how you can set the text color for a disabled Flex NumericStepper control by setting the disabledColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> [...]]]> Continuing on the theme of NumericStepper examples, the following example shows how you can set the text color for a disabled Flex NumericStepper control by setting the disabledColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            enabled="{checkBox.selected}"
            disabledColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the disabledColor 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/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            disabledColor: red;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            enabled="{checkBox.selected}" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-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.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                numericStepper.setStyle("disabledColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            enabled="{checkBox.selected}" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/feed/ 0 Setting the focus thickness on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/#comments Sun, 25 May 2008 02:29:18 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/24/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 [...]]]> 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>
 
]]> http://blog.flexexamples.com/2008/05/24/setting-the-focus-thickness-on-a-numericstepper-control-in-flex/feed/ 1 Setting the focus alpha on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-on-a-numericstepper-control-in-flex/#comments Sat, 24 May 2008 06:27:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-on-a-numericstepper-control-in-flex/ The following example shows how you can set the focus alpha on a Flex NumericStepper control by setting the focusAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-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 focusManager.setFocus(btn); focusManager.setFocus(numericStepper); [...]]]> The following example shows how you can set the focus alpha on a Flex NumericStepper control by setting the focusAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-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
                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:NumericStepper id="numericStepper"
            minimum="0.0"
            maximum="1.0"
            value="0.5"
            stepSize="0.1"
            textAlign="center"
            focusAlpha="{numericStepper.value}"
            change="numericStepper_change(event);" />

</mx:Application>

View source is enabled in the following example.

You can also set the focusAlpha style in an external .CSS file or <mx:Style /> block, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-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 {
            focusAlpha: 1.0;
        }
    </mx:Style>

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

    <mx:NumericStepper id="numericStepper"
            minimum="0.0"
            maximum="1.0"
            value="1.0"
            stepSize="0.1"
            textAlign="center"/>

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-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("focusAlpha", evt.value);
                // reset focus
                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:NumericStepper id="numericStepper"
            minimum="0.0"
            maximum="1.0"
            value="0.5"
            stepSize="0.1"
            textAlign="center"
            change="numericStepper_change(event);" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/23/setting-the-focus-alpha-on-a-numericstepper-control-in-flex/feed/ 0 Setting the background color and background alpha for a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/#comments Sat, 24 May 2008 01:06:34 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ The following example shows how you can set the background color and background alpha for a Flex NumericStepper control by setting the backgroundColor and backgroundAlpha styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="backgroundAlpha:"> <mx:HSlider id="slider" [...]]]> The following example shows how you can set the background color and background alpha for a Flex NumericStepper control by setting the backgroundColor and backgroundAlpha styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            backgroundAlpha="{slider.value}"
            backgroundColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundAlpha and backgroundColor styles 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/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            backgroundAlpha: 0.5;
            backgroundColor: red;
        }
    </mx:Style>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

Or you can set the backgroundAlpha and backgroundColor styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-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 {
                numericStepper.setStyle("backgroundAlpha", 0.5);
                numericStepper.setStyle("backgroundColor", "red");
            }
        ]]>
    </mx:Script>

    <mx:NumericStepper id="numericStepper"
            creationComplete="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/feed/ 2 Changing the up arrow skin and down arrow skin on a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/#comments Tue, 20 May 2008 15:53:37 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ The following example shows how you can change the down arrow skin and up arrow skin in a Flex NumericStepper control by setting the downArrowSkin and upArrowSkin styles using MXML, CSS, and ActionScript.

Full code after the jump.

The following example shows how you can embed the arrow skins using an inline @Embed() in [...]]]> The following example shows how you can change the down arrow skin and up arrow skin in a Flex NumericStepper control by setting the downArrowSkin and upArrowSkin styles using MXML, CSS, and ActionScript.

Full code after the jump.

The following example shows how you can embed the arrow skins using an inline @Embed() in MXML:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from the NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            downArrowSkin="@Embed('assets/bullet_arrow_down.png')"
            upArrowSkin="@Embed('assets/bullet_arrow_up.png')" />

</mx:Application>

View source is enabled in the following example.

The following example shows how you can embed the arrow skins using Embed() in an <mx:Style /> block:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-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 {
            downArrowSkin: Embed("assets/bullet_arrow_down.png");
            upArrowSkin: Embed("assets/bullet_arrow_up.png");
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

The following example shows how you can embed the arrow skins using the [Embed] metadata and bindings in your MXML:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-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[
            [Bindable]
            [Embed("assets/bullet_arrow_down.png")]
            private var downArrowIcon:Class;

            [Bindable]
            [Embed("assets/bullet_arrow_up.png")]
            private var upArrowIcon:Class;
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            downArrowSkin="{downArrowIcon}"
            upArrowSkin="{upArrowIcon}" />

</mx:Application>

The following example shows how you can embed the arrow skins using the [Embed] metadata and ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-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[
            [Embed("assets/bullet_arrow_down.png")]
            private var downArrowIcon:Class;

            [Embed("assets/bullet_arrow_up.png")]
            private var upArrowIcon:Class;

            private function init():void {
                numericStepper.setStyle("downArrowSkin", downArrowIcon);
                numericStepper.setStyle("upArrowSkin", upArrowIcon);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" initialize="init();" />

</mx:Application>

The following example shows how you can embed the arrow skins by extending the NumericStepper control using ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <comps:MyNumericStepper id="numericStepper" />

</mx:Application>

comps/MyNumericStepper.as

/**
 * http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.controls.NumericStepper;

    public class MyNumericStepper extends NumericStepper {
        [Embed("assets/bullet_arrow_down.png")]
        public var downArrowIcon:Class;

        [Embed("assets/bullet_arrow_up.png")]
        public var upArrowIcon:Class;

        public function MyNumericStepper() {
            super();
            init();
        }

        private function init():void {
            setStyle("downArrowSkin", downArrowIcon);
            setStyle("upArrowSkin", upArrowIcon);
        }
    }
}
 
]]> http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/feed/ 0 Limiting the number of characters a user can type into a NumericStepper control’s text input field in Flex http://blog.flexexamples.com/2008/05/19/limiting-the-number-of-characters-a-user-can-type-into-a-numericstepper-controls-text-input-field-in-flex/ http://blog.flexexamples.com/2008/05/19/limiting-the-number-of-characters-a-user-can-type-into-a-numericstepper-controls-text-input-field-in-flex/#comments Tue, 20 May 2008 05:33:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/19/limiting-the-number-of-characters-a-user-can-type-into-a-numericstepper-controls-text-input-field-in-flex/ The following example shows how you can limit the number of characters a user can type into a Flex NumericStepper control by setting the maxChars property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/19/limiting-the-number-of-characters-a-user-can-type-into-a-numericstepper-controls-text-input-field-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="maxChars:"> <mx:HSlider id="slider" [...]]]> The following example shows how you can limit the number of characters a user can type into a Flex NumericStepper control by setting the maxChars property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/19/limiting-the-number-of-characters-a-user-can-type-into-a-numericstepper-controls-text-input-field-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="maxChars:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="3"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            minimum="0"
            maximum="10000"
            stepSize="10"
            maxChars="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

Setting the maxChars property only limits the number of characters that can be typed. If your maxChars property was 2 and the NumericStepper control’s maximum property was 1000, the user could still enter numbers between 100 and 1000 using the Home/End keys, up/down arrows on the keyboard, or the up/down buttons in the NumericStepper control.

 
]]> http://blog.flexexamples.com/2008/05/19/limiting-the-number-of-characters-a-user-can-type-into-a-numericstepper-controls-text-input-field-in-flex/feed/ 0