THE GREAT IDE ROUNDUP
VisualAge Sets Sights on Swing

VisualAge for Java^TM, a full-featured integrated development environment from IBM, is a popular IDE thatīs well known in Java programming circles. And now a new release of VisualAge for Java -- Version 2.0 -- offers a host of new features, including fully integrated support for JDK 1.1.6 and Swing.

This article describes the VisualAge programming environment, shows how its parts work together, and tells how we tried out VisualAge for Java 2.0 by creating a Swing applet.

To observe how VisualAge 2.0 works with JFC and Swing, we created and built a simple "Swinging Duke" applet like the one shown on the left. (A similar kind of applet appears in the article in this issue titled "Make Your Browser Swing!" and in the other IDE reviews in this section.)

When you run the program, it displays a small panel that contains a picture of Duke (the Java^TM Software mascot) sitting in a swing. Below Duke's swinging figure, there's a toggle button that says, "Swing!" When you click the button, Duke starts swinging, and the label on the button below him changes to read, "Stop!" Click the button again, and Duke stops swinging.

To learn more about how we developed a swinging-Duke applet using VisualAge for Java -- and to download the appletīs source code, if you like -- see the section headed "Creating an applet with VisualAge" at the end of this article.

VisualAge for Java is an integrated suite of  tools that allows developers to build complete 100% Pure Java applications, applets and JavaBeans by using what IBM calls a "Construction from Parts" paradigm. That means that VisualAge for Java is designed to work seamlessly with a number of other enterprise-solution products from Big Blue, including the IBM DB2 relational database system, the IBM eNetwork communications server, the Lotus Domino Go web server, and various IBM products for creating and working with JavaBeans.

VisualAge for Java is available in three editions:

• An Entry Edition, which you can download at no cost to get a quick look at what VisualAge for Java has to offer. You can obtain the entry edition from either the VisualAge for Java Web site or the VisualAge Developer Domain Web site.
   
• A Professional Edition, intended for intermediate-level programmers and developers of applications that require quick and easy access to relational databases.
   
•  An Enterprise Edition, which offers extra functionality for developers of high-performance, commercial-quality applications. The Enterprise Edition has advanced features for creating heterogeneous applications and for connecting applications written in the Java^TM programming language to existing enterprise systems.

VisualAge for Java is built around a Workbench window that provides access to a source-code editor, a resource editor, a built-in debugger, and other software-development tools. VisualAge Workbench window that looks like this:

As the illustration shows, the VisualAge Workbench window contains a set of tabbed panes that can display projects, packages, classes, interfaces, and any problems that may be detected in programs. By tabbing from one pane to another, you can design and lay out components, and you can create and edit source code. You can also run a built-in debugger without leaving the visual composition editor.

Several other windows are available for performing various other tasks. One of the most useful windows is a visual composition editor (VCE) in which applets and applications can be laid out visually on forms. Here's a screen shot that shows both the VisualAge composition editor and another important kind of window: a property sheet. (In VisualAge, as in most IDEs, property-sheet windows are used to display the properties of components):

In this illustration, the composition editor is tabbed to a page labeled Visual Composition. By clicking other tabs, you can display a source-code editor, a class-hierarchy tree, a bean-info Browser, and a versioning tool that can be set to work automatically.

Other available windows include a console window, a debugger window, a project-browser window, and more.

In the preceding screen shot, notice the button labeled Swing thatīs shown in the upper left-hand part of the picture. That button is actually a label on a combo box that can be used to display various kinds of component toolbars. Because we were developing a Swing applet when we snapped the picture, VisualAgeīs Swing toolbar is the one displayed.

Creating an applet with VisualAge

The best way to learn how an IDE works is to use it to build a program. The rest of this article shows how we created a Swing applet using VisualAge. The article ends with a short Conclusion that describes our overall impression of VisualAge for Java 2.0.

First steps

VisualAge for Java uses various kinds of JavaBeans^TM to compose program elements for applets and applications. For example, when you want to create an applet, VisualAge lets you construct your applet using either Swingīs JApplet class or AWTīs Applet class.

If you decide to create a Swing applet using the JApplet class, VisualAge offers several methods. Here is the method we followed:

