Scrollable popup menus in Flamingo 5.0

April 10th, 2010

The command button component is a central building block for the Flamingo component suite. It aims to address the deficiencies of the core Swing button components, adding features expected by the modern applications. While the main goal of Flamingo is to provide a pure Java implementation of the Office 2007 ribbon container, the command buttons can certainly be used outside the ribbon.

Command buttons can be configured to have two separate areas – action and popup. This allows the application to use command buttons as drop-in replacement for Swing core buttons, as well as use them to create split and popup buttons. The JCommandButton.setPopupCallback API is used to dynamically create the popup menu content when the popup area is activated. The core org.pushingpixels.flamingo.common.popup.JCommandPopupMenu allows creating most commonly used popup menus. You can use its addMenuButton and addMenuSeparator to create simple menus:

https://flamingo.dev.java.net/release-info/5.0/button-popup-simple.png

or you can use a JCommandPopupMenu constructor that gets a JCommandButtonPanel instance to create a more complex popup menu with embedded scrollable command button panel:

https://flamingo.dev.java.net/release-info/5.0/button-popup-with-buttonpanel.png

If a popup menu hosts a large number of command menu buttons, it may overflow the vertical boundaries of the monitor, resulting in poor UI experience. Even though such scenarios usually indicate poor UI design (too many choices), sometimes it is a valid requirement. One such example is showing all files in the specific folder when the user clicks the popup area. To address such scenarios, you can use the new JCommandPopupMenu.setMaxVisibleMenuButtons(int) API.

Suppose you use this API with the value 10. If your popup menu contains ten items or less, it will be shown as it is today. However, if it contains more than ten items, the popup menu will show two scroller buttons, one before the first menu item, and another after the last menu item:

https://flamingo.dev.java.net/release-info/5.0/button-popup-scrollable-top.png

To scroll through the items, use the mouse wheel or move the mouse over the bottom scroller button. In the later case, there’s no need to click the mouse button – the scrolling will start automatically when the mouse is moved over the scroller button and will continue as long as the mouse stays there. Once you start scrolling, the top scroller button becomes enabled:

https://flamingo.dev.java.net/release-info/5.0/button-popup-scrollable-middle.png

When you reach the last menu button, the bottom scroller button becomes disabled:

https://flamingo.dev.java.net/release-info/5.0/button-popup-scrollable-bottom.png

To test the new functionality in your applications, you will need the following:

Note that the last two are required if you’re running your application under one of Substance skins – such as Office Blue 2007 used in all the screenshots in this entry.