Pushing Pixels

This entry is going to summarize the process of taking the UI definitions from your designer and converting them to a live implementation. 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 main five phases of this process are:

• Analysing the original design
• Mapping design to UI toolkit
• Implementing the decoration painting
• Implementing the skin
• Polishing the visuals

The customization layer of Substance (especially the painters) aims to create a customizable and powerful separation between painting layer and the rest of the application code (business logic such as persistence, authentication, communication and more). In this separation, Substance allows working on the application visuals as a separate work flow (although the process of mapping the application areas to Swing and Substance may require closer cooperation with implementing the actual UI container structure).

The ideal end result of this process is a self-contained implementation of the application skin that can be:

• tweaked as the design changes
• reused in other applications under the same portfolio
• even swapped out for a completely different appearance (such as using a native look-and-feel)

It took me about 20 hours to create the final visuals as shown below (click to see the full-sized version):

As the developer of Substance i have an advantage of knowing how the library is built and what APIs are available. My hope is that this series will make it easier for Swing developers to understand the customization layer of Substance and use it to its fullest potential.

An important question that needs to be addressed is: why do you need to do it with Substance? Why would you want to tie yourself to a third-party library when you can override paintComponent and use Java2D to create all the visuals? While you can most certainly do so (and in fact, the light bar holder is implemented this way), Substance gives you quite a few advantages:

• Cleaner separation of the painting logic from your main application. A close cooperation with your design team that is made aware of the current Substance limitations may result in zero custom painting code in your components even for such a complicated design as Cookbook UI.
• Performance improvements in version 5.0 (available tomorrow) bring Substance on par with the core look-and-feels. If your painting code is making heavy use of Java2D and images, you will need to provide a sophisticated caching layer to make sure that the UI remains responsive.
• Substance skin can be reused across multiple portfolio applications. Embedding custom painting code in your UI components may result in a code that is harder to refactor into reusable building blocks.
• Substance provides animation effects (rollover, selection, others) on the core and supported third-party components out of the box. These effects add a modern touch expected from visually rich applications.
• Substance supports third-party component suites, such as SwingX, Flamingo and (partially) JIDE. In addition, it provides a well-defined plugin mechanism to support additional third-party components.
• Substance makes your applications safer by checking EDT violations during the UI construction.

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.

Related posts:

1. From Photoshop to code – step 5, polishing the visuals In this entry i’m going to talk about the fifth step in the process of...
2. From Photoshop to code – step 1, analyzing the original design In this entry i’m going to talk about the first step in the process of...
3. From Photoshop to code – step 3, implementing the decoration painting In this entry i’m going to talk about the third step in the process of...
4. From Photoshop to code – step 4, implementing the skin In this entry i’m going to talk about the fourth step in the process of...