The JavaTM Tutorial
Previous Page Lesson Contents Next Page Start of Tutorial > Start of Trail > Start of Lesson Search

Trail: Creating a GUI with JFC/Swing
Lesson: Converting to Swing

Some Conversion Examples

This section provides the AWT and Swing versions of several example programs and talks about the interesting aspects of the conversion. Here is an overview of each program:
ButtonDemoApplet
A simple applet that uses three buttons. In our conversion, we added mnemonics and icons.
AnimatorApplication
An application that uses custom painting to perform a simple animation. Our first conversion just made the application work. The second pass made the application use Swing features such as the JLabel and Timer classes.
TextEventDemo
An applet that illustrates using listeners on text components. We added no new features during this conversion.
Converter
An application that converts distance measurements between U.S. and metric. We made many changes in this program, taking advantage of Swing features such as data models, borders, and BoxLayout.
ListDemo
An application to demonstrate the use of lists. The conversion was fairly straightforward, but again we did more than necessary. We took advantage of some new Swing features, including tables, split panes, and models.
The discussions don't analyze the conversions line-by-line. However, you can see the differences between the AWT and Swing versions of each program by using a program such as UNIX's diff utility to compare both versions of the source code.

Converting ButtonDemoApplet

The first AWT-to-Swing conversion example we'll look at is a simple applet that contains three buttons. The first snapshot shows the AWT version of the applet running. The second shows the Swing version.

The AWT version of ButtonDemo (Win32 platform).

AWT version (Win32 platform)

Click this figure to run the applet.
This is a picture of the applet's GUI. To run the applet, click the picture. The applet will appear in a new browser window.

Swing version (any platform; Java Look & Feel)

You'll notice that the programs look different:

  1. The button edges are different. In the AWT version, running on Win32, the buttons appear raised. In the Swing version, which uses the Java Look & Feel, the button edges appear etched.
  2. The button font is different.
  3. The buttons in the Swing applet have icons as well as text.
  4. The buttons in the Swing applet have underlined letters, which lets the user know the mnemonic for each button.
  5. The Swing applet is bigger.

The first two differences exist simply because the Win32 AWT implementation and the Java Look & Feel used by the Swing program draw buttons differently and have different default fonts. The Java Look & Feel is the default look and feel, which works on all platforms. However, your program or the user can specify another preference.

Differences 3 and 4 exist because we chose to take advantage of two Swing button features not supported by AWT buttons: images and mnemonics.

The final difference -- increased applet size -- is a side effect of the previous four differences. To allow space for the Swing applet, we had to modify the <APPLET> tag. We used Applet Viewer to test the results, making sure that the applet displayed and worked properly. After we were satisfied with the <APPLET> tag, we ran an HTML converter to generate the corresponding <OBJECT> and <EMBED> tags required by Java Plug-in.

Although the programs look somewhat different, they behave the same. When you click the left button, it disables the middle button and itself, and enables the right button. When you click the right button, it disables itself, and enables the middle and left buttons.

The following table links to the complete source code and an HTML file containing a sample <APPLET> tag for each version of the program. Compare the code and the <APPLET> tags to see the differences between the two programs.

  Source Code <APPLET> Tag *
AWT ButtonDemoApplet.java ButtonDemoApplet.html
Swing ButtonDemoApplet.java
left.gif
middle.gif
right.gif
ButtonDemoApplet.atag
* Note that if your browser isn't configured to run 1.1 or Swing programs, visiting the .html files listed in the table will produce errors. We provide the files so that you can look at the applet tags. Use shift-click to download the files.

For a slightly more sophisticated Swing version of ButtonDemoApplet that works as either an applet or an application, see AppletDemo.java.

Converting AnimatorApplication

AnimatorApplication is a template for animation programs. This particular implementation "animates" a string by changing the string periodically. The program can be easily modified to animate images in the same manner.

This section discusses two different solutions to converting the animator program. The first solution takes a minimalistic approach--the code is changed only as necessary to get the program to run with Swing. The second solution is more complete--it changes the code to adjust for differences in the way the AWT and Swing programs paint and to take advantage of the Swing timer support.

The AWT AnimatorApplication class extends Frame. Its paint method uses drawString to paint a string in the frame. A thread periodically wakes up, changes the string to the next value, and repaints the frame.

Both Swing versions of the AnimatorApplication class extend JFrame.

The minimalist version of the program paints the same way the AWT version paints--by calling the drawString method. However in Swing the painting code belongs in a method named paintComponent. Furthermore, because a JFrame has a content pane, the painting done in its paintComponent method has no effect (the content pane just paints right over it). So the painting code must move out of the frame. Instead, the program defines a JPanel subclass, AnimappPanel, to do the painting, and uses an instance of AnimappPanel as the JFrame's content pane.

