Xavier has posted 3 posts at DZone. View Full User Profile

EaSynth Look And Feel Customization (2)

08.21.2008
| 10192 views |
  • submit to reddit

This article will introduce the customization of arrow button, checkbox button, radio button and toggle button base on EaSynth look and feel.

Arrow Button Customization

The arrow buttons are used in four kinds of components: JComboBox, JSplitPane, JScrollBar and JSpinner (see the figure bellow), if we custom the style for arrow button, all arrow buttons on these components will change as well.

We can find the arrow button style block in the "easynth.xml" file by searching the style with "Arrow Button" id:

<!-- The style for arrow buttons. -->
<style id="Arrow Button">
<property key="ArrowButton.size" type="integer" value="9"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="north"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="west"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="south"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="east"/>
<state value="ENABLED">
<imageIcon id="Arrow_Up_Enabled" path="resource/1204972099671_arrow_up_normal.png"/>
<property key="EaSynth.arrow.up.enabled" type="idref" value="Arrow_Up_Enabled"/>
<imageIcon id="Arrow_Left_Enabled" path="resource/1204972109765_arrow_left_normal.png"/>
<property key="EaSynth.arrow.left.enabled" type="idref" value="Arrow_Left_Enabled"/>
<imageIcon id="Arrow_Down_Enabled" path="resource/1204972119562_arrow_down_normal.png"/>
<property key="EaSynth.arrow.down.enabled" type="idref" value="Arrow_Down_Enabled"/>
<imageIcon id="Arrow_Right_Enabled" path="resource/1204972131593_arrow_right_normal.png"/>
<property key="EaSynth.arrow.right.enabled" type="idref" value="Arrow_Right_Enabled"/>
</state>
<state value="MOUSE_OVER">
<imageIcon id="Arrow_Up_MouseOver" path="resource/1204972154296_arrow_up_over.png"/>
<property key="EaSynth.arrow.up.mouseover" type="idref" value="Arrow_Up_MouseOver"/>
<imageIcon id="Arrow_Left_MouseOver" path="resource/1204972172953_arrow_left_over.png"/>
<property key="EaSynth.arrow.left.mouseover" type="idref" value="Arrow_Left_MouseOver"/>
<imageIcon id="Arrow_Down_MouseOver" path="resource/1204972180796_arrow_down_over.png"/>
<property key="EaSynth.arrow.down.mouseover" type="idref" value="Arrow_Down_MouseOver"/>
<imageIcon id="Arrow_Right_MouseOver" path="resource/1204972188046_arrow_right_over.png"/>
<property key="EaSynth.arrow.right.mouseover" type="idref" value="Arrow_Right_MouseOver"/>
</state>
<state value="PRESSED">
<imageIcon id="Arrow_Up_Pressed" path="resource/1204972222593_arrow_up_press.png"/>
<property key="EaSynth.arrow.up.pressed" type="idref" value="Arrow_Up_Pressed"/>
<imageIcon id="Arrow_Left_Pressed" path="resource/1204972229812_arrow_left_press.png"/>
<property key="EaSynth.arrow.left.pressed" type="idref" value="Arrow_Left_Pressed"/>
<imageIcon id="Arrow_Down_Pressed" path="resource/1204972236828_arrow_down_press.png"/>
<property key="EaSynth.arrow.down.pressed" type="idref" value="Arrow_Down_Pressed"/>
<imageIcon id="Arrow_Right_Pressed" path="resource/1204972243953_arrow_right_press.png"/>
<property key="EaSynth.arrow.right.pressed" type="idref" value="Arrow_Right_Pressed"/>
</state>
<state value="DISABLED">
<imageIcon id="Arrow_Up_Disabled" path="resource/1204972279156_arrow_up_disable.png"/>
<property key="EaSynth.arrow.up.disabled" type="idref" value="Arrow_Up_Disabled"/>
<imageIcon id="Arrow_Left_Disabled" path="resource/1204972286015_arrow_left_disable.png"/>
<property key="EaSynth.arrow.left.disabled" type="idref" value="Arrow_Left_Disabled"/>
<imageIcon id="Arrow_Down_Disabled" path="resource/1204972293703_arrow_down_disable.png"/>
<property key="EaSynth.arrow.down.disabled" type="idref" value="Arrow_Down_Disabled"/>
<imageIcon id="Arrow_Right_Disabled" path="resource/1204972301171_arrow_right_disable.png"/>
<property key="EaSynth.arrow.right.disabled" type="idref" value="Arrow_Right_Disabled"/>
</state>
</style>
<bind style="Arrow Button" type="region" key="ArrowButton" />

