Share 'Examples' on Delicious Share 'Examples' on Facebook Share 'Examples' on Google Bookmarks Share 'Examples' on Twitter

  1. Simple Popup
  2. Animated Popup
  3. Multiple Popups
  4. Multiple Animated Popups
  5. Modal Popup
  6. Multiple Modal Popups
  7. Turning a modeless into a modal Popup
  8. Focus and modal popups
  9. Custom Modal Overly
  10. All Examples
    1. Popup
    2. Tooltip
    3. Placement
  11. Leave a Comment

Examples

Categories: Popup (9), Tooltip (5), Placement (5)

Simple Popup

The example shows how a popup window is being created, removed and centered.

Related: Simple Popup
Category: Popup
SimplePopUp.swf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import org.as3commons.ui.layout.shortcut.hgroup;
  import flash.display.DisplayObject;
  import flash.display.Sprite;
  import flash.events.Event;

  public class SimplePopUp extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _addButton : Button;
    private var _centerButton : Button;
   
    public function SimplePopUp() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);

      _addButton = new Button();
      _addButton.setSize(50, 20);
      _addButton.toggle = true;
      _addButton.label = "show";
      _addButton.selectedLabel = "hide";
      _addButton.addEventListener(ButtonEvent.SELECTION_CHANGED, showHideHandler);
     
      _centerButton = new Button();
      _centerButton.setSize(50, 20);
      _centerButton.label = "center";
      _centerButton.visible = false;
      _centerButton.addEventListener(ButtonEvent.CLICK, centerHandler);

      hgroup("gap", 6, _addButton, _centerButton).layout(this);
    }
   
    private function showHideHandler(event : ButtonEvent) : void {
      if (_addButton.selected) {
        var alert : AlertBox = new AlertBox(
          "Simple Popup",
          "This is a simple popup window. Close this window by clicking the close button.",
          [null, null, "Close"],
          removePopUp
        );
        alert.x = 40;
        alert.y = 60;
        _popUpManager.createPopUp(alert);
        _centerButton.visible = true;
      } else {
        removePopUp(_popUpManager.popUpOnTop);
      }
    }
   
    private function centerHandler(event : ButtonEvent) : void {
      _popUpManager.center(_popUpManager.popUpOnTop);
    }
   
    private function removePopUp(alert : DisplayObject, event : String = null) : void {
      _popUpManager.removePopUp(alert);
      _centerButton.visible = false;
      _addButton.selected = false;
    }
  }
}

Animated Popup

This is an extension of the simple popup example. Show and hide process of the popup is animated using tweens. The example code shows where to place the tweening in the source code.

Category: Popup
AnimatedPopUp.swf
AnimatedPopUp.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.gskinner.motion.GTween;
  import com.gskinner.motion.easing.Cubic;
  import com.gskinner.motion.easing.Sine;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import flash.display.DisplayObject;
  import flash.display.Sprite;
  import flash.events.Event;

  public class AnimatedPopUp extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _addButton : Button;
   
    public function AnimatedPopUp() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);

      _addButton = new Button();
      _addButton.setSize(50, 20);
      _addButton.toggle = true;
      _addButton.label = "show";
      _addButton.selectedLabel = "hide";
      _addButton.addEventListener(ButtonEvent.SELECTION_CHANGED, showHideHandler);
      addChild(_addButton);
    }
   
    private function showHideHandler(event : ButtonEvent) : void {
      if (_addButton.selected) {
        var alert : AlertBox = new AlertBox(
          "Simple Popup",
          "This is a simple popup window. Close this window by clicking the close button.",
          [null, null, "Close"],
          removePopUp
        );
        _popUpManager.createPopUp(alert, true);

        var tween : GTween = new GTween();
        tween.target = alert;
        tween.ease = Sine.easeOut;
        tween.duration = .15;
 
        // tween position
        tween.setValue("x", alert.x);
        tween.setValue("y", alert.y);
        alert.x += alert.width/2;
        alert.y += alert.height/2;
        // tween scale
        alert.scaleX = alert.scaleY = 0;
        alert.scaleX = alert.scaleY = 0;
        tween.setValue("scaleX", 1);
        tween.setValue("scaleY", 1);
        // tween alpha
        alert.alpha = 0;
        tween.setValue("alpha", 1);

      } else {
        removePopUp(_popUpManager.popUpOnTop);
      }
    }
   
    private function removePopUp(alert : DisplayObject, event : String = null) : void {
      var tween : GTween = new GTween();
      tween.target = alert;
      tween.ease = Cubic.easeIn;
      tween.duration = .2;

      // tween position
      tween.setValue("x", alert.x + alert.width/2);
      tween.setValue("y", alert.y + alert.height/2);
      // tween scale
      tween.setValue("scaleX", 0);
      tween.setValue("scaleY", 0);
      // tween alpha
      tween.setValue("alpha", 0);
     
      tween.onComplete = function(tween : GTween) : void {
        _popUpManager.removePopUp(alert);
      };

      _addButton.selected = false;
    }
  }
}

