in a rush

I have a pet peeve, although I’ll admit it’s one of many. The pet peeve is this. When starting a Flex application that requires authentication, I have to use tabbing or, heaven forbid, my mouse to set focus to the “user name” field on the login screen. Why!! We have been doing this for years in DHTML-based applications. Why stop now?!

Using Flex does throw a couple of a curve balls at you, so I thought I’d go ahead and share the solution with you.

Let’s start with the basis. The UIComponent class has a property called focusManager which gets the FocusManager that controls focus for the component and its peers. And since all UI controls inherit from UIComponent, they all automatically have this property as well. This give you access to a couple of key methods and properties necessary to set the cursor focus to a specific control.
First, you need the setFocus( ) method. The argument to setFocus() is the id of the control you want the cursor to show on. Using just this method does set focus to the control and it highlights the control as well, but it doesn’t show the cursor. You also need to set the showFocus(). Sets showFocusIndicator to true and draws the visual focus indicator on the focused object, if any.

So the code might look like this:

private function onCreationComplete():void
{
focusManager.setFocus( username );
focusManager.showFocus();
}

If you run this application as is, you’ll notice that something is still missing… the cursor!

The second part of the solution is to set focus to the flash object in the HTML wrapper. This means that you have to edit the index.template.html file in the html-template directory of your project. It also means that you have to conjure up some of the old JavaScript and DOM stuff we used to do before Flex.
All you have to do is get the flash object reference from the DOM and invoke focus() on it. Place this code at the bottom of the script that loads the flash object.

So the code might look like this:

document.getElementById("${application}").focus();

Because this file is a “template” we can use the variable, ${application}, for the application name.

The HTML page should now set focus on the Flex application and then Flex application will set focus on the TextInput control.

Now for the big “but”. This doesn”t work in Windows Firefox or Mac Safari. arrrgh!
But once you click on the SWF, it does set the focus. PS: these are know bugs in the browser.
In the Firefox 3 rc1, this has been resolved. Thanks Joe.