Flex Examples » close() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Detecting when an Alert control is closed in Flex http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/ http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/#comments Fri, 02 May 2008 04:48:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/ The following example shows how you can detect when a Flex Alert control is closed by listening for the close event by specifying the closeHandler parameter in the static Alert.show() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ [...]]]> The following example shows how you can detect when a Flex Alert control is closed by listening for the close event by specifying the closeHandler parameter in the static Alert.show() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            private var alert:Alert;

            private function init():void {
                Alert.buttonWidth = 100;
                Alert.yesLabel += " (" + Alert.YES + ")";
                Alert.noLabel += " (" + Alert.NO + ")";
                Alert.okLabel += " (" + Alert.OK + ")";
                Alert.cancelLabel += " (" + Alert.CANCEL + ")";
            }

            private function showAlert():void {
                var flags:uint = 0;
                if (yesCheckBox.selected) flags += Alert.YES;
                if (noCheckBox.selected) flags += Alert.NO;
                if (okCheckBox.selected) flags += Alert.OK;
                if (cancelCheckBox.selected) flags += Alert.CANCEL;
                if (nonModalCheckBox.selected) flags += Alert.NONMODAL;
                alert = Alert.show("The quick brown fox jumped over the lazy dog.",
                                    "title",
                                    flags,
                                    null,
                                    alert_close);
            }

            private function alert_close(evt:CloseEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Show alert"
                click="showAlert();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRenderer="mx.controls.Label"
            width="100%"
            height="100%" />

    <mx:HBox width="100%">
        <mx:CheckBox id="yesCheckBox"
                label="Alert.YES"
                width="20%" />
        <mx:CheckBox id="noCheckBox"
                label="Alert.NO"
                width="20%" />
        <mx:CheckBox id="okCheckBox"
                label="Alert.OK"
                width="20%" />
        <mx:CheckBox id="cancelCheckBox"
                label="Alert.CANCEL"
                width="20%" />
        <mx:CheckBox id="nonModalCheckBox"
                label="Alert.NONMODAL"
                width="20%" />
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

For another example, see “Detecting which button a user pressed to dismiss an Alert dialog”.

 
]]> http://blog.flexexamples.com/2008/05/01/detecting-when-an-alert-control-is-closed-in-flex/feed/ 3 Determining when the DateField control is opened or closed in Flex http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/#comments Thu, 01 May 2008 06:57:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ The following example shows how you can determine when the Flex DateField control’s is opened or closed by listening for the open or close events.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.DropdownEvent; private function dateField_openClose(evt:DropdownEvent):void { arrColl.addItem(evt); [...]]]> The following example shows how you can determine when the Flex DateField control’s is opened or closed by listening for the open or close events.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;

            private function dateField_openClose(evt:DropdownEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:DateField id="dateField"
                open="dateField_openClose(event);"
                close="dateField_openClose(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRenderer="mx.controls.Label"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

And here is the “same” example, but in ActionScript instead of MXML:

comps/MyDateField.as

/** http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ */
package comps {
    import mx.collections.ArrayCollection;
    import mx.containers.VBox;
    import mx.controls.DataGrid;
    import mx.controls.DateField;
    import mx.controls.Label;
    import mx.core.Application;
    import mx.core.ClassFactory;
    import mx.events.DropdownEvent;

    public class MyDateField extends VBox {

        [Bindable]
        private var arrColl:ArrayCollection;

        private var dateField:DateField;
        private var dataGrid:DataGrid;

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

        private function init():void {
            arrColl = new ArrayCollection();

            dateField = new DateField();
            dateField.addEventListener(DropdownEvent.OPEN, dateField_openClose);
            dateField.addEventListener(DropdownEvent.CLOSE, dateField_openClose);

            dataGrid = new DataGrid();
            dataGrid.dataProvider = arrColl;
            dataGrid.itemRenderer = new ClassFactory(mx.controls.Label);
            dataGrid.percentWidth = 100;
            dataGrid.percentHeight = 100;

            Application.application.appControlBar.addChild(dateField);

            addChild(dataGrid)
        }

        private function dateField_openClose(evt:DropdownEvent):void {
            arrColl.addItem(evt);
        }
    }
}

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar id="appControlBar" dock="true" />

    <comps:MyDateField width="100%" height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/feed/ 1 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 Detecting when the Flex PopUpButton control is opened or closed http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/ http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/#comments Tue, 19 Feb 2008 07:21:01 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/ The following example shows how you can detect when the Flex PopUpButton control is opened or closed by listening for the open or close event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: [...]]]> The following example shows how you can detect when the Flex PopUpButton control is opened or closed by listening for the open or close event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
           fontWeight: normal;
           textAlign: left;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.controls.Menu;
            import mx.controls.Alert;
            import mx.events.DropdownEvent;
            import mx.utils.ObjectUtil;

            [Bindable]
            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }

            private function popUpButton_open(evt:DropdownEvent):void {
                arrColl.addItem(evt);
            }

            private function popUpButton_close(evt:DropdownEvent):void {
                arrColl.addItem(evt);
            }

            private function dataGrid_itemClick(evt:ListEvent):void {
                var obj:DropdownEvent = evt.currentTarget.selectedItem;
                var str:String = "(empty string)";
                if (obj.triggerEvent) {
                    str = obj.triggerEvent.toString();
                }
                Alert.show(str, "triggerEvent:");
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton id="popUpButton"
                label="Select a control..."
                popUp="{menu}"
                initialize="init();"
                open="popUpButton_open(event);"
                close="popUpButton_close(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="100%"
            height="100%"
            itemClick="dataGrid_itemClick(event);">
        <mx:columns>
            <mx:DataGridColumn dataField="type"
                    width="100" />
            <mx:DataGridColumn dataField="triggerEvent"
                    itemRenderer="mx.controls.Label"
                    wordWrap="true" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/18/detecting-when-the-flex-popupbutton-control-is-opened-or-closed/feed/ 3 Programmatically opening and closing ComboBox controls in Flex http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/#comments Fri, 14 Dec 2007 05:56:19 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ The following examples show how you can programmatically open and close a ComboBox control’s drop down menu in Flex by using the open() and close() methods of the ComboBox class in Flex.

Full code after the jump.

The following example shows how you can open and close a ComboBox control’s drop down menu by [...]]]> The following examples show how you can programmatically open and close a ComboBox control’s drop down menu in Flex by using the open() and close() methods of the ComboBox class in Flex.

