On detecting idle states in Flex 4
So I’m building a B2B dashboard in Flex, and thought I’d write up a quick post on a problem I didn’t see many online solutions for – well, there are solutions, but they all reference weaksauce flex 2, so I thought I’d go all new and shiny and post this working flex 4 example.
The problem is simple: How do I detect an Idle user, turn off all timed network requests, and — eventually — log off users silly enough to walk away from my interface?
Example: situation this code is meant to save my application from.
So Here’s a somewhat disjointed code sample. This isn’t a working application, and is missing a few helper functions, and, uh, any interactivity whatsoever – but should get anyone where they need to go.
Tada:
-
-
<?xml version="1.0" encoding="utf-8"?>
-
<s:Application xmlns:fx="ns.adobe.com/mxml/2009"
-
xmlns:s="library://ns.adobe.com/flex/spark"
-
xmlns:mx="library://ns.adobe.com/flex/mx"
-
mouseMove="application_mouseMoveHandler(event)">
-
<fx:Script>
-
<![CDATA[
-
-
public var idleCounter:int;
-
public var sysMan:ISystemManager;
-
public var secondsSinceIdle:int = 0;
-
-
//create your timer objects to do, you know, stuff. Below, a function called timer_short
-
-
//this is my function for handling grabbing a user after a successful login
-
protected function getUserByIDResult_resultHandler(event:ResultEvent):void
-
{
-
sysMan = FlexGlobals.topLevelApplication.systemManager;
-
sysMan.addEventListener(FlexEvent.IDLE, userIdle);
-
session.user = event.result as User;
-
timer.addEventListener(TimerEvent.TIMER, timer_short);
-
timer.start();
-
currentState='Main';
-
}
-
-
private function userIdle(e:FlexEvent):void {
-
idleCounter++;
-
trace(idleCounter);
-
if (idleCounter > 100) {
-
secondsSinceIdle += 10;
-
idleCounter = 0;
-
if (secondsSinceIdle > 60) {
-
trace("idle longer than 1 minute");
-
if (timer.hasEventListener(TimerEvent.TIMER)) {
-
timer.removeEventListener(TimerEvent.TIMER, timer_short);
-
}
-
}
-
if (secondsSinceIdle > 180) {
-
trace("idle longer than 3 minutes");
-
sysMan.removeEventListener(FlexEvent.IDLE, userIdle);
-
session.user = null;
-
currentState='Login';
-
Alert.show("You have been logged out due to laziness and despondency.",
-
"Alert",
-
Alert.OK);
-
}
-
}
-
}
-
-
protected function application_mouseMoveHandler(event:MouseEvent):void
-
{
-
secondsSinceIdle = 0;
-
idleCounter = 0;
-
if (!timer.hasEventListener(TimerEvent.TIMER) && session.user != null) {
-
timer.addEventListener(TimerEvent.TIMER, timer_short);
-
}
-
}
-
]]>
-
</fx:Script>
-
</s:Application>
Also, thanks to Razorlight for some WordPress assistance getting this page to appear correctly.
Tags: blog, flex, idle, programming
This entry was posted on Monday, July 5th, 2010 at 10:37 am and is filed under flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
What if somone will change his browser’s tab? I have noticed that an idle event doesn’t work in a situation like this.
Good question – I will investigate and confirm!
Actually bad question – I was wrong. The idle event goes on and detects movement in other tabs. I had to play around with activate and deactivate events.
Great, good news. That’s what I expected.
Why not just do this:
public function userIdle(event:FlexEvent):void{
// userIdle fires every 100ms
if (event.currentTarget.mx_internal::idleCounter == 600){
// after 60 seconds of idle time we do something
// the idleCounter only resets after the user has
// been active again…so this area only runs
// once for each idle time that extends for a minute and resets itself
}
}
Hello,
Just a little question :
Why a Timer ???
That work with any timer !!
Not sure what you mean? And this post is probably a little out of date at this point