How Three Great Tools Can Work Together

by Randy Eckhoff, IBM Corp.
Software Engineer, Lotus BeanMachine

Abstract

VisualAge for Java, BeanMachine, NetObjects Fusion. You have probably heard of these tools before--as individual tools. But have you heard about using these three tools together? This article describes how software engineers and graphic designers can team up to create a Web site that uses a multimedia applet.

This article will give you a tour of all three tools, and many aspects of building beans will be discussed. Software engineers will use VisualAge for Java to create a simple bean. (Complex beans can be built, depending on the different VisualAge parts that are used.) The bean takes the contents of an entry field and adds them to a list box. After the bean is created, software engineers will import it into BeanMachine to create a multimedia applet. This applet will take the item selected in the list box and put it up in "lights." After the applet has been created, graphic designers will use NetObjects Fusion to create a Web site that will use this applet on one of its pages.


Overview

Let's look at Web applications and who develops them. A sophisticated Web application will consist of a snazzy, well-designed user interface that provides access to some data that resides somewhere. The user of this application does not care where the data sits or how it is retrieved. It could be a CICS transaction to a DB/2 database sitting on an AS/400 box. These are terms that the typical user does not comprehend or care to; this description also applies to the process by which a Web application is built.

Graphic designers' eyes will glaze over when the designers hear things like CICS, DB/2, and AS/400. The graphics designers' area of expertise is user interface and visual design. Developing a Web application is getting more and more complicated. Web users are demanding more sophisticated applications--for example, applications that allow them to shop on the Web and do their banking online. The graphic designers’ strength is in building Web sites with fancy multimedia features; their weakness is in adding features such as a database query so that someone can pay off their credit card balance. Such database queries are the software engineers’ area of expertise. The problem is that few people are good at both.

Visual Age for Java, BeanMachine, and NetObjects Fusion solve the problem by allowing software engineers and graphic designers to team up and create sophisticated applications.

VisualAge for Java helps software engineers in writing access-to-data code. It can create Java applets, applications, and beans—-everything you need to develop a business application.

Lotus BeanMachine makes it easier for graphic designers to take the application (created by the software engineer in VisualAge for Java) and create multimedia applets for it. There is some overlap with VisualAge for Java (both can create applets). But BeanMachine creates exciting multimedia applets for displaying data instead of simple tables.

NetObjects Fusion helps graphic designers use HTML and applets to create a Web site for the application.

All three tools are visual builders, which means that you simply select an item from a palette and place it on your visual layout area.

This article will not be a comprehensive, function-by-function overview of all three tools. Other articles have already been written about the individual tools. Check the tool Web sites for additional information.

For the exercises in this article, a Windows 95 system was used, running VisualAge for Java 1.0, BeanMachine 1.1, and NetObjects Fusion 2.0.


VisualAge for Java

Start VisualAge. The Quick Start window is displayed. Select Go to workbench and then OK. This displays the Workbench; think of it as home base.

The tabs (Project, Packages, etc) across the top of the window show different views of your work. Projects are a way to group the work that you do. Packages is a programming thing that lets you group your code. Class and interfaces are basically your code. For example, if you were writing code that handled mortgage calculations like fixed and variables rates, you might have a Fixed30Year class and an ARM class. These two classes would do the actual work to calculate a mortgage. The package might be named Mortgage and the project might be named OnlineBanking. In Java, basically everything is a class, regardless of what it does. Applets, applications, and beans are all Java classes. It is the specific classes and from whom they inherit that give them unique behavior.

Select Add Project from the Selected pulldown menu, and type in ExampleBeans. Select Finish. You just created a project. If it is not selected, select ExampleBean, and then select Add Package from the Selected pulldown menu. Type in ExampleForArticle for the new package name, and select Finish.

With the project and package out of the way, you can now create your class. Earlier in the article, it was stated that you will create a bean. Remember that beans are classes. You'll get around to the bean stuff later. With ExampleForArticle selected, select New Class/Interface from the Selected pulldown menu. In the dialogue box that appears next, type NameInLights for the class name. At this point, you need to make a decision. You need to ask yourself, quot;What Java class do I need to inherit from?" The answer to this question is important because it determines the overall behavior your class will have. Since you are building something that needs to be able to contain user interface elements, you want to create a visual class.

