Skip to main content

Taming Tiger: Ocean and Synth meet Metal

Two new look and feels for JDK 5.0

John Zukowski (jaz@zukowski.net), President, JZ Ventures, Inc.
Author photo
John Zukowski conducts strategic Java consulting with JZ Ventures, Inc. and is working with SavaJe Technologies to develop a next-generation mobile phone platform. His latest books are Mastering Java 2, J2SE 1.4 (Sybex, April 2002) and Learn Java with JBuilder 6 (Apress, March 2002). Reach him at jaz@zukowski.net.

Summary:  Now that Tiger is an official release, it's time to explore even more exciting differences between the 1.4 version of the Java 2 Standard Edition platform and 5.0 of the Java 2 Development Kit. In this installment of Taming Tiger, UI expert John Zukowski explores the newly available Ocean and Synth look and feels. Now, even non-programmers can develop custom look and feels without writing code or having the benefit of a good eye!

View more content in this series

Date:  19 Oct 2004
Level:  Introductory
Activity:  3141 views

It's official: As of September 30, 2004, version 5.0 of the Java 2 Development Kit (yep, it's back to the good old JDK) is ready for prime time. As part of the new platform, you get two new look-and-feel objects that let you change what your program uses and how it looks. Ocean is the new default Java look and feel, replacing the old Metal version. Synth is new and provides for the description of the look and feel through an external XML file.

Diving into Ocean

Instead of staying with the old 1.4 default of the Metal look and feel, you now have a new look called Ocean for the 5.0 Java Runtime Environment. Ocean is not a totally new look, though. Instead of redesigning a new look from scratch, Ocean serves as a new theme for the Metal look and feel. What this means is that if you've customized the Metal look and feel, your programs will look the same under 5.0. If you use the new Ocean theme, they won't.

For those unfamiliar with themes, the abstract MetalTheme class offers a way to abstract away the colors and fonts used by the look and feel. By changing the theme, you can, in effect, change the look and feel. And, that is what Ocean does. As such, Ocean is not really a "true" look and feel. Instead, the OceanTheme class offers a softer view to the Swing components. Using the SwingSet2 demo program as a guide, compare Figure 1, the old Steel theme of the Metal look and feel, to Figure 2, the Ocean theme of the Metal look and feel:


Figure 1. Steel theme of Metal
 Steel Theme of Metal

Figure 2. Ocean theme of Metal
 Ocean Theme of Metal

Notice the gradient backing of the button components in Figure 2. This technique shows one of the ways the color set of the 1.4 release has been toned down. If you want to go back to the old way, just set the Metal theme back to steel and you're all set. Use the code below to force the system property swing.metalTheme to start a program with the steel theme of the Metal look and feel:

java -Dswing.metalTheme=steel  packageName.ClassName

Nothing new, but the SwingSet2 demo shows off a handful of other themes, including Aqua and Charcoal. As Listing 1 shows with the source for the Aqua theme, all these do is remap some colors for you.


Listing 1. Aqua theme source
/*
 * @(#)AquaTheme.java	1.9 04/07/26
 * 
 * Copyright (c) 2004 Sun Microsystems, Inc. All Rights Reserved.
 * 
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 * 
 * -Redistribution of source code must retain the above copyright notice, this
 *  list of conditions, and the following disclaimer.
 * 
 * -Redistribution in binary form must reproduce the above copyright notice, 
 *  this list of conditions, and the following disclaimer in the documentation
 *  and/or other materials provided with the distribution.
 * 
 * Neither the name of Sun Microsystems, Inc. or the names of contributors may 
 * be used to endorse or promote products derived from this software without 
 * specific prior written permission.
 * 
 * This software is provided "AS IS," without a warranty of any kind. ALL 
 * EXPRESS OR IMPLIED CONDITIONS, REPRESENTATIONS, AND WARRANTIES, INCLUDING
 * ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE,
 * OR NON-INFRINGEMENT, ARE HEREBY EXCLUDED. SUN MICROSYSTEMS, INC. ("SUN")
 * AND ITS LICENSORS SHALL NOT BE LIABLE FOR ANY DAMAGES SUFFERED BY LICENSEE
 * AS A RESULT OF USING, MODIFYING, OR DISTRIBUTING THIS SOFTWARE OR ITS
 * DERIVATIVES. IN NO EVENT WILL SUN OR ITS LICENSORS BE LIABLE FOR ANY LOST 
 * REVENUE, PROFIT, OR DATA, OR FOR DIRECT, INDIRECT, SPECIAL, CONSEQUENTIAL, 
 * INCIDENTAL, OR PUNITIVE DAMAGES, HOWEVER CAUSED AND REGARDLESS OF THE THEORY 
 * OF LIABILITY, ARISING OUT OF THE USE OF OR INABILITY TO USE THIS SOFTWARE, 
 * EVEN IF SUN HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
 * 
 * You acknowledge that this software is not designed, licensed, or intended
 * for use in the design, construction, operation, or maintenance of any
 * nuclear facility.
 */

/*
 * @(#)AquaTheme.java	1.9 04/07/26
 */


import javax.swing.plaf.*;
import javax.swing.plaf.metal.*;
import javax.swing.*;
import javax.swing.border.*;
import java.awt.*;

/**
 * This class describes a theme using "blue-green" colors.
 *
 * 1.9 07/26/04
 * @author Steve Wilson
 */
public class AquaTheme extends DefaultMetalTheme {

    public String getName() { return "Aqua"; }

