Skip to main content

Synth Subtlety, Style that ComboBox @#!

Posted by gfx on September 28, 2005 at 4:08 PM PDT

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:

Related Topics >>

Comments

<p><span class="hps" title="Clique para mostrar ...

An important detail: in the XML file, it is necessary to define the ComboBox.arrowButton before defining of Arrowbutton, otherwise will be displayed the Arrowbutton on the ComboBox.arrowButton