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.
As the name of this very blog implies, perhaps the most enjoyable part of my work on Substance and Flamingo is polishing the visuals of the different controls. And while the main emphasis of release 4.0 of Flamingo (code-named Fainnear) is to close the existing functional gaps, this will most certainly not come at the expense of the visuals.
First, here is a screenshot of an enhanced popup menu under Nimbus look-and-feel before:
And here are the new visuals:
In this specific example, the differences are somewhat unnoticeable. You can see that the insets of Format button and Apply Styles menu item are a little bigger, and that the ribbon gallery buttons (up / down / expand) are more consistent with the standalone buttons and have only one-pixel separator line between them.
This polishing is much more noticeable on command button strips, especially under look-and-feels that have non-zero padding around them (such as Nimbus). Let’s start with the Windows look-and-feel under Vista. This is before:
and this is after:
This is the same command buttons strips under Nimbus before:
and after:
And finally, the same command button strips under Synthetica Blue Steel before:
and after:
The new visuals also apply to vertical command button strips. A core example can be found in the ribbon galleries that show the up / down / expand strip on the right hand side. Here is how it now looks under Nimbus:
and Synthetica Blue Steel:
Applications that wish to use the “segmented” appearance for command buttons outside the command button strips (akin to the “JButton.segmentPosition” client property supported by Aqua look-and-feel) can use the new AbstractCommandButton.setLocationOrderKind API. When you’re placing buttons inside a command button strip component, there’s no need to use this API explicitly.
Finally, the latest 4.0dev drop provides even more control over scaling the inner layout gaps of command buttons. The new setHGapScaleFactor and setVGapScaleFactor APIs on the AbstractCommandButton and JCommandButtonStrip classes allow applications to fine tune the “density” of command buttons. This is especially relevant for command button strips.
By default, buttons in horizontal command button strips use hGapScaleFactor of 0.75, and the buttons in vertical command button strips use vGapScaleFactor of 0.75. This makes the “kerning” between the adjacent buttons 25% smaller, accounting for gaps on both sides of the inter-button separators.
The following screenshot illustrates the horizontal and vertical gap scale factors on two different command button strips under Nimbus look-and-feel:
The top three rows have the same vertical gap scaling, but the horizontal gap scaling is different. The bottom three rows have the same horizontal gap scaling, but the vertical gap scaling is different. The gap scaling is supported on vertical command button strips as well:
And finally, Substance plugin for Flamingo supports the new functionality as well. Here are the horizontal button strips under Substance Business skin:
and the vertical button strips:
Here, you would notice that in addition to one-pixel separator between the adjacent buttons (that was already present), there are also inner one-pixel lighter contours on both sides of the separator.
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.
About two months ago i have discontinued my support for the Substance NetBeans module. Today, i am happy to report that John C. Turnbull (who was, in fact, the first to comment on that announcement) has agreed to take over the ownership of this project.
John is now the official owner of the project, and all decisions regarding this project will be at his sole discretion. The core Substance library (and other plugins) will continue to be developed by me, and John will have my full cooperation on evolving the external and internal APIs to facilitate the ongoing development of Substance NetBeans module (the decisions regarding the core library will still be made by myself).
If you wish to contribute to this project, you’re welcome to drop John a line on the mailing lists of forums. You can also read John’s announcement on the NetBeans user list.
The latest addition in the Flamingo component suite is support for rich tooltips on command buttons. This has been one of the items 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.
The org.jvnet.flamingo.common.RichTooltip class provides the API to define different parts of the rich tooltip:
- Title text
- Optional main image
- One or more description paragraphs
- Optional footer image
- Optional one of more footer paragraphs
To set the rich tooltip on the command buttons, use the following APIs:
- org.jvnet.flamingo.common.AbstractCommandButton.setActionRichTooltip to set the rich tooltip on the action area of a command button.
- org.jvnet.flamingo.common.JCommandButton.setPopupRichTooltip to set the rich tooltip on the popup area of a command button (does not apply to toggle command buttons in the JToggleCommandButton class that only has an action area).
In addition, you can set the rich tooltip on the ribbon application menu button with the org.jvnet.flamingo.ribbon.JRibbon.setApplicationMenuRichTooltip API.
Unlike the core Swing tooltips, there are rigid rules that define the location of the rich tooltips. The rich tooltips will appear directly below the associated command button, left aligned with it. Here is a screenshot of an action rich tooltip under Metal:
And here is the popup rich tooltip of the same button:
As you can see, the rich tooltip provides support for multi-paragraph sections with optional images.
When a command button is part of a ribbon band, its rich tooltips will be shown below the ribbon. Here is a rich tooltip of action area of the Paste button in the first ribbon band (note how the tooltip is displayed below the ribbon and does not hide any part of the ribbon):
The left horizontal alignment makes sure that the tooltip is clearly associated with the command button (since there is a considerable vertical space between them). The same command button has a different rich tooltip for the popup area:
As mentioned earlier, you can associate a rich tooltip with the application menu button:
Command buttons in the application task bar show the rich tooltip directly below:
The previous four screenshots were taken under the Windows look-and-feel in Vista. Since one of the most important goals of Flamingo is to support other core and third-party look-and-feels out of the box, the rich tooltips are not an exception. The customization hooks provide complete control over the layout and appearance of the rich tooltips (and these will be illustrated below for Substance), but the rich tooltips should look consistent even without any customizations.
Here is the rich tooltip under Nimbus:
Here is the rich tooltip under Looks PlasticXP (note how it takes the translucent shadow border):
And the rich tooltip of the application menu button:
The rich tooltip under Synthetica Blue Steel:
And under A03 (for the application menu button):
Finally, third-party look-and-feels can customize the appearance of the rich tooltips. Both the layout and the painting itself is customizable via the usual look-and-feel hooks (on the UI delegates), and Substance Flamingo plugin takes an advantage to provide custom gradient fill.
Here is the rich tooltip under the Substance Blue Steel (on the Cut button):
And the rich tooltip on the application menu button under the Substance Autumn:
To see the rich tooltips in action, click the WebStart launch button below:
In this test application the rich tooltips are installed on:
- the application menu button
- the Paste button in the Clipboard band
- the Cut button in the Clipboard band
- the Paste button in the application taskbar
- the Bold, Italic, Underline and Strikethrough buttons in the Font band
As always, you are more than welcome to leave comments and report bugs on the project issue tracker, mailing lists or forums.
