浏览器关闭时, 如何提醒用户保存Flex上的拓扑数据

有好多同学问当浏览器关闭时, Flex如何能得到通知, 提醒用户保存数据. 这是个很普遍的问题, 下面就演示一下如何做.

Flex无法知道浏览器何时关闭, 但javascript可以(window.onbeforeunload), 所以思路就是:
1. Flex提供方法, 能让javascript调用, 以便在浏览器关闭时, 判断是否有数据需要保存, 如果有, 就提示, 没有就啥都不干<?xml version="1.0" encoding="utf-8"?>

<?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. html页面添加window.onbeforeunload事件, 判断如果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>

完整代码见附件: TestWindowClose