Flex: A hack to give instant focus to a form field

Posted by Chris
January 4, 2009

Day 79 - f o c u sI was working on a “quick add” tool for Toodledo — which I am liking more and more — and I assumed that my biggest challenge would be wiring a hotkey to my application — a can of worms in its own right. My mini-application’s main requirement is to be fast and not get in the user’s way. Part of this requirement is that when the “Add” window is displayed, the “Task description” field should be automatically selected, an inviting cursor happily blinking. Easier said than done!

Flex will let me display the native window and select the description field using setFocus() but no cursor for me. I googled the issue and found that when a Flex application runs in a browser, the solution is to give the application itself focus using Javascript.
But I’m not running in a browser!

And now, my silly workaround: since displaying an other panel container — such as an alert message — and dismissing it will return proper focus to my original field, I will simply “display” an invisible container and immediately get rid of it.
There is no guarantee that, on the odd instance, a race condition will not occur.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package com.voilaweb.addtdtask
{
    import flash.events.TimerEvent;
 
    public class Main
    {
        import mx.core.Application;
        import mx.containers.TitleWindow;
        import flash.display.DisplayObject;
        import flash.utils.Timer;
        import flash.events.TimerEvent;
        import mx.managers.PopUpManager;
 
        private var _tw:TitleWindow;
 
        public function Main()
        {
            Application.application.task_description.setFocus();
            Application.application.task_description.drawFocus(true);
            _tw = new TitleWindow();
            _tw.width = _tw.height = 0;
            var t:Timer = new Timer(100, 1);
            t.addEventListener(TimerEvent.TIMER, showCursor);
            t.start();
            mx.managers.PopUpManager.addPopUp(_tw, Application.application as DisplayObject, true);
        }
 
        public function showCursor(event:TimerEvent):void
        {
            mx.managers.PopUpManager.removePopUp(_tw);
        }
    }
}

Similar Posts:

If you enjoyed this post, make sure you subscribe to my RSS feed!

ActionScript

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments
Comment by Ruchira
February 23, 2009 @ 3:31 am

Thanks

Leave a comment

(required)

(required)


data recovery