Flex Examples » PopUpButton http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Displaying icons in a Flex PopUpButton control (Redux) http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/#comments Wed, 21 Jan 2009 07:53:11 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you could add icons to a PopUpButton control’s nested menu using an Array data provider.

The following example shows you how you can add icons to a pop up menu in a PopUpButton control in Flex by specifying the iconField [...]]]> In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you could add icons to a PopUpButton control’s nested menu using an Array data provider.

The following example shows you how you can add icons to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control using an XML data provider.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ -->
<mx:Application name="PopUpButton_popUp_Menu_iconField_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;

            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;

            [Embed("assets/CheckBox.png")]
            public const CheckBoxIcon:Class;

            [Embed("assets/ColorPicker.png")]
            public const ColorPickerIcon:Class;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = xmlList;
                menu.labelField = "@label";
                menu.iconField = "@icon";
            }
        ]]>
    </mx:Script>

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

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

    <mx:XMLList id="xmlList">
        <node label="Alert" />
        <node label="Button" icon="ButtonIcon" />
        <node label="ButtonBar" icon="ButtonBarIcon" />
        <node label="CheckBox" icon="CheckBoxIcon" />
        <node label="ColorPicker" icon="ColorPickerIcon" />
    </mx:XMLList>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/feed/ 8 Adding a horizontal separator to a Flex PopUpButton control’s pop up menu (redux) http://blog.flexexamples.com/2008/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/ http://blog.flexexamples.com/2008/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/#comments Fri, 03 Oct 2008 01:33:55 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/ In a previous example, “Adding a horizontal separator to a Flex PopUpButton control’s pop up menu”, we saw how you could add a horizontal separator to a PopUpButton control’s pop up menu in Flex by setting the type attribute to “separator” in the menu’s data provider.

The following example shows how you can adjust [...]]]> In a previous example, “Adding a horizontal separator to a Flex PopUpButton control’s pop up menu”, we saw how you could add a horizontal separator to a PopUpButton control’s pop up menu in Flex by setting the type attribute to “separator” in the menu’s data provider.

