One of the rules of good UI design is to use consistent coloring guidelines. One of the many reasons is the accessibility for color-blind users who might not be able to distinguish between light red and light green background for validation indications (reported seven percents of male population of United States can’t distinguish between green and red or see them differently). However, some applications can benefit from using colors to visually distinguish between controls, and one of the users of Substance look-and-feel has recently filed an enhancement to provide support for control colorization (attaching this screenshot as sample of the required UI).

And so, i’ve spent the better portion of the last two weeks on colorization support for the core Swing components. What started out to be an innocent and simple enhancement request turned out to be an excellent opportunity to revisit pretty much the entire Substance codebase, fixing few stray bugs and refactoring some duplicate functionality. This entry shows sample screenshots of colorizing awide variety of core Swing components, with support for SwingX and Flamingo component suites coming in the next release. If you want to play with live demo, click the button below, wait for the application to load, switch to “Colorized” tab, check the “colorize” checkbox and play with the slider (which sets the colorization amount).

And now let’s see some screenshots. Here is a collection of toggle buttons, checkboxes and radio buttons in different states (default, selected, disabled and disabled selected) under Business Black Steel skin:

Now, let’s set the background and foreground colors to some application-specific values and see how these controls look under Metal:

While some states respect the settings (for both background and foreground colors), others don’t. For example, the foreground for disabled is always light gray, the background for selected toggle buttons is always light gray. In addition, the checkmarks for check boxes and radio buttons respect neither custom background nor custom foreground. Let’s try under Windows look-and-feel:

This looks even worse than Metal and much of it is due to the limitations of native look-and-feels as described in this earlier entry. The buttons would be better off ignoring the custom settings at all – disabled foreground text is the same as enabled one, and the background is painted as a rectangular “ghost” border around the buttons.

While Substance hasn’t been much better up until now, the things look different in the latest 4.2dev build. Here are the same controls with 50% colorization:

As you can see, the colors of the original theme are now colorized with the custom background and foreground. The disabled controls still look disabled (colorization is not as strong), and the check marks of radio buttons and check boxes are colorized with the custom foreground colors. In addition, the background of check boxes and radio buttons is not colorized at all. Last but not least, the colorization implementation tries to preserve the brightness levels of the original colors, which results in consistent gradients even for large colorization values.

Let’s see how the same controls look under 25% colorization:

If the application requires more colorization, it can set it to anywhere between 0% and 100%. Here are the same controls under 75% (note that the gradients are still discernible):

Let’s see some other controls being colorized. Here are a few text components:

And a scroll pane with yellow background (propagating to the horizontal scroll bar) and green background on the vertical scroll bar (i still haven’t decided whether the corner should be colorized as well):

What about something a little more complicated such as table? The first row has enabled tables with green and dark green backgrounds, while the second row has the same tables disabled. Note how the background colorization is applied not only to the cells and header cells, but also to the table grid lines:

Another complicated example is a tree. Here, the colorization is applied to the striping, the cells, the tree lines and the tree collapse / expand icons:

Another complicated one is an internal frame. Here is a screenshot of desktop pane with custom blue background with four internal frames, two of them minimized. Note how the custom background of an internal frame is applied to its title pane, the title pane buttons, the frame border and the menu bar (first two apply for the desktop icons as well):

Going back to simpler controls, let’s see some sliders and progress bars:

and compare it with Metal:

The last screenshot shows the colorization of menu items (note how it applies to the text, check marks and the arrow icons):

I’d like to thank Luke Sleeman for creating this enhancement request and providing feedback on the initial implementation. To try it out, run the demo linked above. You can download the latest binaries and sources right here and play with the new SubstanceLookAndFeel.COLORIZATION_FACTOR client property which can be set on UIManager (globally) or on any component (applied to the component and all its children). The value should be a Double in 0.0-1.0 range. All the Substance screenshots in this entry have been taken under JDK 6.0 on Vista, with the Bramble plugin providing native text rendering.

These two features (native text rendering and colorization support) mark the code freeze for new core features in the next Substance release (code-named Memphis). At this point, they have resulted in only 40KB increase in the size of the binary library. The release candidate is scheduled for January 21st, with the release scheduled for February 4th.

Here are some Swing links that you might have missed during this week:

