Adding a horizontal separator to a Flex PopUpButton control’s 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 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>