Flex 3: Rounded Menu with a PopUpButton

Question

So I have a PopupButton and when I click on the button I want the Menu that pops up to have rounded corners. How would I go about doing this?

UPDATE: I found an update similar to what I want to do, it can be found on the following page:

http://blog.flexmonkeypatches.com/2007/10/08/flex-rounded-menues-using-masking/comment-page-1/

The only difference is that I'm showing the Menu with a PopUpButton. So far this is what I have for my custom Menu:

package {

    import flash.display.Sprite;

    import mx.controls.Menu;
    import mx.events.MenuEvent;

    public class MyMenu extends Menu {

        public function MyMenu() {
            super();
            addEventListener("menuShow", onMenuShow);
        }

        private function onMenuShow(e:MenuEvent):void {
            callLater(maskRoundedCorners,[e]);
        }


     private function maskRoundedCorners(e:MenuEvent):void {

                var menu:Menu = e.menu as Menu;
                menu.cacheAsBitmap=false;

                if (!menu.mask){
                    var maskx:uint = menu.x;
                    var masky:uint = menu.y;
                    var maskw:uint = menu.getExplicitOrMeasuredWidth();
                    var maskh:uint = menu.getExplicitOrMeasuredHeight();
                    var rad:int = menu.getStyle("cornerRadius") * 2;

                    var roundRect:Sprite = new Sprite();
                    roundRect.graphics.beginFill(0xFFFFFF);
                    roundRect.graphics.drawRoundRect(maskx,masky,maskw,maskh,rad);
                    roundRect.graphics.endFill();
                    menu.mask = roundRect;
            }
        }  
    }
}

Can anyone help me out with what I'm missing...I'm not sure if i need to override any of the Menu classes functions.

When I load my example the:

addEventListener("menuShow", onMenuShow);

gets fire but when i click the PopUpButton to show the menu the onMenuShow function is not being fired and the regular menu is being display with out the rounded corners.

Any help on this is appreciated.

Thank you

Answer 1

Finally figured this out. Here is the solution that I came up with:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

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

      [Bindable]
            private var myMenu:Menu;

      private function popUpButtonInit():void {
       myMenu = new Menu();
                myMenu.dataProvider = arr;

      }

      private function menuOpenHandler():void {
        var maskx:uint = myMenu.x; 
        var masky:uint = myMenu.y - 1; 
        var maskw:uint = myMenu.getExplicitOrMeasuredWidth(); 
        var maskh:uint = myMenu.getExplicitOrMeasuredHeight(); 
        var rad:int = myMenu.getStyle("cornerRadius");

        var roundRect:Sprite = new Sprite();
        roundRect.graphics.beginFill( 0xFFFFFF );
        roundRect.graphics.drawRoundRect( maskx, masky, maskw, maskh, rad ); 
        roundRect.graphics.endFill(); 
        myMenu.mask = roundRect;

      }   


     ]]>
    </mx:Script>

    <mx:Style>
     Menu {
      corner-radius: 30;
     }
    </mx:Style>

    <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 width="78" height="25"  
           initialize="popUpButtonInit();" 
           popUp="{myMenu}" popUpGap="3" open="menuOpenHandler();" 
           horizontalCenter="0" verticalCenter="0">
    </mx:PopUpButton>

</mx:Application>

If you happen to have a better solution please comment.