If you’re looking for a chance to see what modern visual programming is like in Java, here’s your chance. In this article, you’ll get a glimpse of Inprise’s JBuilder, IBM’s VisualAge for Java, and Asymetrix’s SuperCede. You’ll be surprised to learn how quickly you can write a Java application with these powerful tools. In fact, with VisualAge for Java, simple applications can be created without writing a single line of Java code.

Eli Whitney would have approved of the component architecture known as JavaBeans. Because the JavaBeans specification allows Java classes to be used as interchangeable parts, programmers can easily develop Java applications using a visual interface. It took the software industry perhaps longer than it should have to create a method of programming analogous to that of Mr. Whitney’s interchangeable parts of the 1790s. Finally, however, with JavaBeans and some innovative Integrated Development Environments (IDEs), I’m ready to give both Eli and you a tour of a few visual Java programming environments.

As a veteran C++ programmer, I was spoiled by a sophisticated C++ development environment. When I later moved on to Java, I quickly tired of the manual processes required to use the Java Development Kit (JDK). I knew the strategy of using a DOS command line for Java compiles and Notepad for source editing was antiquated. So, I responded to one of those limited-time-only Web advertisements and bought Asymetrix’s SuperCede for $29.95. A month later, I took advantage of IBM’s competitor rebate and bought IBM’s VisualAge for Java IDE (IVJ) at a net cost of about $30. The following month, I used Borland’s competitor rebate and acquired yet another IDE for less than the cost of a book on Java. (Borland has since renamed itself Inprise to help establish the company as a vendor of enterprise-quality software.) I bought three excellent Java IDEs for under $100. (Four other Java IDEs worth mentioning are Symantec’s Visual Café, Sun’s Sun Java Workshop 2.0, Metrowerks’ Code Warrior Professional 2.0, and Microsoft’s J++.) When I was asked to write a visual programming focus article on a Java IDE, I said, “OK, but I’m going to do it on not one but all three of my IDEs.”

JBuilder: JavaBeans

Java visual programming is enabled with JavaBeans. JavaBeans, in a nutshell, are Java classes that implement standard component interfaces so that Java IDEs like JBuilder, IVJ, and SuperCede can use them interchangeably. Using JavaBean mechanisms called introspection and reflection, IDEs are able to present a JavaBean’s interface in a visual programming environment as properties and events. For instance, the properties of a button JavaBean are shown in JBuilder’s Inspector window in the right-hand side of the screen in Figure 1. When I set those properties, I effectively manipulated the state of the button component. For example, I set the button’s label to add to list.

Figure 2 shows the same Inspector window, except that the button’s events are shown rather than its properties. The events of a JavaBean are notifications of some activity generated by a component so you can program a response to user activities like mouse clicks, key strokes, or even the component gaining or losing focus (by moving the cursor in or out of the JavaBean). With the visual assistance of JBuilder’s Inspector window, you can associate user-generated events with a function that will be coded to handle that event. Typically, that function provides some communication with the other components of the application. Without this visual interface, you would need an in-depth knowledge of every JavaBean you wished to use.

The visual programming environment of a Java IDE makes the creation of Java applications a snap. Take, for example, the simple steps I followed to create the sample application window shown in Figure 1. First, as with any IDE, I created a new JBuilder project. A project is simply a group of classes that constitutes an application. Second, from JBuilder’s File menu, I selected the creation of a new application. JBuilder then walked me through the dialog-driven Application Wizard. All I had to do was answer a few simple questions, such as the name of the package, the placement of the Java source files, and whether I wanted extra application gizmos like a toolbar or an about box. Packages, by the way, are Java’s method of limiting classes to their own name space so class names won’t clash between applications.

After I completed the simple steps of the application wizard, JBuilder then created all the necessary Java classes and presented a blank application window frame as a WYSIWYG design screen like the one in Figure 1. Using this visual interface, I was able to select JavaBeans off JBuilder’s component toolbar with a click of my left mouse button and place them into the application frame with a second click of the mouse. Figure 1 shows JBuilder’s toolbar at the top of its IDE as a tabbed dialog with the Abstract Window Toolkit (AWT) JavaBeans tab selected. (AWT is a set of JavaBeans that has been an integral part of Java since Java 1.0.)

Event Handling

JBuilder’s visual programming environment allowed me to select JavaBean components off the toolbar, place them into a frame, rearrange and resize them, and then set their initial properties. At that point, my little application would have run, but it wouldn’t have done anything worthwhile, as I had not yet coded it to handle JavaBean events. The only JavaBean event that I was interested in was a click of the mouse button. I wanted the application to respond to that event by adding the string from the text box to the list box.

JBuilder’s Inspector dialog, shown in Figure 2, lists all of the events that a button JavaBean can generate. The actionPerformed event is the one that I was interested in because it gets generated for a button click. I double-clicked on the actionPerformed item in the Inspector window, and JBuilder responded by automatically generating the skeleton of

