October 24th, 2008 by Kyle
Tags: combobox, Flex, focus, focusManager
Posted in: Flex
I was helping a customer with an interesting question and it resulted in a nice little bit of code that I am demoing here.
The basic idea was to force the combobox to receive focus when it is moused over rather than when clicked. Also, it would be useful to have the combobox get focus only if the previously focused component was a particular component.
If you look at the docs:
http://livedocs.adobe.com/flex/3/langref/mx/managers/FocusManager.html
you will see that:
Each FocusManager instance is responsible for a set of components that comprise a “tab loop”. If you hit Tab enough times, focus traverses through a set of components and eventually get back to the first component that had focus. That is a “tab loop” and a FocusManager instance manages that loop.
You can use the focusManager.getFocus(); method to get the currently focussed item and you can also use focusManager. getNextFocusManagerComponent(backward:Boolean = false):IFocusManagerComponent to get you the next and previous items in the loop.
The sample shows how to set the focus to the combobox when you hover over the combobox instead of setting focus only when you click on it(watch the blue focus ring), but only if the textInput whose id is “ti” first had focus. If the “ti2″ textinput had focus (or nothing had focus) before you hover over the combobox, then focus is not stolen.
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Here is the app code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.managers.FocusManager;
private function checkFocus(event:Event):void{
//find component that has focus
var c:* = focusManager.getFocus();
trace((c ? c.id:”));
if (c && c.id=="ti"){
//target is actually the button encapsulated within the cbo box…
//currentTarget is the cbo
event.currentTarget.setFocus();
}
}
]]>
</mx:Script>
<mx:TextInput id="ti" width="200" />
<mx:ComboBox id="cbo" mouseOver="checkFocus(event)" >
<mx:ArrayCollection>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:TextInput id="ti2" width="200" />
</mx:Application>
Tweet
2 Comments »
January 11th, 2009 at 9:14 pm
Thanks for posting this !!! Have been searching for days with zero luck !.
July 27th, 2010 at 3:07 pm
your sample doesn’t work (perhaps the code does, i didn’t check)