Enhanced Pop-Up Button for flex 2 (beta3)

Flex 2 has two built-in components (namely PopUpButton and PopUpMenuButton) which can display many items inside multiple menus, but the problems with them are:

-they are sometimes just too huge to fit in interface, ie: occupying too many screen estate

-when put very close to the bounds, the pop-up menu will overlap on each other, instead of trying to pop-up inside the bound (to the other side, just like normal windows/osx app do), see the picture below:

(normal Menu will not try to avoid the bounds, although the two components from flex2 did try to avoid bounds but the menus still overlapped)

-there’s no way to skin it to make it looks like those found in most win/osx application, like this:

in the picture above you can see a standard PopUpButton in OSX, with a 32*32 icon and black arrow at the corner, this is exactly what I’m looking for.

after Beta3 released today (with the source code to the framework), I took some time to prototype it and built this Enhanced PopUp Button component.

I modeled this component in the vain of those pop-up buttons found in os x (auqa interface), this is basically a combination of mx.controls.Button and mx.controls.Menu but paying extensive care to the bound detection and reverse the side where the menu pops up.

take following picture for example:

when the button is put very close to the bottom-right corner, the popup menu will always stay inside the bound instead of being clipped, this is most win/osx application’s behavior and I would really love to have it continued in Flex application.

(this is when all menus are displayed, you can see all menu are within bounds, no clipping)

things like this may seem subtle to most people but it does affect the user experience and usability of the whole application, letting user continue the experience they have elsewhere inside RIA application is one of the key factor to the success of it.

that’s the reason why I always love to pay endless time customizing components until it fits the usability standard.