Setting focus in Flex using the Focus Manager

The following example shows how you can set focus on a TextInput control in Flex by using the Flex FocusManager class and the setFocus() method.

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>

Tagged as: getFocus(), setFocus()