Prompting User on Close of Application: Flex Way

WM_CLOSE, windowClosing, closeQuery  ,Which one is closer to your heart? One way or the other

you have to give your user that last chance to save modified data when he or she is closing

the application window. Providing the same functionality in Flex requires help on the JavaScript/HTML side,

 so this post will illustrate two techniques in one example.

 

Preventing the user from closing the browser window has been traditionally done via onbeforeunload event.
Here is the snippet of JavaScript code, which, once you put it in
./html-template/index.template.html will (IE & Mozilla)

 

1. resolve reference to Flash control;
2. tentatively invoke ActionScript method getUnsavedDataWarning() ;
3. force browser to popup the alert “Are you sure you want to navigate away? ….. OK/Cancel”; with your custom text in the middle:

1. <!– index.template.html –>
3. <script language=”JavaScript” type=”text/javascript”>
4. <!–
5. // Give user a chance to save modified data
6. window.onbeforeunload = function() {
7. var warning=”";
8. var fxControl = document.${application} || window.${application};
9. if (typeof fxControl.getUnsavedDataWarning==”function”) {
10. warning = fxControl.getUnsavedDataWarning();
11. }
12. if (warning!=”)
13. return warning;
14. else
15. return;
16. }
17. // –>
18. </script>

Now, all of this is in vain, of course, if your Flex application does not advertise the method
getUnsavedDataWarning(). And here is where Flash ExternalInterface API comes very handy. You can
expose any method: static, instance or anonymous, like the one below:

 

1. import flash.external.ExternalInterface;
3. private const UNSAVED_DATA_WARNING:String = ‘You have unsaved changes. You will lose them if you continue.’;
5. if ( ExternalInterface.available ) {
6. ExternalInterface.addCallback(
7. “getUnsavedDataWarning”,
8. function():String {
9. if (commitRequired) return UNSAVED_DATA_WARNING;
10. else return ”;
11. }
12. );
13. }

The complete MXML application is listed below. Do not forget to paste the JavaScript stuff in ./html-template/index.template.html:

 

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
3. layout=”vertical” creationComplete=”onCreationComplete()”>
4. <mx:Script><![CDATA[
6. import flash.external.ExternalInterface;
7. private const UNSAVED_DATA_WARNING:String = 'You have unsaved changes. You will lose them if you continue.';
8. [Bindable] private var commitRequired:Boolean;
10. private function onCreationComplete():void {
11. if ( ExternalInterface.available ) {
12. ExternalInterface.addCallback(
13. “getUnsavedDataWarning”,
14. function():String {
15. if (commitRequired) return UNSAVED_DATA_WARNING;
16. else return ”;
17. }
18. );
19. }
20. }
21. ]]></mx:Script>
22. <mx:Text text=”Type something below to test” />
23. <mx:TextInput id=”input” change=”commitRequired=(input.text!=”)”/>
24. <mx:Text text=”Close window and you will{commitRequired?’ ‘:’ not’} be prompted” />
26. </mx:Application>

WM_CLOSE, windowClosing, closeQuery, onbeforeunload… Tell me who your friends are … ; )