Using Swing in Eclipse's Visual Editor

Java's original graphical programming package was known as the AWT (Abstract Windowing Toolkit).



All three packages implement a large no. of components.


Component (first meaning): A class representing anything that can be drawn on a computer screen, generally characterised by a location and a size as well as self-drawing instructions.


Swing Component Tree: AWT Similar Classes

Many inherit from the equivalent AWT class.


Swing Component Tree: New Components

Example: Create a Game Board

The specific game board is for Latrunculi, a Roman game that may have been a precursor to chess.

Component: (2nd meaning):  A self contained, reusable component that can be manipulated in a visual builder tool.

Example: Active-X controls, Java Beans

Examplar of the prototype pattern.


Steps to creating Latrunculi in Eclipse

1.      Create a new Project, Latrunculi. I use separate src and bin directories.

.2.     Create a new visual class, Latrunculi, in the default package. Have it extend javax.swing.JFrame for an application or javax.swing.JAppletfor an applet. Check public static void main(String[] args) to include a main(). Here's the dialog box filled in except for the class name. As soon as I type Latrunculi there, I'm good to go.

You will see two windows in the centre, a visual one above and a code window below. Changes in either window will cause equivalent changes in the other (a process called round tripping).

The Visual Editor in Eclipse is somewhat rudimentary compared to others (e.g. Net Beans) but it does write very clean code.

Latrunculi should appear in the Visual Editor as a very basic JFrame with just a title bar visible. Click on the visible JFrame to select it, then go to the displays window on the very bottom of your screen and click on the Properties tab. You should see the properties displayed for the selected JFrame. If the properties shows nothing, go back and make sure the JFrame is selected in the visual editor.

3.   Now, scroll down the properties in the Properties window until you find Title, click on it and type in Latrunculi (or whatever your game name is) for its value. Don't use quotes.

Hit Enter to finish or click outside the Title property and Voila! you've changed the Title and you should see it in the Visual Editor.

4.   Some changes have to be made in the Properties area. Others may also be made in the Visual Editor. For example, select your JFrame and you should see some small black squares on its perimeter. Hover the mouse over the bottom centre one and you should see the cursor switch to a resizing cursor. Now drag the bottom edge down and you should see a panel appear inside the JFrame.

If you select that inner pane and then look at the code window, you'll see it has shifted to the piece of code that creates that inner pane (it was automatically created as a part of the JFrame creation). jContentPane = new javax.swing.JPanel();

5.    Let's change the name of the variable from the default jContentPane to arena. Don't do it in the code. Go to the properties window scroll to field name and reset it to arena. This will then change every instance of the name jContentPane to arena. throughout the code. I find changing field names from the generic choices made by the system to names more meaningful to me far easier when I come to do hand coding later on.

6.   Let's add a menu bar. There's a palette on the right edge of the Visual Editor, with Components orranged in a series of folders. Find the Swing Menu folder then click on the JMenuBar component. Run the mouse (not dragging - the button should be up) over to the JFrame. You should see a little plus sign when the mouse is over anywhere you are allowed to drop the Component and an ugly X when you are not allowed to drop it. Make sure you drop it on the JFrame, not the arena JPanel.

It'll be so skinny, you won't be able to see it. Making sure its selected, go to the Properties pane and set the preferred size height (second argument) to 35. The first argument (width) doen't matter since the JFrame layout manager will automatically stretch the menu bar the entire width of the JFrame.

7.   Now click on a JMenu component and drop it on the menu bar. Select it, go to Properties, and change its text property to Help and its field name to helpMenu.

Visual Editor Shortcomings

The Visual Editor in Eclipse is very much a work in progress. It is useful for placing and arranging components for dialog boxes but not a lot else. In particular, I have stopped renamimg fields with the property editor or from within the JavaBeans panel because it caused serious errors.

Here is a the first version of Latrunculi, with the configuration dialog box all set up. Only the top level class works, the rest of the game has not been connected in as yet. Please read the detailed comment in the file about how the visual editor and regular editor were used together to create the file.