About three months ago i wrote an overview of painters in Substance look-and-feel. Painters are one of the major building blocks of Substance, and over the last few releases they have been used extensively to provide consistent appearance to both core and third-party components. Unfortunately, the original painter design and responsibilities have not always stood the test of time, and one of the painters has grown significantly beyond its API. This has made the code more complicated, cryptic and in some cases, a pain to maintain. It applied not only to the internal code, but also to the external painter users (as outlined in the skinner primer).
Specifically, i am talking about title / header painters. Originally, the title painters were responsible for painting title panes of top-level windows (frames, dialogs), internal frames and desktop icons. Over the last few releases, they have evolved significantly to allow custom painting of other UI areas, such as menu bars, tool bars, task pane containers, status bars and others. As additional capabilities were added to the title painter API and implementation classes, it became clear that these no longer reflect the true usage – decoration painting. To this end, let me first introduce the new concept in Substance – decoration area type:
The <font color="darkblue">org.jvnet.substance.painter.decoration.DecorationAreaType </font>enum provides enumeration of available decoration area types. As a picture is worth a thousand words, the following screenshots illustrate the different decoration area types.
The following screenshot is the main Substance test application under the Business Black Steel skin (click to see full size version):
The next screenshot shows the title decoration area, which in this example includes the title pane of the main window:
The next screenshot shows the header decoration area, which in this example includes the menu bar of the main window:
The next screenshot shows the toolbar decoration area, which in this example includes the tool bar of the main window:
The next screenshot shows the general decoration area, which in this example includes the task pane container and status bar components from the SwingX suite:
Let’s go back to the original screenshot:
It illustrates that the specific skin assigns different color schemes to different decoration areas. The controls in those areas get the background and foreground colors based on their assigned color scheme (without any custom application code), thus creating visual distinction between different application areas.
In addition to the decoration painter, the latest development drop of version 4.3 (code-named Nairobi) introduces the new highlight painter API. The highlight painter is used to paint rollover and selection highlights on tables, trees, lists and menu items. In addition, it is used to paint highlights on third-party components, such as task pane container and month view in the SwingX suite.
For more information, please consult the following documentation:
If you switch to the latest 4.3dev binary drops, you might experience a few minor visual glitches. These will be addressed during the development cycle, but don’t hesitate to drop a mail or post a forum message if you find a regression. Also, if you were using the old title / header painter APIs or were providing a custom title / header painter in your application – first, apologies for breaking the binary compatibility, and second, i am here to help migrating your old code to the new painters.
It gives me great pleasure to announce the official release for version 4.2 of Substance look-and-feel (code-named Memphis). The list of new features includes:
In addition to the core release candidate, the following Substance plugins and modules have been updated as well:
A few screenshots of the new functionality in Substance 4.2:
Support for native text rasterization (viewed here with Segoe UI 12 pixel font under Windows Vista on JDK 5.0):
Component colorization with 50% factor (both background and foreground):
Respecting the KDE desktop font settings:
Better visuals for disabled controls under Raven Graphite skin:
Removing visual noise on tables and table headers in scroll panes:
The release candidate for version 4.2 of Substance look-and-feel (code-named Memphis) is available. The list of new features includes:
Target date for release is February 4. Only defects will be fixed until this date.
In addition to the core release candidate, the following Substance plugins and modules have been updated as well:
I am not a professional designer, but i’m always ready to learn from people who have a finer eye and more experience than me. Last week i posted a screenshot of the newly redesigned enterprise application from Lawson (designed by frog design). As i hinted in that entry, some of the visuals are planned to be added in the next releases of Substance look-and-feel. Well, you don’t have to wait too much, at least for one of the visuals of this application.
First, here is a screenshot of the table component from that application:
and here is the table design from Nimbus:
There are a few interesting and subtle details here, all contributing towards very clean and elegant visuals of a table wrapped in a scroll pane:
- Continuity of the table border and scroll bar border
- Continuity of the table header, extending to the top-right corner of the scroll pane
- Continuity of the striped background
- Continuity of the selected background
Let’s see how such a table looked like in the previous Substance release (4.1 code-named Lima):
Non-native font rendering aside, there are quite a few problems:
- Even though the table grid is turned off, there are still white separator lines clearly visible on striped rows and especially on the selected row
- Too many lines on the table header – each cell has its own border
- Extra border to the right of the scroll bar results in additional visual noise
- The selection background doesn’t extend to the perceived table bounds on both sides
So, how does it look under the latest 4.2 drop that is scheduled to be the RC build if no bugs are found until Monday?
This addresses quite a few of the issues (continuity, borders, background, scroll pane corner component, native text rendering), and the end visual result is much cleaner. And here is the same table under right-to-left orientation:
Still few things to be addressed in the RTL mode, such as the location of the sort icon and the alignment of the default text renderers.
How does Substance fare against the competition? The same application under Nimbus from the latest 6.0u10 drop (obviously it is still work in progress):
While largely faithful to the design, there’s the off-by-pixel discrepancy where the table header meets the scroll bar, wrong foreground color of selected cells and too little vertical space for the rows (see how the icons “touch” the rows above them). The RTL mode breaks the visuals of the scroll bar and introduces more off-by-pixel’s in table header and scroll bar:
How about Synthetica? Here is the same application under Synthetica Blue Ice:
It has most of the same issues as Substance did in version 4.1, including the extra white lines on selected row, double border on the right hand side of the scroll bar, table header that doesn’t blend with the outer border and too little space on the left hand side of header cells. The RTL mode doesn’t have additional problems:
The Substance screenshots above were taken under the Nebula skin which uses some of the color schemes from the Nimbus design. Obviously, the same visual noise reduction applies to all other Substance skins. Here is the same application under the Business skin:
and the RTL mode:
These changes are available in the latest 4.2dev drop of Substance. The release candidate is scheduled for January 21st (this Monday) and the release is scheduled for February 4th. If you find any bugs, you can post a report on the project mailing lists, issue tracker or in a direct mail [kirillcool yahoo com].
