Easy Skinning of Java Apps

Seasoned Java programmers will be acquainted with the 'look and feel' offered by J2SE, such as metal, windows and motif. The look and feel determines how the various components and widgets of a GUI application will look like. For example, if using the Windows look and feel, components such as text fields, buttons and form will have the same style and colors as on Windows though you cannot customize it as of now. But with J2SE 1.5 coming up with a customized look and feel, it is a lot easier.

The Synth class (javax.swing.plaf.synth.SynthLook AndFeel) can be thought of as the style sheet technology for Java. Here style sheet refers to CSS (Cascading Style Sheets) used with Web pages where the styles are specified in plain text file using the CSS specific syntax. Unlike this, the style for a Java application, when using Synth, is specified in a XML file. With Synth, you can use images to skin various components, such as buttons and scrollbars. Let's see how to apply the Synth look and feel for a Java application.

You will need to install J2SE 1.5 given on the November 2004 PCQ Essential CD. The installation also includes Netbeans IDE, which can be used to quickly build GUI based Java application with
Synth.

First looks

Consider a graphical music store application with a JFrame containing a JPanel. The JPanel in turn contains a couple of text fields and buttons. Following is the quickest way to add a background image of your choice to the panel without disturbing the code much. Somewhere in the constructor of your application,
add:

try{

SynthLookAndFeel laf = new SynthLookAndFeel(); laf.load(MusicStore.class.getResourceAsStream("style.xml"),MusicStore.class);

UIManager.setLookAndFeel(laf);

}

catch(Exception e){

System.out.println(e);

}

Substitute MusicStore in this code with the name of the class for your application. The above code is almost self explanatory.
In the second line, we are trying to load up a file named style.xml. This file is the style sheet for our application. Here is how the file will look like:

All contents go within the tags. Within the tags we define an imagePainter which is used to specify the image file to be used for the background, pic.png in this case. panelBackground is the name of the method to paint the background of a JPanel. If you want to paint a button, the name of the method is buttonBackground. For various values for the method,
visit http://java.sun.com/j2se/1.5.0/docs/api/javax/swing/plaf/synth/SynthPainter.html. 

Next place the file style.xml and pic.png in the directory where the class file of your Java application lies. With the bind tag, we specify to bind the style-whose ID is 1-to all JPanels, specified by key="panel". Instead of panel, you can bind the style to other Swing components. For the various values, the key attribute can accept, go to
http://java.sun.com/j2se/1.5.0/docs/api/javax/swing/plaf/synth/Region.html. 

With type="region" we apply the style to all JPanels in the application. We can also bind the style to specific JPanels, as you will see later. To see it working, recompile you Java application. This is a one time compilation because we changed the look and feel to Synth. Subsequently you can skin your application using only the style.xml file without touching your application code. Launch the application and you should be able to see pic.png as the background.

Bold out the labels

Let's tackle a very simple but a frequent problem. You may have developed a graphical application which is aesthetically up to the mark. But when you are asked to bold out all the labels, you may start changing the font attributes for all the labels in the code. You may use an IDE to do the same. Yet it remains tedious. With Synth, you can achieve this by simply writing out the following XML file:

Note that with the font tag we specify the font name, style and the font size. Subsequently we bind the style to all the labels in the application.

Style particular states

We can also apply styles to components at a particular state, say, enabled or disabled. For example, the following file can be used to show only the disabled text fields in blue.

Note the use of the tag and its value attribute - which is set to DISABLED. With color tag we specify to change the background color to blue. The value attribute of the tag can take up a couple of other values such as: ENABLED, DISABLED and FOCUSSED. Refer to
http://java.sun.com/j2se/1.5.0/docs/api/javax/swing/plaf/synth/SynthConstants.html
for a list of these values.

Style specific components

In the above examples, we use type="region" to apply a given style to all components of a particular type. Now if you want to apply a style on a particular component, say, you want to specify a red foreground for the particular JLabel. For this, you will have to name the components using the setName( ) method. For example,

JLabel label = new JLabel("First Name");

label.setName("firstname");

Next in the XML file, all you need to specify is:

When you run the application, you should be able to see the First Name label in red.

Shekhar Govindarajan

IT4Enterprise