Multiple Popups

The example shows how to bring a popup in front and remove the top popup. Click a window to bring it in front. The remove button will remove the popup currently being on top.

Category: Popup
MultiplePopUps.swf
MultiplePopUps.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import org.as3commons.ui.layout.shortcut.hgroup;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;

  public class MultiplePopUps extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _addButton : Button;
    private var _removeButton : Button;
    private var _alertId : uint;
    private var _startPosition : uint = 20;

    public function MultiplePopUps() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);

      _addButton = new Button();
      _addButton.setSize(50, 20);
      _addButton.label = "add";
      _addButton.addEventListener(ButtonEvent.CLICK, addHandler);

      _removeButton = new Button();
      _removeButton.setSize(60, 20);
      _removeButton.enabled = false;
      _removeButton.label = "remove";
      _removeButton.addEventListener(ButtonEvent.CLICK, removeHandler);

      hgroup(
        "gap", 6,
        _addButton,
        _removeButton
      ).layout(this);
     
      addPopUp();
      addPopUp();
    }
   
    private function addHandler(event : ButtonEvent = null) : void {
      addPopUp();
    }

    private function removeHandler(event : ButtonEvent) : void {
      removePopUp(_popUpManager.popUpOnTop as AlertBox);
    }

    private function closeCallback(alert : AlertBox, event : String) : void {
      removePopUp(alert);
    }

    private function alertClickHandler(event : MouseEvent) : void {
      _popUpManager.bringToFront(event.currentTarget as AlertBox);
    }
   
    private function addPopUp() : void {
      _startPosition += 30;
      if (_startPosition > 140) _startPosition = 50;

      var alert : AlertBox = new AlertBox(
        "Popup " + ++_alertId,
        "This is a simple popup window. Close this window by clicking the close button or the remove button of the outher application.",
        [null, null, "Close"],
        closeCallback
      );

      alert.x = alert.y = _startPosition;
      alert.addEventListener(MouseEvent.MOUSE_DOWN, alertClickHandler);
      _popUpManager.createPopUp(alert);
      enableButtons();
    }

    private function removePopUp(alert : AlertBox) : void {
      alert.removeEventListener(MouseEvent.MOUSE_DOWN, alertClickHandler);
      _popUpManager.removePopUp(alert);
      enableButtons();
    }

    private function enableButtons() : void {
      _addButton.enabled = _popUpManager.numPopUps < 4; // max 4
      _removeButton.enabled = _popUpManager.numPopUps > 0;
    }
  }
}

Multiple Animated Popups

This is an extension of the multiple popups example. Show and hide process of a popup is animated using tweens. The example code shows where to place the tweening in the code.

