«
»

Сообщение о несохранённых данных перед закрытием окна браузера

Flex cookbook entry: Message about unsaved data before closing the browser window.

Для Flash и Flex приложений работающих с пользовательскими данными очень важно, чтоб пользователь всегда мог сохранить свою работу перед закрытием приложения. Стандартные браузеры, имеющие поддержку JavaScript оповещают о закрытии окна/таба или переходе на другую страничку. Все эти действия могут привести к потере данных, но использование этого оповещения позволит сохранить все необходимые данные. Flash/Flex приложение подписывается на JavaScript событие "onbeforeunload", которое вызывается всегда перед закрытием страницы или переходом на другую страницу.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preinitialize="preinitializeHandler(event)" layout="horizontal">
  3.  <mx:Script>
  4.   <![CDATA[
  5.    import aw.external.jsinterface.JSFunction;
  6.    import aw.external.JSInterface;
  7.    static public const NOT_SAVED_ALERT:String = '\\\\n\\\\nYou have not saved data. Please, save data before close window.\\\\n Do you realy want to close window without save changes?\\\\n\\\\n';
  8.    protected function preinitializeHandler(event:Event):void{
  9.     JSInterface.initialize(this.systemManager.stage);
  10.     // For Internet Explorer, FireFox, Safari or other
  11.     JSInterface.window.onbeforeunload = JSFunction.create("var text; if(!window.isFlexDataSaved){text='"+NOT_SAVED_ALERT+"';}; return text;");
  12.     JSInterface.window.isFlexDataSaved = false;
  13.    }
  14.   ]]>
  15.  </mx:Script>
  16.  <mx:Button label="Save Data" click="{JSInterface.window.isFlexDataSaved = true}"/>
  17.  <mx:Spacer width="100"/>
  18.  <mx:Button label="Change Data" click="{JSInterface.window.isFlexDataSaved = false}"/>
  19. </mx:Application>

Этот пример иллюстрирует внедрение JavaScript функции обратного вызова, которая спрашивает пользователя о сохранении данных, перед закрытием страницы. Эта функция проверяет значение ключа "isFlexDataSaved" и если он указывает на то, что данные уже сохранены, то приложение закрывается сразу.

Следует обратить внимание на то, что я не использовал ActionScript функцию как каллбек в данном случае. Это из-за того, что некоторые браузеры не корректно отрабатывают и не отображают необходимое сообщение. А, к примеру, для FireFox вполне подойдёт такой вариант:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preinitialize="preinitializeHandler(event)" layout="horizontal">
  3. 	<mx:Script>
  4. 		<![CDATA[
  5. 			import aw.external.jsinterface.JSFunction;
  6. 			import aw.external.jsinterface.JSDynamic;
  7. 			import aw.external.JSInterface;
  8. 			static public const NOT_SAVED_ALERT:String = '\\\\n\\\\nYou have not saved data. Please, save data before close window.\\\\n Do you realy want to close window without save changes?\\\\n\\\\n';
  9. 			protected function preinitializeHandler(event:Event):void{
  10. 				JSInterface.window.onbeforeunload = this.isDataSaved;
  11. 			}
  12. 			protected function isDataSaved(event:JSDynamic=null):String{
  13. 				if(JSInterface.window.isFlexDataSaved) return "";
  14. 				if(event){
  15. 					event.returnValue = NOT_SAVED_ALERT;
  16. 				}
  17. 				return NOT_SAVED_ALERT;
  18. 			}
  19. 		]]>
  20. 	</mx:Script>
  21. 	<mx:Button label="Save Data" click="{JSInterface.window.isFlexDataSaved = true}"/>
  22. 	<mx:Spacer width="100"/>
  23. 	<mx:Button label="Change Data" click="{JSInterface.window.isFlexDataSaved = false}"/>
  24. </mx:Application>

В загружаемом примере реализованы оба варианта.

Во время вызова события "onbeforeunload" блокируются любые HTTP запросы из Flash приложения. Можно сделать как офисные программы - перед закрытием быстро сохранить данные на локальном компьютере и при следующем запуске программы спросить "Такого-то числа был сохранён черновик, не хотите ли его восстановить и продолжить работу?".

Загрузить проект.

Посетить официальный сайт JSInterface.

Метки: , , , ,

Запись опубликована 21.05.2009 в 11:49 пп и размещена в рубрике ActionScript 3, Flash, Flex, JSInterface. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.

Добавить комментарий

Вы должны авторизоваться для отправки комментария.