Pushing Pixels

One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma) is to polish the appearance of existing components. Today i’m going to talk about visual enhancements done for the comboboxes in the latest 6.0dev drop of the library.

In Swing there are two distinct types of comboboxes – editable and uneditable. This is controlled by the JComboBox.setEditable API. An uneditable combobox behaves essentially as a menu button – no matter where you click on the control, it brings up a popup menu with available elements. An editable combobox allows typing in a new value (with possible auto-completion available from third-party libraries), as well as showing a popup with available elements by clicking a small button “embedded” in the combobox.

The latest 6.0dev drop of Substance features visual overhaul of these two types of comboboxes. It addresses the following points:

• Bringing the appearance of uneditable comboboxes in sync with core Swing buttons and Flamingo command buttons. As i said earlier, an uneditable combobox is a menu button, and as such, it should look like a button.
• Bringing the appearance of editable comboboxes in sync with the text fields:
  • Adding more contrast to screens that use editable comboboxes as user input fields – by creating an “inset” look
  • Modernizing the appearance of these controls – by smoothing the corners and borders

In addition, the visual appearance of both combobox types should not expose the inner implementation – this is seen in most core and third-party look-and-feels (as well as in older Substance releases) where the innards of JComboBox – namely a text field and an arrow button are clearly seen on the screen.

Here is a screenshot with a few comboboxes under the Dust Coffee skin in release 5.3:

and here are the same controls under the latest 6.0dev:

When the mouse is moved over the arrow area of the editable combobox, it fades in the fill and border:

The same comboboxes under the Business skin in release 5.3:

and under the latest 6.0dev drop:

The same comboboxes under the Gemini skin in release 5.3:

and under the latest 6.0dev drop:

Finally, the same comboboxes under the Graphite skin in release 5.3:

and under the latest 6.0dev drop:

In addition to reworking the visuals, the latest 6.0dev drop also addresses the alignment and baseline consistency of all relevant controls. I have talked about precise micro-design back in September 2006 and in September 2007 (the links show how Substance has evolved over the years). Revisiting this topic once again, i first want to show a screenshot:

Here we have four different components:

• Swing core button
• Swing core uneditable combobox
• Flamingo command action button
• Flamingo command menu button

This screenshot illustrates the precise micro-design of the latest 6.0dev drop of Substance, enforcing the same preferred height on all these controls. As Flamingo command button is a functional extension of core Swing buttons, and uneditable combobox is nothing else than a menu button, they all should have the same height – and they do. More on this subject later.

Note that this is still work on progress, and you’re more than welcome to leave comments on the new look.

Related posts:

1. Comboboxes in Substance 6.0 – feedback from Matt Nathan I believe there are two kinds of feedback – one of them is useful, and...
2. Spinners in Substance 6.0 One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma)...
3. Control alignment in Substance 6.0 Last week i have written about improving the visuals of text components, comboboxes and spinners...
4. Text components in Substance 6.0 One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma)...