The second solution is a more complete Swing solution. Instead of using a Thread that sleeps periodically, the second solution uses Swing's Timer class. Additionally, this solution uses a JLabel instead of creating a JPanel subclass to draw a string. Replacing the custom component with a label isn't essential for this program, but it is something you might well do in your own programs.

Here are the three different versions to compare:

  Source Code
AWT AnimatorApplication.java
Minimalist Swing Solution AnimatorApplication.java
More Complete Swing Solution AnimatorApplicationTimer.java

Converting TextEventDemo

Here's the Swing version of the TextEventDemo applet. The AWT version looks similar.

Click this figure to run the applet.
This is a picture of the applet's GUI. To run the applet, click the picture. The applet will appear in a new browser window.

This program has a text field and a text area on the left, both of which are editable. The program listens for changes to the text on the text field and the text area and logs changes in the uneditable text area on the right.

AWT text areas support scrolling directly. Swing text areas don't. So the Swing version of this example creates a JScrollPane for each text area. The program uses a GridBagLayout to position the components. During the first pass of the conversion, we forgot to change the setConstraints call to set the constraints on the scroll pane instead of the text area and ended up with a tiny little scroll pane.

The AWT version of this program registers a text listener with addTextListener to listen for changes on the text components. The text listener implements a single method called textValueChanged.

Swing text components do not have an addTextListener method. Instead, the Swing version of this program has to register a document listener on each text component's document. A document listener implements three methods: insertUpdate, removeUpdate, and changedUpdate. These methods allow a program to listen for specific types of changes.

Here's the code and <APPLET> tags to compare:

  Source Code <APPLET> Tag *
AWT TextEventDemo.java TextEventDemo.html
Swing TextEventDemo.java TextEventDemo.atag
* Note that if your browser isn't configured to run 1.1 or Swing programs, visiting the .html files listed in the table will produce errors. We provide the files so that you can look at the applet tags. Use shift-click to download the files.

Converting Converter

The Converter is an application that converts distance measurements between metric and U.S. units. Here are snapshots of the AWT and Swing versions of the program:

AWT Converter
The AWT version of the Converter demo.
Swing Converter
The Swing version of the Converter demo.

Here's the source code for both versions:

AWT Converter Source Swing Converter Source
Converter.java
ConversionPanel.java
Unit.java
Converter.java
ConversionPanel.java
Unit.java
ConverterRangeModel.java
FollowerRangeModel.java
DecimalField.java
FormattedDocument.java

The main method for both versions is in the Converter class. Both versions use two instances of ConversionPanel--one for the metric system controls and one for the U.S. system controls. The Converter program keeps several instances of Unit, each of which contains a multiplier for a particular conversion.

The Swing version of the program has four additional classes. These provide custom data models for the text fields and the sliders.

The Anatomy of a Swing-Based program(in the Creating a User Interface trail) dissects the Swing version of the Converter program. Read that section to familiarize yourself with the program before proceeding.

The Swing version of this program takes advantage of the Swing API and improves upon the AWT version in these ways:

Converting ListDemo

Let's look at our final conversion example, converting a program that uses lists. The AWT version of this example is fairly simple. Here's its GUI:

The AWT version of ListDemo.
This figure has been reduced to fit on the page.
Click the image to view it at its natural size.

This applet contains two lists, one that allows single selection and one that allows multiple, discontiguous selections.

When converting this program, we got a little carried away. Rather than doing a basic conversion, we decided to show off the power of Swing's model-view split. The Swing version of the program can be run as an application and is shown here:

The Swing version of ListSelectionDemo.

This program contains a single list alongside a table. The list and the table share a list selection model. Thus, selecting an item in the list selects the corresponding row in the table, and vice versa. Furthermore, this program lets the user change the selection mode dynamically.

  Source Code HTML Code *
AWT ListDemo.java ListDemo.html
Swing ListSelectionDemo.java None (implemented as an application)
* Note that if your browser isn't configured to run 1.1 or Swing programs, visiting the .html files listed in the table will produce errors. We provide the files so that you can look at the applet tags. Use shift-click to download the files.

Not leaving well enough alone, we modified ListSelectionDemo so that, in addition to sharing the selection model, the list and table share the same data model. This new example is called SharedModelDemo. You can find its code in SharedModelDemo.java.


Previous Page Lesson Contents Next Page Start of Tutorial > Start of Trail > Start of Lesson Search