Category: Popup
AnimatedPopUps.swf
AnimatedPopUps.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.gskinner.motion.GTween;
  import com.gskinner.motion.easing.Cubic;
  import com.gskinner.motion.easing.Sine;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;

  public class AnimatedPopUps extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _alertId : uint;
    private var _startPosition : uint = 20;

    public function AnimatedPopUps() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);

      var addButton : Button = new Button();
      addButton.setSize(50, 20);
      addButton.label = "add";
      addButton.addEventListener(ButtonEvent.CLICK, addHandler);
      addChild(addButton);
    }
   
    private function addHandler(event : ButtonEvent = null) : void {
      addPopUp();
    }

    private function closeCallback(alert : AlertBox, event : String) : void {
      removePopUp(alert);
    }

    private function alertClickHandler(event : MouseEvent) : void {
      _popUpManager.bringToFront(event.currentTarget as AlertBox);
    }
   
    private function addPopUp() : void {
      _startPosition += 30;
      if (_startPosition > 140) _startPosition = 50;

      var alert : AlertBox = new AlertBox(
        "Popup " + ++_alertId,
        "This is a simple popup window. Close this window by clicking the close button or the remove button of the outher application.",
        [null, null, "Close"],
        closeCallback
      );

      alert.x = alert.y = _startPosition;
      alert.addEventListener(MouseEvent.MOUSE_DOWN, alertClickHandler);
      _popUpManager.createPopUp(alert);

      var tween : GTween = new GTween();
      tween.target = alert;
      tween.ease = Sine.easeOut;
      tween.duration = .15;

      // tween position
      tween.setValue("x", alert.x);
      tween.setValue("y", alert.y);
      alert.x += alert.width/2;
      alert.y += alert.height/2;
      // tween scale
      alert.scaleX = alert.scaleY = 0;
      alert.scaleX = alert.scaleY = 0;
      tween.setValue("scaleX", 1);
      tween.setValue("scaleY", 1);
      // tween alpha
      alert.alpha = 0;
      tween.setValue("alpha", 1);
    }

    private function removePopUp(alert : AlertBox) : void {
      alert.removeEventListener(MouseEvent.MOUSE_DOWN, alertClickHandler);

      var tween : GTween = new GTween();
      tween.target = alert;
      tween.ease = Cubic.easeIn;
      tween.duration = .2;

      // tween position
      tween.setValue("x", alert.x + alert.width/2);
      tween.setValue("y", alert.y + alert.height/2);
      // tween scale
      tween.setValue("scaleX", 0);
      tween.setValue("scaleY", 0);
      // tween alpha
      tween.setValue("alpha", 0);
     
      tween.onComplete = function(tween : GTween) : void {
        _popUpManager.removePopUp(alert);
      };
    }
  }
}

Modal Popup

The example shows how to open and remove a modal popup window. You may also double click the popup window’s title bar to remove the popup.

Category: Popup
ModalPopUp.swf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import flash.display.Sprite;
  import flash.events.Event;

  public class ModalPopUp extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _addButton : Button;
   
    public function ModalPopUp() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);

      _addButton = new Button();
      _addButton.setSize(50, 20);
      _addButton.label = "add";
      _addButton.addEventListener(ButtonEvent.CLICK, addHandler);
      addChild(_addButton);
    }
   
    private function addHandler(event : ButtonEvent) : void {
      var alert : AlertBox = new AlertBox(
        "Modal Popup",
        "This is a modal popup window. Close this window by clicking the close button.",
        [null, null, "Close"],
        removePopUp
      );
      _popUpManager.createPopUp(alert, true, true);
    }
   
    private function removePopUp(alert : AlertBox, event : String) : void {
      _popUpManager.removePopUp(alert);
      _addButton.selected = false;
    }
  }
}

Multiple Modal Popups

The example shows multiple modal popups in action.

Category: Popup
MultipleModalPopUps.swf
MultipleModalPopUps.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import flash.display.Sprite;
  import flash.events.Event;
 
  public class MultipleModalPopUps extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _alertId : uint;
    private var _startPosition : uint = 20;

    public function MultipleModalPopUps() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);
     
      var addButton : Button = new Button();
      addButton.setSize(50, 20);
      addButton.label = "add";
      addButton.addEventListener(ButtonEvent.CLICK, addHandler);
      addChild(addButton);
    }
   
    private function addHandler(event : ButtonEvent) : void {
      addPopUp();
    }
   
    private function alertCallback(alert : AlertBox, event : String) : void {
      if (event == AlertBox.ALERT_CANCEL) removePopUp(alert);
      else addPopUp();
    }

    private function addPopUp() : void {
      _startPosition += 30;
      if (_startPosition > 140) _startPosition = 50;

      var alert : AlertBox = new AlertBox(
        "Popup " + ++_alertId,
        "This is a modal popup window. Close this window by clicking the close button.",
        ["Add", null, "Close"],
        alertCallback
      );

      alert.x = alert.y = _startPosition;
      _popUpManager.createPopUp(alert, false, true);
    }

    private function removePopUp(alert : AlertBox) : void {
      _popUpManager.removePopUp(alert);
    }
  }
}

