Flex Examples » Menu http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a variable row height on an MX MenuBar control in Flex http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/#comments Sat, 20 Feb 2010 01:54:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=2502 The following example shows how you can set a variable row height on an MX MenuBar control in Flex by listening for the menuShow event, setting the Boolean variableRowHeight property on the MenuEvent object’s menu property, and then calling the invalidateSize() method.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ --> <mx:Application name="MenuBar_menuShow_menu_variableRowHeight_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">   [...]]]> The following example shows how you can set a variable row height on an MX MenuBar control in Flex by listening for the menuShow event, setting the Boolean variableRowHeight property on the MenuEvent object’s menu property, and then calling the invalidateSize() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_menuShow_menu_variableRowHeight_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
 
            protected function mBar_menuShowHandler(evt:MenuEvent):void {
                evt.menu.variableRowHeight = ch.selected;
                evt.menu.invalidateSize();
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="ch" label="variableRowHeight" />
    </mx:ApplicationControlBar>
 
    <mx:MenuBar id="mBar"
            labelField="@label"
            menuShow="mBar_menuShowHandler(event);">
        <mx:dataProvider>
            <mx:XMLListCollection>
                <mx:XMLList xmlns="">
                    <menu label="File...">
                        <item label="New" />
                        <item label="Open" />
                        <item label="Save" />
                        <item label="Save As" />
                        <fake type="separator" />
                        <item label="Exit" />
                    </menu>
                    <menu label="Edit...">
                        <item label="Cut" />
                        <item label="Copy" />
                        <item label="Paste" />
                        <fake type="separator" />
                        <item label="Undo" />
                        <item label="Redo" />
                        <fake type="separator" />
                        <item label="radio button" type="radio" toggled="true" />
                        <item label="check box" type="check" toggled="true" />
                    </menu>
                </mx:XMLList>
            </mx:XMLListCollection>
        </mx:dataProvider>
    </mx:MenuBar>
 
</mx:Application>

If you’re using Flex 4.0+, you can use the following code:

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/ -->
<s:Application name="MenuBar_menuShow_menu_variableRowHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="ch" label="variableRowHeight" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
 
            protected function mBar_menuShowHandler(evt:MenuEvent):void {
                evt.menu.variableRowHeight = ch.selected;
                evt.menu.invalidateSize();
            }
        ]]>
    </fx:Script>
 
    <mx:MenuBar id="mBar"
            labelField="@label"
            horizontalCenter="0" top="20"
            menuShow="mBar_menuShowHandler(event);">
        <mx:dataProvider>
            <s:XMLListCollection>
                <fx:XMLList xmlns="">
                    <menu label="File...">
                        <item label="New" />
                        <item label="Open" />
                        <item label="Save" />
                        <item label="Save As" />
                        <fake type="separator" />
                        <item label="Exit" />
                    </menu>
                    <menu label="Edit...">
                        <item label="Cut" />
                        <item label="Copy" />
                        <item label="Paste" />
                        <fake type="separator" />
                        <item label="Undo" />
                        <item label="Redo" />
                        <fake type="separator" />
                        <item label="radio button" type="radio" toggled="true" />
                        <item label="check box" type="check" toggled="true" />
                    </menu>
                </fx:XMLList>
            </s:XMLListCollection>
        </mx:dataProvider>
    </mx:MenuBar>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/19/setting-a-variable-row-height-on-an-mx-menubar-control-in-flex/feed/ 5 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 Setting the open duration on a Menu control in Flex http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/#comments Wed, 20 Aug 2008 06:08:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ The following example shows how you can set the open duration of a Flex Menu control by setting the openDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.controls.Menu; import mx.events.SliderEvent; private var menu:Menu; private function init():void [...]]]> The following example shows how you can set the open duration of a Flex Menu control by setting the openDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

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

            private var menu:Menu;

            private function init():void {
                menu = Menu.createMenu(null, xmlDP, true);
                menu.labelField = "@label";
                menu.showRoot = false;
                menu.variableRowHeight = true;
            }

            private function showMenu():void {
                menu.show(50, 50);
            }

            private function slider_change(evt:SliderEvent):void {
                menu.hide();
                menu.setStyle("openDuration", evt.value);
                showMenu();
            }
        ]]>
    </mx:Script>

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="openDuration:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="2000"
                        value="250"
                        snapInterval="50"
                        tickInterval="100"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Open Menu"
                click="showMenu();"/>
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

