A clear and well-defined set of goals is crucial for projects of all sizes, and Substance is no exception. The project goal has been refined and refocused to guide the project throughout the year 2009 and is:
To provide a rock solid, fast and extensible library for creating visually appealing and consistent Swing applications
To provide a little bit more details:
Rock solid – the goal is to continue providing production-quality collection of skins with foremost focus on handling bug reports and maintaining long term health of the source code base.
Fast – the goal is to continue focusing on the performance aspects, making sure that code changes do not introduce any performance regressions and continuously analyzing the existing code paths for additional performance improvements. Project LightBeam is an integral part of the development process, which has already seen an average additional improvement of 3.3% in version 5.1dev as compared to the latest stable 5.0 release.
Extensible – the goal is to provide a focused and powerful set of APIs to create and tweak custom visuals as mandated by the design mockups of specific applications. Documentation on Substance skins, painters and the sample blueprints provides detailed information on how to use Substance to implement even the most demanding modern designs.
Visually appealing – the goal is to provide a selected collection of core Substance color schemes, painters and skins that can be used without any change in application code. Each core skin pays close attention to visual polish and the current desktop configuration, including font and DPI settings.
Consistent – the goal is to enforce visual consistency across different UI areas. The grouping of visual aspects based on component states, decoration areas and the newly added color scheme associations facilitates richness and flexibility between the different UI areas, at the same time enforcing visual consistency and connections across the components in related areas and states.
These five areas will be the main driving factors behind the continuing development of Substance look-and-feel in year 2009.
Jitterbug is a visual editor for creating and editing color schemes in Substance look-and-feel. It primarily addresses the scenarios where you need to translate design mockups or emulate existing UI visuals as a Substance skin. Created during the rework of the Office Blue skin, it was used to create and refine all seventeen color schemes currently used in this skin.
The following screenshot shows Jitterbug in action (click to see full size view):
To see the Jitterbug in action, run the following signed WebStart demo:
Here i would like to ask for your feedback. This tool was created to scratch my own itch – it was getting quite tedious creating and tweaking color schemes. I did try to make both flows straightforward and intuitive. However, i cannot be an objective judge of my own creation. As such, i am not detailing any instructions on how to use Jitterbug. If you find yourself stuck in the middle of the process, or the flows do not simply make sense, let me know in the comments.
A few months ago, this posting on the Substance users mailing list has asked for better color matching of icons on disabled buttons. If you do not use the AbstractButton.setDisabledIcon API, the implementation of AbstractButton.getDisabledIcon uses the LookAndFeel.getDisabledIcon to create a disabled icon based on the current button icon. The default implementation of this method uses the GrayFilter class, which, while adequate for the core look-and-feels and most Substance skins, fails short for colored skins such as Autumn or Office Blue.
This has been addressed in the latest 5.1dev drop of the core Substance library. The screenshot below shows how a disabled button looked prior to these changes under Autumn skin (the copy button on the left):
And here is how it looks now:
Here is how the disabled icon looked like under Office Blue before:
And here is how it looks now:
In addition to using the color schemes of the current Substance skin, the new implementation also results in better fidelity to the original icon (especially visible under Autumn above).
Another change in the latest 5.1dev drop of Substance is much better support for themed icons. First introduced about two years ago, and revisited for Flamingo command buttons, it now supports a wider range of core Swing components and provides better rollover animations for Flamingo buttons.
Enabled by using the USE_DEFAULT_THEMED_ICONS client property, it was previously supported only on buttons and toggle buttons. This has been extended to labels, menus, menu items and tabs, along with removing support for per-component configuration. It is now a global property that can be installed on the UIManager.
The new implementation that better preserves the details of icons on disabled buttons also results in crisper and more recognizable icon details for the themed mode. Here is how the themed icons looked before under Autumn:
and here is how it looks now:
Here is how the themed icons looked before under Office Blue (almost unrecognizable, since the color schemes are very washed):
and here is how it looks now:
The support for themed mode has been reworked for Flamingo command buttons as well, bringing them in line with both the visuals and the rollover animation sequences (see the movie below). Here is a screenshot of the ribbon under Office Blue with full color icons:
and here is the same ribbon under the themed mode:
To illustrate the themed mode and rollover sequences in action, click on the following movie:
To see the themed Flamingo ribbon component in action, run the following WebStart demo and select the Use themed icons in the bottom right part of the application:
If you want to test the disabled and themed icons in your applications, you would need the following (the last two only for applications using Flamingo components):
While the overall direction is right (washed blues + a combination of yellow / orange colors for active states), it was quite off in both hue and saturation.
Here is how it looks in the latest 5.1dev drop of Substance (code-named Panama):
Office Blue skin is by far the most complicated Substance skin, and uncovered deficiencies in the core library as far as the skinning flexibility goes. The most visible change is breaking the API of highlight painters to add two new parameters (for passing the border color schemes). All the other changes are additive, bringing more control over the definition of color scheme bundles.
You can now associate the following three new types of color schemes with each component state (see the SubstanceColorSchemeBundle and OfficeBlue2007Skin for more details):
Color schemes for marks (check marks, arrow icons, …)
Color schemes for tabs (see the white fill of the selected tab)
Border color schemes for tabs (run the WebStart demo below and move the mouse over the selected tab to see the orange glow)
At the present moment, the Office Blue skin is defined by fifteen different color schemes that cover thirty six different component state configurations. Additional color schemes may be added later to further tweak the visuals.
As with Substance 5.0, performance is the major factor. Adding the new color scheme kinds and component state combinations introduces about 0.8% performance degradation to the skins that do not use them, and about 2.1% to the skins that do. I do believe that the new fine tuned control over defining the visual aspects of your custom skins is worth it, and i will try to bring the numbers down until the final 5.1 release (set to coincide with the final 4.0 release of Flamingo).
The final piece is a new visual tool to assist in defining Substance color schemes based on the existing designs. It is called Jitterbug and will be properly introduced next week. You can create a new color scheme with Jitterbug in under a minute, and all fifteen color schemes of the new Office Blue skin were created with it.
To see the new Office Blue skin in action on the Flamingo ribbon component, run the following WebStart demo:
If you want to test new visuals and APIs, you will need to take the latest 5.1dev drop of Substance (code-named Panama).