the Java function that is to handle the actionPerformed event. JBuilder then jumped my cursor to within the source for that function.

Pretty slick. The problem is that, with JBuilder, as with most IDEs, you must manually flesh out that skeleton function with the code necessary to handle the event. Up to now, everything was easy. But to be able to code that function, you need to know the basics of Java 1.1’s event handling, which is beyond the scope of this article (see “Technology Spotlight: Java GUI Programming,” MC, January 1998). The button’s actionPerformed method was to get a string from the text JavaBean and add it to the list box. The resulting code was only a single line, but unless you are Java-enabled, it may not be clear that it gets a string from a text field JavaBean and sends it as an argument to the add-a-list element function of the list box

J a v a B e a n . v o i d
a d d B u t t o n _ a c t i o n P e r f o r m e d ( A c t i o n E v e n t e )
{ l i s t 1 . a d d ( t e x t F i e l d 1 . g e t T e x t ( ) ) ; }

VisualAge for Java: Wiring Events

No manual coding is required for VisualAge for Java. IBM has raised the bar for Java visual programming environments with the award-winning IVJ. With IVJ, you can build an entire application without keying so much as a single line of code. I’d like to step through the creation of this same application with IVJ. Just like JBuilder, IVJ has an application wizard, except the wizards in IVJ are called SmartGuides.

Take notice of the radio button selection in Figure 3 where I selected the option to design the class visually. Again, similarly to JBuilder, IVJ presents a visual programming environment that IBM calls the Visual Composition Editor. From the Visual Composition Editor, I selected and placed JavaBeans into a window frame using a strategy so similar to JBuilder’s that I won’t bore you with the details. You might notice the similarity of IVJ’s Properties window of Figure 4 to JBuilder’s in Figure 1. The Properties window for a JavaBean in IVJ’s Visual Composition Editor is invoked by selecting that component with a single mouse click followed by clicking the right mouse button and then selecting the Properties option off a context-sensitive pop-up menu.

No award-winning technology yet—so far, IVJ has nothing over JBuilder. But, if you remember, this is the same point of the application build process where, with JBuilder, I had to manually program the event handling code. With IVJ, no coding is required because you visually define event handling with what IBM calls wiring technology. In particular, I wanted to wire the handling of the button click event to respond by adding the string from the text field component to the list box component. With IVJ, this was easy. From the Visual Composition Editor, with the button JavaBean selected, I clicked my right mouse button and selected the Connect option off the context-sensitive pop-up menu shown in Figure 5. I then selected the actionPerformed option off the subsequent pop-up menu. My cursor changed to an icon of a spider hanging from a thread that was connected to the button. I swung that hanging spider to the inside of the list box JavaBean that was to respond to the button-clicked event and clicked my left mouse button. IVJ then pops up a menu of the list box’s JavaBean functions (as shown in Figure 6) that can be invoked in response to the user’s click on the button. I selected the addItem function. The Visual Composition Editor then placed a green arrow connecting the button to the list box.

The applet, at this stage, was able to run. The addItem function of the list box would have automatically been called in response to the button click, but it would have added only blank items. I still had to specify the string of the text field to be used as the argument to the list box’s addItem function. Still, no coding was required. I selected the green connection line with a left mouse button click, and, with a click of the right mouse button, pulled up the pop-up menu and selected the Connect option, as shown in Figure 7,

followed by the selection of the Item option from the next pop-up menu. That Item option represents the list box attribute that will be affected by the connection. The spider cursor appeared again. This time, however, its thread was attached to the green connector line. I moved the spider to within the text field component and clicked the left mouse button. Figure 8 shows the completed JavaBean wiring schematic. A sample execution of the Java application is shown in Figure 9, and not a single line of code did I write.

Interchangeable Parts

The full power of JavaBean components is realized when you add third-party JavaBeans to your favorite Java IDE. All three of my Java IDEs shipped with standard Beans like the AWT components. All of these products came bundled with some of their own JavaBeans, as well as some third-party beans. But I wanted to test JBuilder’s, IVJ’s, and SuperCede’s ability to add JavaBeans of my choice. I chose IBM’s Java Toolbox for the AS/400 Modification 1, Beta 1, because I had noticed that this recent beta contains some visual JavaBeans.

To show you how easy it is to add third-party JavaBeans, I would have liked to have published the screens that JBuilder, IVJ, or SuperCede prompts you with. However, real estate being expensive, just trust me—it’s a very easy process. JBuilder, for instance, prompts you with a file browse dialog to aid in the search for a jar that contains the JavaBeans you wish to add to your toolbar. (The standard format for shipping JavaBeans is a ziplike compression file called a jar.) When you select a jar, the IDE displays all the JavaBeans contained in that jar from which you can select some or all of the components that you want to add to your toolbar.

