Kirill Grouchnikov's Blog

New skins for Swing applications

I wouldn't be the first to admit it, but my programming skills are much better than my designing / color-matching skills. The ever merciless community won't let me forget this (and i thank you for it). Apparently, people just don't like happy jelly buttons (sigh). And as much as i would like to concentrate on even happier jelly buttons, this is not what my users want (based on the comments on this blog and on the sample applications attached to the bug reports).

The leading third party look-and-feels have one thing in common - they all provide toned-down appearance that targets business applications. Even the names branded by the marketing are very suggestive. Synthetica calls itself "The Enterprise look and feel", Alloy is a "truly professional" and JGoodies Looks is "high-fidelity, precise and elegant". As one can't argue with success (i tried in vain for over a year), and since imitation is the sincerest form of flattery, i had to curb my taste for acid saturated colors and join the party.

This continues in the next version of Substance look and feel (code-named Japan) with four new skins that target business applications.

The first is Business Blue Steel which follows the design of Blue Ice Synthetica theme:

The second is Business Black Steel which follows the design of Black Moon Synthetica theme:

The last two are based on the latest products from Microsoft and Apple camp (is it a coincidence that both design giants have chosen a strikingly similar skinning for their major product releases?) Microsoft's Expression Blend (free Beta download) and Apple's Aperture (free trial download) both sport the same dark-grayish UI that doesn't draw the attention away from the main work canvas (see sample Blend screenshot and sample Aperture screenshot). This isn't actually the first time that i tried to create a dark skin, but i really like these two.

The first is Raven Graphite:

and the second is Raven Graphite Glass (note that the button gradients and the header gradient are "glassier" and the foreground color is whiter):

One last thing is the introduction of a new client property called SubstanceLookAndFeel.USE_THEMED_DEFAULT_ICONS which renders all button icons of inactive (non-selected, non-pressed, non-rollover, non-armed) buttons in theme colors. This setting plays especially good with the last two themes ( i actually borrowed the idea from Expression Blend), since you can have a lot of icon buttons on your toolbars and they still wouldn't distract the user from what he's doing.

For the comparison, here is a screenshot without this setting:

Now, the same application with this setting turned on:

The same application when the mouse is over the "Paste" toolbar button (third from the left):

If you want to play with the latest development drop, head over to the download section and try out the new skins. You're more than welcome to leave comments.

Comments

• goddamn, those look good :)

  Posted by: evanx on February 06, 2007 at 01:31 AM

• It takes a big man to admit when he's wrong, but it takes a bigger man to admit that he's been wrong for an entire year AND go and fix the problem :)

  These new modifications look incredible. I'm really impressed kirill.

  Posted by: ilazarte on February 06, 2007 at 11:14 AM

• Thanks

  Posted by: kirillcool on February 06, 2007 at 04:40 PM

• I wouldnt use the graphite themes, but those two business steel themes are great! I'll give them a try

  Posted by: benloud on February 06, 2007 at 06:11 PM

• Ben - it kind of grows on you, especially in a control-heavy application (such as Expression Blend).

  Posted by: kirillcool on February 06, 2007 at 07:46 PM

• These look great Kirill, I'm one of those people that hasn't been able to use substance because it has been too 'bright' for my business users, I look forward to trying out the new themes.

  Rob

  Posted by: rasto1968 on February 06, 2007 at 11:30 PM

• Excellent work Kirill, this is a very good step in the right direction.

  As a side note, i think that something that could benefit the default look is nicer jTreeNode icons, usually an open and a closed folder is what you would expect but in Substance you've got a closed folder with an arrow if the node is collapsed and pretty much the same folder with no arrow if the node is expanded. Maybe it's just me but it doesn't feel right for some reason.

  Anyway, keep up your excellent work!

  Posted by: phantom22 on February 07, 2007 at 07:40 AM

• Nice work.

  
  Does the build actually require jdk1.5.0_10? And only on Windows? It's hard coded to C:/Program Files/Java/jdk1.5.0_10.

  Posted by: jsando on February 07, 2007 at 10:48 AM

