Macromedia Flex Macromedia Flex
AutoClose PopUp With Default Selection
  Home

Feb 25, 2009 - AutoClose PopUp With Default Selection
Pop-Up Window with a countdown timer

This is a simple example of how to create a Pop-up window that auto-closes itself if the user doesn't make a selection within a certain time frame. After the timer runs out, the pop-up will close and a default choice will be used.

AlertCountDownTimer.mxml (Main file)

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
   3:     <mx:Script>
   4:     <![CDATA[
   5:     
   6:      import mx.managers.PopUpManager;
   7:         
   8:      [Bindable]
   9:      public var currentlyHappy:String = "No";
  10: 
  11:      public function changeMood():void
  12:      {
  13:         var winMood:AutoCloseWindow = AutoCloseWindow(PopUpManager.createPopUp(this, AutoCloseWindow, true));
  14:         PopUpManager.centerPopUp(winMood);
  15:         winMood.addEventListener("finished",moodUpdated);        
  16:      }
  17:     
  18:      public function moodUpdated(evt:Event):void
  19:      {
  20:         currentlyHappy = evt.currentTarget.currentlyHappy;    
  21:      }    
  22:         
  23:     ]]>
  24:     </mx:Script>
  25: 
  26:     
  27:     <mx:Panel title="Mood Manager">
  28: 
  29:      <mx:Label text="Are you currently happy? Answer - {currentlyHappy}"/>
  30:      <mx:Button label="Change Mood" click="changeMood()"/>
  31: 
  32:     </mx:Panel>
  33:     
  34: </mx:Application>

AutoCloseWindow.mxml (Pop-Up Window)

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Edit User" width="440" showCloseButton="true"
   3:                  close="closeMe('Yes')" creationComplete="initMe()">

   4: 
   5:     <mx:Script>
   6:         <![CDATA[
   7: 
   8:             import mx.managers.PopUpManager;
   9:          import flash.utils.Timer;
  10:          import flash.events.TimerEvent;
  11:          import flash.events.Event;
  12:             
  13:      [Bindable]                                
  14:             public var secondsLeft:int = 10;            
  15:             
  16:      [Bindable]                
  17:      public var currentlyHappy:String = 'Yes';             
  18:             
  19:      private var myTimer:Timer;            
  20:             
  21:             public function closeMe(mood:String):void
  22:             {
  23:                 myTimer.stop();
  24:                 currentlyHappy = mood;
  25:         this.dispatchEvent(new Event('finished',false));             
  26:                 PopUpManager.removePopUp(this);
  27:             }
  28:                         
  29:             public function initMe():void
  30:             {
  31:          myTimer = new Timer(1000);
  32:          myTimer.addEventListener('timer',refreshData);
  33:          myTimer.start();
  34:             }
  35:             
  36:      public function refreshData(event:TimerEvent):void
  37:      {
  38:         secondsLeft--;
  39:         if(secondsLeft < 1)
  40:          closeMe('Yes by Default');
  41:      }            
  42:             
  43:         ]]>
  44:     </mx:Script>            
  45: 
  46:  <mx:Label text="Are you happy?"/>
  47:  <mx:Button id="btnYes" click="closeMe('Yes')" label="Yes (default)"/>
  48:  <mx:Button id="btnNo" click="closeMe('No')" label="No"/>
  49: 
  50:  <mx:Text text="You have {secondsLeft} seconds left. Otherwise you'll be eternally happy"/>
  51: 
  52: </mx:TitleWindow>

Screen Shot

Links

File Details
Created On Feb, 25, 2009 by Tariq Ahmed
Last Modified On Feb, 25, 2009 by Tariq Ahmed
Group: Tips and Articles
Flex Versions: All
Category: Components
Type: Complete Lesson
Difficulty: Beginner
Keywords: popup, titlewindow, timer