Pushing Pixels

Following the extremely valuable feedback on the previous entry that introduced the application menu button and application taskbar to the Flamingo ribbon component, i have been busy this week fixing the usability issues and addressing some of the missing popup functionality available in the Office 2007 Command Bar component.

Christopher Deckers has pointed out a few usability issues that eluded me as i was focusing too much on the pixels. He was correct to point out that everything related to popups (such as the main application menu button and ribbon gallery expansion) and the task toggle buttons should happen on mouse press and not on mouse release. This has been addressed in the latest 4.0dev drop of Flamingo (code-named Fainnear) and is also available as a configuration API on the org.jvnet.flamingo.common.model.ActionButtonModel.

A number of comments pointed out that the application menu is showing on top of the application menu button, thus losing the visual connection between the two components. The solution had to work on both lightweight and heavyweight popups, and the latest 4.0dev drop provides such a solution.

Here is the application menu under Metal:

And under Windows look-and-feel when the mouse is moved over the primary Open entry:

And under Synthetica Blue Ice look-and-feel showing a split Save As menu entry in action:

And under Nimbus showing the split Print primary menu entry with two groups in the secondary menu:

And finally, under Substance Business Blue Steel skin showing the popup-only Send primary menu entry with one group in secondary menu. One of the secondary menu entries is a popup button itself and has the associated PopupMenuListener. This listener populates two items in the third-level popup menu – click to see full-size:

The latest 4.0dev drop also allows placing mixed content into the popup panels. Most of Office 2007 split / popup buttons show a button panel wrapped in a scroll panel, followed by a mix of menu items and separators:

This is now available for Flamingo ribbon galleries and split / popup command buttons. Here is an unexpanded ribbon gallery under Synthetica Blue Moon look-and-feel:

When the expand button is clicked, the following popup is shown:

The top portion of this popup has the scrollable panel that hosts all the gallery buttons, and the bottom portion hosts the additional menu buttons and separators. The top panel can be scrolled:

And the menu buttons show rollover effects:

The same rich popup functionality is available on command buttons with popup area (split or pure popup). The following screenshot shows a rich popup on “Format” button in the first ribbon band (under JGoodies PlasticXP look-and-feel):

And the same under Substance Office Silver 2007 look-and-feel:

If you want to see the reworked application menu button and enhanced popups in action, run the following WebStart demo:

The demo above works for the core look-and-feels. If you want to see this functionality under Substance, run the following WebStart demo:

If you want to test the new functionality in your applications, you would need the following (the last two only for applications running under Substance look-and-feel):

• The latest 4.0dev drop of Flamingo (code-named Fainnear)
• The latest 5.1dev drop of Substance (code-named Panama)
• The latest 5.1dev drop of Substance Flamingo plugin

The relevant APIs are in the org.jvnet.flamingo.common.popup and org.jvnet.flamingo.ribbon packages. Until the documentation is ready, see the test.ribbon.BasicCheckRibbon class. This is still work in progress so the APIs may change during the development cycle. Your feedback is, as always, greatly appreciated.

Related posts:

1. Flamingo ribbon component: application menu button and taskbar I’ve been relatively quiet on this blog for the last couple of weeks, but i...
2. Enhancing the Flamingo command button component Over the course of the past few weeks the command button component in Flamingo component...
3. Enhancing Flamingo’s ribbon component The goal of Flamingo project is to provide a small and cohesive set of powerful...
4. Flamingo ribbon component: minimizing the ribbon The latest addition in the Flamingo component suite is support for minimizing the ribbon. This...