Flex Examples » TitleWindow http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating an undraggable TitleWindow container in Flex http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/ http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/#comments Sat, 16 Aug 2008 22:32:38 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/16/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 [...]]]> 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);
        }
    }
}
 
]]> http://blog.flexexamples.com/2008/08/16/creating-an-undraggable-titlewindow-container-in-flex/feed/ 8 Displaying a video in a pop up window in Flex http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/#comments Mon, 04 Aug 2008 15:14:31 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function button_click(evt:MouseEvent):void { var popUpVideoDisplay:PopUpVideoDisplay; popUpVideoDisplay = [...]]]> The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            private function button_click(evt:MouseEvent):void {
                var popUpVideoDisplay:PopUpVideoDisplay;
                popUpVideoDisplay = new PopUpVideoDisplay();
                popUpVideoDisplay.source = "http://www.helpexamples.com/flash/video/water.flv";
                PopUpManager.addPopUp(popUpVideoDisplay, this, true);
            }
        ]]>
    </mx:Script>

    <mx:Button id="button"
            label="Launch video"
            click="button_click(event);" />

</mx:Application>

PopUpVideoDisplay.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        showCloseButton="true"
        styleName="noPadding"
        creationComplete="init();"
        close="titleWindow_close(event);">

    <mx:Style>
        .noPadding {
            paddingBottom: 0;
            paddingTop: 0;
            paddingLeft: 0;
            paddingRight: 0;
        }
    </mx:Style>

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

            [Bindable]
            public var source:String;

            private function init():void {
                PopUpManager.centerPopUp(this);
            }

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

    <mx:VideoDisplay id="videoDisplay"
            source="{source}"
            resize="init();" />

    <mx:ControlBar horizontalAlign="right" width="100%">
    </mx:ControlBar>

</mx:TitleWindow>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/feed/ 20 Creating a pop up TitleWindow using the PopUpButton control in Flex http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/#comments Mon, 14 Apr 2008 05:49:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> TitleWindow { roundedBottomCorners: false; borderColor: haloSilver; backgroundColor: haloSilver; borderAlpha: 0.8; backgroundAlpha: 0.8; dropShadowEnabled: false; } [...]]]> The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            roundedBottomCorners: false;
            borderColor: haloSilver;
            backgroundColor: haloSilver;
            borderAlpha: 0.8;
            backgroundAlpha: 0.8;
            dropShadowEnabled: false;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.CheckBox;
            import mx.controls.dataGridClasses.DataGridColumn;

            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                var idx:int = int(ch.data);
                var obj:Object = arrColl.getItemAt(idx);
                obj.sel = ch.selected;
                arrColl.disableAutoUpdate();
                arrColl.setItemAt(obj, idx);
            }

            private function selectAll(evt:Event):void {
                var idx:int;
                var item:Object;
                for (idx=0; idx<arrColl.length; idx++) {
                    item = arrColl.getItemAt(idx);
                    item.sel = CheckBox(evt.currentTarget).selected;
                }
                arrColl.refresh();
            }

            private function sel_labelFunc(item:Object, col:DataGridColumn):String {
                var bool:Boolean = item.hasOwnProperty("sel") &&
                            (item.sel == "true" || item.sel == true);
                return bool.toString();
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array id="arr">
                <mx:Object label="Button" />
                <mx:Object label="ButtonBar" />
                <mx:Object label="CheckBox" />
                <mx:Object label="ColorPicker" sel="true" />
                <mx:Object label="ComboBox" sel="true" />
                <mx:Object label="DataGrid" sel="true" />
                <mx:Object label="DateChooser" />
                <mx:Object label="DateField" sel="true" />
                <mx:Object label="HorizontalList" />
                <mx:Object label="HRule" />
                <mx:Object label="HSlider" />
                <mx:Object label="Image" />
                <mx:Object label="Label" />
                <mx:Object label="LinkBar" />
                <mx:Object label="LinkButton" />
                <mx:Object label="List" sel="true" />
                <mx:Object label="Menu" />
                <mx:Object label="MenuBar" />
                <mx:Object label="NumericStepper" sel="true" />
                <mx:Object label="ProgressBar" />
                <mx:Object label="RadioButton" />
                <mx:Object label="RadioButtonGroup" />
                <mx:Object label="RichTextEditor" sel="true" />
                <mx:Object label="Spacer" />
                <mx:Object label="SWFLoader" />
                <mx:Object label="TabBar" />
                <mx:Object label="Text" />
                <mx:Object label="TextArea" />
                <mx:Object label="TextInput" />
                <mx:Object label="TileList" />
                <mx:Object label="Tree" sel="true" />
                <mx:Object label="VideoDisplay" />
                <mx:Object label="VRule" />
                <mx:Object label="VScrollBar" />
                <mx:Object label="VSlider" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton id="popUpButton"
                label="Please select some components"
                openAlways="true"
                close="arrColl.refresh();">
            <mx:popUp>
                <mx:TitleWindow id="titleWin"
                        height="200"
                        showCloseButton="true"
                        verticalScrollPolicy="on"
                        horizontalScrollPolicy="off"
                        close="popUpButton.close();">
                    <mx:ToolBar width="320">
                        <mx:Repeater id="myRep"
                                dataProvider="{arrColl}">
                            <mx:CheckBox data="{myRep.currentIndex}"
                                    label="{myRep.currentItem.label}"
                                    selected="{myRep.currentItem.sel}"
                                    change="checkBox_change(event);"
                                    width="100" />
                        </mx:Repeater>
                    </mx:ToolBar>
                    <mx:ControlBar>
                        <mx:CheckBox label="Select All"
                                labelPlacement="left"
                                change="selectAll(event);" />
                    </mx:ControlBar>
                </mx:TitleWindow>
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

    <mx:DataGrid dataProvider="{arrColl}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="sel"
                    labelFunction="sel_labelFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/feed/ 17 Setting the header height on a Flex TitleWindow container http://blog.flexexamples.com/2008/03/25/setting-the-header-height-on-a-flex-titlewindow-container/ http://blog.flexexamples.com/2008/03/25/setting-the-header-height-on-a-flex-titlewindow-container/#comments Wed, 26 Mar 2008 06:50:16 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/25/setting-the-header-height-on-a-flex-titlewindow-container/ The following example shows you how you can change the header height on a TitleWindow container in Flex by setting the headerHeight style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="headerHeight:"> <mx:HSlider id="slider" minimum="24" maximum="64" value="32" snapInterval="2" tickInterval="4" liveDragging="true" /> </mx:FormItem> [...]]]> The following example shows you how you can change the header height on a TitleWindow container in Flex by setting the headerHeight style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="headerHeight:">
                <mx:HSlider id="slider"
                        minimum="24"
                        maximum="64"
                        value="32"
                        snapInterval="2"
                        tickInterval="4"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TitleWindow id="titleWindow"
            title="The quick brown fox jumped"
            status="{titleWindow.width}x{titleWindow.height}"
            titleIcon="@Embed('assets/TitleWindow.png')"
            showCloseButton="true"
            headerHeight="{slider.value}"
            borderColor="haloBlue"
            borderAlpha="1.0"
            width="400"
            height="150">
        <mx:VBox id="vBox" width="100%" height="100%">
            <mx:Label text="{vBox.width}x{vBox.height}" />
        </mx:VBox>
    </mx:TitleWindow>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/03/25/setting-the-header-height-on-a-flex-titlewindow-container/feed/ 0 Accessing a TitleWindow container’s internal close button in Flex http://blog.flexexamples.com/2008/03/24/accessing-a-titlewindow-containers-internal-close-button-in-flex/ http://blog.flexexamples.com/2008/03/24/accessing-a-titlewindow-containers-internal-close-button-in-flex/#comments Tue, 25 Mar 2008 06:55:43 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/24/accessing-a-titlewindow-containers-internal-close-button-in-flex/ The following example shows how you can access the close button in a Flex TitleWindow container by using the closeButton property in the mx_internal namespace.

Full code after the jump.

Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. [...]]]> The following example shows how you can access the close button in a Flex TitleWindow container by using the closeButton property in the mx_internal namespace.

Full code after the jump.