• jsando,
  Since i'm the only developer, i don't want to spend the time on splitting the build script and configuring the properties in a separate file. If you have a different JDK location, you'll have to change that line to point to it (just as you would with the .properties file).

  Posted by: kirillcool on February 07, 2007 at 10:52 AM

• phantom22,
  Thanks for the suggestion. I once spent a few hours scouring the web for free icons for the tree node (open, close, leaf) and these were the best i've found. If you have something better (and free), you're welcome to post the URL.

  Posted by: kirillcool on February 07, 2007 at 10:54 AM

• Kirill,

  Looks great. We will be trying this out with some of our apps for the first time! Would be a cool blog entry showing the progression of substance from 0.1 -> 3.3.

  Joe

  Posted by: profiler on February 07, 2007 at 12:23 PM

• In case I was not the only one to search for the link on skins here it is: https://substance.dev.java.net/docs/skins.html.

  Although Raven is probably a little dark for my users, it looks damn cool!

  The only general thing that I visibily notice as 'not being quite right' is pressing buttons. And its not just about shading. If you look at any MS app, when you press a button, the 3 dimesional drawing goes flat (or indented if it was already flat). This is critical, especially for business apps which has functionality firing that may take 5-50 ms to execute, and if the button does not look like it is pressed down, then it affects the perception of quality. You will notice JGoodies does do this effect. Kirill, you do so much I hope someone with more talents than I could take on that task. Keep up the amazing work.

  Posted by: aronsmith on February 07, 2007 at 01:17 PM

• Way, way, way, way, waaaayy better skins!

  Posted by: rbair on February 07, 2007 at 02:07 PM

• Yes, much better.
  I think creating good designed Look and Feels is a hard job if you don't have a good and keen sense for color combinations and graphics art. Graphical tools can help you building a prototype and testing whats really looking good. But at the bottom line you have to be a programmer and a pixel artist. If only one of these ingredients lacks the result will be flavorless.
  I like the first two Synthetica related themes. But I'm not objective ;-)

  Posted by: wzberger on February 07, 2007 at 02:42 PM

• Kirill,
  there are some nice free icon sets here:
  http://www.maxpower.ca/free-icons/2006/03/05/

  .On the other hand, JGoodies node icons seem fine to me, i don't know if they can be used for free.

  Posted by: phantom22 on February 07, 2007 at 03:01 PM

• I'll chime in with another "definitely better" - substance has come a long way since the early days when it looked like the visual equivalent of 'electronica' music :-P

  
  I could definitely see using the business or raven graphite skins in a professional java app.

  
  The fact that fonts now appear to be anti-aliased (at least under JDK1.6.0-u1-b03) is an added bonus - they weren't on the last release I tried.

  Posted by: wmeissner on February 07, 2007 at 03:33 PM

• Thanks for the comments.
  wmeissner - the 3.2 and 3.3 versions now respect the desktop AA settings under Mustang. This should work not only on 3.3dev but also under 3.2final (released this Monday).
  phantom22 - thanks for the pointers. Personally i like the current icons better, since they have more depth than JGoodies' icons. In any real application you'd use custom icons in any case, so these are only default.
  aronsmith - i'll look into the appearance of pressed buttons. This is indeed a valid concern.

  Posted by: kirillcool on February 07, 2007 at 04:11 PM

• Hi Krill,
  Excellent effort.
  To be frank, though i liked Substance look and feel very much, i found it extremely difficult to make it into our swing apps.
  The reason said by many people is that, it don't suit for "business" applications.
  Now, all these skins especially the blue ice one is extremely good.
  Hope you release the production version soon.
  

  Posted by: sskjames on February 07, 2007 at 06:21 PM

• sskjames - the production version is scheduled to be released in mid-April - the last release was just this week.

  Posted by: kirillcool on February 07, 2007 at 07:59 PM

• Thanks for this, Kirill. These new skins support the Netbeans' custom controls (i.e. Tab Control) too?

  Posted by: gustavosantucho on February 08, 2007 at 04:56 AM

• Great! Will the NetBeans module be updated with these new skins?

  Posted by: jacek on February 08, 2007 at 05:41 AM

• Ahhhhh, a very big step forward indeed!

  To give you some more, ah, inspiration: I use the JTattoo HiFi for a blackish style ina production application (I even paid for it :-). It's very smooth and do note the finess of the LaF (e.g. buttons have a nice small border).

  Posted by: tbee on February 08, 2007 at 06:13 AM