1. We selected the Create Applet button from the VisualAge toolbar. VisualAge responded by opening a dialog box titled Smartguide, which looks like this (only the top part of the dialog is shown):
   
   
    
2. In the SmartGuide dialog, we supplied information about the applet we were about to create by filling in the appropriate text boxes. We named our project SwingingApplet and named our package swinging_applet. We named our applet Swinger, and we based our sample applet on Swingīs JApplet class. All these selections are shown in the preceding screen shot..
    
3. We closed the SmartGuide dialog by clicking the Finish button.

Content panes and other containers

When you make the necessary entries in the VCEīs SmartGuide dialog and click Finish, VisualAge opens its visual composition editor window. You can then start creating components for your applet. To create components for our Swinger test applet, these are the steps we followed:

1. We replaced our appletīs content pane with a JPanel component. When you create a JApplet using VisualAge, the VisualAge IDE automatically creates a content pane. (In Swing, a content pane is a component in which other components can be placed. To learn how content panes work in Swing, see the article headed "Understanding Containers" in The Swing Connection Archive.)
   
   When you first create a Swing applet using VisualAge, a content pane completely covers all user-interface objects displayed in the Visual Composition Editor. Consequently, to view or manipulate components inside a JApplet in VisualAge, you must delete the appletīs content pane and replace it with a different kind of container component (for instance, a JPanel component).
   
   To continue our applet-building operation, we replaced our JAppletīs content pane with a JPanel component. To do that, we simply selected the content pane and typed Control-X. Then there were just three more steps to follow to complete this stage of development:
    
2. We selected the Swing component toolbar. Using the combo-box button that is displayed above the VCEīs component toolbar, we selected the toolbar that displays Swing components.
    
3. We put a JPanel where the content pane used to be: In this step, we selected the JPanel component from the Swing toolbar and placed it inside our applet. The result was a VCE panel that looked something like this (notice the word "JPanel1" in the status bar at the bottom of the illustration):
   
    

Adding components to an applet

VisualAge for Java employs a familiar technique for adding components to a form: You select a component on a toolbar, and then you click on a form to add that component to your programīs design form. To complete the GUI interface for our Swinger program, we carried out these steps:

1. We placed a pair of JToggleButton objects inside the programīs design form.
    
2. We arranged these two buttons in a vertical layout, shown below:
   
   
   
    
3. When we had finished placing the Swinger programīs two controls on the VisualAge design form, we used VisualAge property pages to place an unanimated Duke icon inside the top button and and to set the label inside the bottom button to read, "Swing!"

   
   
    

Connecting components

When the Swinger program is complete, the button labeled Swing! can be used to toggle back and forth between a pair of icons that show  Duke swinging. One of those icons is an animated GIF, and the other is an animated GIF that shows the same picture. By using the lower button to toggle back and forth between these two images, the user of the applet can start and stop the programīs "Swinging Duke" animation.

To implement this behavior, we had to connect the two components used in the Swinger application and set up an event handler. To program component interactions and create event handlers, VisualAge for Java provides a mechanism that is also found in a number of other IDEs: Using the mouse, you draw lines from one component to another. As you draw these lines, VisualAge displays dialog boxes in which you can specify how you want your applicationīs components to interact with each other and with the user at runtime.

To draw the lines that connect components in VisualAge, you simply left-click the mouse inside a component that you want to use as the source of an event, and left-click it again at the point where you want the line to end. As you connect components in this way, VisualAge displays various kinds of dialog boxes that you can use to specify the interactions represented by the lines you are drawing.

To connect the two toggle buttons used in our Swinger applet , we followed these steps:

1. We drew a line from the bottom component to the top one, as shown below:

2. As we performed the operations that were needed to draw a line between our components (shown above in green), VisualAge opened a series of dialogs that let us specify how we wanted the two components on our form to interact. One important dialog looked like this:
   
   
   
   As you can see by examining the highlighted items in this dialog box, an event-to-method connection is established here; the highlighted items specify that when a change is detected in the state of the bottom toggle button in the Swinger applet, Swingīs setIcon() method is called to change the icon displayed in the top toggle button.
    
