how to keep dragged TitleWindow within Flex app boundary

Question

I am using PopupManager in FB4 to display a custom dialog.

    popwin = new TitleWindow(); 
    popwin.addElement(myCustomDialog);
    PopUpManager.addPopUp(popwin,this,false);
    PopUpManager.centerPopUp(popwin);

It's possible to drag the popped up TitleWindow and let go of it when its gray title bar lies outside the bounds of the Flex app rectangle, and then the popup cannot be grabbed again. It's also possible to drag the TitleWindow downwards so it becomes completely invisible below the bottom edge of the Flex app rectangle. When the Flex app bounds are less than the full browser window, and the user is working quickly, this chances of this happening increase. Is there a simple setting that will keep this from happening, or must the programmer intercept the behavior during the drag operation?

Thanks Tim

Answer 1

Hey, there isn't a simple setting to prevent this from happening from my knowledge. All you need to do is watch it every time it moves and make sure it stays within certain bounds. You could then abstract that event handler into some Controller class if you'd like.

Here's a basic example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationComplete="creationCompleteHandler()">

    <fx:Script>
        <![CDATA[
            import flash.geom.Rectangle;
            import mx.core.FlexGlobals;
            import mx.core.UIComponent;
            import mx.events.MoveEvent;
            import mx.managers.PopUpManager;
            import spark.components.TitleWindow;

            protected function creationCompleteHandler():void
            {
                var window:TitleWindow = new TitleWindow();
                PopUpManager.addPopUp(window, this, false);
                PopUpManager.centerPopUp(window);
                window.addEventListener(MoveEvent.MOVE, window_moveHandler);
            }

            protected function window_moveHandler(event:MoveEvent):void
            {
                var window:UIComponent = event.currentTarget as UIComponent;
                var application:UIComponent = FlexGlobals.topLevelApplication as UIComponent;
                var bounds:Rectangle = new Rectangle(0, 0, application.width, application.height);
                var windowBounds:Rectangle = window.getBounds(application);
                var x:Number;
                var y:Number;
                if (windowBounds.left <= bounds.left)
                    x = bounds.left;
                else if (windowBounds.right >= bounds.right)
                    x = bounds.right - window.width;
                else
                    x = window.x;
                if (windowBounds.top <= bounds.top)
                    y = bounds.top;
                else if (windowBounds.bottom >= bounds.bottom)
                    y = bounds.bottom - window.height;
                else
                    y = window.y;
                window.move(x, y);
            }

        ]]>
    </fx:Script>

</s:Application>

Hope that helps, Lance

Answer 2

Try this solution.

http://blog.flexexamples.com/2010/01/20/constraining-the-movement-on-a-spark-titlewindow-container-in-flex-4