Romain Guy's Blog

Synth Subtlety, Style that ComboBox @#!

Synth can be tricky (JScrollbar) sometimes (JTree). So tricky that I actually fell into a trap today. When styling a combo box, I ran into a rather curious problem. A combo box is made of a popup menu, a list, a label, an arrow button and, in case of editable combo boxes, a text field. Since these components are styled independantly, it can be difficult to give them a specific style when in the combo box.

Usually, components are styled by regions. That means you bind a style to generic region for every component instance, like a ScrollBar which would be styled for scroll panes, text areas, etc. So, what happens when you style your scrollbars and use a combo box? Behold the disaster:

Hopefully, Synth also allows you to style components by name instead of by region:

<style id="arrowStyle">
  <imagePainter method="arrowButtonForeground" path="images/upArrow.png"
   sourceInsets="0 0 0 0" stretch="false" direction="north" />
  <imagePainter method="arrowButtonForeground" path="images/downArrow.png"
   sourceInsets="0 0 0 0" stretch="false" direction="south" />
  <imagePainter method="arrowButtonForeground" path="images/leftArrow.png"
   sourceInsets="0 0 0 0" stretch="false" direction="west" />
  <imagePainter method="arrowButtonForeground" path="images/rightArrow.png"
   sourceInsets="0 0 0 0" stretch="false" direction="east" />
</style>
<bind style="arrowStyle" type="region" key="Arrowbutton" />

<style id="comboArrowStyle">
  <imagePainter method="arrowButtonForeground" path="images/comboboxArrow.png"
   sourceInsets="0 0 0 0" stretch="false" />
</style>
<bind style="comboArrowStyle" type="name" key="ComboBox.arrowButton" />

Oh how delightful to know we solved yet another issue! But wait... no we didn't @!# The combo box still uses scrollbars' arrow button. Try to remove the style called "arrowStyle" and the combo box will be fine but not the scrollbars. Try to change the order of the styles and nothing will change. If you take a closer look at comboArrowStyle, you'll see it doesn't define a direction for the painter. Why should we after all? A combo box as only one arrow button, there's no need to identify it by its direction. Unfortunately, Synth will internally merge both styles and, at rendering time, it will pick the most specific painter, the one with a direction. That's right, it will pick the painter from the region.

Hence, the final solution is very simple:

<style id="comboArrowStyle">
  <imagePainter method="arrowButtonForeground" path="images/comboboxArrow.png"
   sourceInsets="0 0 0 0" stretch="false" direction="south" />
</style>
<bind style="comboArrowStyle" type="name" key="ComboBox.arrowButton" />

We finally have the appropriate result:

Comments

• This makes sense but it doesn't make sense!

  I mean I understand that why you have to do that since I've read this but imagine for a moment that I had not.I think that there is no way that I would have find this out myself as I wouldn't know what "Synth will internally merge both styles and, at rendering time, it will pick the most specific painter".

  Should a developper really know this internal detail or should you find a way to internally add direction="south"' for combobox's arrow so the developer doesn't need to be aware of this?

  Posted by: urddd on September 29, 2005 at 08:19 PM

• I agree and I will release a comprehensive doc and a full example to make things easier for developers.

  Posted by: gfx on September 29, 2005 at 08:58 PM

• May be the way to go is to put good defaults.

  In this case the default might be "direction="south" if no direction has been sepcified.

  
  

  Posted by: urddd on September 30, 2005 at 12:58 AM

• And now for something completely different: Are you aware that the track of the horizontal scrollbar is upside-down? The thumb is painted correctly.

  Posted by: jansan on September 30, 2005 at 01:14 AM

• Yup I know, I just rotated the vertical scrollbar picture in the wrong way ^^ That said, it doesn't really matter because I use this code only for testing purposes. It's Apple property after all :)

  Posted by: gfx on September 30, 2005 at 01:18 AM

• I expected that you already knew. BTW, I would love to see screenshots of the synth theme that you are working on. Expectations are really high after your last posting on jroller ;-)

  Posted by: jansan on September 30, 2005 at 04:08 AM

• Can the upper left and upper right corners of the titlebar be smoothed out?

  Posted by: awf999 on September 30, 2005 at 09:36 AM

• I doubt so. These titlebars come from my Windows XP theme. They look better "live" though.

  Posted by: gfx on September 30, 2005 at 10:19 AM

• May I ask which theme this is and where I can find it? :)

  Posted by: jroar on October 02, 2005 at 01:46 AM

• It's called Royale and you'll find it on Microsoft web site. You must benefit from the Genuine Advantage though (valid Windows XP license key only).

  Posted by: gfx on October 02, 2005 at 02:18 AM

• I follow you tips about using Synth. They are very helpfull.
  May i ask you for help about JTree and Synth?

  Posted by: johnsy on October 04, 2005 at 02:21 AM

• Your tips are really helpful to me. I want to ask you that I developed a program that use a Synth theme. It works perfectly when executed for the developing environment (Eclipse), but does not load Synth Theme when I run it by clicking on executable jar file. I had copied all resources required by program into the directory containg jar file. May you please tell me any solution.

  Posted by: adityagodara on October 11, 2005 at 01:59 PM

• Thank you for the helpful articles on Synth - its like water to a dry sponge.

  Can you please confirm that this article and specifically the solution direction="south" is a Mustang feature (aka Synth bug fix) and will not work in Java 5. Is there a workaround?

  With java 5, I followed your above instructions. When I bind a style to ArrowButton and bind a style to ComboBox.arrowButton then the style applied to ArrowButton trumps the binding to ComboBox.arrowButton even with the direction="south" attribute.

  I'm also having trouble with the combo box label foreground/background as described by this poor fellow: http://forums.java.net/jive/thread.jspa?threadID=9069&messageID=61541

  Posted by: jonathanjohnson on May 23, 2006 at 11:38 AM

• I can't remember for sure but I don't think this is a Mustang fix. Actually, I'm pretty sure it's available in Tiger.

  Posted by: gfx on May 23, 2006 at 11:43 AM

This work is licensed under a Creative Commons License.