Flex Monkey Patches

Detecting when a Flex application loses focus.

December 7th, 2007 by Kyle
Tags: events, Flex, focus, lose-focus, mouse-event, mouseevent
Posted in: Flex

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 »

Flex Accordion Open on Hover by faking mouse events.

August 30th, 2007 by Kyle
Tags: accordion, accordion-header, event, eventdispatcher, eventlistener, faking, faking-mouse-events, Flex, header, hover, mouse, mouse-event, mouse-events, mouseover
Posted in: Flex

I had a customer who asked for help in modifying the Accordion component to change panes when a user moused over a pane header rather than when clicked upon. It turns out that this was a fairly straight forward modification.
In my extension to accordion upon child add, I merely add an eventlistenr to each child’s header, listening for mouseOver events and responding to them by dispatching a click event. Everything else just fall into place, since things are already wired to respond to the click event.

Here is my extension to accordion:

<mx:accordion xmlns:mx="http://www.adobe.com/2006/mxml">
childAdd="onChildAdd(event)">

<mx:script>
<!–[CDATA[
import mx.containers.accordionClasses.AccordionHeader;
import mx.containers.Accordion;

private function onChildAdd(e:Event):void{
var a:Accordion = e.target as Accordion;
var header:AccordionHeader=a.getHeaderAt(acc.numChildren-1) as AccordionHeader;
header.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
}

private function onMouseOver(e:MouseEvent):void{
(e.target as AccordionHeader).dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}

]]–>
</mx:script>
</mx:accordion>

Read the rest of this post»

3 Comments »

Detecting when a Flex application loses focus.

Flex Accordion Open on Hover by faking mouse events.

Archives

Recent Comments

Recent Posts