    private final ColorUIResource primary1 = new ColorUIResource(102, 153, 153);
    private final ColorUIResource primary2 = new ColorUIResource(128, 192, 192);
    private final ColorUIResource primary3 = new ColorUIResource(159, 235, 235);

    protected ColorUIResource getPrimary1() { return primary1; }
    protected ColorUIResource getPrimary2() { return primary2; }
    protected ColorUIResource getPrimary3() { return primary3; }

}

The Ocean theme just takes this approach to a new extreme, adding in some new resources, and updating more than just basic properties of the look and feel.


Exploring the Synth look and feel

I don't name these classes, but Synth, the newest look-and-feel for the J2SE 5.0 release, sounds like a character from a science fiction movie. Synth is a "full" (rather than a "theme") look and feel that targets the non-programmer for customization. Instead of subclassing an existing look and feel or theme to change fonts and colors, you modify an XML file. Load a different (or changed) XML file, and you have a new look. Listing 2 shows just what setting a program's look and feel to Synth looks like:


Listing 2. Setting the look and feel to Synth
  SynthLookAndFeel synth = new SynthLookAndFeel();
  Class aClass = SynthTest.class;
  InputStream is = aClass.getResourceAsStream("file1.xml");
  synth.load(is, aClass);
  UIManager.setLookAndFeel(synth);

Throw in some exception handling, and just by changing the contents of the file1.xml file, the appearance of your program will change.

As with most things in XML, the contents of the file are described by a Document Type Definition (DTD). (The link to the DTD is found through the Javadoc page for the javax.swing.plaf.synth package.) By just describing your components in the XML file passed into the load() method of your SynthLookAndFeel instance, the look of your applications will be different. To demonstrate, Listing 3 shows the XML file used to customize the look of a JButton control. It sets the font to a 24-point bold monospaced font by default, and a 48-point italic serif font when the mouse moves over the button. This is not a recommended set of fonts for any program, it's just used for demonstration purposes.


Listing 3. Customizing a JButton control
<synth>
  <style id="button">
    <font name="Monospaced" size="24" style="BOLD"/>
    <state value="MOUSE_OVER">
      <font name="Serif" size="48" style="ITALIC"/>
    </state>
  </style>
  <bind style="button" type="region" key="Button"/>

</synth>

One pointer for the XML file: The id specified in the style tag is used to match the style attribute in the bind tag. Thus, using the XML file in Listing 3 to customize your button controls (as identified by the key attribute of the bind tag) will produce Figure 3 and Figure 4:


Figure 3. 24-point bold monospaced font
 24 Point Bold Monospaced Font

Figure 4. 48-point italic serif font
 48 Point Italic Serif Font

The complete program used to generate Figure 3 and Figure 4 is shown in Listing 4 (and included in the source file available in the Download section):


Listing 4. Demonstrating Synth
import java.awt.EventQueue;
import java.io.InputStream;
import java.text.ParseException;
import javax.swing.JButton;
import javax.swing.JFrame;
import static javax.swing.JFrame.*;
import javax.swing.UIManager;
import javax.swing.plaf.synth.SynthLookAndFeel;

public class SynthTest {
  public static void main(String args[]) {
    Runnable runner = new Runnable() {
      public void run() {
        SynthLookAndFeel synth = new SynthLookAndFeel();
        try {
          Class aClass = SynthTest.class;
          InputStream is = aClass.getResourceAsStream("file1.xml");
          if (is == null) {
            System.err.println("Unable to find theme configuration");
            System.exit(-1);
          }
          synth.load(is, aClass);
        } catch (ParseException e) {
          System.err.println("Unable to load theme configuration");
          System.exit(-2);
        }
        try {
          UIManager.setLookAndFeel(synth);
        } catch (javax.swing.UnsupportedLookAndFeelException e) {
          System.err.println("Unable to change look and feel");
          System.exit(-3);
        }
        JFrame frame = new JFrame("Tester");
        frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
        JButton button = new JButton("Hello, World");
        frame.add(button);
        frame.setSize(400, 200);
        frame.setVisible(true);
      }
    };
    EventQueue.invokeLater(runner);
  }
}

Nothing flashy here for the control program or Synth usage, we're just exploring the available settings for the XML control file.


Summary

If you're tired of the steely Metal look but aren't interested in creating your own, the Ocean theme of the Metal look and feel provides an alternative. Even more interesting for Tiger is the Synth look and feel. With no programming knowledge at all, you can get a great look and feel from designers who actually understand what colors look good together. The art of using Synth is just grasping the DTD and running with it. Follow the Synth File Format document, which describes the DTD, and you should be well on your way.



Download

NameSizeDownload method
j-tiger10194-source.zip HTTP

Information about download methods


Resources

About the author

Author photo

John Zukowski conducts strategic Java consulting with JZ Ventures, Inc. and is working with SavaJe Technologies to develop a next-generation mobile phone platform. His latest books are Mastering Java 2, J2SE 1.4 (Sybex, April 2002) and Learn Java with JBuilder 6 (Apress, March 2002). Reach him at jaz@zukowski.net.

Comments (Undergoing maintenance)



Trademarks  |  My developerWorks terms and conditions

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Java technology, XML
ArticleID=23286
ArticleTitle=Taming Tiger: Ocean and Synth meet Metal
publish-date=10192004
author1-email=jaz@zukowski.net
author1-email-cc=jaloi@us.ibm.com

My developerWorks community

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Rate a product. Write a review.

Special offers