Full code after the jump.

The following example shows how you can open and close a ComboBox control’s drop down menu by rolling over a Button control on the display list.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="open"
                rollOver="comboBox.open();"
                enabled="false" />
        <mx:Button label="close"
                rollOver="comboBox.close();"
                enabled="false" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            openDuration="2000"
            closeDuration="1000">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="one" />
                <mx:Object label="two" />
                <mx:Object label="three" />
                <mx:Object label="four" />
                <mx:Object label="five" />
                <mx:Object label="six" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can open a ComboBox control’s drop down menu using ActionScript if the combo box fails validation (if it doesn’t have an item selected, for example):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ValidationResultEvent;
            import mx.controls.Alert;

            private function numberValidator_invalid(evt:ValidationResultEvent):void {
                comboBox.errorString = "Please select a thing";
                comboBox.open();
            }

            private function numberValidator_valid(evt:ValidationResultEvent):void {
                comboBox.errorString = "";
                Alert.show("Success");
            }

            private function validateCheckBox():void {
                numberValidator.validate(comboBox.selectedIndex);
            }
        ]]>
    </mx:Script>

    <mx:NumberValidator id="numberValidator"
            minValue="0"
            invalid="numberValidator_invalid(event);"
            valid="numberValidator_valid(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="validate"
                click="validateCheckBox();" />
        <mx:Button label="reset"
                click="comboBox.selectedIndex = -1;" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            prompt="Please select a thing..."
            openDuration="2000"
            closeDuration="1000"
            close="validateCheckBox();">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="one" />
                <mx:Object label="two" />
                <mx:Object label="three" />
                <mx:Object label="four" />
                <mx:Object label="five" />
                <mx:Object label="six" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/13/programmatically-opening-and-closing-combobox-controls-in-flex/feed/ 0