Since this example uses the mx_internal namespace, you can’t always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/24/accessing-a-titlewindow-containers-internal-close-button-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.controls.Button;

            private function checkBox_change(evt:Event):void {
                var btn:Button = titleWindow.mx_internal::closeButton;
                btn.enabled = checkBox.selected;
            }

            private function titleWindow_close(evt:CloseEvent):void {
                arrColl.addItem({type:evt.type, time:getTimer()});
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="closeButton enabled:"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:TitleWindow id="titleWindow"
            showCloseButton="true"
            width="100%"
            close="titleWindow_close(event);">
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                width="100%"
                rowCount="6">
            <mx:columns>
                <mx:DataGridColumn dataField="type" />
                <mx:DataGridColumn dataField="time" />
            </mx:columns>
        </mx:DataGrid>
    </mx:TitleWindow>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/24/accessing-a-titlewindow-containers-internal-close-button-in-flex/feed/ 4 Creating custom pop-up windows with the PopUpManager class (redux) http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/ http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/#comments Fri, 21 Mar 2008 01:35:37 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/ In a previous example, “Creating custom pop-up windows with the PopUpManager class”, we saw how you could use ActionScript to create pop up windows using the PopUpManager class in Flex.

In the following example we see how you can create a custom MXML component and pass the class name to the static PopUpManager.createPopUp() method [...]]]> In a previous example, “Creating custom pop-up windows with the PopUpManager class”, we saw how you could use ActionScript to create pop up windows using the PopUpManager class in Flex.

