Flex popup manager, mousedown outside of the popup removes the popup

Question

If you create a popup via:

PopUpManager.addPopUp( popup, this, false ); PopUpManager.bringToFront( popup );

It will create a popup and bring it on top of any other visual piece. I have one problem though. This 'popup' needs to stay up even when the user interacts with the background.

I would use modal, but I need the ability to interact with the back. Any way to tell the popup manager not to remove the popup when the user clicks off of it?

Thanks!

Answer 1

here's a helper class which would help you (tested only in Flex 4, but probably could be changed for Flex 3 too):

import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.MouseEvent;

import mx.core.mx_internal;
import mx.managers.ISystemManager;
import mx.managers.systemClasses.ActiveWindowManager;

use namespace mx_internal;

public class PopupHelper
{
    private var popup : DisplayObject;
    private var systemManager : ISystemManager;
    public function PopupHelper(popup : DisplayObject, systemManager : ISystemManager) : void
    {
        this.popup = popup;
        this.systemManager = systemManager;
    }
    public function forceToFront() : void
    {
        systemManager.addEventListener(MouseEvent.MOUSE_DOWN, onSystemMouseDown);
        popup.addEventListener(Event.REMOVED_FROM_STAGE, onPopupRemoved)
    }
    private function onSystemMouseDown(e : MouseEvent) : void
    {
        bringToFront(popup);
    }
    private function onPopupRemoved(e : Event) : void
    {
        popup.removeEventListener(Event.REMOVED, onPopupRemoved);
        systemManager.removeEventListener(MouseEvent.MOUSE_DOWN, onSystemMouseDown);
    }
    private function bringToFront(popup : DisplayObject) : void
    {
        var windowManager : ActiveWindowManager = systemManager.getImplementation("mx.managers::IActiveWindowManager") as ActiveWindowManager;
        var index : int = systemManager.getChildIndex(popup); 
        var newIndex : int = index;
        var n : int = windowManager.forms.length;
        for (var j : int = 0; j < n; j++)
        {
            var f : DisplayObject = windowManager.forms[j];
            if (systemManager.contains(f))
                if (systemManager.getChildIndex(f) > index)
                    newIndex = Math.max(systemManager.getChildIndex(f), newIndex);
        }
        if (newIndex > index)
        {
            systemManager.setChildIndex(popup, newIndex);
        }
    }
}

Here's a test example:

        import helperClasses.PopupHelper;
        import mx.managers.PopUpManager;

        import spark.components.TitleWindow;

        public function showPopup() : void
        {   
            var popup1 : TitleWindow = new TitleWindow();
            popup1.title = "Popup 1";
            new PopupHelper(popup1, systemManager).forceToFront();
            var popup2 : TitleWindow = new TitleWindow();
            popup2.title = "Popup 2";
            PopUpManager.addPopUp(popup1, this, false);
            PopUpManager.addPopUp(popup2, this, false);
            PopUpManager.bringToFront(popup1);
            popup1.x = 20;
            popup1.y = 20;
        }