The year is coming to an end, and it’s time to review what has happened on this blog over the last twelve months. I’ll start the top ten most read posts, and then list my own favorites.

Let’s start with the top ten most read posts published in 2009 as measured by Google Analytics:

1. Introducing Trident – animation library for Java applications has marked the beginning of the long journey to extract the internal animation layer from Substance and make it available as a general purpose library. Published in February, has around 4,300 reads.
2. Project Marble – augmented reality in Java with JMF, Java3D, NYArToolkit and Trident is about mashing together a few libraries and adding a touch of virtual reality to the real world. Marble has not progressed beyond that entry due to the work i’ve been doing on Trident, Substance and Flamingo. Published in July, has around 3,700 reads.
3. Translucent and shaped windows in JDK 7 talks about the published APIs to manipulate top-level windows. This combined with the inclusion of JXLayer (renamed JLayer) is the only client-facing enhancement in Java 7 known so far. Published in May, has around 3,200 reads.
4. First signs of Nimbus designer in JDK 7 has kept the community hopes of finally seeing the much hyped (at JavaOne and other conferences) visual tool for creating Synth-based look-and-feels. For now Nimbus designer has proven even more elusive than JWebPane hinted to be included in NetBeans 6.9. Published in April, has around 3,100 reads.
5. New Dust skin for Swing applications showcased one of the new skins added in Substance 5.3 based on the artwork done by Rico Sta Cruz and Kido Mariano for Ubuntu. Published in March, has around 2,700 reads
6. Trident part 7 – parallel timelines in Swing and SWT is part of a longer series that talks about the Trident animation library. Published in June, has around 2,400 reads.
7. Revolutionizing media playing in Java talks about a new Java-based media player. Unfortunately it doesn’t seem that much work has been done on this project after the beta 0.7 has been published back in July. Published in March, has around 2,100 reads.
8. New Twilight skin for Swing applications showcased another new skin added in Substance 5.3, inspired by the color schemes of the Bespin web code editor spearheaded by Ben (@bgalbs) and Dion (@dalmaer). Published in April, has around 1,900 reads.
9. Animation blueprints for Swing – main application window has kicked off the deeper look into how Trident animation library can be used to add rich animation effects to Swing and SWT applications. Published in May, has around 1,800 reads.
10. Substance goals for 2009 talked about refining and refocusing the goal of Substance look-and-feel, outlining the five goals that drove the development of this library throughout the year. Published in January, has around 1,800 reads.

While these have been the readers’ favorites, a few entries that didn’t enjoy a wider readership are worth highlighting. These are my personal favorites that were published in 2008:

1. Substance goals for 2009 is the only entry from the “most popular” list that is going to appear here. These five goals have driven all the design and implementation decisions that went into the project over the last 12 months.
2. Why i do open source is for those who wonder why i spend my free time in front of the computer and then give away pretty much everything.
3. The devil is in the details zoomed in on the finer visual details of the Woopra desktop client, including information organization, color palette choices, and translucent overlays. You can continue to demand the same level of pixel loving from Substance 6.0 and beyond, as evidenced by the work on combo boxes, spinners and text components.
4. A peek into Substance internals gives a high level overview of the internal implementation details of Substance and is a good starting point for those who want to explore how the library works.
5. Close your Swing / SWT windows in style demonstrates what Trident can do in just a few lines of code.

If you still have not subscribed, click on the icon below to stay tuned in 2010! Happy New Year!

Some time has passed since Ken Orr has announced that he has teamed up with Kathryn Huxtable to work on a new Sea Glass look-and-feel for Swing applications, and i thought that it would be interesting to put Substance and its Jitterbug editor to the test.

Since i don’t have the full artwork for Sea Glass, I based the current implementation on the following mockup:

And this is how a Substance sample Sea Glass skin looks like after about half an hour of work:

The skin itself is a 122-line color scheme definition (created in Jitterbug) and about a 100 lines of Java code that associates the color schemes with the relevant control states and control visual areas. Note that this is not supposed to be a perfect reproduction of the target design, but more of an exploration of Substance skinning layer capabilities.

After taking a deep dive into the intricacies of aligning text components, comboboxes, spinners and buttons in the latest 6.0dev drops of Substance look-and-feel, it’s time to talk about supporting different font settings.

As with precise micro-design, Karsten has pioneered the Swing work on matching the desktop font settings in his JGoodies Looks collection of look-and-feels. Along with the native font rasterizer (at least on Windows Vista and its Segoe UI 12 font), this is by far the most important part in creating an application that is visually consistent with the user desktop. Personally, i think that one of the biggest mistakes in Java 6 was staying with Tahoma 11 as the default font for the native Windows look-and-feel, followed closely by an equally baffling font choice in Nimbus.

After the JGoodies font policy layer has been adopted in Substance, it was extended to provide font policies for Mac, KDE and Gnome desktops. When you run a Substance-powered application under one of these (or Windows), it will query the desktop font settings, and adopt them for all the controls and title panes. While this may cause a form designed for Windows XP (Tahoma 11) to have controls overflowing the form bounds on Gnome (DejaVu Sans 13), it is a small price to pay – in my personal view.

