I am extremely pleased today to announce the availability of official releases for a number of my Swing projects. Synchronizing the release schedules for these projects allows the applications to take stable and well-tested libraries that allow creating modern user interfaces.
Flamingo component suite release 3.1 (code-named Eilinora) is available. 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.
Substance look-and-feel release 5.0 is available. Substance has undergone significant internal and external changes to address major performance issues and to ensure the long-term code health of the project. 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.
The following sub-projects are also available as official releases:
Version 4.3 of Substance (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.
Click on the button below to launch a signed WebStart demo that shows the available Substance features:
Click on the button below to launch a WebStart demo that shows the Flamingo ribbon component under Substance look-and-feel:
Click on the button below to launch a signed WebStart demo that shows the SwingX components under Substance:
In addition to Substance and Flamingo that can be used directly by applications, the following projects haven also been officially released:
- Laf-Plugin release 1.0 (code-named Vile Weed) is available. The goal of this project is to provide a generic plugin framework for look-and-feels and define the interface of a common kind of plugins – the component plugins.
- Laf-Widget release 4.0 (code-named Iris) is available. The goal of this project is to provide support for and base set of additional behaviour and widgets in look-and-feels.
- Rainbow release 1.1 (code-named Nightstone) is available. The goal of this project is to illustrate various animation, transition and translucency techniques.
It has been a long journey. Flamingo 3.1 development has started in February, and i would like to thank Gunnar A. Reinseth, Pedro Duque Vieira, Kenneth Flynn in particular for their invaluable feedback during the development cycle. Substance 5.0 development has started in April, and i would like to thank all the early adopters for testing the development drops and providing their feedback in the project forums and mailing lists.
The work on both Flamingo and Substance is not finished. The plans for the next Flamingo release are available at the end of this entry, and plans for the next Substance releases will be published on this blog. If you are interested in using Substance to its fullest potential, you’re welcome to read the “From Photoshop to code” series.
Here are some Swing links that you might have missed during the last week:
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:
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.
In this entry i’m going to talk about the fifth 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.
Lather, rinse, repeat
Unless you are using the exact same images that the designer was using for creating the screen mockups, the process of implementing the required visuals is hardly ever done. The slightest variations in color saturation, hues and brightness can result in a drab appearance. Not paying attention to artfully placed visual separators (gaps, margins, borders) can result in a cluttered appearance. Failing to remove visual noise that does not bother you as a programmer can result in visual distractions for the users, even at the unconscious level.
Here is a screenshot of the very first implementation of Cookbook UI header before all the visual tweaks introduced in the previous phases:
and here is the current implementation:
Here is a screenshot of the first implementation of Cookbook UI footer:
and here is the current implementation:
The devil is in the details
While the first two phases (analysis and mapping) operated on more abstract layers (decoration areas, functional areas, container hierarchy), the implementation phases (decoration and skin creation) must pay painstaking attention to all the minute details of the target design. Not closely following the design may seem insignificant to the developer, but it will in most cases result in deteriorated user experience.
The following is an incomplete list of Cookbook UI minute visuals that have been pointed out before. Most of these can be easily addressed with Substance painters and skins.
- Seamless and continuous texturing of header, footer and sidebar areas.
- Light-dark fill gradients for the buttons.
- Darker gradients for the button borders with translucent fading inner borders.
- Color schemes used for the selected buttons in the header and scroll bar in the sidebar.
Here are two more examples of fine details that are easily missed at a cursory glance. The following is a zoomed screenshot of the seam between the sidebar and the footer area. The vertical separator has two lines, darker on the left and lighter on the right. The same appies to the horizontal separator. In addition, the horizontal separator is painted on top of the vertical one to further enforce the boundary between the application functional areas:
In the implementation, the vertical separators are painted as a custom border installed on the relevant panels. While this can be achieved with the decoration painter, in this specific case it is easier to use borders and supported Substance APIs (to fetch the color schemes). These borders are the only usage of Substance APIs outside the self-contained definition of the custom skin. This is an example of the tradeoff between containing the painting routines inside the skin definition and the limitations of the Substance skinning layer that impose greater complexity on implementing this specific feature.
The next screenshot shows a zoomed version of the buttons in one of the footers:
In addition to the details on the gradient fill and the double border, there is one more important thing – the seamless appearance of the buttons as one joined group. In order to implement this, i am using the <span style="color: darkblue;">org.jvnet.flamingo.common.JCommandButtonStrip</span> component from Flamingo component suite with the matching Substance plugin. Buttons placed in the <span style="color: darkblue;">JCommandButtonStrip</span> will have continuous background, a single separator line between them and correct rounded corners on the left / right buttons.
Using Flamingo also facilitates creation of custom icons for the header and footer buttons. In this case, i am using the offline Flamingo SVG transcoder to transcode a few icons from the Tango iconset to pure Java2D based classes. A combination of a few filters can make these icons white with a darker halo shade.
Even when you think you’re done
The process of defining, implementing and refining the visuals can take a few iterations until both sides (design and implementation) are satisfied with the results. In this process, paying attention to the work of the designer is as important as handling all the corner cases in the business logic. Indeed, a few ill-advised pixels or a drab color scheme are not going to bring your application down. However, if you are interested in providing an appealing and immersive flow to your users, it is most certainly worth extra few days of investment.