In the following example we see how you can create a custom MXML component and pass the class name to the static PopUpManager.createPopUp() method to display the pop up.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function launchMoreInfo():void {
                var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                PopUpManager.centerPopUp(win);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Click for more information"
                click="launchMoreInfo();" />
    </mx:ApplicationControlBar>

</mx:Application>

Dialog.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- Dialog.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        title="More information"
        showCloseButton="true"
        width="400"
        height="300"
        close="titleWindow_close(event);">

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

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>

    <mx:String id="info" source="info.txt" />

    <mx:TextArea id="txt"
            htmlText="{info}"
            focusAlpha="0.0"
            width="100%"
            height="100%" />

</mx:TitleWindow>

info.txt

<font size="+2"><i>More Information...</i></font>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at arcu in lacus iaculis ultricies. Vivamus consectetuer. Donec vulputate aliquam leo. Nam metus. Aliquam nulla odio, ultrices vitae, nonummy eget, viverra accumsan, tellus. Curabitur neque ante, nonummy ut, fermentum eu, elementum a, ligula. Fusce hendrerit lectus ac velit. Suspendisse lorem pede, sagittis ac, fermentum non, auctor quis, nulla. Integer eu lacus sit amet justo vestibulum sodales. In euismod tellus eget magna. Vestibulum sed ante. Suspendisse eros libero, gravida ac, cursus et, porta vitae, lectus.</p>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/feed/ 43 Changing the close button skin on a Flex TitleWindow container http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/#comments Tue, 01 Jan 2008 04:38:25 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ The following example shows how you can change the appearance of the close button in a TitleWindow container in Flex by setting the closeButtonSkin style (or the closeButtonUpSkin, closeButtonOverSkin, closeButtonDownSkin, closeButtonDisabledSkin styles individually).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> [...]]]> The following example shows how you can change the appearance of the close button in a TitleWindow container in Flex by setting the closeButtonSkin style (or the closeButtonUpSkin, closeButtonOverSkin, closeButtonDownSkin, closeButtonDisabledSkin styles individually).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            closeButtonSkin: Embed("cancel.png");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: ClassReference(null);
            closeButtonDownSkin: ClassReference(null);
            closeButtonOverSkin: ClassReference(null);
            closeButtonUpSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="TitleWindow"
            status="status message"
            showCloseButton="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

If you want to use a different image for each state (up, over, down, disabled), you can either set each skin separately, as seen in the following snippet:

<mx:Style>
    TitleWindow {
        closeButtonUpSkin: Embed("bullet_green.png");
        closeButtonOverSkin: Embed("bullet_yellow.png");
        closeButtonDownSkin: Embed("bullet_red.png");
        closeButtonDisabledSkin: Embed("bullet_white.png");
    }
</mx:Style>

Or, you can specify a SWF file and symbol name for the close button skins, as seen in the following snippet:

TitleWindow {
    closeButtonDisabledSkin: Embed(source="Assets.swf", symbol="CloseButtonDisabled");
    closeButtonDownSkin: Embed(source="Assets.swf", symbol="CloseButtonDown");
    closeButtonOverSkin: Embed(source="Assets.swf", symbol="CloseButtonOver");
    closeButtonUpSkin: Embed(source="Assets.swf", symbol="CloseButtonUp");
}

Or, you can create a Flex Componet skin using the Flex Component Kit and Flash CS3 where the movie clip symbol in the library has the following frame labels: up, over, down, disabled, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            closeButtonSkin: Embed(skinClass="BulletSkins");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: ClassReference(null);
            closeButtonDownSkin: ClassReference(null);
            closeButtonOverSkin: ClassReference(null);
            closeButtonUpSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="TitleWindow"
            status="status message"
            showCloseButton="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/feed/ 9 Toggling the close button in a Flex TitleWindow container http://blog.flexexamples.com/2007/12/31/toggling-the-close-button-in-a-flex-titlewindow-container/ http://blog.flexexamples.com/2007/12/31/toggling-the-close-button-in-a-flex-titlewindow-container/#comments Tue, 01 Jan 2008 02:55:18 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/toggling-the-close-button-in-a-flex-titlewindow-container/ The following example shows you how you can toggle the close button in a TitleWindow container in Flex by setting the showCloseButton property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/31/toggling-the-close-button-in-a-flex-titlewindow-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" backgroundColor="white"> <mx:TitleWindow id="titleWindow1" showCloseButton="true" title="TitleWindow" status="showCloseButton = true" width="50%" height="100%" /> <mx:TitleWindow [...]]]> The following example shows you how you can toggle the close button in a TitleWindow container in Flex by setting the showCloseButton property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/toggling-the-close-button-in-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:TitleWindow id="titleWindow1"
            showCloseButton="true"
            title="TitleWindow"
            status="showCloseButton = true"
            width="50%"
            height="100%" />

    <mx:TitleWindow id="titleWindow2"
            showCloseButton="false"
            title="TitleWindow"
            status="showCloseButton = false"
            width="50%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/31/toggling-the-close-button-in-a-flex-titlewindow-container/feed/ 0 Styling the TitleWindow container http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/ http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/#comments Tue, 11 Sep 2007 03:47:28 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/ The following example shows how you can customize the Flex TitleWindow container by setting the “.windowStyles” style, “.windowStatus” style, and TitleWindow style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> /* Style the Window title message. */ .windowStyles { color: haloBlue; [...]]]> The following example shows how you can customize the Flex TitleWindow container by setting the “.windowStyles” style, “.windowStatus” style, and TitleWindow style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        /* Style the Window title message. */
        .windowStyles {
            color: haloBlue;
            letterSpacing: 2;
        }

        /* Style the Window status message. */
        .windowStatus {
            color: red;
            fontWeight: bold;
        }

        TitleWindow {
            dropShadowEnabled: false;
            borderAlpha: 1.0;
            borderColor: haloSilver;
            backgroundColor: haloSilver;
            cornerRadius: 0;
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="Title"
            status="Status"
            width="160">
        <mx:Text htmlText="The quick brown fox jumped over the lazy dog."
                selectable="false"
                width="100%" />
        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="Button" />
        </mx:ControlBar>
    </mx:TitleWindow>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/feed/ 0 Using the TitleWindow container to display status messages http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/#comments Thu, 23 Aug 2007 06:10:49 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ Another example of something I’ve seen lately on the Internet, so I thought I’d build it in Flex. This time I usea TitleWindow to display the status message of a login form. You can close the message by clicking the X button in the upper-right corner of the title window.

Note that there is no [...]]]> Another example of something I’ve seen lately on the Internet, so I thought I’d build it in Flex. This time I usea TitleWindow to display the status message of a login form. You can close the message by clicking the X button in the upper-right corner of the title window.

Note that there is no correct login. It will display the error message every time. In a future example I’ll try and add some fancy fade in/out effects or resize effects on the error message to give it that proper “Web 2.0 feel”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            cornerRadius: 0;
            backgroundColor: red;
            borderColor: red;
            borderAlpha: 1.0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function showTitleWindow():void {
                titleWindow.height = 28;
            }

            private function hideTitleWindow():void {
                titleWindow.height = 0;
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:TitleWindow id="titleWindow"
                title="Invalid username and/or password."
                showCloseButton="true"
                width="100%"
                height="0"
                close="hideTitleWindow()" />

        <mx:Form>
            <mx:FormItem label="Username:">
                <mx:TextInput id="username"
                        maxChars="24" />
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput id="password"
                        maxChars="24"
                        displayAsPassword="true" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Login"
                        click="showTitleWindow()" />
            </mx:FormItem>
        </mx:Form>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/22/using-the-titlewindow-container-to-display-status-messages/feed/ 0