Creating an undraggable TitleWindow container in Flex

In a previous example, “Creating an undraggable Alert control in Flex”, we saw how you could create a Flex Alert control that isn’t draggable by listening for the mouseDown event and calling the stopImmediatePropagation() method in the event handler.

The following examples show how you can create an undraggable TitleWindow container by setting the isPopUp property to false on the TitleWindow instance.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ -->
<mx:Application name="PopUpManager_TitleWindow_isPopUp_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.containers.TitleWindow;
            import mx.managers.PopUpManager;

            private var titleWin:MyTitleWin;

            private function launch():void {
                titleWin = PopUpManager.createPopUp(this, MyTitleWin, true) as MyTitleWin;
                PopUpManager.centerPopUp(titleWin);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Launch TitleWindow PopUp"
                click="launch();" />
    </mx:ApplicationControlBar>

</mx:Application>

MyTitleWin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        showCloseButton="true"
        title="TitleWindow"
        width="300"
        height="200"
        close="titleWin_close(event);">

    <mx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            private function titleWin_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
            }

            private function checkBox_change(evt:Event):void {
                this.isPopUp = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:Label text="Drag this window"
            horizontalCenter="0"
            verticalCenter="0" />

    <mx:ControlBar>
        <mx:CheckBox id="checkBox"
                label="isPopUp:"
                labelPlacement="left"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ControlBar>

</mx:TitleWindow>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ -->
<mx:Application name="PopUpManager_TitleWindow_isPopUp_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.containers.ControlBar;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;
            import mx.containers.TitleWindow;
            import mx.controls.Label;
            import mx.core.ContainerLayout;
            import mx.events.CloseEvent;
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;

            private var checkBox:CheckBox;
            private var titleWin:TitleWindow;

            private function launch():void {
                var lbl:Label = new Label();
                lbl.text = "Drag this window";
                lbl.setStyle("horizontalCenter", 0);
                lbl.setStyle("verticalCenter", 0);

                checkBox = new CheckBox();
                checkBox.label = "isPopUp:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var controlBar:ControlBar = new ControlBar();
                controlBar.addChild(checkBox);

                titleWin = new TitleWindow();
                titleWin.layout = ContainerLayout.ABSOLUTE;
                titleWin.title = "TitleWindow";
                titleWin.showCloseButton = true;
                titleWin.width = 300;
                titleWin.height = 200;
                titleWin.addChild(lbl);
                titleWin.addChild(controlBar);
                titleWin.addEventListener(CloseEvent.CLOSE, titleWin_close);
                PopUpManager.addPopUp(titleWin, this, true);
                PopUpManager.centerPopUp(titleWin);
            }

            private function titleWin_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(titleWin);
            }

            private function checkBox_change(evt:Event):void {
                titleWin.isPopUp = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Launch TitleWindow PopUp"
                click="launch();" />
    </mx:ApplicationControlBar>

</mx:Application>

The following example shows how you can create a custom TitleWindow based component (NonDraggableTitleWindow.mxml) which sets the isPopUp property to false in the TitleWindow instance’s initialize event handler:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ -->
<mx:Application name="PopUpManager_TitleWindow_isPopUp_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private var titleWin:NonDraggableTitleWindow;

            private function launch():void {
                titleWin = PopUpManager.createPopUp(this, NonDraggableTitleWindow, true) as NonDraggableTitleWindow;
                PopUpManager.centerPopUp(titleWin);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Launch TitleWindow PopUp"
                click="launch();" />
    </mx:ApplicationControlBar>

</mx:Application>

NonDraggableTitleWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        showCloseButton="true"
        title="TitleWindow"
        width="300"
        height="200"
        initialize="titleWin_initialize(event);"
        close="titleWin_close(event);">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            private function titleWin_initialize(evt:FlexEvent):void {
                evt.target.isPopUp = false;
            }

            private function titleWin_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
            }
        ]]>
    </mx:Script>

    <mx:Label text="Drag this window"
            horizontalCenter="0"
            verticalCenter="0" />

</mx:TitleWindow>

Finally, the following example shows how you can extend the TitleWindow class in ActionScript and set the isPopUp property to false in the TitleWindow instance’s initialize event handler.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ -->
<mx:Application name="PopUpManager_TitleWindow_isPopUp_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private var titleWin:NonDraggableTitleWindow2;

            private function launch():void {
                titleWin = PopUpManager.createPopUp(this, NonDraggableTitleWindow2, true) as NonDraggableTitleWindow2;
                PopUpManager.centerPopUp(titleWin);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Launch TitleWindow PopUp"
                click="launch();" />
    </mx:ApplicationControlBar>

</mx:Application>

NonDraggableTitleWindow2.as

/**
 * http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/
 */
package {
    import mx.containers.TitleWindow;
    import mx.controls.Label;
    import mx.core.ContainerLayout;
    import mx.core.IFlexDisplayObject;
    import mx.events.CloseEvent;
    import mx.events.FlexEvent;
    import mx.managers.PopUpManager;

    public class NonDraggableTitleWindow2 extends TitleWindow {
        public var lbl:Label;

        public function NonDraggableTitleWindow2() {
            super();
            init();
        }

        private function init():void {
            this.layout = ContainerLayout.ABSOLUTE;
            this.title = "TitleWindow";
            this.showCloseButton = true;
            this.width = 300;
            this.height = 200;
            this.addEventListener(FlexEvent.INITIALIZE, titleWin_initialize);
            this.addEventListener(CloseEvent.CLOSE, titleWin_close);

            lbl = new Label();
            lbl.text = "Drag this Window";
            lbl.setStyle("horizontalCenter", 0);
            lbl.setStyle("verticalCenter", 0);
            addChild(lbl);
        }

        private function titleWin_initialize(evt:FlexEvent):void {
            this.isPopUp = false;
        }

        private function titleWin_close(evt:CloseEvent):void {
            PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
        }
    }
}