Flex Applications that Warn on Close

« Good news for RIA and SWF | Main | Merapi is now available for download »

By Rich Tretola | July 2, 2008

3,436 views

[ http://api.tweetmeme.com/button.js?url=http%3A%2F%2Fblog.everythingflex.com%2F2008%2F07%2F02%2Fflex-applications-that-warn-on-close%2F

Occasionally, there are times when you need to give the user the heads up that closing the application could cause issues as there are processes currently running.

This example shows an easy way to do this via the FABridge. Click the link below to run the sample.

Warn On Close

So, how does it work?

Here are the steps to take to add this functionality.

Add an instance of the FABridge to your main Application file

<bridge:FABridge bridgeName="flex"/>

Create 2 variables within your main Application file to hold a warning on/pff flag and a message.

1
2

public var warnUser:Boolean;
public var warningMessage:String;

Create a JavaScript file that will call a function before the browser window closes. The contents of the file should look something like this. Notice that the confirmExit function simply creates a variable to hold a reference to the Flex application. It then checks to see if it should warn the user by reading the warnUser ActionScript property (the FABridge JavaScript object uses implicit getters and setters when reading and writting ActionScript variables), finally it will alert the user with the custom message stored in the warningMessage property.

1
2
3
4
5
6
7
8
9
10

window.onbeforeunload = confirmExit;

function confirmExit()
{
var flexApp = FABridge.flex.root();
if(flexApp.getWarnUser())
{
return flexApp.getWarningMessage();
}
}

The last thing you need to do is update your index.template.html file to include your custom JavaScript and the FABridge.js files.

1
2
3
4

<script src="bridge/FABridge.js" language="javascript"></script>
<script src="bridge/WarningBridge.js" language="javascript"></script>

That’s it. To avoid security sandbox errors, just make sure you run the sample through a web server and not a file path. Here is the full source code.

Tweet This! Share this on del.icio.us Digg this! Share this on Reddit Stumble upon something good? Share it on StumbleUpon Share this on Technorati Share this on Facebook

Topics: Flex 3 (Moxie) | 3 Comments »