Turning a modeless into a modal Popup

The example shows code and demonstrates the behavior of turning a modeless into a modal window at runtime.

Category: Popup
ModelessToModal.swf
ModelessToModal.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import org.as3commons.ui.layout.constants.Align;
  import org.as3commons.ui.layout.shortcut.hgroup;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class ModelessToModal extends Sprite {
    protected var _popUpManager : PopUpManager;
    private var _alertId : uint;
    private var _startPosition : uint = 20  ;

    public function ModelessToModal() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);
      _popUpManager.modalOverlay = ModalOverlay;
      _popUpManager.popUpCallback = setText;
      _popUpManager.modalPopUpCallback = setText;

      var addButton : Button = new Button();
      addButton.setSize(60, 22);
      addButton.label = "modeless";
      addButton.addEventListener(ButtonEvent.CLICK, addHandler);
     
      var addModalButton : Button = new Button();
      addModalButton.setSize(50, 22);
      addModalButton.label = "modal";
      addModalButton.addEventListener(ButtonEvent.CLICK, addModalHandler);
     
      var tf : TextField = new TextField();
      tf.selectable = false;
      tf.autoSize = TextFieldAutoSize.LEFT;
      tf.defaultTextFormat = new TextFormat("_sans", 11, 0x444444);
      setText();
     
      hgroup("gap", 5, "vAlign", Align.MIDDLE, addButton, addModalButton, tf).layout(this);
     
      function setText() : void {
        tf.text = "Popups: "
          + _popUpManager.numPopUps
          + " overall and "
          + _popUpManager.numModalPopUps + " modal. ";
        tf.appendText("Focus: "
          + (_popUpManager.focusEnabled(root) ? "enabled" : "disabled")
          + ".");
      }

      addPopUp();
    }
   
    private function addHandler(event : ButtonEvent) : void {
      addPopUp();
    }
   
    private function addModalHandler(event : ButtonEvent) : void {
      addPopUp(true);
    }

    private function addPopUp(modal : Boolean = false) : void {
      _startPosition += 30;
      if (_startPosition > 140) _startPosition = 50;
     
      var alert : AlertBox = new CustomAlertBox(
        "Popup " + ++_alertId,
        "This is a popup window. You may set this window to be modal or modeless. Close this window by clicking the close button.",
        [null, null, "Close"],
        alertCallback, modal
      );

      alert.x = alert.y = _startPosition;
      alert.addEventListener(MouseEvent.MOUSE_DOWN, alertClickHandler);
      _popUpManager.createPopUp(alert, false, modal);
    }

    private function alertCallback(alert : AlertBox, event : String) : void {
      if (event == AlertBox.ALERT_CANCEL) removePopUp(alert);
      else if (event == "modal") _popUpManager.makeModal(alert);
      else _popUpManager.makeModeless(alert);
    }

    private function alertClickHandler(event : MouseEvent) : void {
      if (event.target is Button) return;
      _popUpManager.bringToFront(event.currentTarget as AlertBox);
    }
   
    private function removePopUp(alert : AlertBox) : void {
      _popUpManager.removePopUp(alert);
    }
  }
}

import layer.popup.common.AlertBox;
import com.sibirjak.asdpc.button.Button;
import com.sibirjak.asdpc.button.ButtonEvent;
import flash.display.Sprite;

internal class ModalOverlay extends Sprite {
  public function ModalOverlay() {
    with (graphics) {
      clear();
      beginFill(0x000000, .3);
      drawRect(0, 0, 100, 100);
    }
  }
}