How does one learn which class to inherit from? This is where one of the differences between software engineers and graphic designers becomes apparent. If you are using VisualAge for Java, you must be a software engineer, and you probably know Java thoroughly. You will consult the Java reference documentation to figure out what you can do in Java. Remember that VisualAge for Java is a fully integrated development environment.

After looking in the Java API reference, you learned that the Panel class provides a visual space in which you can add other components. For the superclass, type in java.awt.Panel. Panel is the name of the class and java.awt is the package in which the Panel class can be found. And since it is so much nicer to do things visually, make certain that Design the class visually is selected. When you are finished, select Finish.

The NameInLights class is created, and up comes the Visual Composition Editor. It probably looks familiar if you have used other VisualAge products. This is where you lay out your visual components from your Parts Palette. The parts are broken into different categories and can be found on the left side of the window. The tabs across the top provide access to the actual source code that makes up this class, information about the class's location in the overall class hierarchy, different editions in the library, and information about the class that will be exposed when the class is used as a bean.

Lay out the following parts: an entry field, list box, and push button. Select the button, and then select actionPerformed under Connect from the button's popup menu. Move the mouse to the list box and click. Select addItem from the resulting popup menu. You just made a connection! This is how you wire parts together without writing any code. However, the connection is not yet complete. When the button is clicked, something will be added to the list box. That "something" has not yet been specified. Since the contents of the entry field will be added, select Text from the entry field's Connect menu. Move the mouse to the green connection line and click. Select item from the resulting popup menu. The connection is now complete.

A bean is necessary for working in BeanMachine. So how do I make this class accessible as a bean? Easy. Switch to the BeanInfo tab and select New BeanInfo class from the Features pulldown. Type in NameInLights and then select Finish. The class is now accessible as a bean. Here is a brief four-sentence summary of what a bean is. JavaBeans is a specification, defined by Sun Microsystems, for building reusable Java components. These components have actions, properties, and events that can be wired together to build more Java components, be they beans, applets, applications, or other entities. The BeanInfo is what tells other tools about the public interface of the bean. For example, BeanMachine will read the BeanInfo to determine what actions, properties, and events to expose when the bean is imported into BeanMachine.

What actions, properties, and events do you want to include as part of the user interface for your bean? For your sample, only the list box's selected item property will be exposed. Select New Property Feature from the Features pulldown. In the dialogue box that appears next, type nameToHilite for the property name. Notice the property type. This is where you specify what type of property nameToHilite is. Is it a string, an integer, a boolean, or what? Since the list box contains strings, this field should be java.lang.String. Select Finish.

Since you want to expose what is selected in the list box, you need to place that value into nameToHilite every time it changes. Switch back to the Visual Composition Editor, and connect the list box's selectedItem property to the bean's nameToHilite property. You know to create the first part of the connection. To connect to nameToHilite, move the mouse to the white area outside the dotted box. In the resulting pop-up menu, select All Features. Then select nameToHilite, and select OK. This completes your property-to-property connection in the Composition Editor.

There is one little quirk about the basic user interface controls that are provided by Java. The property-to-property connection you just created will not automatically run when the list box's selected item changes. The list box was implemented in such a way that, when one of its properties changes, it will not notify anybody who is interested in knowing that it has changed. However, separate from properties, the list box has events that you can monitor. By attaching one of these events to the connection, you can force the connection to run. To do this, double-click on the connection. In the Source event drop-down list, select itemStateChanged. Then select OK.

You are almost finished with VisualAge for Java. You only need to save it and place the bean into a file that BeanMachine can use to import it. From the File pulldown, select Save Bean. Then close the window and go back to the Workbench. Select ExampleBeans, and, from the File pull-down menu, select Export. Select the JAR File radio button, and then select Next. Specify where you want to store the JAR file, and name it something like Example.jar. In the list box, select ExampleForArticle.NameInLights to be marked as a bean. This means that the JAR file will store the classes it contains that are beans. BeanMachine will ask the JAR file which classes are beans, and then it will use the BeanInfo to find out the specific details about the individual beans themselves. Select Finish to save the JAR file.