The arrow button also have four states: ENABLED, MOUSE_OVER, PRESSED and DISABLED, just like the regular buttons. This style block firstly define the size of the arrow, this value should be consistent with the image to render the arrow:

<property key="ArrowButton.size" type="integer" value="9"/> 

The "ArrowButton.size" property is not an EaSynth open property, it is a standard property provided by Synth look and feel. Then assign the EaSynthPainter object to the four painter elements for the paintings for different directions.

<object id="EaSynthPainter" class="com.easynth.designer.laf.painter.EaSynthPainter"></object>
......
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="north"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="west"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="south"/>
<painter idref="EaSynthPainter" method="arrowButtonForeground" direction="east"/> 

Again we see a Java been persistance, it is an object of painter class that extended from "javax.swing.plaf.synth.SynthPainter". EaSynth look and feel use only one painter object for all the paintings, it is simpler but less flexible. Actually Synth look and feel allows using different painters for different paintings, just needing to assign different painter bean object to different painter element.

The painter elements set the "method" attribute to "arrowButtonForeground", means the calling of paintArrowButtonForeground() method defined in SynthPainter class will be delegated to the EaSynthPainter subclass. If we review the "EaSynthPainter.java" file, we will notice that the paintArrowButtonForeground() method in the EaSynthPainter class will load different icons to paint the arrow for different directions. It accepts the icons linked by the following properties:

EaSynth.arrow.up.enabled: the arrow icon for "up" direction, for ENABLED state;
EaSynth.arrow.left.enabled: the arrow icon for "left" direction, for ENABLED state;
EaSynth.arrow.down.enabled: the arrow icon for "down" direction, for ENABLED state;
EaSynth.arrow.right.enabled: the arrow icon for "right" direction, for ENABLED state;

EaSynth.arrow.up.mouseover: the arrow icon for "up" direction, for MOUSE_OVER state;
EaSynth.arrow.left.mouseover: the arrow icon for "left" direction, for MOUSE_OVER state;
EaSynth.arrow.down.mouseover: the arrow icon for "down" direction, for MOUSE_OVER state;
EaSynth.arrow.right.mouseover: the arrow icon for "right" direction, for MOUSE_OVER state;

EaSynth.arrow.up.pressed: the arrow icon for "up" direction, for PRESSED state;
EaSynth.arrow.left.pressed: the arrow icon for "left" direction, for PRESSED state;
EaSynth.arrow.down.pressed: the arrow icon for "down" direction, for PRESSED state;
EaSynth.arrow.right.pressed: the arrow icon for "right" direction, for PRESSED state;

EaSynth.arrow.up.disabled: the arrow icon for "up" direction, for DISABLED state;
EaSynth.arrow.left.disabled: the arrow icon for "left" direction, for DISABLED state;
EaSynth.arrow.down.disabled: the arrow icon for "down" direction, for DISABLED state;
EaSynth.arrow.right.disabled: the arrow icon for "right" direction, for DISABLED state;

So we can see the xml code to link an image to a property under each state in the arrow button style, the following piece of code is an example, it links a png image file to the "EaSynth.arrow.up.mouseover" property element, via the "Arrow_Up_MouseOver" id:

<imageIcon id="Arrow_Up_MouseOver" path="resource/1204972154296_arrow_up_over.png"/>
<property key="EaSynth.arrow.up.mouseover" type="idref" value="Arrow_Up_MouseOver"/> 

So, by changing the specified image files, we can custom the arrow image, for different state, for different directions.

Published at DZone with permission of its author, Xavier Young.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)