EaSynth Look And Feel Customization (2)

Xavier Young

Aug. 21, 08 · Interview

Like (0)

Save

13.25K Views

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.

checkbox button customization

there are four states defined for checkbox button in easynth look and feel, the states and their appearance are shown below:

there is no any special open property used here to custom the checkbox style, easynth look and feel only use the "checkbox.icon" property, which is defined in the synth xml format document. if we search the style with "check box" id, we will find these:

<!-- the style for check box button. -->
<style id="check box">
	<property key="checkbox.margin" type="insets" value="2 2 2 2"/>
	<state value="enabled">
		<imageicon id="checkbox_normal" path="resource/1204453247375_checkbox_normal.png"/>
		<property key="checkbox.icon" type="idref" value="checkbox_normal"/>
	</state>
	<state value="mouse_over">
		<imageicon id="checkbox_mouseover" path="resource/1204453256531_checkbox_mouseover.png"/>
		<property key="checkbox.icon" type="idref" value="checkbox_mouseover"/>
	</state>
	<state value="selected">
		<imageicon id="checkbox_selected" path="resource/1204453267203_checkbox_selected.png"/>
		<property key="checkbox.icon" type="idref" value="checkbox_selected"/>
	</state>
	<state value="disabled">
		<imageicon id="checkbox_disabled" path="resource/1204122673828_checkbox_disabled.png"/>
		<property key="checkbox.icon" type="idref" value="checkbox_disabled"/>
	</state>
</style>
<bind style="check box" type="region" key="checkbox" />

the property element again uses "idref" type to link to an imageicon element, which specifies an image file for the checkbox icon. so the customization for checkbox will be very easy: just replace those image files, we will then have a new look of the checkbox.

radio button customization

there are five states defined for radio button in easynth look and feel, the states and their appearance are shown below:

nothing surprise here, easynth look and feel use the "radiobutton.icon" typical property to define the icon for each state. the xml code to define the radio button looks like:

<!-- the style for radio button. -->
<style id="radio button">
	<property key="radiobutton.margin" type="insets" value="2 2 2 2"/>
	<state value="enabled">
		<imageicon id="radio_button_normal" path="resource/1204454221531_radio_enabled.png"/>
		<property key="radiobutton.icon" type="idref" value="radio_button_normal"/>
	</state>
	<state value="mouse_over">
		<imageicon id="radio_button_mouseover" path="resource/1204454231234_radio_mouseover.png"/>
		<property key="radiobutton.icon" type="idref" value="radio_button_mouseover"/>
	</state>
	<state value="pressed">
		<imageicon id="radio_button_pressed" path="resource/1204454241875_radio_pressed.png"/>
		<property key="radiobutton.icon" type="idref" value="radio_button_pressed"/>
	</state>
	<state value="disabled">
		<imageicon id="radio_button_disabled" path="resource/1204121589843_radio_disabled.png"/>
		<property key="radiobutton.icon" type="idref" value="radio_button_disabled"/>
	</state>
	<state value="selected">
		<imageicon id="radio_button_selected" path="resource/1204454252156_radio_selected.png"/>
		<property key="radiobutton.icon" type="idref" value="radio_button_selected"/>
	</state>
</style>
<bind style="radio button" type="region" key="radiobutton" />

so again it will be an easy job to custom the look of radio button: just change those image files.

comparing with the checkbox button customization, we will find that the radio button has one more state: pressed. can checkbox button also have a pressed state? the answer is positive. easynth look and feel omits the pressed state for checkbox button; it is just a decision for designing. we can custom the pressed state for checkbox button by adding a new state node with "pressed" value under the checkbox style node.

toggle button customization

in easynth look and feel, the toggle button has almost the same look of regular button, except that it has one more customized state: selected. the figure below shows its appearance:

actually the way to custom the toggle button is almost the same with that for the regular button, except that we need to replace the painter method value from "buttonbackground" to "togglebuttonbackground" and from "buttonborder" to "togglebuttonborder". here is the xml to custom the toggle button:

<!-- the style for toggle button. -->
<style id="toggle button">
	<insets top="4" left="6" bottom="4" right="6"/>
	<!-- use the same border painter with regular button -->
	<painter idref="easynthpainter" method="togglebuttonborder"/>
	<!-- this property will specify the arc with of the round border -->
	<defaultsproperty key="easynth.button.arc.width" type="integer" value="9"/>
	<!-- this property will specify the arc height of the round border -->
	<defaultsproperty key="easynth.button.arc.height" type="integer" value="9"/>
	<defaultsproperty key="easynth.button.border.color.enabled" type="idref" value="button_border_color_enabled"/>
	<defaultsproperty key="easynth.button.border.color.mouseover" type="idref" value="button_border_color_mouseover"/>
	<defaultsproperty key="easynth.button.border.color.pressed" type="idref" value="button_border_color_pressed"/>
	<defaultsproperty key="easynth.button.border.color.disabled" type="idref" value="button_border_color_disabled"/>
	<defaultsproperty key="easynth.button.border.color.default.enabled" type="idref" value="button_border_color_default_enabled"/>
	<defaultsproperty key="easynth.button.border.color.default.mouseover" type="idref" value="button_border_color_default_mouseover"/>
	<defaultsproperty key="easynth.button.border.color.default.pressed" type="idref" value="button_border_color_default_pressed"/>
	<defaultsproperty key="easynth.button.border.color.default.disabled" type="idref" value="button_border_color_default_disabled"/>
	<state value="enabled">
		<imagepainter method="togglebuttonbackground" path="resource/1204727000093_button_enabled.png" sourceinsets="5 5 5 5" paintcenter="true" stretch="true" center="false"/>		</state>
	<state value="mouse_over">
		<imagepainter method="togglebuttonbackground" path="resource/1204727022828_button_mouseover.png" sourceinsets="5 5 5 5" paintcenter="true" stretch="true" center="false"/>
	</state>
	<state value="pressed">
		<imagepainter method="togglebuttonbackground" path="resource/1204727039640_button_pressed.png" sourceinsets="5 5 5 5" paintcenter="true" stretch="true" center="false"/>
	</state>
	<state value="disabled">
		<imagepainter method="togglebuttonbackground" path="resource/1204727048156_button_disabled.png" sourceinsets="5 5 5 5" paintcenter="true" stretch="true" center="false"/>
	</state>
	<state value="selected">
		<imagepainter method="togglebuttonbackground" path="resource/1204808843937_button_selected.png" sourceinsets="5 5 5 5" paintcenter="true" stretch="true" center="false"/>
	</state>
</style>
<bind style="toggle button" type="region" key="togglebutton" />

we can see that the open properties that supported by regular button are also used here, and the configuration of these properties are completely the same, so that the toggle button will have the same look with the regular button, besides that it will have one more stable state: selected.

making the toggle button looks like a regular button is only a decision of easynth look and feel, when we custom the look and feel, we can have our own decision. we can replace the images, specify the insets, change border colors, and we can even use another painter object to obtain a brand new look for the toggle button.