Substance samples – blueprints for visually rich UIs

September 5th, 2008

Ben Galbraith had a very interesting session at this year’s JavaOne. Titled “Creating a Compelling User Experience” (see PDF slides), it talked about the importance of visual aesthetics combined with close collaboration between developers and designers to create applications that are both functional and appealing. Slide 75 shows a screenshot of an application called “Cookbook”. Contrary to what Ben mentioned, this application has never been publicly available as far as i know. One of the winners of My Dream App contest, it never moved past the screenshots and private developer builds. However, the screenshots show amazing attention to detail and painstaking polish in every UI element.

The big question that a lot of RIA frameworks try to address nowadays is bringing designers and developers together in the same cycle. Adobe and Microsoft have tools that allow both sides to work on the same project, designers defining and refining the visuals, and developers filling in the logic of business, communication, persistence etc. JavaFX promised tooling support as well, and it remains to be seen whether it will move past the Illustrator / Photoshop plugins.

What about Swing developers? How difficult it is to create a UI such as Cookbook (mockups) in Swing? Here is one of the final Cookbook designs (click to see full view):

Can this be done in Swing? Most certainly yes, if you have tons of time on your hands and are a Swing / Java2D guru. Can this be made reusable to use in other applications (for your portfolio suite)? Most certainly yes, but that will take even more time.

Here is a full-size version of the left part of this design:

Here is an incomplete list of small but important visual details that come together as a single well-tuned UI:

  • Continuous look of the title pane and the toolbar.
  • Similar texture and coloring of title pane / toolbar and the footer.
  • Different texture on the left side bar.
  • Two different panels on the left side bar (one of them is a scroll bar) sharing the same continuous texture and lights.
  • Vertical separators extending from the side bar panels to the footer bar, changing the color to match the relevant areas.
  • Continuous texture on the buttons in the toolbar and the footer.
  • Single borders (border strip) on the buttons in the toolbar and the footer.
  • The search text field in the footer is not using the same coloring as the footer itself.

And here is the implementation of the same UI as a combination of a custom Substance skin and a small amount of application Java2D code that is using published Substance APIs to achieve a similar look using no images (click for full-size version):

and the full size version of the left side of the screen:

This application is available as part of the first drop of the Substance Samples project that will grow to include implementation of additional rich UIs. The code is available in the SVN repository and I will go into more details of analyzing the specific UI, creating a custom Substance skin and augmenting it with a small amount of custom Java2D code in the next entries.

It is my fault that i have started working on this UI after announcing the release candidate for version 5.0. It is true what they say – you need to eat your own dog food. The decoration painters are one of the more advanced features in Substance, and i have not completely tested this area on such a demanding interface as Cookbook. During the implementation of this UI i ran into a number of issues with the current published API. While some of the issues result in boilerplate code (and as such can be delivered in additional APIs in the next release), i had to introduce breaking changes to the APIs delivered in 5.0 RC. The changes are very small:

  • Adding a new parameter to the gradient painter API.
  • Changing the visual behavior when a component has a number of parents each marked with a different decoration area (think a toolbar placed in a status bar).

This may break applications that used these published APIs. As much as i hate doing so, i can not postpone it to release 5.1 since it is not going to be a major one. We all make mistakes, and mine was in not initiating the work on the Substance Samples project sooner.

One final note – this is still work in progress. It does not intend to create an indentical copy of the target UI. While some of the colors will be tweaked (the Cookbook design uses more saturated yellows), the main goal of this project is to show the power of Substance in creating custom skins that can be reused in different applications and tweaked as required.