Warn on flex application exit

If you have been developing web based applications which require login, I am pretty sure you would have come across this question – How do you safe-logout the user if the user just closes the window/tab when there is unsaved information on the user’s screen?

My current Flex project requires the user to login and logout. And most of the time, the users never use the logout button. They just close the browser and walk away! 😑 So, I needed a mechanism which will warn the user that there is unsaved information before closing the window. The way, I got this working was by using the FABridge.

In the application, I had an isAppDirty boolean.

public var isAppDirty:Boolean = false;

This variable is set to true whenever there is unsaved information in the application from any view. Now, add a few lines of javascript to your html wrapper. You can do this to the html file in the html-template folder.

————————————————————————————-

window.onbeforeunload = confirmExit;

function confirmExit(){
var flexApp = FABridge.flash.root();
var appDirty = flexApp.isAppDirty();

// note that the isAppDirty var is called like a function. This is done deliberately. Thats the way FABridge works πŸ™‚

if(appDirty == true){
return “The configuration changes performed in this session have not been saved. If you wish to save the config, please click CANCEL.”;
}
}

————————————————————————————-

Do not forget to include the FABridge libraries in the html -<script language=”JavaScript” type=”text/javascript” src=”bridge/FABridge.js”></script. You can download the FABridge libraries from here.

And you are set to go πŸ™‚ . Quiet simple, isn’t it?

Advertisements

3 Responses to Warn on flex application exit

  1. bdeitte says:

    I had to do this recently as well. You can do this without including all of FABridge by using ExternalInterface directly. Here’s the setup code in AS:

    try
    {
    ExternalInterface.addCallback(“hasUnsavedChanges”, hasUnsavedChanges);
    }
    catch(err:Error)
    {
    // ignore errors where ExternalInterface can’t be used, as we
    // just always warn on exit then
    }

    (I left out the Javascript and the hasUnsavedChanges() method.)

  2. Abdul Qabiz says:

    Yup! That’s really important from usability POV. BTW! You can use JavaScript component (I wrote long back) to inject that JS code. That way you don’t need to modify html template everytime (except to include js files).

    http://www.abdulqabiz.com/blog/archives/macromedia_flex/a_mxml_componen.php

    Actually, you can load FABridge.js in Flex and inject entire code, but there is some bug in my code, once it’s fixed. JS files can be loaded via Flex and injected in HTML on runtime. Currently, simple files can be loaded and injected.

    http://www.abdulqabiz.com/blog/archives/macromedia_flex/javascript_inje.php

    -abdul

  3. wiola says:

    Hi,

    So how can you call some internal flex method when user on event:

    return β€œThe configuration changes performed in this session have not been saved. If you wish to save the config, please click CANCEL.”;

    clicks YES?

    I mean, another method that can do logout on the FLEX side?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: