One item suggested by Romain a year ago and missing up until now in Substance was an option to add lighter inner border to different components. Here is a sample screenshot of a few controls under Windows Vista:
As you can see, pretty much all the controls have a lighter inner border. Look at the checkboxes, radio buttons, scroll bars and buttons. Note that even the highlight indication on the selected list item has a lighter inner border. This approach was adopted by Microsoft designers back in Windows Vista, and has found its way into a few Synthetica themes as well.
Finally, i got around into providing this functionality in the latest binary drops of Substance. A handful of core skins now use different kinds of inner border painters, and here are a few examples.
We’ll start with Autumn skin. Here is how it looked before:
And here is how it looks now:
As you can see, pretty much all the relevant controls have lighter inner borders, including buttons, checkboxes, radio buttons, combos, text fields, scroll bars and tabs. Here is one more “before” shot under Autumn:
And here is the same application under the latest drop:
As you can see, you get consistent borders on the selected elements in lists and trees as well. This is due to the generic internal implementation of Substance border painting, which means that you get it on a very wide range of controls (including progress bars, text components, sliders and menus as well) for a very small increase in the library size.
Let’s move on to the Business skin. Here is the “before”:
And the last one is Raven Graphite Glass. The “before” screenshot:
And the “after”:
For more details on how to use the new inner border painter on custom Substance skins, read the source code of the relevant core skins mentioned above (until the documentation is ready).
This is the fifth part in the ongoing series about advanced animations on core Swing components built-in to the latest binary drops of Substance look-and-feel.
The first part showed rollover and selection background animations on menus, sliders, tables and table headers
The second part showed rollover foreground animations on menus under a skin that uses dark background fill on menubars
The third part showed rollover and selection background and foreground animations under a mixed dark-light theme
The fourth part showed animations on the Magma skin that mixes dark and light color schemes for both background and foreground colors.
Was there anything missing from the animations under Magma? Quite a few important visuals of core Swing components, namely icons. Behind the scenes, the current look-and-feel is responsible for creating icons for different parts of core Swing components:
Title pane icons (close, maximize, minimize, restore) under decorated mode
Arrow icons of combobox buttons
Arrow icons of scrollbar buttons
Arrow icons of spinner buttons
Arrow icons of nested menus
Up until now, these icons did not participate in the rollover, selection, press and arm animations. The latest 4.1dev drop of Substance (code-named Lima) provides support for these animations out of the box. While you might not notice these under most Substance skins, some of them stand out a little.
The first example shows the title pane button icons under the Business Black Steel skin. It is different from other skins in that it uses a dark theme for title panes and menu bars. In default state, the title pane button icons are painted in white. In active (rollover, press) state, they are painted in black on metallic steel background. Here is a video that shows the animation sequence under slower animation setting:
Here is how the title pane button icons animations look like under the Magma skin (under the default animation setting):
And here is how the Magma animations look like on combobox button arrow icons:
The same animation sequence is implemented on scroll bar buttons, spinner buttons and nested menus. You can play with the Substance test application, especially with Business Black Steel, Nebula and Magma skins.
Luan O’Carroll of Xoetrope has been very active lately working on bug fixes and enhancements to the Xoetrope Color Wheel. It’s a Swing component that allows choosing colors in a very nice and visually appealing way, and it can be used in JColorChooser or as a part of larger UI (see video links below).
The latest additions available in the XUI itself as well as in the development version of Substance 4.1 add mouse-wheel support for the color wheel and the brightness / saturation sliders. This screencast shows the new features in action, and this screencast shows how the color wheel can be used in a larger UI.
In short, you can use the mouse wheel on the color wheel itself to play with the hue, and on the sliders to play with the brightness and saturation of the selected color. In addition, holding the Control key while wheeling over the sliders will apply the brightness / saturation on the color wheel itself. Here is how the color wheel looks like in default mode:
Here is how it looks like with decreased brightness:
And here is how it looks like with decreased saturation:
If you want to reuse this component in your code (like the Colorspace of Teppefall), make sure that you read and follow the terms of XUI license (identical to Mozilla Public License) in XUI.license of Substance distribution.
GroupLayout was introduced in the middle of 2005 and later was added to JDK 6.0. It is the default layout manager used by NetBeans UI editor (code-named Matisse), and while the code using the GroupLayout tends to be very verbose and unreadable, the visual results are very pleasing as compared to other core Swing layout managers. For applications that require JDK 5.0, the swing-layout project provides JDK 5.0-compliant implementation.
This layout manager has introduced a concept of baseline that allows aligning components according to the perceived text baseline, instead of lining the components on the top border. This is especially relevant for form-based UIs that have grid-like arrangement of controls. In such UIs, you usually have labels in the first column followed by text fields, check boxes, combos and other controls in the subsequent columns. Here is an example:
As you can see, the alignment is far from perfect. The labels are incorrectly aligned with the text field, the combo and the password field. In addition, the labels are not spaced evenly. The implementation of GroupLayout includes hard-coded computation of baseline offsets for all core Swing components for the major core look-and-feels (Metal, Windows, Aqua and GTK). Here is how the same UI looks under Windows look-and-feel on Vista:
As you can see, the rows are aligned according to the text baseline, and the labels are equally spaced.
While this functionality is available out of the box for the core LAFs that were mentioned above and LAFs that extend those, there are three notable missing LAFs: Basic, Motif and Synth. Here is how the same UI looks under Motif:
What about the other two groups? There are a few third-party look-and-feels that extend either BasicLookAndFeel or SynthLookAndFeel. These include Alloy, Skin, Substance, Napkin, Liquid and Synthetica. Here are a few screenshots of these LAFs (Liquid, Napkin and Synthetica):
Following the request made by one of Substance users, the latest drop of Substance 4.1dev (code-named Lima) includes the new Substance Baselin plugin (that was refactored from the Substance NetBeans module). Once you add the substance-baseline.jar to your classpath, it will add the correct baseline alignment for applications that use GroupLayout from the swing-layout project under JDK 5.0.
Here are the before and after screenshots under Substance:
The license for this plugin is LGPL (the same as for the swing-layout.jar itself).
An astute reader would notice that the current implementation of JDK 5.0-compliant GroupLayout doesn’t provide builtin support for Synth-based LAFs. It would be interesting to see how Nimbus is going to address this issue, especially with the plans to backport it to JDK 5.0.
