• Home
  • /Posts Tagged 'cursor'

Posts Tagged ‘cursor’

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.

Using useHandCursor in Flex

While working on a recent Flex project I found a code sample that someone created because they were having trouble getting the useHandCursor to work. It was pretty obvious what they were trying to do, take a look:

<mx:Canvas width="176" height="87">
<mx:Link height="100%" width="100%" />
<mx:Image width="100%" height="100%"
source="@Embed(''images/logo.swf'')"
mouseDown="doThis()" />
</mx:Canvas>

They obviously wanted to call an event handler when someone clicked on the image, but because they couldn”t get useHandCursor to work, they used an alternative method, albeit not all that pretty.

The solution is rather simple though. Just add a mouseOver event to the component and set it to the following:

mouseOver="event.target.onRelease=null;
event.target.useHandCursor=true;"

Works pretty much anywhere.

UPDATED For Flex 2:

You may have noticed that the above does not work in Flex 2. This process has been replaced. It is now done through a set of properties that are inherited from the Sprite class.

useHandCursor="true"
buttonMode="true

Add these properties to your component and you”re all set. Now, that was easy!