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);
        }
    }
}

8 thoughts on “Creating an undraggable TitleWindow container in Flex

  1. wow!! so much head ache for such a simple thing!! what were they thinking when they developed the TitleWindow!!

  2. Hey Peter,

    Thanks for creating such a useful website for Flex examples. I have learned most of what I know through your examples and various tutorials. I am currently stuck trying to figure out how to create a popUpWindow that will load a SWF and then return information back to the main application. A summary of what I’m trying to accomplish is listed below.

    1. A User clicks a “Search” button within the main application.
    2. A PopUpWindow appears with the loaded SWF.
    3. A User selects a username from a datagrid contained in the loaded SWF.
    4. A text field within the main application is then populated with the selected username.

    Do you have an example that touches on this sort of interaction. If not, could you give me some direction?

    Thanks Peter!

  3. Srr,
    I want to create a popup(not based on tilewindow).
    I don’t like the layout or styling of the titlewindow, and want to use a simple canvas/vbox etc. This works fine, and I can style the popup exactly how I want, but it is not draggable.

    Are their properties to set? Do I need to write handlers for dragging?

    Thanks in advance

  4. Thanks for this example.
    I know that it is a bit old, but I found it just seconds ago and it solve my problem.

    Thanks again and keep up the good work :)

  5. Muy buen blog, excelente tu trabajo! Soy estudiante y me han sido de gran utilidad tus ejemplos.
    Muchas gracias!!!

  6. i having strange problem.
    I have created new TitleWindow and placed just one simple button with label Submit. and when i run it i see button’s label is gettng truncated. And in browser it not always happens.

    i tried
    this.invalidateDisplayList();
    this.validateNow();

    on creattionComplete but .. no luck …

    can any one please guide me..why it is happening..

    SDK :- 3.2/ FLex3

Comments are closed.