internal class CustomAlertBox extends AlertBox {
  private var _modal : Boolean;
 
  public function CustomAlertBox(headline : String, text : String, buttons : Array, clickCallback : Function, modal : Boolean) {
    _modal = modal;
    super(headline, text, buttons, clickCallback);
  }

  override protected function getCustomButton() : Button {
    var button : Button = new Button();
    button.setSize(60, 22);
    button.toggle = true;
    button.selected = _modal;
    button.label = "Modal";
    button.selectedLabel = "Modeless";
    button.addEventListener(ButtonEvent.SELECTION_CHANGED, buttonSelectedHandler);
    return button;
  }
 
  private function buttonSelectedHandler(event : ButtonEvent) : void {
    if (Button(event.currentTarget).selected) {
      _clickCallback(this, "modal");
    } else {
      _clickCallback(this, "modeless");
    }
  }
}

Focus and modal popups

The example shows how the PopUpManager may be queried to return if a modal popup is present or if an object of the main application is allowed to receive focus.

Category: Popup
ModelessToModal.swf
ModelessToModal.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import org.as3commons.ui.layout.constants.Align;
  import org.as3commons.ui.layout.shortcut.hgroup;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class ModelessToModal extends Sprite {
    protected var _popUpManager : PopUpManager;
    private var _alertId : uint;
    private var _startPosition : uint = 20  ;

    public function ModelessToModal() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);
      _popUpManager.modalOverlay = ModalOverlay;
      _popUpManager.popUpCallback = setText;
      _popUpManager.modalPopUpCallback = setText;

      var addButton : Button = new Button();
      addButton.setSize(60, 22);
      addButton.label = "modeless";
      addButton.addEventListener(ButtonEvent.CLICK, addHandler);
     
      var addModalButton : Button = new Button();
      addModalButton.setSize(50, 22);
      addModalButton.label = "modal";
      addModalButton.addEventListener(ButtonEvent.CLICK, addModalHandler);
     
      var tf : TextField = new TextField();
      tf.selectable = false;
      tf.autoSize = TextFieldAutoSize.LEFT;
      tf.defaultTextFormat = new TextFormat("_sans", 11, 0x444444);
      setText();
     
      hgroup("gap", 5, "vAlign", Align.MIDDLE, addButton, addModalButton, tf).layout(this);
     
      function setText() : void {
        tf.text = "Popups: "
          + _popUpManager.numPopUps
          + " overall and "
          + _popUpManager.numModalPopUps + " modal. ";
        tf.appendText("Focus: "
          + (_popUpManager.focusEnabled(root) ? "enabled" : "disabled")
          + ".");
      }

      addPopUp();
    }
   
    private function addHandler(event : ButtonEvent) : void {
      addPopUp();
    }
   
    private function addModalHandler(event : ButtonEvent) : void {
      addPopUp(true);
    }

    private function addPopUp(modal : Boolean = false) : void {
      _startPosition += 30;
      if (_startPosition > 140) _startPosition = 50;
     
      var alert : AlertBox = new CustomAlertBox(
        "Popup " + ++_alertId,
        "This is a popup window. You may set this window to be modal or modeless. Close this window by clicking the close button.",
        [null, null, "Close"],
        alertCallback, modal
      );

      alert.x = alert.y = _startPosition;
      alert.addEventListener(MouseEvent.MOUSE_DOWN, alertClickHandler);
      _popUpManager.createPopUp(alert, false, modal);
    }

    private function alertCallback(alert : AlertBox, event : String) : void {
      if (event == AlertBox.ALERT_CANCEL) removePopUp(alert);
      else if (event == "modal") _popUpManager.makeModal(alert);
      else _popUpManager.makeModeless(alert);
    }

    private function alertClickHandler(event : MouseEvent) : void {
      if (event.target is Button) return;
      _popUpManager.bringToFront(event.currentTarget as AlertBox);
    }
   
    private function removePopUp(alert : AlertBox) : void {
      _popUpManager.removePopUp(alert);
    }
  }
}