You can also set the openDuration style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Style>
        Menu {
            openDuration: 1500;
        }
    </mx:Style>

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

            private var menu:Menu;

            private function init():void {
                menu = Menu.createMenu(null, xmlDP, true);
                menu.labelField = "@label";
                menu.showRoot = false;
                menu.variableRowHeight = true;
            }

            private function showMenu():void {
                menu.show(50, 50);
            }
        ]]>
    </mx:Script>

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

    <mx:ApplicationControlBar dock="true">
        <mx:Spacer width="100%" />
        <mx:Button label="Open Menu"
                click="showMenu();"/>
    </mx:ApplicationControlBar>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/19/setting-the-open-duration-on-a-menu-control-in-flex/feed/ 5 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 Reducing the vertical space around a separator in a Flex PopUpButton control’s pop up menu by enabling variable row heights http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/ http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/#comments Fri, 01 Feb 2008 02:48:37 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/ The following example shows how you can reduce the amount of whitespace around a PopUpButton control’s pop up menu by setting the variableRowHeight property on the menu in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { openDuration: 0; [...]]]> The following example shows how you can reduce the amount of whitespace around a PopUpButton control’s pop up menu by setting the variableRowHeight property on the menu in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            openDuration: 0;
            closeDuration: 0;
            fontWeight: normal;
            textAlign: left;
        }
    </mx:Style>

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

            private function popUpButton1_initialize():void {
                var menu:Menu = new Menu();
                menu.showRoot = false;
                menu.labelField = "@label";
                menu.dataProvider = ObjectUtil.copy(dp);
                popUpButton1.popUp = menu;
            }

            private function popUpButton2_initialize():void {
                var menu:Menu = new Menu();
                menu.showRoot = false;
                menu.labelField = "@label";
                menu.dataProvider = ObjectUtil.copy(dp);
                menu.variableRowHeight = true;
                popUpButton2.popUp = menu;
            }

            private function popUpButton_creationComplete(evt:FlexEvent):void {
                var pUB:PopUpButton = evt.currentTarget as PopUpButton;
                // resize and open
                pUB.popUp.width = pUB.width;
                pUB.open();
            }

            private function openPopUpButtons():void {
                popUpButton1.open();
                popUpButton2.open();
            }
        ]]>
    </mx:Script>

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

    <mx:PopUpButton id="popUpButton1"
            label="variableRowHeight = false"
            openAlways="true"
            width="250"
            initialize="popUpButton1_initialize();"
            creationComplete="popUpButton_creationComplete(event);"
            open="openPopUpButtons();" />

    <mx:PopUpButton id="popUpButton2"
            label="variableRowHeight = true"
            openAlways="true"
            width="250"
            initialize="popUpButton2_initialize();"
            creationComplete="popUpButton_creationComplete(event);"
            open="openPopUpButtons();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/feed/ 0 Adding checkboxes, radiobuttons, and sub-menus to a Flex PopUpButton control’s pop up menu http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-a-flex-popupbutton-controls-pop-up-menu/ http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-a-flex-popupbutton-controls-pop-up-menu/#comments Wed, 30 Jan 2008 06:59:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-a-flex-popupbutton-controls-pop-up-menu/ In a previous example, “Adding a horizontal separator to a Flex PopUpButton control’s pop up menu”, we saw how you can add horizontal separators to a PopUpButton control’s pop up menu by setting the type attribute to “separator”. So, “what other special types are there?”, you may be asking, as it turns out you [...]]]> In a previous example, “Adding a horizontal separator to a Flex PopUpButton control’s pop up menu”, we saw how you can add horizontal separators to a PopUpButton control’s pop up menu by setting the type attribute to “separator”. So, “what other special types are there?”, you may be asking, as it turns out you can create folders with sub-menus, checkboxes, radiobuttons, and even disable item selection.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-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;
        }
    </mx:Style>
 
    <mx:XML id="xmlDP">
        <root>
            <node label="The quick brown fox jumped over the lazy dog." />
            <node label="Lorem ipsum (disabled)." enabled="false" />
            <node type="separator" />
            <node label="parent">
                <node label="child1" />
            </node>
            <node label="parent (disabled)" enabled="false">
                <node label="child1" />
                <node label="child2" />
                <node label="child3" />
            </node>
            <node type="separator" />
            <node label="type=check" id="ch" type="check" toggled="true" />
            <node label="type=check" id="ch" type="check" toggled="true" enabled="false" />
            <node type="separator" />
            <node label="1) type=radio" type="radio" groupName="radioGroup" toggled="true"  />
            <node label="2) type=radio" type="radio" groupName="radioGroup" />
            <node label="3) type=radio" type="radio" groupName="radioGroup" />
            <node label="4) type=radio" type="radio" groupName="radioGroup" enabled="false" />
        </root>
    </mx:XML>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;
 
            private var menu:Menu;
 
            private function init():void {
                menu = new Menu();
                menu.labelField = "@label";
                menu.dataProvider = xmlDP;
                menu.showRoot = false;
                menu.width = popUpButton.width;
                popUpButton.popUp = menu;
            }
        ]]>
    </mx:Script>
 
    <mx:PopUpButton id="popUpButton"
            label="Please select an item"
            openAlways="true"
            creationComplete="init();" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/29/adding-checkboxes-radiobuttons-and-sub-menus-to-a-flex-popupbutton-controls-pop-up-menu/feed/ 0 Adding a horizontal separator to a Flex PopUpButton control’s pop up menu http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu/ http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu/#comments Wed, 30 Jan 2008 05:17:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu/ The following example shows how you can 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.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-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 [...]]]> The following example shows how you can 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.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-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;
        }
    </mx:Style>

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

            private var menu:Menu;

            private function popUpButton_initialize():void {
                menu = new Menu();
                menu.dataProvider = arr;
                popUpButton.popUp = menu;
            }
        ]]>
    </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:PopUpButton id="popUpButton"
            label="PopUpButton with separator"
            openAlways="true"
            initialize="popUpButton_initialize();" />

