•  
  •  

Set Cursor Focus in Flex

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.

About Rob Rusher

In his role as Principal Consultant for On3, Rob leads an software development practice to help his clients build rich Internet applications for the desktop, browser, and mobile devices, and to rapidly increase their knowledge and skills to better support their organization's goals. Rob is an Adobe Certified Expert, Community Professional, and Certified Instructor. He has taught and mentored the technical teams at HP, Overstock, Paychex, SAS, the FedEx, and other Government and Fortune 100 organizations. Rob has co-authored four best-selling books on building secure, cutting-edge and rapidly developed applications using Adobe AIR, ColdFusion and Flex. He is very active in organizing and speaking at RIA, Adobe LiveCycle, mobile conferences, and user groups. In addition to growing his software consulting practice, On3, Rob has been building expertise in rich client application development on a wider variety of devices and platforms that extend the applications to change the way we all create and live.