Polishing the visuals of Flamingo command buttons

November 28th, 2008 | 6 Comments »

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):

• 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

Your feedback is, as always, greatly appreciated.

---

Related posts:

1. Flamingo ribbon component: rich tooltips on command buttons The latest addition in the Flamingo component suite is support for rich tooltips on command...
2. Extending the Flamingo command buttons The command button component is a central building block for the Flamingo component suite. It...
3. Right-to-left support for command buttons in Flamingo 5.0 With Substance 6.0 in release candidate stage, it’s time to go back and work on...
4. Using Flamingo 5.0 command buttons to build a breadcrumb bar Flamingo component suite began its life in January 2006 when Rick Jeliffe of Topologi has...

---