When Java designers create a JavaBean, they usually associate an icon with it to visually represent that bean in an IDE’s toolbox. JBuilder’s toolbar at the top of Figure 10 shows a few of IBM’s Java Toolbox JavaBeans. One of them, the recordListFormPane, provides a form that is automatically filled in with the fields of a file on the AS/400. The form displays one record at a time and provides buttons that allow the user to scroll forward, scroll backward, scroll to the first or last record, or refresh the view of the file. But to use it, I also needed to use the first JavaBean that is displayed in JBuilder’s toolbar with the icon that is obviously an AS/400. All connections to the AS/400 are enabled through the use of this JavaBean, called—aptly—AS400.

The AS400 JavaBean is an example of what is known as a nonvisual JavaBean because it is not a graphical component. But no matter—you can still use JBuilder’s interface to set its properties in the Inspector properties window, as shown in Figure 10 where I set the AS/400 JavaBean’s systemName property to a valid IP address and the userId property to my user profile name. The only JBuilder caveat is that I had to select the nonvisual AS400 JavaBean (which I had named in my application as MCas400) off the tree located at the bottom left of Figure 10. Note that IVJ’s composition editor makes nonvisual components visual by placing them as icons that are outside of the container component (as shown in Figure 11), thus allowing you to continue to follow IBM’s visual programming strategy of wiring components.

You might have noticed that I haven’t said much about SuperCede’s IDE. That’s because I was disappointed with the result of importing several packages of JavaBeans into SuperCede’s IDE (see Figure 12). First, those JavaBeans were not placed on SuperCede’s floating toolbar. Rather, they were placed in a tree of various third-party JavaBeans, and they were without their associated icons.

Second, SuperCede does not support nonvisual JavaBeans like Java Toolbox for the AS/400’s AS400 component. SuperCede does, however, directly support ActiveX.

SuperCede

ActiveX is Microsoft’s component strategy and is more often associated with Visual Basic, Visual RPG, or C++. Realize, however, that ActiveX works only on Microsoft- based operating systems.

What is also hot about SuperCede’s Java IDE is that, with it, you can generate Microsoft O/S executables. SuperCede also seamlessly supports C++ classes and Microsoft Dynamic Link Libraries (DLLs). If your organization is committed to Microsoft solutions like ActiveX, or you simply want very fast executables, then SuperCede warrants consideration. If you prefer IVJ or JBuilder’s IDE, you could develop your Java applications in your IDE of choice, import the Java source into a SuperCede project, do a quick compile, and then have an executable. That executable would be faster than the interpreted Java byte code.

Disclaimer

Until I wrote this article, I had not been using the visual programming strategies of any of my three Java IDEs. That’s because I am not always happy with the way the code looks. Any visual programming strategy ends up generating code for you. That automatically generated code never looks as clean as it would if you wrote it yourself.

There are ways, however, to improve the look of the generated code: for example, by consistently renaming component variables from something like “button_01” to “attach400Button.” The visual programming environments available for Java increase the speed by which GUI applications can be developed. Further, the visual programming paradigm decreases the learning curve required to develop Java applications. In the future, I foresee two types of Java application developers: JavaBean designers and JavaBean deployers. The JavaBean designers will develop business classes that take full advantage of the power of Java, object-oriented programming, and sophisticated Java GUI classes. Those classes will be packaged as JavaBeans and Enterprise JavaBeans. JavaBean deployers will be the business programmers who, even though they may be novice Java programmers, will use those JavaBeans to create powerful GUI applications with the help of a visual programming environment.

Figure 1: The JBuilder IDE’s visual programming motif makes the creation of a GUI application intuitive and easy

Figure 2: JBuilder’s Inspector Window displays the events that may be generated by a button JavaBean

Figure 3: VisualAge for Java’s SmartGuide prompts you for the type of application you’d like to create

 Figure 4: VisualAge for Java’s Property window for a button JavaBean displays the attributes that may be modified for that component

Figure 5: IVJ’s Composition Editor lets you associate a button’s actionPerformed event with another JavaBean

Figure 6: IVJ’s Composition Editor lets you select a list box JavaBean’s functions to be invoked when the button JavaBean is pressed

Figure 7: IVJ’s Composition Editor lets you assign the text box JavaBean’s string as the Item argument for the list box’s addItem function call

Figure 8: IVJ’s Composition Editor displays the completed wiring schematic for the Java Application

Figure 9: An example execution of a Java applet created with IVJ’s IDE without keying a single line of code

Figure 10: JBuilder’s IDE working with JavaBeans from IBM’s Java Toolbox for the AS/400 Modification 1, Beta 1

Figure 11: IVJ’s Composition Editor: visual presentation of a nonvisual JavaBean

Figure 12: The SuperCede IDE’s visual programming motif