Advanced Synth

By Michael Abernethy
2005-04-16


Handling Different States
As you've seen from the examples so far, the <state> tag is a major focal point of defining a component. In Listings 3 and 4, color and font tags are inside the <state> tag. Now I'll explain what the <state> tag does.

The default state, where no attribute is specified in the <state> tag, is sufficient for defining the colors and fonts in a text field and in labels, because their states won't change. But in a component whose state will change -- a button, for example -- you can define a completely different look for every state. Each state can have its own colors, fonts, and images. Compare the login screen's Cancel button in its default state (Figure 4) to its mouse-over state (Figure 5).

Figure 4. Cancel button in DEFAULT state
4.

Figure 5. Cancel button in MOUSE_OVER state
5.

The <state> tag requires only a value attribute, which defines the actual component state. If you don't specify a value, as in Listings 3 and 4, the default applies to every state. If you specify the value attribute, your choices are ENABLED, MOUSE_OVER, PRESSED, DISABLED, FOCUSED, SELECTED, and DEFAULT. These choices cover all of the possible states of any component in Swing. You can also combine states by adding an and between them. For example, if you want to change fonts on a button when the mouse is over it and the button is pressed, you use a state value of MOUSE_OVER and PRESSED.

Listing 5 shows the XML for handling the demo application's states. Notice how each state defines a different image and text color.

Listing 5. Handling states

<style id="button">

   <state>

      <imagePainter method="buttonBackground" path="images/button.png"

         sourceInsets="9 10 9 12" paintCenter="true" stretch="true"/>

      <insets top="9" left="10" bottom="9" right="12"/>

      <font name="Aharoni" size="16"/>

      <color type="TEXT_FOREGROUND" value="#FFFFFF"/>

   </state>

   <state value="MOUSE_OVER">

      <imagePainter method="buttonBackground" path="images/button_on.png"

         sourceInsets="9 10 9 12" paintCenter="true" stretch="true"/>

      <insets top="9" left="10" bottom="9" right="12"/>

      <color type="TEXT_FOREGROUND" value="#FFFFFF"/>

   </state>

   <state value="PRESSED">

      <imagePainter method="buttonBackground" path="images/button_press.png"

         sourceInsets="10 12 8 9" paintCenter="true" stretch="true"/>

      <insets top="10" left="12" bottom="8" right="9"/>

      <color type="TEXT_FOREGROUND" value="#FFFFFF"/>

   </state>

   <property key="Button.margin" type="insets" value="0 0 0 0"/>

</style>

<bind style="button" type="region" key="Button"/>

An important aspect of dealing with the <state> tag is knowing which components go with which states. Obviously, in this example, buttons can have a default state, a mouse-over state, and a pressed state. You could also define a focused and a disabled state for the example. But with a panel, for example, selected doesn't even apply, and changing a panel's state on a mouse-over would be just plain annoying.

Listing 6. Defining component-specific properties

<style id="checkbox">

   <imageIcon id="check_off" path="images/checkbox_off.png"/>

   <imageIcon id="check_on" path="images/checkbox_on.png"/>

   <property key="CheckBox.icon" value="check_off"/>

   <state value="SELECTED">

      <property key="CheckBox.icon" value="check_on"/>

   </state>

</style>

<bind style="checkbox" type="region" key="Checkbox"/>

Tutorial Pages:
» Custom UIs are a Breeze with the Newest Swing Look and Feel
» Beauty's Only Skin Deep
» Synth Basics
» Demo Application
» Changing a Color and Font
» Using Images
» Handling Different States
» Working with Custom Painters
» More-Advanced Settings
» Examining Synth Performance, Reliability, and Efficiency
» Conclusion
» Resources


First published by IBM DeveloperWorks

Related Tutorials: » All about JAXP, Part 1 » Make Database Queries Without the Database » Load List Values for Improved Efficiency » 2 Ways To Implement Session Tracking » A Simple Way to Read an XML File in Java » Develop Aspect-Oriented Java Applications with Eclipse and AJDT