import layer.popup.common.AlertBox;
import com.sibirjak.asdpc.button.Button;
import com.sibirjak.asdpc.button.ButtonEvent;
import flash.display.Sprite;

internal class ModalOverlay extends Sprite {
  public function ModalOverlay() {
    with (graphics) {
      clear();
      beginFill(0x000000, .3);
      drawRect(0, 0, 100, 100);
    }
  }
}

internal class CustomAlertBox extends AlertBox {
  private var _modal : Boolean;
 
  public function CustomAlertBox(headline : String, text : String, buttons : Array, clickCallback : Function, modal : Boolean) {
    _modal = modal;
    super(headline, text, buttons, clickCallback);
  }

  override protected function getCustomButton() : Button {
    var button : Button = new Button();
    button.setSize(60, 22);
    button.toggle = true;
    button.selected = _modal;
    button.label = "Modal";
    button.selectedLabel = "Modeless";
    button.addEventListener(ButtonEvent.SELECTION_CHANGED, buttonSelectedHandler);
    return button;
  }
 
  private function buttonSelectedHandler(event : ButtonEvent) : void {
    if (Button(event.currentTarget).selected) {
      _clickCallback(this, "modal");
    } else {
      _clickCallback(this, "modeless");
    }
  }
}

Custom Modal Overly

The default overlay created with a modal popup is just a semi-transparent white shape. You may change it easily. You may also double click the popup window’s title bar to remove the popup.