3. When we closed the event-to-method dialog, another dialog box opened. It allowed us to specify what icon we wanted to place in the target toggle button. VisualAge let us use a browse tool to select the icon we wanted.
   
   
   
   When we had chosen an icon (in this case, an animated swinging-Duke GIF), we closed the parameter-setting dialog by clicking OK.

Testing our applet

At this point, we decided it would be a good idea to test the applet we were developing. To do that, we clicked the Run button in the composition editorīs toolbar. VisualAge then executed the Swinging applet in an applet viewer, as shown on the left .

To try out our applet, we clicked the Swing! button and observed that Duke started swinging, as we had hoped. That was a good start, but it wasnīt enough. Our application did not yet have the capability of toggling back and forth between its animated and unanimated pictures of Duke. It also lacked the capability of changing the label of the Swing! button to indicate that Duke was currently swinging.

Completing the Swinger applet

When you have set up an interaction between a pair of components using the VisualAge composition editor, there are two ways to fine-tune that interaction to improve the way it meets your programīs needs. One way is to draw more lines and set up subsets of interactions. The other way is to modify the code that VisualAge has generated by adding some hand-written code of your own.

We decided to tweak our application a bit by adding some of our own code to the code that VisualAge had generated.

In VisualAge, you can examine and modify code by clicking the Methods tab in the IDEīs main window. VisualAge then opens a code-editor window that looks like this:

In this window, notice that a method named connEtoM1 is displayed. Thatīs the name of a method that VisualAge automatically generated earlier, in the steps listed under the subheading "Connecting components."

In the connEtoM1 method, notice the comments that say  "//user code begin" and "// user code end." When you add hand-written code to code that VisualAge has generated, you must color inside the lines; that is, you must place your hand-written code inside areas delimited by those two kinds of comments.

Source code corner

By inserting a few lines of hand-written code into the connEtoM1 method, we were able to add all the functionality we needed to the Swinger program. To see how we modified connEtoM1 to make it do just what we wanted, follow these links:

Original method             Modified method

To download a zipped file containing all the Swinger programīs source code and resources, click the Download button:

To execute the applet, you may need to download Sunīs Java^TM Plug-in software or install JFC. For details, see the articles in the "Swing and the Web" section of this issue.

The main purpose of this review was to see how VisualAge for Java 2.0 works with Swing, and regarding this feature, we award a big thumbs-up to VisualAge. JFC and Swing are seamlessly integrated into the VisualAge for Java environment, and the VisualAge IDE supports just about everything Swing has to offer. So Swing developers can have a lot of fun (and perhaps earn a lot of profit) by developing application software using VisualAge.

Overall, VisualAge for Java is a highly automated IDE which we think will appeal most to developers who want to avoid the drudgery of writing complex code sequences by letting their IDE do a lot of grunt work for them. Although VisualAge for Java allows you to modify segments of code that it has automatically generated by adding vast quantities of hand-written code, that is not really the kind of programming that itīs cut out for. Itīs obvious that the creators of VisualAge invested a lot of effort in automating the product and making it easy to use -- and thereīs a tradeoff there. The more automated an IDE is, the more difficult it is to jump right in and do a lot of hand-coding of GUI-related routines yourself.

The automated features built into VisualAge for Java arenīt limited to code generation; they extend to its directory-management and versioning utilities. When you start developing a program with VisualAge, the IDE sets up a workspace that is designed to isolate you from having to most ordinary directory-management tasks. Throughout the process of developing a program, VisualAge maintains control over the programīs file-and-directory structure.

When the development of a program is complete, you can perform a final compilation of the program and "export" it to a directory, a jar file, or some other kind of repository. Only then does the IDE relinquish control over the programīs file hierarchy and allow the program to be compiled with a proper directory structure into a finished applet or executable application. (You can partly override this process by exporting your program frequently, but again, under ordinary circumstances, the easiest and most convenient way to work with Visual Age is to go ahead and let its own thing, while using the IDEīs automated features to communicate with your program.)

Because VisualAge for Java is so highly automated, the easiest and most efficient way to use it is to stand aside and let VisualAge generate all the code it wants to, mastering and using all of the many animated programming aids it offers and resisting the temptation of trying to override its automated features in order to gain more personal control over every aspect of your program.

-- Mark Andrews