Flamingo ribbon component: support for core Swing components

December 22nd, 2008

The latest addition in the Flamingo component suite is support for core Swing components. This has been the last unaddressed item on the roadmap for version 4.0 (code named Fainnear), and is now available in the latest 4.0dev drop of Flamingo core and 5.1dev drop of Substance Flamingo plugin.

First, there is a new notion of groups in ribbon bands. This allows fine-tuning the layout of larger ribbon bands, grouping associated controls while still not breaking the groups across multiple ribbon bands. Ribbon band groups are separated with vertical separators and are started with the new JRibbonBand.startGroup() API. Here is a screenshot of a ribbon band with two groups:

Here is a screenshot of another ribbon band, with two groups as well:

And here is a screenshot of a ribbon band with three groups:

As you can see, you can vary the priority of command buttons across the different ribbon band groups.

The new JFlowRibbonBand class allows placing flowing content in a ribbon band. Unlike the JRibbonBand, it can host any core or third-party Swing component. It is highly recommended to use components that do not take too much vertical space (good examples are buttons, combo boxes, radio buttons, checkboxes, spinners). The new CoreRibbonResizePolicies.getCoreFlowPoliciesRestrictive API can be used to install a resize policy that first tries to place the controls in two rows, and then, if there is not enough horizontal space, will place the controls in three rows.

Here is a screenshot of a flow ribbon band with enough horizontal space to host all the controls in two rows:

When the ribbon is resized, the content of this band will be placed in three rows as necessary:

Support for placing keytips on the flow ribbon band content is aligned with placing the keytips of the command buttons on regular ribbon bands. Here is a screenshot of flow ribbon band keytips with two rows:

As you can see, the keytips for both the top row and the bottom row are aligned, resulting in a consistent UI appearance. As a side note, to associate a keytip with a core Swing component, wrap it with JRibbonComponent (more on this below).

And here is a screenshot of the same flow ribbon band with three rows:

It is now possible to add core Swing components into regular JRibbonBands. To do so, you need to wrap such a component with the new JRibbonComponent class. In the simple case, use the constructor that takes a JComponent to create a ribbon band like this:

You can also associate an icon and a caption with the core Swing component that you want to add to the ribbon band. For this, use the JRibbonComponent constructor that takes three parameters to create ribbon bands like these:

In this screenshot, the first ribbon band hosts three JRibbonComponents, each one wrapping a JComboBox with a custom icon and caption text. The second ribbon band has two groups, first hosting two JSpinners with associated icons and captions, and the second hosting two JSpinners. The second ribbon band also shows that ribbon band groups can have titles – use the JRibbonBand.startGroup(String) API.

Why do you need to wrap a core Swing component with JRibbonComponent to place it in the JRibbonBand? The answer is – support for keytips and rich tooltips.

The JRibbonComponent.setKeyTip allows associating a keytip with the wrapped component. For simple wrappers, the keytip is shown on the left hand side of the component, vertically aligned with the other keytips shown on the ribbon:

For wrappers that show icons and captions, the keytips are shown between the icon and the caption, vertically aligned with the other keytips shown on the ribbon:

Pressing the key sequence that leads to the specific core component will activate the relevant action. Buttons will be activated (including toggling the selection on toggle buttons, radio buttons and check boxes), comboboxes will show the popup, and other controls will acquire focus.

Finally, the JRibbonComponent.setRichTooltip allows associating a rich tooltip with the icon / caption area of the wrapped component. As with command buttons placed in the ribbon bands, the rich tooltip will be shown below the ribbon so as not to interfere with navigating the UI:

Here, the mouse is hovering over the Right: caption of the left-bottom spinner in the Paragraph ribbon band.

If you want to see the support for core Swing components, flow ribbon bands and ribbon band groups in action under the core look-and-feels, run the following WebStart demo:

If you want to see this functionality under Substance (all the screenshots in this entry were taken under the Nebula skin), 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):

Your feedback is, as always, greatly appreciated.