• I like the Business Black Steel. For the first time, I may consider switching to your theme in my business app. I do have a couple of comments on the Business * themes based on the screen shots: the text on the default ("OK") button would be hard for some of my users to read (the black on darker bluish color doesn't provide enough contrast). I would recommend using a lighter background color on those buttons. However, this same color scheme shows up in a few other places with the same (difficult on the eyes) effect: the check on the "enabled selected" checkbox, the "enabled selected" radio button, and the folder icons ("root", "son1", "son2", etc). The scrollbar thumb looks like it uses a similar scheme, but doesn't suffer as much, especially since there is no text or other detail to make out on it (though it tends to look a little "flat" on my LCD screen due to the low contrast).

  Posted by: adepue on February 08, 2007 at 08:25 AM

• gustavo, jacek,
  The new NB module will be published next week on the substance-netbeans project page.

  Posted by: kirillcool on February 08, 2007 at 10:17 AM

• aronsmith - the latest 3.3dev drop provides a flat darker appearance for pressed buttons. Thanks for pointing this out.

  Posted by: kirillcool on February 09, 2007 at 10:07 AM

• Hi Kirill, These look really good, but I like the old ones a lot too. by the way, the substance-lite-feel.jar throws this exception:
  Exception in thread "AWT-EventQueue-0" java.lang.NoClassDefFoundError: contrib/com/jgoodies/looks/common/ShadowPopupFactory
  at org.jvnet.substance.SubstanceLookAndFeel.initialize(SubstanceLookAndFeel.java:3336)
  at org.jvnet.substance.skin.SubstanceRavenGraphiteLookAndFeel.initialize(SubstanceRavenGraphiteLookAndFeel.java:74)
  

  Posted by: commanderkeith on February 10, 2007 at 10:43 PM

• Keith - thanks for the catch. This has been fixed in the latest dev drop.

  Posted by: kirillcool on February 11, 2007 at 09:45 AM

• Great work. Good UI's is all about being consistent and recognizable. Blend is Discreet is Newtek is Amiga :)

  I have some technical questions. Why the tiny text on high DPI settings and can I turn off the JMenu search thing ? The LAF selection menu totally blows me away btw. RavenGraphiteGlass+Creme is awesome.

  
  substance_vs_plastic.png
  substance_raven.png
  substance_biz.png
  substance_ravengraphiteglass_creme.png
  substance_ravengraphiteglas.png

  Posted by: janerik on February 11, 2007 at 02:21 PM

• janerik,
  For removing the menu search panel, use the hideMenuSearchPanels API (note that on menu bars with less than 40 items this functionality is not installed at all). About the DPI settings - i'm hoping to reuse the functionality in Looks in one of the next versions.

  Posted by: kirillcool on February 11, 2007 at 04:48 PM

• Works a charm, many thanks.One thing though, the buttons in my movable JToolbar now have a massive space in the spacer between the different button groups so the buttons are evenly spread over the horizontal area available to them . Is this a new style or a bug? cheers, Keith

  Posted by: commanderkeith on February 11, 2007 at 11:16 PM

• Keith, about your comment on the wide buttons in toolbars - i've struggled quite a lot in the new 3.3dev to make the toolbar separators work. The code in the Metal / Basic doesn't actually paint them, and it took me quite a while to make this work at all, so i'd appreciate a small test app that shows this behaviour so i can analyze what goes on inside the SubstanceToolbarSeparatorUI. You can send it directly to kirillcool [.at.] yahoo [..dot..] com. Thanks.

  Posted by: kirillcool on February 12, 2007 at 09:15 AM

• Krill,

  Are the business themes SwingX friendly?

  Example: JXTaskPaneContainer & JXTaskPane

  
  -Carl
  

  Posted by: carldea on April 18, 2007 at 08:08 AM

• Carl, take the latest release from SwingX plugin and put it in the classpath (no need to change the application code).
  Thanks, Kirill

  Posted by: kirillcool on April 18, 2007 at 08:52 AM

This work is licensed under a Creative Commons License.