One of the most common problems in the RIA applications that require login/logout and also some saves is how to prevent the user from closing the window/tab when there is unsaved information?

The answer is simple: FABridge.

This functionality allows you to catch the unload event from javascript and execute your flex code.

Here is how:

First you need to create a public variable in your application

public var isAppDirty:Boolean = false;

That variable is set to true whenever changes occur that must be saved.

Second you need to modify your html wrapper. It is located in the html-templates 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 "Data has changed. If you wish to save the data, click CANCEL, if not click OK.";
  }
}

Third you need 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.

There also are some ways of injecting the FABridge libraries from actionscript, and it will come in a later post.