The following example shows how you can adjust the amount of empty space around the horizontal separator by setting the Boolean variableRowHeight property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/ -->
<mx:Application name="PopUpButton_popUp_dataProvider_type_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
            closeDuration: 0;
            openDuration: 0;
        }

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            private var menu:Menu;

            private function popUpButton_initialize():void {
                menu = new Menu();
                menu.dataProvider = arr;
                menu.variableRowHeight = checkBox.selected;
                popUpButton.popUp = menu;
                popUpButton.open();
            }

            private function checkBox_change(evt:Event):void {
                menu.variableRowHeight = checkBox.selected;
                menu.invalidateSize();
                popUpButton.open();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object type="separator" />
        <mx:Object label="The quick brown fox jumped over the lazy dog." />
    </mx:Array>

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

    <mx:PopUpButton id="popUpButton"
            label="PopUpButton with separator"
            openAlways="true"
            initialize="popUpButton_initialize();" />

</mx:Application>

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/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/ -->
<mx:Application name="PopUpButton_popUp_dataProvider_type_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.PopUpButton;
            import mx.containers.ApplicationControlBar;
            import mx.events.ListEvent;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;
            import mx.controls.Menu;

            private var arr:Array;
            private var checkBox:CheckBox;
            private var menu:Menu;
            private var popUpButton:PopUpButton;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({type:"separator"});
                arr.push({label:"The quick brown fox jumped over the lazy dog."});

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

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChild(appControlBar);
                application.controlBar = appControlBar;

                menu = new Menu();
                menu.dataProvider = arr;
                menu.variableRowHeight = checkBox.selected;

                var cssObj:CSSStyleDeclaration = new CSSStyleDeclaration(".myCustomPopUpStyleName");
                cssObj.setStyle("fontWeight", "normal");
                cssObj.setStyle("textAlign", "left");

                popUpButton = new PopUpButton();
                popUpButton.popUp = menu;
                popUpButton.label = "PopUpButton with separator";
                popUpButton.openAlways = true;
                popUpButton.setStyle("popUpStyleName", "myCustomPopUpStyleName");
                popUpButton.setStyle("closeDuration", 0);
                popUpButton.setStyle("openDuration", 0);
                addChild(popUpButton);
            }

            private function checkBox_change(evt:Event):void {
                menu.variableRowHeight = checkBox.selected;
                menu.invalidateSize();
                popUpButton.open();
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/02/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu-redux/feed/ 2 Determining when an ArrayCollection changes in Flex http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/#comments Thu, 15 May 2008 06:32:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ The following example shows how you can detect when a Flex ArrayCollection has changed (items added, removed, refreshed) by listening for the collectionChange event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.utils.ObjectUtil; import mx.controls.dataGridClasses.DataGridColumn; import mx.events.CollectionEvent; private function [...]]]> The following example shows how you can detect when a Flex ArrayCollection has changed (items added, removed, refreshed) by listening for the collectionChange event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.events.CollectionEvent;

            private function arrColl_collectionChange(evt:CollectionEvent):void {
                callLater(addTheItem, [evt]);
            }

            private function arrCollAddItem():void {
                arrColl.addItem({data:new Date()});
            }

            private function addTheItem(evt:Event):void {
                eventsArrColl.addItem(evt);
            }

            private function arrCollRemoveItem():void {
                if (arrColl.length > 0) {
                    arrColl.removeItemAt(0);
                }
            }

            private function dataGridColumn_labelFunc(item:Object, col:DataGridColumn):String {
                return ObjectUtil.toString(item[col.dataField]);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="eventsArrColl" />
    <mx:ArrayCollection id="arrColl"
            collectionChange="arrColl_collectionChange(event);" />

    <mx:Model id="columnModel">
        <columns>
            <bubbles>{bubblesCheckBox.selected}</bubbles>
            <cancelable>{cancelableCheckBox.selected}</cancelable>
            <currentTarget>{currentTargetCheckBox.selected}</currentTarget>
            <eventPhase>{eventPhaseCheckBox.selected}</eventPhase>
            <items>{itemsCheckBox.selected}</items>
            <kind>{kindCheckBox.selected}</kind>
            <location>{locationCheckBox.selected}</location>
            <oldLocation>{oldLocationCheckBox.selected}</oldLocation>
            <target>{targetCheckBox.selected}</target>
            <type>{typeCheckBox.selected}</type>
        </columns>
    </mx:Model>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item to ArrayCollection"
                emphasized="true"
                click="arrCollAddItem();" />
        <mx:Button label="Remove item"
                click="arrCollRemoveItem();" />
        <mx:Button label="Refresh items"
                click="arrColl.refresh();" />

        <mx:Spacer width="100%" />

        <mx:PopUpButton label="Toggle DataGrid columns"
                openAlways="true">
            <mx:popUp>
                <mx:Form styleName="plain"
                        backgroundColor="white">
                    <mx:FormItem label="bubbles:">
                        <mx:CheckBox id="bubblesCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="cancelable:">
                        <mx:CheckBox id="cancelableCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="currentTarget:">
                        <mx:CheckBox id="currentTargetCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="eventPhase:">
                        <mx:CheckBox id="eventPhaseCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="items:">
                        <mx:CheckBox id="itemsCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="kind:">
                        <mx:CheckBox id="kindCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="location:">
                        <mx:CheckBox id="locationCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="oldLocation:">
                        <mx:CheckBox id="oldLocationCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="target:">
                        <mx:CheckBox id="targetCheckBox"
                                selected="true" />
                    </mx:FormItem>
                    <mx:FormItem label="type:">
                        <mx:CheckBox id="typeCheckBox"
                                selected="true" />
                    </mx:FormItem>
                </mx:Form>
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

    <mx:VDividedBox width="100%" height="100%">
        <mx:List id="list"
                dataProvider="{arrColl}"
                labelField="data"
                width="50%"
                rowCount="5" />
        <mx:DataGrid id="dataGrid"
                dataProvider="{eventsArrColl}"
                itemRenderer="mx.controls.Label"
                width="100%"
                height="100%">
            <mx:columns>
                <mx:DataGridColumn dataField="bubbles"
                        visible="{columnModel.bubbles}" />
                <mx:DataGridColumn dataField="cancelable"
                        visible="{columnModel.cancelable}" />
                <mx:DataGridColumn dataField="currentTarget"
                        visible="{columnModel.currentTarget}" />
                <mx:DataGridColumn dataField="eventPhase"
                        visible="{columnModel.eventPhase}" />
                <mx:DataGridColumn dataField="items"
                        labelFunction="dataGridColumn_labelFunc"
                        visible="{columnModel.items}" />
                <mx:DataGridColumn dataField="kind"
                        visible="{columnModel.kind}" />
                <mx:DataGridColumn dataField="location"
                        visible="{columnModel.location}" />
                <mx:DataGridColumn dataField="oldLocation"
                        visible="{columnModel.oldLocation}" />
                <mx:DataGridColumn dataField="target"
                        visible="{columnModel.target}" />
                <mx:DataGridColumn dataField="type"
                        visible="{columnModel.type}" />
            </mx:columns>
        </mx:DataGrid>
    </mx:VDividedBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/14/determining-when-an-arraycollection-changes-in-flex/feed/ 10 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 Displaying a Tree control as a pop up for a Flex PopUpButton control http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/#comments Tue, 26 Feb 2008 19:24:35 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ The following example shows how you can use a Tree control as a PopUpButton control’s pop up in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> Tree { textAlign: left; fontWeight: normal; } </mx:Style> <mx:XML id="mlb" source="mlb.xml" /> <mx:ApplicationControlBar dock="true"> [...]]]> The following example shows how you can use a Tree control as a PopUpButton control’s pop up in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:XML id="mlb" source="mlb.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton label="Please select a team...">
            <mx:popUp>
                <mx:Tree id="tree"
                        dataProvider="{mlb}"
                        labelField="@label"
                        showRoot="false"
                        width="200"
                        rowCount="8" />
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/26/displaying-a-tree-control-as-a-pop-up-for-a-flex-popupbutton-control/feed/ 11 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 Determining if a check box menu item is toggled in a Flex PopUpButton control’s pop up menu http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/ http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/#comments Tue, 12 Feb 2008 06:29:40 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/ The following example shows you how you can determine if a check box menu item in a Flex PopUpButton control was checked or not by using the change event on the pop up menu along with the dataDescriptor property and isToggled() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> [...]]]> The following example shows you how you can determine if a check box menu item in a Flex PopUpButton control was checked or not by using the change event on the pop up menu along with the dataDescriptor property and isToggled() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

        .MyCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
        }

        .redModal {
            modalTransparencyColor: red;
            modalTransparency: 0.8;
        }

        .greenModal {
            modalTransparencyColor: haloGreen;
            modalTransparency: 0.8;
        }
    </mx:Style>

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

            private var menu:Menu;
            private function init():void {
                menu = new Menu();
                menu.variableRowHeight = true;
                menu.dataProvider = arr;
                menu.addEventListener(MenuEvent.CHANGE, menu_change);
                popUpButton.popUp = menu;
            }

            private function menu_change(evt:MenuEvent):void {
                switch (menu.dataDescriptor.getType(evt.item)) {
                    case "check":
                        if (menu.dataDescriptor.isToggled(evt.item)) {
                            application.styleName = "greenModal";
                            Alert.show("\\"" + evt.item.label + "\\" was checked");
                        } else {
                            application.styleName = "redModal";
                            Alert.show("\\"" + evt.item.label + "\\" was not checked");
                        }
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Option 1"
                type="check"
                toggled="true" />
        <mx:Object label="Option 2"
                type="check"
                toggled="true" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Click to open..."
            openAlways="true"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/11/determining-if-a-check-box-menu-item-is-toggled-in-a-flex-popupbutton-controls-pop-up-menu/feed/ 2 Using the openAlways property on the Flex PopUpButton control http://blog.flexexamples.com/2008/02/05/using-the-openalways-property-on-the-flex-popupbutton-control/ http://blog.flexexamples.com/2008/02/05/using-the-openalways-property-on-the-flex-popupbutton-control/#comments Tue, 05 Feb 2008 14:59:50 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/05/using-the-openalways-property-on-the-flex-popupbutton-control/ The following example shows how you can use the openAlways property on the PopUpButton control to open the PopUpButton control’s pop up menu when the user clicks on the main button. The openAlways property is false by default.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/05/using-the-openalways-property-on-the-flex-popupbutton-control/ --> <mx:Application [...]]]> The following example shows how you can use the openAlways property on the PopUpButton control to open the PopUpButton control’s pop up menu when the user clicks on the main button. The openAlways property is false by default.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/05/using-the-openalways-property-on-the-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            [Bindable]
            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
        <mx:Object label="Donec sit amet dui nec pede aliquam auctor." />
        <mx:Object label="Integer vestibulum sodales dui." />
        <mx:Object label="Sed nonummy ligula et tortor." />
        <mx:Object label="Aenean varius neque vel felis." />
        <mx:Object label="Phasellus venenatis ipsum sit amet nisi." />
        <mx:Object label="Nullam vitae turpis et ipsum cursus venenatis." />
        <mx:Object label="Pellentesque tincidunt pede non arcu." />
        <mx:Object label="Aliquam ut massa quis ante dignissim egestas." />
        <mx:Object label="Curabitur facilisis velit sit amet metus." />
        <mx:Object label="Vivamus ornare massa ac massa." />
        <mx:Object label="Nam accumsan rutrum purus." />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="openAlways:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            openAlways="{checkBox.selected}"
            popUp="{menu}"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/05/using-the-openalways-property-on-the-flex-popupbutton-control/feed/ 0 Detecting when the main button on the Flex PopUpButton control has been clicked http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/ http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/#comments Mon, 04 Feb 2008 15:57:56 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/ The following example shows how you can detect when the main button on the PopUpButton control has been clicked by listening for the click event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { pop-up-style-name: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: [...]]]> The following example shows how you can detect when the main button on the PopUpButton control has been clicked by listening for the click event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            pop-up-style-name: myCustomPopUpStyleName;
        }

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

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

            [Bindable]
            private var menu:Menu;

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

            private function popUpButton_click():void {
                Alert.show("You clicked me, now what?");
            }
        ]]>
    </mx:Script>

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

    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            popUp="{menu}"
            initialize="popUpButton_initialize();"
            click="popUpButton_click();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/04/detecting-when-the-main-button-on-the-flex-popupbutton-control-has-been-clicked/feed/ 4 Displaying a main icon in a Flex PopUpButton control http://blog.flexexamples.com/2008/02/03/displaying-a-main-icon-in-a-flex-popupbutton-control/ http://blog.flexexamples.com/2008/02/03/displaying-a-main-icon-in-a-flex-popupbutton-control/#comments Mon, 04 Feb 2008 01:36:22 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/03/displaying-a-main-icon-in-a-flex-popupbutton-control/ In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you can display icons in a PopUpButton control’s pop up menu.

