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.
This movie requires Flash Player 9
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:
Read the rest of this post»
2 Comments »
I have seen a few people and had a customer ask how to detect when a flex app loses focus.
Here is a sample app that shows the technique and a practical application of this functionality.
When you click and drag a DividedBox separator, if you move the mouse outside the Flex application window, the app should realize this and “drop” the separator at that horizontal or vertical position (depending on the orientation of your divider). It doesn’t do this automatically (and maybe is should), but it is easily done and demonstrates the technique that can be used for other reasons.
Here is the simple app:
<?
xml version=
"1.0" encoding=
"utf-8"?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml" creationComplete=
"addListeners(event)">
<mx:Script>
<!
[CDATA
[
private var lastX:
Number;
private var lastY:
Number;
private function addListeners
(event:Event
):
void{
systemManager.
stage.
addEventListener(Event.
MOUSE_LEAVE, mouseLeave
);
systemManager.
stage.
addEventListener(Event.
DEACTIVATE,deactivate
);
systemManager.
stage.
addEventListener(MouseEvent.
MOUSE_MOVE, mouseMove
);
}
private function removeListeners
(event:Event
):
void{
systemManager.
stage.
removeEventListener(Event.
MOUSE_LEAVE, mouseLeave
);
systemManager.
stage.
removeEventListener(flash.
events.
Event.
DEACTIVATE,deactivate
);
systemManager.
stage.
removeEventListener(MouseEvent.
MOUSE_MOVE, mouseMove
);
}
private function mouseMove(event:MouseEvent):void{
//trace("move…");
lastX=event.stageX;
lastY=event.stageY;
}
private function mouseLeave(event:Event):void{
//trace("left");
removeListeners(event);
dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP,true,false,lastX,lastY));
}
private function deactivate(event:Event):void{
//trace("deactivate");
removeListeners(event);
dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP,true,false,lastX,lastY));
}
]]>
</mx:Script>
<mx:VDividedBox id="div1" dividerPress="addListeners(event)" dividerRelease="removeListeners(event)">
<mx:VBox height="200" width="300" borderStyle="outset">
<mx:Button label="Something"/>
</mx:VBox>
<mx:VBox height="200" width="300" borderStyle="outset">
<mx:TextArea width="100%"/>
</mx:VBox >
</mx:VDividedBox>
</mx:Application>
Browse the source of this example.
Download a zipfile containing the source to this sample.
This movie requires Flash Player 9
4 Comments »
Someone was asking how to set the focus indicator into the TextInput rather than just setting focus to a TextInput.
Here is a simple code snippet that demonstrates how to do this using the TextIput’s setSelection() method:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="ti"/>
<mx:Button label="Set Focus into TextInput" click="ti.setFocus();ti.setSelection(0,0)"/>
</mx:Application>
No Comments »
Recent Comments