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
|