The following example shows how you can display an icon in a Flex PopUpButton control’s main button by setting the icon style.

Full code after the jump.

In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you can display icons in a PopUpButton control’s pop up menu.

The following example shows how you can display an icon in a Flex PopUpButton control’s main button by setting the icon style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/03/displaying-a-main-icon-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

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

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

            [Bindable]
            [Embed("assets/asterisk_orange.png")]
            private var asteriskOrangeIcon:Class;

            [Bindable]
            private var menu:Menu;

            private function popUpButton_initialize():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </mx:Script>

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

    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            icon="{asteriskOrangeIcon}"
            popUp="{menu}"
            initialize="popUpButton_initialize();" />

</mx:Application>

View source is enabled in the following example.

You could also set the icon style in an external .CSS file or in an <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    PopUpButton {
        icon: Embed("assets/asterisk_orange.png");
    }
</mx:Style>

Or, you could set the icon style in ActionScript, as shown in the following snippet:

<mx:Script>
    <![CDATA[
        [Embed("assets/asterisk_orange.png")]
        private var asteriskOrangeIcon:Class;

        private function popUpButton_initialize():void {
            popUpButton.setStyle("icon", asteriskOrangeIcon);
        }
    ]]>
</mx:Script>
 
]]> http://blog.flexexamples.com/2008/02/03/displaying-a-main-icon-in-a-flex-popupbutton-control/feed/ 0