You are finished with VisualAge for Java, so close it. Let's move on to BeanMachine.


BeanMachine

This tool is a dream come true for the graphic designer. It makes complex tasks simple. With BeanMachine, you will use the bean you created with VisualAge for Java and a few other parts provided by BeanMachine. First, you need to import the bean into BeanMachine. There are two ways to do this: One way is to add it through the BeanMachine Bean Wizard. However, this requires you to restart BeanMachine after it has been added. A quicker way is to copy the JAR file into the BeanMachine\Beans directory. Do that now. When BeanMachine starts, it will automatically import any new beans it finds in the Beans directory. When beans are automatically imported, they are placed in a category on the palette with the same name as the JAR file. So if you named the JAR file Example.jar, the name of the category will be Example. Start BeanMachine and you will see a progress dialog showing that BeanMachine is importing new beans. When it has finished, the Composer window and the New Applet Wizard come up. Close the wizard, since you will be working straight from the Palette.

Go to the Palette and select the Example category. The Palette has been refreshed to show all the parts in this category. You see only one part, which is the NameInLights bean that you created with VisualAge for Java. Select it and drop it into the Composer. It should look exactly as it did in VisualAge for Java. Next, go to the Controls category and drop out a push button. Then, go to the Multimedia category and drop out an image and a nervous text part. What is the applet going to do? First, the user will enter data into the list box; then the user will click on another button. This will cause the appearance of a special effect on the image. After this special effect has finished running, whatever is selected in the list box will be displayed as the nervous text.

Now that you have laid out all the necessary parts, you only need to set a few properties and make a few connections. First, select the image and go to the Details window. The Details window is where you set the properties and connections for the selected part. Let us do all the properties first. Set the picture property to BeanMachine\samples\effects\world.gif. Then set the transition property to a special effect, such as Ripple. Last, set the auto start transition property to no. When set to yes, suto start causes the transition to automatically start when the applet starts. Other parts have similar auto start values. There is one more property to set: Select the button you just added, and set the label property to something like Click me to start transition. Click here to see what BeanMachine should look like.

Now the connections must be created. With the button still selected, switch to the Connections tab. BeanMachine does connections a little differently than VisualAge for Java; it uses a sentence style. The source part is already selected (the button). So all you need to do is specify from which event you want to connect and to which part you want to do something. On the first row, in the When column, select the clicked event. In the Part column, select Image1. In the Do column, select start transition. You have just created an event-to-action connection. This connection starts the special effect on the image when the button is clicked. The last thing that needs to be done is to display the selected item from the list box in the nervous text.

Select the image. You are going to create an event-to-property connection. Again, the source part is already selected, so, in the When column, select transition ended. In the Part column, select Nervous Text1. In the Do column, select Set text. Two new columns appear. In the Using column, select NameInLights1. This is the bean from VisualAge for Java. In the Value column, select nameToHilite. This is the property that you created on the BeanInfo tab in VisualAge for Java. Here is what the connection should look like.

That's it! You just wired together a bean you created with another bean. Test it by selecting the play button on the toolbar. After the compile step is complete, up comes Applet Viewer. Add some items into the list. When you have finished, select an item in the list. Notice that the nervous text started when the applet started, but the special effect did not occur. That is because auto start is set on for nervous text and off for the image. Select the Click me button. The transition starts. When it stops, the item selected in the list is automatically displayed in the nervous text.

You are almost done with BeanMachine. Close Applet Viewer and select the publish button. Save the applet and give it a name like ExampleApplet. In the Publish Wizard, select the Local tab. You can publish just about anywhere (for example, a local file system or some remote FTP site). You can also publish out a NetObjects Fusion component. By creating these components, you can add BeanMachine applets into NetObjects Fusion in one step and have all dependent files copied into their proper places for NetObjects Fusion to use. This is important because NetObjects Fusion has a very specific directory structure.
Select Yes, and also select Publish NetObjects Fusion Component. Then select Finish. BeanMachine will publish to the BeanMachine\publish directory, creating all the files you need. You are finished with BeanMachine, so close it.


