Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/08/setting-the-focus-alpha-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_focusAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <mx:Form contentBackgroundAlpha="0">
            <mx:FormItem label="focusAlpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.8"
                        snapInterval="0.1"
                        stepSize="0.1"
                        change="txtArea.setFocus();" />
            </mx:FormItem>
            <mx:FormItem label="focusColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="haloBlue"
                        change="callLater(txtArea.setFocus);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:TextArea id="txtArea"
            focusAlpha="{slider.value}"
            focusColor="{colorPicker.selectedColor}"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="txtArea.setFocus();"/>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_setFormatOfRange_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import flash.text.engine.FontPosture;
            import flash.text.engine.FontWeight;
            import flashx.textLayout.formats.TextAlign;
            import flashx.textLayout.formats.TextDecoration;
            import flashx.textLayout.formats.TextLayoutFormat;
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
            import spark.events.IndexChangeEvent;
 
            protected function editor_selectionChangeHandler(evt:FlexEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                fontDDL.selectedItem = txtLayFmt.fontFamily;
                sizeDDL.selectedItem = txtLayFmt.fontSize;
                boldBtn.selected = (txtLayFmt.fontWeight == FontWeight.BOLD);
                italBtn.selected = (txtLayFmt.fontStyle == FontPosture.ITALIC);
                underBtn.selected = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE);
                colorCP.selectedColor = txtLayFmt.color;
                lineBtn.selected = txtLayFmt.lineThrough;
 
                switch (txtLayFmt.textAlign) {
                    case TextAlign.LEFT:
                        txtAlignBB.selectedIndex = 0;
                        break;
                    case TextAlign.CENTER:
                        txtAlignBB.selectedIndex = 1;
                        break;
                    case TextAlign.RIGHT:
                        txtAlignBB.selectedIndex = 2;
                        break;
                    case TextAlign.JUSTIFY:
                        txtAlignBB.selectedIndex = 3;
                        break;
                    default:
                        txtAlignBB.selectedIndex = -1;
                        break;
                }
            }
 
            protected function fontDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontFamily = fontDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function sizeDDL_changeHandler(evt:IndexChangeEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontSize = sizeDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function boldBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function italBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.fontStyle = (txtLayFmt.fontStyle == FontPosture.ITALIC) ? FontPosture.NORMAL : FontPosture.ITALIC;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function underBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.textDecoration = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE) ? TextDecoration.NONE : TextDecoration.UNDERLINE;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function colorCP_changeHandler(evt:ColorPickerEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.color = colorCP.selectedColor;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected function txtAlignBB_changeHandler(evt:IndexChangeEvent):void {
                if (txtAlignBB.selectedItem) {
                    var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                    txtLayFmt.textAlign = txtAlignBB.selectedItem.value;
                    editor.setFormatOfRange(txtLayFmt,
                                    editor.selectionAnchorPosition,
                                    editor.selectionActivePosition);
                    editor.setFocus();
                }
            }
 
            protected function lineBtn_clickHandler(evt:MouseEvent):void {
                var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                txtLayFmt.lineThrough = lineBtn.selected;
                editor.setFormatOfRange(txtLayFmt,
                                editor.selectionAnchorPosition,
                                editor.selectionActivePosition);
                editor.setFocus();
            }
        ]]>
    </fx:Script>
 
    <s:Panel title="SimpleTextEditor"
            width="400"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" />
        </s:layout>
        <s:TextArea id="editor"
                focusEnabled="false"
                width="100%" height="100%"
                minHeight="200"
                selectionChange="editor_selectionChangeHandler(event);">
            <s:textFlow>
                <s:TextFlow paragraphSpaceBefore="20">
                    <s:p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh lorem. Nulla ut velit magna. Nunc quis libero ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis. Phasellus dui orci, lacinia in dictum lacinia, ullamcorper a tortor. Suspendisse lacinia, turpis vel euismod gravida, turpis dui vulputate libero, vel consequat enim sem nec mauris. Curabitur vitae magna vel neque accumsan commodo vitae quis ipsum. Nullam ac condimentum elit. Integer eget magna ac mi fermentum luctus. Ut pharetra auctor pulvinar. Duis lobortis, nulla at vestibulum tincidunt, ante neque scelerisque risus, ac dignissim nunc nisl rhoncus risus. Cras pretium egestas purus, a commodo nunc vehicula at. Fusce vestibulum enim in mi hendrerit a viverra justo tempor. Maecenas eget ipsum ac mauris dictum congue eu id justo.</s:p>
                    <s:p>Aliquam tincidunt tempor nisi id porta. Aenean risus dolor, tincidunt a ultrices in, laoreet eu ante. Mauris vel lacus neque, ut scelerisque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel lacus sit amet erat vehicula malesuada id in augue. Sed purus massa, placerat non imperdiet nec, venenatis a nulla. Donec vel ligula leo, in rhoncus arcu. Duis semper bibendum facilisis. Duis nibh lorem, egestas rutrum tincidunt non, vulputate accumsan nulla. Nunc ligula nisl, ultrices ut tempor quis, rutrum et enim. Nullam accumsan scelerisque ante id pretium. Mauris nibh metus, blandit in varius congue, pharetra sit amet sem. Phasellus tincidunt lacus quis est semper ut rhoncus sem pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, enim eu consectetur venenatis, dui tortor commodo ante, sit amet sagittis libero odio cursus neque. Aliquam a dui non eros placerat euismod. In at mattis felis. Suspendisse potenti. Morbi posuere condimentum lacus. Suspendisse tellus magna, viverra ac mattis vel, adipiscing eget lectus.</s:p>
                    <s:p>Etiam ut eros lectus. Praesent nec massa nibh. Cras venenatis, ligula in condimentum euismod, nisl lorem hendrerit lacus, a imperdiet odio est et odio. Suspendisse eu orci ut augue commodo gravida sed eu risus. Vestibulum venenatis erat ac metus ullamcorper blandit. Integer et sem enim. Vivamus a arcu metus. Nunc sollicitudin commodo placerat. Maecenas vehicula, massa et auctor tempor, felis leo commodo lorem, eget pulvinar felis turpis nec erat. Mauris imperdiet gravida felis a eleifend.</s:p>
                    <s:p>Suspendisse mattis tempor fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed molestie arcu. Praesent ut tellus sed orci blandit tristique non eget est. Sed interdum feugiat nisi, sit amet aliquet enim sodales non. Maecenas in velit sit amet tellus tincidunt dapibus. Vivamus est eros, iaculis et venenatis a, malesuada vel lacus. Aliquam vel orci tortor. Etiam ornare ante eget massa dignissim a auctor nunc pellentesque. Pellentesque sodales porta nisi, pretium accumsan eros tincidunt vitae. Cras facilisis accumsan purus ultricies lacinia. Praesent consequat elit imperdiet tellus vehicula ut ornare mauris mattis. Suspendisse non tortor nisl. Etiam ac pretium est.</s:p>
                    <s:p>Maecenas tristique, velit aliquam faucibus ornare, justo erat porta elit, sed venenatis neque mi ac elit. Nullam enim metus, gravida ac euismod sit amet, commodo vitae elit. Quisque eget molestie ante. Nulla fermentum pretium augue non tristique. Praesent in orci eu diam ultrices sodales ac quis leo. Aliquam lobortis elit quis mi rutrum feugiat. Aenean sed elit turpis. Duis enim ligula, posuere sit amet semper a, pretium vel leo. Etiam mollis dolor nec elit suscipit imperdiet. Sed a est eros.</s:p>
                </s:TextFlow>
            </s:textFlow>
        </s:TextArea>
        <mx:ControlBar width="100%" cornerRadius="0">
            <mx:ToolBar width="100%" horizontalGap="5">
                <s:DropDownList id="fontDDL"
                        width="150"
                        change="fontDDL_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[Arial,Verdana,Times New Roman,Trebuchet MS]" />
                    </s:dataProvider>
                </s:DropDownList>
                <s:DropDownList id="sizeDDL"
                        width="60"
                        change="sizeDDL_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[8,10,12,14,16,24,36,72]" />
                    </s:dataProvider>
                </s:DropDownList>
                <s:ToggleButton id="boldBtn"
                        label="B"
                        fontWeight="bold"
                        width="30"
                        click="boldBtn_clickHandler(event);" />
                <s:ToggleButton id="italBtn"
                        label="I"
                        fontStyle="italic"
                        width="30"
                        click="italBtn_clickHandler(event);" />
                <s:ToggleButton id="underBtn"
                        label="U" 
                        textDecoration="underline"
                        width="30"
                        click="underBtn_clickHandler(event);" />
                <s:ToggleButton id="lineBtn"
                        label="S"
                        lineThrough="true"
                        width="30"
                        click="lineBtn_clickHandler(event);" />
                <mx:ColorPicker id="colorCP"
                        change="colorCP_changeHandler(event);" />
                <s:ButtonBar id="txtAlignBB"
                        arrowKeysWrapFocus="true"
                        labelField="label"
                        width="120"
                        change="txtAlignBB_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:Object label="L" value="{TextAlign.LEFT}" />
                            <fx:Object label="C" value="{TextAlign.CENTER}" />
                            <fx:Object label="R" value="{TextAlign.RIGHT}" />
                            <fx:Object label="J" value="{TextAlign.JUSTIFY}" />
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:ToolBar>
        </mx:ControlBar>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:ApplicationControlBar dock="true" styleName="plain">
        <mx:Form styleName="plain">
            <mx:FormItem label="focusThickness:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="24"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        change="textArea.setFocus();" />
            </mx:FormItem>
            <mx:FormItem label="focusBlendMode:">
                <mx:ComboBox id="comboBox"
                        selectedIndex="10"
                        change="textArea.setFocus();">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>{BlendMode.ADD}</mx:String>
                            <mx:String>{BlendMode.ALPHA}</mx:String>
                            <mx:String>{BlendMode.DARKEN}</mx:String>
                            <mx:String>{BlendMode.DIFFERENCE}</mx:String>
                            <mx:String>{BlendMode.ERASE}</mx:String>
                            <mx:String>{BlendMode.HARDLIGHT}</mx:String>
                            <mx:String>{BlendMode.INVERT}</mx:String>
                            <mx:String>{BlendMode.LAYER}</mx:String>
                            <mx:String>{BlendMode.LIGHTEN}</mx:String>
                            <mx:String>{BlendMode.MULTIPLY}</mx:String>
                            <mx:String>{BlendMode.NORMAL}</mx:String>
                            <mx:String>{BlendMode.OVERLAY}</mx:String>
                            <mx:String>{BlendMode.SCREEN}</mx:String>
                            <!--
                            <mx:String>{BlendMode.SHADER}</mx:String>
                            -->
                            <mx:String>{BlendMode.SUBTRACT}</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog."
            focusThickness="{slider.value}"
            focusBlendMode="{comboBox.selectedItem}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Style>
        TextArea {
            focusThickness: 20;
            focusBlendMode: difference;
        }
    </mx:Style>

    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog."  />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/11/setting-the-focus-blend-mode-on-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_focusBlendMode_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                textArea.setStyle("focusThickness", evt.value);
                textArea.setFocus();
            }

            private function comboBox_change(evt:ListEvent):void {
                textArea.setStyle("focusBlendMode", comboBox.selectedItem);
                textArea.setFocus();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true" styleName="plain">
        <mx:Form styleName="plain">
            <mx:FormItem label="focusThickness:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="24"
                        value="10"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="focusBlendMode:">
                <mx:ComboBox id="comboBox"
                        selectedIndex="10"
                        change="comboBox_change(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>{BlendMode.ADD}</mx:String>
                            <mx:String>{BlendMode.ALPHA}</mx:String>
                            <mx:String>{BlendMode.DARKEN}</mx:String>
                            <mx:String>{BlendMode.DIFFERENCE}</mx:String>
                            <mx:String>{BlendMode.ERASE}</mx:String>
                            <mx:String>{BlendMode.HARDLIGHT}</mx:String>
                            <mx:String>{BlendMode.INVERT}</mx:String>
                            <mx:String>{BlendMode.LAYER}</mx:String>
                            <mx:String>{BlendMode.LIGHTEN}</mx:String>
                            <mx:String>{BlendMode.MULTIPLY}</mx:String>
                            <mx:String>{BlendMode.NORMAL}</mx:String>
                            <mx:String>{BlendMode.OVERLAY}</mx:String>
                            <mx:String>{BlendMode.SCREEN}</mx:String>
                            <!--
                            <mx:String>{BlendMode.SHADER}</mx:String>
                            -->
                            <mx:String>{BlendMode.SUBTRACT}</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="The quick brown fox jumps over the lazy dog." />

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/23/setting-focus-in-flex-using-the-focus-manager/ -->
<mx:Application name="FocusManager_setFocus_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function submitButton_click(evt:MouseEvent):void {
                Alert.show(evt.currentTarget.label,
                            Object(focusManager.getFocus()).name);
            }

            private function resetButton_click(evt:MouseEvent):void {
                username.text = "";
                password.text = "";
                Alert.show(evt.currentTarget.label,
                            Object(focusManager.getFocus()).name);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Set focus to Username"
                click="focusManager.setFocus(username);" />
        <mx:Button label="Set focus to Password"
                click="focusManager.setFocus(password);" />
    </mx:ApplicationControlBar>

    <mx:Form id="form"
            defaultButton="{submitButton}">
        <mx:FormItem label="Username:">
            <mx:TextInput id="username" />
        </mx:FormItem>
        <mx:FormItem label="Password:">
            <mx:TextInput id="password"
                    displayAsPassword="true" />
        </mx:FormItem>
        <mx:FormItem direction="horizontal"
                horizontalAlign="right"
                width="100%">
            <mx:Button id="submitButton"
                    label="Submit"
                    click="submitButton_click(event);" />
            <mx:Button id="resetButton"
                    label="Reset"
                    click="resetButton_click(event);" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/23/setting-focus-in-flex-using-the-focus-manager/ -->
<mx:Application name="FocusManager_setFocus_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.FormItemDirection;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.TextInput;

            private var usernameButton:Button;
            private var passwordButton:Button;
            private var username:TextInput;
            private var password:TextInput;
            private var submitButton:Button;
            private var resetButton:Button;

            private function init():void {
                usernameButton = new Button();
                usernameButton.label = "Set focus to Username";
                usernameButton.addEventListener(MouseEvent.CLICK,
                            usernameButton_click);

                passwordButton = new Button();
                passwordButton.label = "Set focus to Password";
                passwordButton.addEventListener(MouseEvent.CLICK,
                            passwordButton_click);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(usernameButton);
                appControlBar.addChild(passwordButton);
                addChildAt(appControlBar, 0);

                username = new TextInput();
                username.name = "username";

                password = new TextInput();
                password.displayAsPassword = true;
                password.name = "password";

                submitButton = new Button();
                submitButton.label = "Submit";
                submitButton.name = "submitButton";
                submitButton.addEventListener(MouseEvent.CLICK,
                            submitButton_click);

                resetButton = new Button();
                resetButton.label = "Reset";
                resetButton.name = "resetButton";
                resetButton.addEventListener(MouseEvent.CLICK,
                            resetButton_click);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "Username:";
                formItem1.addChild(username);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "Password:";
                formItem2.addChild(password);

                var formItem3:FormItem = new FormItem();
                formItem3.direction = FormItemDirection.HORIZONTAL;
                formItem3.setStyle("horizontalAlign", "right");
                formItem3.percentWidth = 100;
                formItem3.addChild(submitButton);
                formItem3.addChild(resetButton);

                var form:Form = new Form();
                form.defaultButton = submitButton;
                form.addChild(formItem1);
                form.addChild(formItem2);
                form.addChild(formItem3);
                addChild(form);
            }

            private function usernameButton_click(evt:MouseEvent):void {
                focusManager.setFocus(username);
            }

            private function passwordButton_click(evt:MouseEvent):void {
                focusManager.setFocus(password);
            }

            private function submitButton_click(evt:MouseEvent):void {
                Alert.show(evt.currentTarget.label,
                            Object(focusManager.getFocus()).name);
            }

            private function resetButton_click(evt:MouseEvent):void {
                username.text = "";
                password.text = "";
                Alert.show(evt.currentTarget.label,
                            Object(focusManager.getFocus()).name);
            }
        ]]>
    </mx:Script>

</mx:Application>

 

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>