• Dave Gilbert of JFreeChart project follows in the footsteps of Google Chart and provides a servlet that generates embeddable chart images for web applications. While not strictly relevant to Swing, it employs the same approach as outlined by Jacobus Steenkamp in this article from java.net – using Swing as backend to generate images to be displayed in web pages.
• Ramon Ramos has announced a NetBeans plugin that installs the Synthetica look and feel with matching delegates for custom NetBeans components (editor tabs, viewer tabs and sliding buttons). The plugin itself can be downloaded here, and while the sources are not publicly available, it appears that it uses internal Synthetica APIs to paint the relevant component visuals. Before using this module in your NetBeans RCP applications, make sure that you comply with the licensing terms of Synthetica itself – while the declared license of the plugin is “Netbeans”, some Synthetica skins can not be used without a commercial license. This marks the third look-and-feel plugin for NetBeans after Substance and Napkin.
• JIDE Software has announced the second major update to JIDE Desktop Application Framework (JDAF). I would really like to see David and his team to have regular updates to the company blog, showcasing their excellent products
• Eric Burke writes on a more compact way to fire property change events on Swing components. I jumped the gun a little too early in the comments, and his implementation is correct. The compactness sacrifices the readability a little, and i think that i still would prefer the usual way.
• Sun started (a potentially long) wave of announcements leading to the Update N and JavaFX this week at JavaPolis with the Scene Graph project. Geertjan has a small example over at this Javalobby thread, but i am much more interested to see how this will be supported in the JavaFX designer tool chain. Obviously, the designer must support visual editing and creating the JavaFX code / matching scene graph in the underlying code. But will it be able to go the other way around – be able to parse a Java class with scene graph definition and show the resulting scene at design time? Or even better, will it be able to parse an arbitrary scene graph definition, or still have the same “guarded” blocks in NetBeans?
• The second announcement from Sun is about the all-Java PDF renderer project. It’s quite illuminating to read the comments on the original announcement and this Javalobby thread. The most interesting part of the project page reads: “The PDF Renderer currently supports a subset 1.4 of the PDF specification. It does not support transparency, various font encodings or fill-in forms. These are the first features we hope the community will tackle“. Applying the usual rules of “it takes 90% of the time to get the first 90% of the features, and then the rest 90% of the time to get the rest 10% of the features”, these are obviously not the easiest parts of the spec (which is not even the latest spec). Will it follow in the footsteps of Flying Saucer, providing support for only a subset of the (quite big) spec? Will it follow in the footsteps of SwingX, with the community finally stepping in after more than two years since the project inception? Hopefully, this will not result in the same fallout as the announcement of SwingX painters, the bitter reaction of WingZ developers and the eventual closing of ZValley company.

Flamingo component suite comes with a flexible and powerful component that hosts command buttons, providing support for button groups, single selection mode (for toggle command buttons), same icon state / dimension and automatic column layout. The official documentation for the base command button panel and file viewer panel have the detailed walkthroughs, and here i will give a short overview of some of the main features.

As noted earlier, one of Flamingo’s goals is to provide a small and cohesive set of powerful UI components that allow creating modern applications that provide visual functionality similar to or superseding that of Vista Explorer and Office 2007. The command button panel and its extension, file viewer panel, address the functionality commonly found in file explorer applications.

Here is a simple file explorer that uses the breadcrumb bar and file viewer panel with button state set to medium:

Here, the icon for image files come from the file itself (thumbnails), while the icons for other mimetypes are taken from the latest SVN snapshot of the KDE Oxygen project.

Here is the same exact application with big icons:

The icons are properly scaled and the inner layout of the buttons changed to reflect the new button state. What about custom large icons?

The same functionality, only controlled by the flexible slider (on the left hand side of the application frame). Note that the bottom-right button has the icon based on the actual JPG contents (scaled down), while the other three buttons sport resolution-independent sharp visuals from Oxygen SVG images.

Here is the same application under the tiled state – with extra line of information on each file:

The last screenshot is from a sample SVN browser that uses the same icon computation approach, tiled state and extra line of information on each file (fetched from the SVN repository and set on the corresponding command button):

You’re welcome to play with the latest 3.0dev drop of Flamingo and read the detailed documentation on command button panel and file viewer panel.

Here are some Swing links that you might have missed during this week:

• Jasper Potts posted an update on the Nimbus development progress. The screenshot shows the support for the different component sizes (using the same client properties as the latest Aqua drop). As the comments point out, there are quite a few visual inconsistencies which will be hopefully addressed (small and mini scroll bars, inconsistent scaling of arrow icons across different controls, small and mini indeterminate progress bars and text field shadows are among these).
• The latest drop of Dolphin addresses bug 6438179, providing correct implementation of tray service availability on Unix platforms. Backport to Update N highly desired.
• Danno Ferrin kicks off the slew of Groovy-related items with his overview of new Swing features in Groovy 1.5.
• Andres Almiray is back with a few postings of his own. Starting with CSS support in Swing / Groovy applications, he provides a little more information (and a screenshot) on GraphicsPad, and finishes off with updates on builders for WingS and Jide.
• Geertjan Wielenga blogs about integrating a YouTube player inside NetBeans IDE. A sad tribute to the lack of open-source video playback components in Java (he is using the commercial WebRenderer library). This is still on top of my wishlist for 2008, and is still foolish to hope for.