Given the wide choice of fonts that Substance must support, the micro-design layer in Substance needs cannot use hard-coded pixel values for control insets, margins, gaps and strokes. This functionality has been present for quite some time, and now is extended to support the new alignment requirements.

Here is a screenshot of the relevant controls under the different Tahoma font sizes:

and the same controls with guider lines showing the alignment of perceived vertical bounds and text baselines:

If you’re interested to see what Substance 6.0dev can bring to your application, take it for a spin. You can also click the button below to launch a WebStart demo – switch to the “Alignment” tab and see the control alignment in action:

Last week i have written about improving the visuals of text components, comboboxes and spinners in the 6.0dev branch of Substance look-and-feel library. Today, it’s time to talk about the micro-design of these components – aligning perceived boundaries, text baseline and other visual elements of user input controls.

I have started looking into the precise micro-design around three years ago, with the main inspiration coming from JGoodies Looks library developed by Karsten Lentzsch. The micro-design looks at how the controls look like when they are placed next to each other – do they have the same perceived height, are the texts aligned on the same line etc. While these issues do not directly affect the business functionality of your application, they most certainly contribute to the overall polish and end user experience. Since then, the work in Substance has grown into complete support for resolution independence – scaling the entire visuals of all supported controls based on the current desktop font settings.

With the recent redesign of the visual appearance of user input controls in the next Substance release, there were two major changes that required revisiting the implementation:

• Uneditable comboboxes now have appearance identical to that of buttons. This means that the button visuals should now be micro-aligned with those of comboboxes and, by extension, with those of all text based controls.
• Editable text based controls have double borders. The outer border is lighter and blends with the container, and the inner border is darker, creating the inset look. The perceived vertical bounds of these controls is delineated by the inner border.

Let’s look at a few screenshots. All the screenshots in this entry will show the same collection of controls – text field, formatted text field, password field, spinner, editable combo, uneditable combo and a button. Here is how these controls look under the latest 6.0dev drop of Substance:

And here is the same application, with grid lines delineating the perceived bounds of the controls (red) and the text baseline (green):

Here, the perceived bounds and the texts are perfectly aligned. It’s important to note that the actual bounds of text fields as compared to that of button is different – the text field is two pixels higher than the button. However, since those two pixels are painted with a color much closer to the containing panel background, the perceived bounds of the text field is defined by the inner darker contour.

This visual alignment is consistent across all Substance skins. Here are the controls under Dust Coffee:

and Graphite:

Now let’s see how Substance 6.0dev fares against other core and active third-party look-and-feels – all under Windows Vista with the font settings specific to the relevant look-and-feel.

We’ll start with the default Metal / Ocean:

The guider lines highlight the problematic areas:

Button is one pixel taller than combos, and combos are quite a few pixels taller than text fields / spinners. Also, even though technically the bottom spinner button is aligned with the bottom edge of the spinner, the perceived alignment is off by one pixel (since the colors used on these two parts have inverted brightness). Finally, the dot characters of the password field appear to be 1-2 pixels too high.

Let’s look at the native Windows look-and-feel:

Apart from the archaic usage of Tahoma 11 (and not the platform Segoe UI 12), there are two visual problems. The top border of the spinner control is cut off (see UI guidelines for the correct visuals), and there are extra pixels around the corners of the uneditable comboboxes. Let’s look at the guider lines:

The text baselines are perfectly aligned, and the only issue is the one-pixel difference in the height of button and combo.

Let’s look at Nimbus – the new addition to 6u10+.

Before looking at the guider lines, notice how the bottom edge of the arrow button on the editable combobox does not visually align with the much lighter bottom edge of the control itself. The visual result is that the button looks much heavier, appearing to “hang” off the right side of the control. The same applies to the bottom edge of the spinner. Let’s now look at the guider lines:

Here, the controls heights are inconsistent. While the button has the same height as the text fields and spinners, the comboboxes are two pixels shorter. Also, the star characters on the password field appear to be 2-3 pixels too high.

Now let’s look at JGoodies Looks. First, the Plastic XP skin:

The guider lines show that everything is pixel-perfect:

Now let’s look at the Plastic skin:

Here, most of the texts appear to be too low, and this is confirmed by the guider lines:

Note how the button text baseline is one pixel higher than the rest.

Finally, let’s task a look at Synthetica. We’ll start with the Base skin:

Overlaying the guider lines:

Shows that the button is 2 pixels higher than the rest of the controls. However, everything else looks perfect, including the bounds and text baseline.

Next, the newly added Black Eye skin:

Let’s overlay the guider lines:

Here, we can see that the button is much taller than the rest of the controls, and the spinner is 2 pixels shorter than text fields and combos. Also, the star characters of the password field appear to be 3-4 pixels too high.

The last skin to analyze is the Orange Metallic:

And the guider lines:

Here, we can see that the buttons are taller than the combos, and the combos are taller than the text fields and spinners. Also, the star characters of the password field appear to be 3-4 pixels too high. Finally, the button font is bold, while the rest of the controls use plain font.

If you’re interested to see what Substance 6.0dev can bring to your application, take it for a spin. Stay tuned for the next entry which will talk about control alignment in Substance across different font sizes.