</mx:Application>

View source is enabled in the following example.

If you happen to be using an XML (or XMLList) data provider, you could use the following code instead:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-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;
        }
    </mx:Style>

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

            private var menu:Menu;

            private function popUpButton_initialize():void {
                menu = new Menu();
                menu.labelField = "@label";
                menu.dataProvider = xml;
                popUpButton.popUp = menu;
            }
        ]]>
    </mx:Script>

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

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

</mx:Application>

For an example on reducing the amount of whitespace around the separator in a Menu control, see “Adding a horizontal separator to a Flex PopUpButton control’s pop up menu (redux)”.

 
]]> http://blog.flexexamples.com/2008/01/29/adding-a-horizontal-separator-to-a-flex-popupbutton-controls-pop-up-menu/feed/ 0 Setting the width on a Flex PopUpButton control’s pop up menu http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/ http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/#comments Tue, 29 Jan 2008 04:19:13 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/ The following example shows how you can set the width of a PopUpButton control’s pop up menu in Flex by setting the width property on the Menu control instance.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Menu; [Bindable] [...]]]> The following example shows how you can set the width of a PopUpButton control’s pop up menu in Flex by setting the width property on the Menu control instance.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

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

            [Bindable]
            private var menu:Menu;

            private function init():void {
                menu = new Menu();
                menu.dataProvider = arr;
                menu.width = 200;
            }
        ]]>
    </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:PopUpButton id="popUpButton"
            label="Please select an item"
            popUp="{menu}"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

As you can see, if the label doesn’t fit within the nested Menu control, the test is truncated with “…” and mousing over the item will display the full text in a tool tip.

“Anonymous” beat me to it below in the comments, but if you want to set a fixed or maximum width for the pop up menu, you can set the width property or maxWidth property so that the menu’s width doesn’t exceed the width of the PopUpButton control, as seen in the following snippet:

private function init():void {
    menu = new Menu();
    menu.dataProvider = arr;
    menu.maxWidth = popUpButton.width;
}
 
]]> http://blog.flexexamples.com/2008/01/28/setting-the-width-on-a-flex-popupbutton-controls-pop-up-menu/feed/ 1 Aligning labels in a Flex PopUpButton control’s pop up menu http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/ http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/#comments Sat, 19 Jan 2008 04:47:09 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/ The following example shows you how you can align the labels in a PopUpButton control’s pop up menu in Flex by setting the popUpStyleName and textAlign styles.

Full code after the jump.

View MXML

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-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:Script> <![CDATA[ import mx.controls.Menu; import mx.events.MenuEvent; [Bindable] private [...]]]> The following example shows you how you can align the labels in a PopUpButton control’s pop up menu in Flex by setting the popUpStyleName and textAlign styles.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-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:Script>
        <![CDATA[
            import mx.controls.Menu;
            import mx.events.MenuEvent;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </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:Style>
        .myCustomPopUpStyleName {
           textAlign: left;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton id="popUpButton"
                label="Select a control..."
                popUp="{menu}"
                popUpStyleName="myCustomPopUpStyleName"
                preinitialize="initMenu();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

Or, if a dynamic example is a bit more your style…

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/01/18/aligning-labels-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:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import mx.controls.Menu;
            import mx.events.MenuEvent;

            [Bindable]
            private var menu:Menu;

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

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                var obj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomPopUpStyleName");
                obj.setStyle("textAlign", evt.label);
                popUpButton.open();
            }
        ]]>
    </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:Style>
        .myCustomPopUpStyleName {
           textAlign: left;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        selectedIndex="0"
                        itemClick="toggleButtonBar_itemClick(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="center" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

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

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/18/aligning-labels-in-a-flex-popupbutton-controls-pop-up-menu/feed/ 1