It’s been more than two years since i first started working on all-Java version of the Office 2007 ribbon component (see part 1, part 2 and part 3). Since then, there have been quite a few visual improvements in the Substance look-and-feel, and it’s time to apply these to the Substance Flamingo plugin. This series will walk through the major UI changes to the JRibbon component that is now much better aligned with the look of core and SwingX components under Substance.

Here is how JRibbon looks under the Office Silver 2007 skin:

Here is how JRibbon looks under the Office Blue 2007 skin:

Here is how JRibbon looks under the Creme skin:

Here is how JRibbon looks under the Business skin:

And here is how JRibbon looks under the Autumn skin:

Want to take it for a spin? You’ll need the latest binaries of Substance, Flamingo and Substance Flamingo plugin.

Just before the feature freeze of Substance 4.1, i added a new Coffee Cream skin that is based on the existing Creme skin and the Ubuntu’ish brown active theme. If you want to take it for a spin, click on the WebStart button below and change the skin to Coffee Cream from the “Skins” menu:

To use it in your application, you have the following three options:

• -Dswing.defaultlaf=org.jvnet.substance.skin.SubstanceCremeCoffeeLookAndFeel
• UIManager.setLookAndFeel(new SubstanceCremeCoffeeLookAndFeel())
• UIManager.setLookAndFeel("org.jvnet.substance.skin.SubstanceCremeCoffeeLookAndFeel");

Here are a few screenshots that show this new skin. A small frame with a tabbed pane and a few different controls:

A frame with a tree and a list:

Sliders in different states:

(New) Progress bars in different states:

Error pane component from SwingX project:

A frame with menu bar, tool bar and status bar from SwingX project:

Over the past releases of Substance look and feel I found that it helps to have a well-defined release lifecycle and schedule. The usual cycle for a minor release is 12 weeks long, with last two weeks being the release candidate stage and the two weeks before that (a month before the final release) being feature freeze. For the upcoming version 4.1 (code-named Lima) which is scheduled to be released on November 12th, the feature freeze is this Sunday. There are a few new features, most of them coming from the users. In this post, i’m going to talk about two of these.

The first is the reworked visual appearance of tabbed pane content border and a client property to control it in the application code. Here is how this border looked like in the previous release under Business Black Steel skin:

Here is how it looks like in the new release (the gaps between the checkboxes and radio buttons have been artificially tweaked to have the content fit on the frame):

The main difference is in the top portion of the content pane border. By default, it now follows the modern appearance of such applications as Firefox and Internet Explorer 7, and look-and-feels such as Nimbus and Quaqua (which follows Mac Aqua).

Here is another “old” screenshot of Creme skin:

And here is how it looks now:

The last couple of “before” and “after” come from the Autumn skin. The “before”:

and the “after”:

While this brings more modern look to the tabbed panes, some application may require additional control over the content pane border. This is what the new TABBED_PANE_CONTENT_BORDER_KIND client property is for. The default value is TabContentPaneBorderKind.DOUBLE_FULL which is what the next screenshot (and the screenshots above) show:

In order to use the old painting, use the TabContentPaneBorderKind.SINGLE_FULL value:

If you have nested tabbed panes, you can use either TabContentPaneBorderKind.DOUBLE_PLACEMENT value:

or the TabContentPaneBorderKind.SINGLE_PLACEMENT value:

Thanks to Luke Sleeman for opening an enhancement request that prompted this functionality.

The second feature is the reworked support for lock icons on non-editable text fields and editable comboboxes with model-only auto-completion. Up until now, Substance added a lock icon in the bottom left corner of such components unless you used the NO_EXTRA_ELEMENTS property, which is kind of an overkill for this. The latest 4.1dev drop of Substance (which bundles the latest 3.2dev drop of Laf-Widget) adds a new LafWidget.NO_LOCK_ICON client property that allows controlling the presence of lock icon for a specific component.

In addition, Kamil Paral has requested a very useful enhancement: when you wrap a non-editable text area in a scroll pane, the icon only appears when you scroll all the way down. And so, in this case, the latest drop paints the lock icon just above the horizontal scroll bar. You can read about the implementation limitations in the enhancement report, but i’ll sum up two shortcomings:

• If you scroll horizontally, the icon will disappear – it is bound to the left border of the wrapped component.
• The scroll mode is switched from BLIT to SIMPLE which might affect the scrolling performance.

If these shortcomings make this feature undesirable, use the NO_LOCK_ICON on that specific component and set it to Boolean.FALSE.

Continuing the series on the support for high-DPI monitors in Swing applications and having covered the big areas in the first two entries (alignment and borders), it’s time for miscellaneous stuff. There are quite a few less-defined areas that should be addressed by a look-and-feel that aims to provide complete high-DPI support. Let’s look at some of these.

The first one is linear elements, such as separators, titled borders and focus rings. Like the borders, these should be painted with a stroke width proportional to the default desktop font size and DPI settings (or the font size of the specific component). In addition to painting, these settings affect the preferred size and insets of the corresponding elements. Here is a screenshot of two titled borders under 22pt fonts:

In addition to titled borders, the look-and-feel should also scale such elements as focus ring stroke width, dash length and dash gap. This is illustrated in the next screenshot (second slider has the focus):

In this screenshot, you can also see an additional linear element – slider ticks. These are also scaled (length and thickness) with the font settings. Furthermore, the entire slider painting is scaled as well, including the track height, thumb icon, track border thickness and thumb icon thickness. All of these affect both the inner layout and the preferred size computations.

An additional area is cell renderers. There are quite a few of these on core Swing components, including lists, trees, tables and table headers. While some applications use custom renderers (which should be written to support high-DPI monitors), the look-and-feel is responsible for providing the default renderers. These should properly compute the insets and set the borders (for focus indication, for example). Here is a screenshot of a table under 22pt font:

As you can see, everything is scaled here, including the renderer insets, header renderer borders and table grid lines.

The areas mentioned in this entry are just a sample. There are many more, including vertical components (such as sliders and progress bars), menu items, right-to-left orientation.

All the screenshots in this entry have been taken under the latest 4.1dev drop of Substance (code-named Lima). It is scheduled to be released in mid-November, with a release candidate scheduled for late October. You’re more than welcome to download and play with the latest bits, as the development is going to move much slower towards the feature freeze in two weeks.