NetObjects Fusion

Unlike other tools that create only Web pages, NetObjects Fusion creates an entire Web site. Start NetObjects Fusion. If this is the first time you have run it, it will prompt you to enter the name of the Web site you want to create; use something like Example. You are immediately placed in a tree view of the Web site. The only Web page you see is your Home page. Across the top of the window, you see various buttons that allow you to go to specific pages, to manage the overall look of the Web site, to manage which files and other assets are used, and to publish the site when it is finished. You can also preview the site while you are constructing it.

Another button is the New Page button that will add a new Web page as a child to the page that is currently selected. Select it now, and you will see, below Home, a new Web page called Untitled. Select Home and select New Page again. Now you have two Untitled pages under Home. Change the names of the two Untitled pages to something like page2 and page3 by single-clicking on the Untitled text.

Double-click on the Home page; now you can lay out your home page however you want. The Tools palette contains various user interface elements that you can use. The Properties window lets you specify various properties of the specific elements on your page as well as of the page itself. Lets add a simple element. Select the Text tool and place it on your page. Type in something like I'm home!.

The master border that you see defined around the layout area applies to all child pages and can be modified through the use of styles. A more in-depth look of NetObjects Fusion, including how to create your own styles, is available elsewhere. Lets go to Page2 by clicking on the Site button and then double-clicking on Page2. Notice that the layout is the same as for the Home page. This is the page that will contain our BeanMachine applet.

On the Tools palette, select the NFX tool and place it on your Web page. An Installed Components window is displayed that shows all NetObjects Fusion Components that are already installed. You need to install the one you created, so select the Add button and, in the resulting File dialog, navigate to the directory where you published ExampleApplet. Select ExampleAppletComp.nfx and then Open. The Installed Components list is updated to show the new component. Select ExampleApplet - BeanMachine and then OK. You will not see the actual applet render itself within NetObjects Fusion, because this would involve running the Java VM within NetObjects Fusion, which is not currently supported. Instead, you will see a thin black frame sized to the size of the applet with a picture in the middle. This is the applet you built. The applet used other files, such as world.gif. These files have been added to the Asset list automatically but will be hidden from view, so you don't have to worry about managing them specifically, which is one of the benefits of using NetObjects Fusion Components. You could have added this applet by using the Applet tool from the palette but then you would have to manually modify the assets list.

Nothing will be added to Page3 so select the Publish button. You are now ready to publish your Web site. You have two choices here: You can stage your Web site to a test server for testing, or you can publish it to your external site. And like many good tools, you can customize various settings for each step. Select Settings, and then select the Publish tab. You can publish to a local file system or a remote FTP location. Select the Local radio button, specify a local directory to which to publish, and then select OK. Select the Publish button, and the Web site will be published.


See Your Results

Close NetObjects Fusion, and start up a Web browser that is Java 1.1-enabled (examples are Navigator 4.02, Internet Explorer 4.0, HotJava, or Lotus Notes 4.6). Open up index.html (it was renamed from Home by NetObjects Fusion when you published), and navigate through your Web site. Go to Page2 and see your applet run!


Summary

I hope this paper has given you a good overview of what you can do with these tools. Although we could have built a more elaborate bean (instead of calling addItem on the list box, it could have been a DB/2 query), and the applet could have been made to do more, and the Web site could have been more complex, the point was to show that the possibilities with these three tools are endless.

Websites You Might Want To Visit

IBM VisualAge for Java is at http://www.software.ibm.com/ad/vajava

Lotus BeanMachine is at http://www2.lotus.com/home.nsf/welcome/beanmachine

NetObjects Fusion is at http://www.netobjects.com




Java is a trademark of Sun Microsystems, Inc.

Other companies, products, and service names may be trademarks or service marks of others.

Copyright    Trademark



  Java Feature Java Home  
IBM HomeOrderEmployment