Category: Popup
CustomModalOverlay.swf
CustomModalOverlay.as: Source raw, Source highlighted
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
package layer.popup {
  import layer.popup.common.AlertBox;
  import com.sibirjak.asdpc.button.Button;
  import com.sibirjak.asdpc.button.ButtonEvent;
  import org.as3commons.ui.layer.PopUpManager;
  import flash.display.Sprite;
  import flash.events.Event;

  public class CustomModalOverlay extends Sprite {
    private var _popUpManager : PopUpManager;
    private var _addButton : Button;
   
    public function CustomModalOverlay() {
      addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(event : Event) : void {
      removeEventListener(Event.ADDED_TO_STAGE, init);
     
      var container : Sprite = stage.addChild(new Sprite()) as Sprite;
      _popUpManager = new PopUpManager(container);
      _popUpManager.modalOverlay = ModalOverlay;

      _addButton = new Button();
      _addButton.setSize(50, 20);
      _addButton.label = "add";
      _addButton.addEventListener(ButtonEvent.CLICK, addHandler);
      addChild(_addButton);
    }
   
    private function addHandler(event : ButtonEvent) : void {
      var alert : AlertBox = new AlertBox(
        "Modal Popup",
        "This is a modal popup window. Close this window by clicking the close button.",
        [null, null, "Close"],
        removePopUp
      );
      _popUpManager.createPopUp(alert, true, true);
    }
   
    private function removePopUp(alert : AlertBox, event : String) : void {
      _popUpManager.removePopUp(alert);
      _addButton.selected = false;
    }
  }
}

import flash.display.Sprite;

internal class ModalOverlay extends Sprite {
  public function ModalOverlay() {
    with (graphics) {
      clear();
      beginFill(0x000000, .3);
      drawRect(0, 0, 100, 100);
    }
  }
}

All Examples

Popup

Simple Popup

The example shows how a popup window is being created, removed and centered.

Related: Simple Popup
Category: Popup

Animated Popup

This is an extension of the simple popup example. Show and hide process of the popup is animated using tweens. The example code shows where to place the tweening in the source code.

Category: Popup

Multiple Popups

The example shows how to bring a popup in front and remove the top popup. Click a window to bring it in front. The remove button will remove the popup currently being on top.

Category: Popup

Multiple Animated Popups

This is an extension of the multiple popups example. Show and hide process of a popup is animated using tweens. The example code shows where to place the tweening in the code.

Category: Popup

Modal Popup

The example shows how to open and remove a modal popup window. You may also double click the popup window’s title bar to remove the popup.

Category: Popup

Multiple Modal Popups

The example shows multiple modal popups in action.

Category: Popup

Turning a modeless into a modal Popup

The example shows code and demonstrates the behavior of turning a modeless into a modal window at runtime.

Category: Popup

Focus and modal popups

The example shows how the PopUpManager may be queried to return if a modal popup is present or if an object of the main application is allowed to receive focus.

Category: Popup

Custom Modal Overly

The default overlay created with a modal popup is just a semi-transparent white shape. You may change it easily. You may also double click the popup window’s title bar to remove the popup.

Category: Popup

Tooltip

Simple Tooltip

The example shows the setup of a basic tooltip using the ToolTipManager class. The main class creates the ToolTipManager instance and registers tooltip adapter and the actual tooltip instance together with a component selector. Whenever a box is moused, the ToolTipManager instance is commanded to show or hide a tooltip.

Category: Tooltip

Animated Tooltip

The example shows the setup of an animated tooltip. The tooltip is shown after a short delay and auto hidden after 2 seconds. When a tooltip is shown and the mouse moves quickly to another object, the tip shall be simply moved rather than animated again. This is useful if users want to step over all object tooltips rapidly.

Category: Tooltip

Advanced Tooltip

The example shows the setup of an advanced tooltip with nose, show delay, auto hide and auto correction (with anchor swap and horizontal shift). Move the colored boxes around to see the tooltips align on the grey border.

Category: Tooltip

Individual Tooltips

It is possible to set up individual tooltips for different components. This example configures boxes to use either the advanced (box 1 and 2) or the simple tooltip (box 3 to 5) from the other tooltip examples. The advanced tooltip will be auto corrected at the grey border.

Category: Tooltip

Contextual Tooltips

You may let behave the same tooltip differently depending on properties of the owner object. The configuration can be placed in the tooltip adapter. The example shows four boxes, each with distinctive tooltip placement.

Category: Tooltip

Placement

Placement Demonstration

Using bounds, auto swap and auto correct you may fine grained control the placement of popups or overlays in case of exceedings. This example lets you specify placement anchors of both source and layer. Change the anchors of both the source and the layer object in the right column. Move the source object around to see the layer position being auto corrected and anchors swapped.

Category: Placement

Placement Anchors

The placement class allows you to align objects of different branches of the display list. For example, you may place a tooltip around a source object or the popup of a color picker around the trigger button. The examples allows you to modify the placement anchors for both the source and the layer object as well as a placement offset. Click the controls at the right side.

Category: Placement

Auto Correct

Sometimes the layer dimensions may exceed the stage’s area. You may assign a boundary rect to auto correct the layer’s position. The layer’s position then will be corrected to stay within the bounds. Useful application: Large tooltips who should not exceed the stage area.

Category: Placement

Auto Swap Anchors

You may enable the auto swap option to automatically swap the placement anchors of source and layer object in that case the layer exceeds the specified bounds. A tooltip for example can be displayed at the left instead of the default right side of the source object. Use the controls of the auto swap section to specify a diff value starting from that the anchors should be swapped. Move the grey box towards the boundaries. Swapping (if enabled) works for the following overlap conditions: The layer overlaps the bounds at …
right and anchors set to [source-right:layer-left] will be swapped to [source-left:layer-right]
bottom and anchors set to [s-bottom:l-top] will be swapped to [s-top:l-bottom]
top and anchors set to [s-top:l-bottom] will be swapped to [s-bottom:l-top]
left and anchors set to [s-left:l-right] will be swapped to [s-right:l-left].
In all other cases (e.g. layer or source with a centered anchor) swapping is not supported.

Category: Placement

Placement and Tooltip

Using bounds, auto swap and auto correct you may fine grained control the placement of popups or overlays in case of exceedings. The placement class provides an info object that can be used to replicate corrections. This example shows an advanced tooltip auto corrected and swapped. The tooltip consists of a nose which should be drawn and placed differently depending on the actual placement of the tooltip. Move the grey box towards the boundaries and see the tooltip align magically.

Category: Placement


Leave a Comment

You have a question or have experienced an issue? Please post it in the forum: http://sibirjak.tenderapp.com/ in order to make the discussion available at a more central place.