In this entry i’m going to talk about the first step in the process of taking the UI definitions from your designer and converting them to a live implementation. This process is illustrated by taking design of Cookbook UI (from the My Dream App contest) and turning it into a Swing application using Substance look-and-feel. The code behind the process is available in the Substance Samples project that aims to provide a collection of blueprints for creating visually rich UIs in Swing.
Identifying application decoration areas
The first step in implementing a specific UI is identifying the application decoration areas. Here is a thumbnail of the main Cookbook design:
This screen has four main decoration areas. The following screenshots show a translucent light blue overlay to highlight each one of the areas.
The top portion of the application window is the header:
The bottom portion of the application window is the footer:
The left portion of the application window is the sidebar:
The center-right portion of the application window is the main:
Identifying application functional areas
Unlike the decoration areas that are primarily delineated by similar colors and textures, the functional areas are delineated primarily by the user-facing business logic. In Cookbook UI there are three main functional areas (in addition to the general control area in the header):
Note how the functional areas and decoration areas are not identical. In fact, every functional area intersects two decoration areas (and vice versa in most cases). Here is a fll-size view of the sidebar area in Cookbook UI:
Note that while the lists and footers have different visuals (colors, textures, gradients), they belong to the same functional group. For example, the footer controls for the category list are located directly beneath it, and the footer panel itself has the same width as the category list. This is especially true for dynamic scenarios when the entire UI is resized or re-proportioned.
This step may cross the line between the pure design and the implementation (Swing or other UI toolkits). As the developer, you will mostly be operating on the functional UI areas. It is important to understand that Substance supports the notion of different decoration and functional areas. However, in some cases the certain limitations of the Substance decoration layer will impose some restrictions on the way you structure the Swing hierarchy.
The next part will talk about mapping application functional areas to Swing container hierarchy and mapping the application decoration areas to Substance decoration areas.
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.
I am happy to announce release candidate for version 3.1 (code-named Eilinora) for Flamingo component suite.The goal of the project is to provide a small and cohesive set of powerful UI components with functionality similar to or superseding that of Vista Explorer and Office 2007, and this release closes many gaps towards realizing this goal.
The release notes have the detailed description of the new functionality. Noteable features include:
- Improvements to SVG transcoder, allowing creating resizable icons. This is used in the new ribbon demoes to make significant performance improvements to the startup phase.
- Contextual task groups on the ribbon component.
- Dynamic content of in-ribbon galleries.
- Decorating the ribbon under Substance plugin, putting the taskbar and contextual task group headers on the title pane.
- Resizable icons based on .ICO format.
- Command buttons supporting disabled mode, changing text and changing font.
- Auto-repeat mode on command buttons.
- Column-fill mode on command button panels.
See Flamingo test applications in action under the core look-and-feels and under Substance look-and-feel.
You’re more than welcome to take 3.1RC for a ride (along with the matching Substance plugin if your application is using Substance look-and-feel) and report any bugs at the project mailing lists, forums or issue tracker. The final release is scheduled on September 15 and only bugs will be fixed until that date.
I am extremely pleased today to announce the availability of release candidate for version 5.0 of Substance look-and-feel. The roadmap for this release has been published in April, and the library has undergone significant internal and external changes to address major performance issues and to ensure the long-term code health of the project.
The release notes for version 5.0 provide detailed information on the major application-facing changes in this version. Some of the applications that have used Substance-specific APIs and client properties or defined a custom skin will have to be modified when upgrading to version 5.0. This was absolutely mandatory to address the performance issues and ensure that the library stays maintainable in the long run. The code has grown a lot of unnecessary complications over the last few releases and had to be significantly refactored to bring it back to a clean and maintainable state.
Here is the list of big changes in Substance 5.0:
- Moving to Java 6 as the minimum runtime requirement.
- Addressing the performance issues. While the first announced drop was 20% faster than release 4.3, the release candidate is 3.5 times faster on static scenarios and 2.7 times faster on dynamic scenarios as measured by the LightBeam testbed.
- New client property to allow using per-window skins.
- Enhanced theming layer.
- Removed 16 VM flags and left only 2.
- Removed 15 client properties, consolidated 3 others into 2 and added 1 new.
- Removed 54 API methods on the main class, pushing some functionality into the theming layer.
- Consolidated theme pack, watermark pack and button shaper pack into the Extras pack that also provides additional skins.
Click on the button below to launch a signed WebStart application that shows the available Substance features.
The following sub-projects are also available as release candidates:
As promised, version 4.3 (the last version that can run on Java 5) is in long-term support mode. At the present moment this version has thirteen bug fixes backported to it from the main development trunk.
You are more than welcome to take Substance 5.0RC for a ride and report any problems in the project mailing lists, forums or issue tracker. The final release is scheduled for September 15. Only bugs will be fixed until that date.
Sample screenshots of Substance in action:
