Detecting when the main button on the Flex PopUpButton control has been clicked

by Peter deHaan on February 4, 2008

in PopUpButton

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.

{ 4 comments… read them below or add one }

1 keith February 4, 2008 at 11:12 am

Hey peter,

Thanks for the demonstration. It looks like some of the source code may have been cut off however. The last line of code shown is .

Take care :)
Keith

Reply

2 peterd February 8, 2008 at 11:08 pm

keith,

Oops! Fixed, thanks for the heads up!

Peter

Reply

3 Mike November 8, 2008 at 7:59 pm

Great example. How do you pass the value of the item selected in the dropdown with the main button click?

Reply

4 Mike November 8, 2008 at 8:24 pm

I cant seem to edit my previous comment. Anyway, I think I have it worked out… illumination doesn’t seem to strike until after one posts for help, lol. anyway, thanks for the great example, it really helped.

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: