How to Remind Users to Save Data in TWaver Flex When the Browser Is to Be Closed

Quite a number of people have asked that how can Flex receive the message that reminds users to save their data before the close of the browser. In fact, this is a common question. Here is the show-how.

Though Flex is unable to know when the browser closes, javascript is (window.onbeforeunload). Hence our ideas:

1. The method is provided in Flex for javascript to call in order to judge whether there is data needed to save when closing the browser. If there is, then the message pops out; otherwise nothing will be done.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
                xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
                creationComplete="init();" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            import twaver.*;
            import twaver.network.interaction.InteractionEvent;

            private var box:ElementBox = new ElementBox();

            private function init():void {
                this.initBox();
                // Add callback, javascript use it to check whether popup message when browser is closing
                ExternalInterface.addCallback("needSave", needSave);
                // Enable save location button once location changed
                network.addInteractionListener(function(e:InteractionEvent):void {
                    if(InteractionEvent.LAZY_MOVE_END == e.kind
                            || InteractionEvent.LIVE_MOVE_END == e.kind) {
                        if(!btnSave.enabled){
                            btnSave.enabled = true;
                        }
                    }
                });
            }

            private function initBox():void {
                var from:Node = new Node();
                from.name = "From";
                from.location = new Point(100, 200);
                box.add(from);

                var to:Node = new Node();
                to.name = "To";
                to.location = new Point(400, 500);
                box.add(to);

                box.add(new Link(from, to));
                this.network.elementBox = box;
            }

            private function save():void {
                saveData();
                btnSave.enabled = false;
            }

            private function saveData():void {
                Alert.show("Data saved");
            }

            public function needSave():Boolean {
                return btnSave.enabled;
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%" height="100%">
        <mx:HBox width="100%">
            <mx:Button id="btnSave" label="Save Location" click="save()" enabled="false"/>
        </mx:HBox>
        <tw:Network id="network" width="100%" height="100%"/>
    </mx:VBox>
</mx:Application>

2. The event window.onbeforeunload is added into the html page to judge whether to pop up the massage according to whether there is data needed to be saved in Flex.

<script>
    window.onbeforeunload = function (evt) {
        var demo = document.demo || window.demo;
        if (demo.needSave()) {
            var message = 'You did not save your data. Do you really want to quit?';
            if (!evt) {
                evt = window.event;
            }
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        }
    }
</script>