Kirill Grouchnikov's Blog

May 2007 Archives

Listening to the users part III - theme transitions

It all started with a simple request - have Substance not paint rollover state on buttons. I could have dismissed it by simply saying that this goes against the library design, and having one request in 2+ years that the library exists hardly justifies additional setting (making the implementation more complex, the documentation more verbose and in general going further down the wrong side of the user happiness curve). However, going into further dialog about why exactly is this feature needed, uncovered much more serious problem that needed to be addressed.

For most applications, people prefer subdued colors, and there's only so many variations of saturation and brightness that you can play with to distinguish between possible states of controls. In general, there are four different flags on a button model for "active" state - rollover, select, press and arm (the last one is relevant for the menus). And now, you find yourself with much more states that you can reliably handle with only one color scheme (rollover selected, rollover unselected, pressed selected, pressed unselected, selected, and you can even go further into pressed selected rollover and pressed selected non rollover). And this is really what has been bothering my user - being unable to distinguish between a selected and rolled over toggle button, especially on such a low-saturated theme as orange of Office Silver.

The Office itself solves this problem by using more than one color scheme for active (rollover / selected / pressed) states. A selected toggle button is painted orange, a rolled over toggle button is painted yellow and a selected and rolled over toggle button is painted dark orange. Starting from this, i spent the last five weeks completely rewriting the entire background painting, including support for custom themes for every component state and proper animations between the states. Here is an example of state transitions under the new implementation of Office Silver skin. The right column shows the model state at each moment, and you can follow the color transitions from selected (light orange) to selected rollover (dark orange) to pressed selected (reddish orange) and back to rollover unselected (orangish yellow). Note that on the checkboxes and radio buttons, the transitions also involve animating the color of the checkmark:

But why stop at animating the background color only? What if you want to have black text on light background in a regular state, but light text on dark background in an active state? You should animate the foreground color as well to provide the smooth and pleasing visual transition - and this is what is done in the brand new Nebula skin which uses the colors of the Nimbus LAF (except the brown colors of the progress bars). Watch what happens when the buttons are pressed:

Note that the transitions apply not only to the "traditional" button controls such as push buttons, toggle buttons, check boxes and radio buttons, but to much wider range of controls - tabs, sliders, scroll bars, menus, menu elements etc. In addition, the same settings apply for rollover and selection effects on lists, tables and trees. Looking back, it has been a great feature request from the user. Thanks, Greg.

BugParade, Iconistan and the proverbial lipstick on a pig

It's not a big secret that a lot of people hate BugParade. It was great 10 years ago, but it's still stuck there, with complete lack of transparency, arcane voting and comment system and quite a few other problems. There are quite a few alternatives out there, and hopefully now that the open-sourcing effort is mostly behind Sun, perhaps some of the manpower will be put into retiring BugParade and replacing it by something else.

However, somebody in charge has decided to put some lipstick on the pig. Now, every bug has an Iconistan strip in the top-right corner that allows submitting a story on it to Technorati, Del.icio.us, Digg and Slashdot. Here is an example of one such bug (all of them have the strip, even the closed ones). Does this make the system better? I don't think so. But at least now they can tell that it's modern :)

JavaOne - it's all about the people

I went to JavaOne 2005, and my impressions back then were not very favorable. Much has changed since then (well, we still had a few cheap applauses at the opening keynote), and this year it has been a much more pleasurable experience. John Gage is a very engaging (pun intended) speaker (*), and he specifically asked each one of the attendees to have a list of 20 people you haven't known before by the end of the conference. John, i tried my hardest, and here is the list of 21 (yes, that's one more than you have asked) names (i have to admit that i cheated a bit since i've met few of the people at Desktop Matters a few months ago).

• 1 - Alex Potochkin, my co-presenter. Quite a few lengthy ICQ sessions, long e-mail threads and API discussions finally leading to the Rainbow project.
• 2, 3 - Richard Bair and David Qiao that have graciously agreed to participate in our late night BoF on component development. Even though it had been at 10PM (against the Grinder Girl party and a few other interesting BoFs), we had about 50 people and a very interesting discussion.
• 4, 5 - Hans Muller and Amy Fowler, two of my Swing heroes who were the members of the original Swing team. Amy was gracious enough to hear me rant about BasicTabbedPaneUI (which went on even after she said that she wrote some parts of it), and now i hate it a little bit less :)
• 6-8 - the great team behind java.net, including Chris Adamson, Marla Parker and Sarah Kim (a blog is missing?) Thanks for great chats, having me present a mini-talk at the community corner and the very, very, very comfortable sofas (although i prefer not to think about all the places they have been before).
• 9-12 - the rest of the Swing developers that i had a chance to sit with, Chet Haase, Romain Guy, Chris Campbell and Jasper Potts.
• 13-15 - fellow look and feel developers, Luan O'Carroll, Fred Lavigne and Mike Swingler from Apple (next dinner is on us). Some interesting discussions have started, and i hope that we'll continue them.
• 16-18 - fellow bloggers Augusto Sellhorn, Andres Almiray and Michael Nascimento Santos. Nice to finally put a face (and a voice) to a blog. Thanks for bumping into me and letting me ramble incoherently.
• 19 - Kohsuke Kawaguchi. If i had to pick one person to be professionally jealous of, it would be him. An amazing number of solid projects on java.net, ranging from continous integration to an orb that glows red on build failure (and much more).
• 20 - Cay Horstmann for a great chat on JavaFX
• 21 - Geertjan Wielenga and letting go of the grunge :)

So, here John, this is the list that you have asked for. And if i have to pick my favorite speaker this year, it would be Ben Galbraith who has delivered two excellent technical sessions on Swing development. If you missed those, just go grab the PDF slides from the content site.

(*) As mentioned way more eloquently than i ever could hope at BileBlog, You find yourself wanting to have children just so you could sell them to him; surely he’d know what to do with them better than you would.

Bringing life to Swing desktop applications - all you need to know

You might have seen the teasers (first and second), and now it's the time for all the links.

• The slides are right here (PDF format, so you can right-click on it and save instead of viewing directly in the browser).
• The full sources for the main demo are in the CVS repository of Rainbow project (along with the WebStart link).
• For more information about bytecode injection read this page.
• The source code for demoes is available here (ghost effects) and here (transition effects).

Many thanks to Alex for having me as a co-presenter. Thanks to all who came to see our presentation, and for those who asked questions.

And one last thing. One of the comments on the previous blog entry requested animating the search mask (on dynamic search result updating). The implementation of the matching JXLayer painter can be found here. Here is how it looks like in action - note how the search mask is animated according to the current search string (in the top-right portion of the frame) and to the current icon scale (last few seconds of the video clip):

This work is licensed under a Creative Commons License.