OpenMath JavaBeans Tutorial

Introduction:

The purpose of this tutorial is to:

1. to give the user some experience in programming with java beans and ...

2. to help the user develop an understanding of the emerging OpenMath standard as it is reflected in the OpenMath java beans.

The development environment that these activities and exercises are based on is Sun Microsystems Java Studio 1.0. This tutorial and all the activities and exercises were developed in JavaStudio running Silicon Graphics 02 workstations This environment is very flexible as far as the design and testing of applets are concerned however it seems to break down when generating a working applet. For the purpose of generating an applet, another builder tool, such as Sun's standard Bean Box, should be used. For more information about development environments, refer to the section below on Design and Building Environment Considerations. As a final note, it should be pointed out that the Open Math java beans use Java 1.1 and therefore applets generated using these beans will only run in browsers which support Java 1.1 such as Netscape Communicator 4.x and Internet Explorer 3.x.

Table of Contents

Introduction
Table of Contents
Java Studio 1.0 Screen Shot
Description of Java Studio 1.0 Programming Environment
Introduction to the Design Window: The Simple Function Plotter
Activity 1: Reproduce the Function Plotter
Wiring Beans: Component-based, Event-driven program design
Activity 2: Modify the Function Plotter
Exercises
Design and Builder Environment Considerations
Footnotes

[Return to: OpenMath and Java for Math Education]

Java Studio 1.0 Programming Environment
Simple Function Plotter: Design and JS Environment

Description of the Java Studio 1.0 Programming Environment

[ToC]

The above screen shot displays the Java Studio 1.0 JavaBeans programming environment. The environment contains three components as follows:

The Bean Palette:	This component includes all of the java beans that Java Studio has available for use in programming. They are organized into different classes with the OpenMath Beans being found in the "User" class. (The classes are accessed by clicking on the "tab" corresponding to the class.)
The Design Window:	This window is the window in which you "wire together" the Java Beans. To bring a Java Bean into this window, click and release on the in the Bean Palette and then click in the design window.
The GUI Window:	This window displays the applet as it is being wired together. It allows the programmer to test the applet as it is being built and to see how it will appear.

Introduction to the Design Window: The Simple Function Plotter

[ToC]

The applet displayed in the above screen shot is a simple function plotter. It uses the following beans:

BEAN:	FUNCTION [1]:	ROLE IN FUNCTION PLOTTER:
OMStringBox	TextField which takes in a String and sends an OMString to all listeners. This bean allows the user to enter in a String in a TextField. The String is then sent as an OMString to all listeners (such as a Codec bean). The String is sent when either the enter key is hit or the bean loses focus. The TextField can also receive events containing OMStrings and display them.	This bean presents the user with a text box in which to enter the function.
MapleDecoder	Maple OMString to OMObject converter. This bean takes in an OMString and converts it to an OMObject using the MapleOMCodec.	When the "Graph" button is clicked, this bean listens for the string of characters that the user has entered in the "OMStringBox" text area and converts the string into a mathematical entity.
EventButton	A simple ActionEvent generating Button bean. This bean is a simple button that generates an ActionEvent. Its title may be set by introspection. The Button was created to allow a button that would work with Sun's Java Studio, and conform to the 1.1 event model. (may not be supported in future releases)	The plotter uses two of them: one labeled "Graph" to trigger the graphing process and another labelled "Clear" to clear the graph.
GenerateFixedPoints	This bean listens for an EventObject (like the one generated by EventButton). When received it sends an OMApplication list of vectors to all OMEventListeners. Each vector is an (x,x) pair, where each x is separated by StepValue, and falls between MinValue and MaxValue. The bean effectively generates a set of points to be modified by a function bean.	When the "Graph" button is clicked, this bean sends the 'x' values to the "GeneralFunction" bean.
GeneralFunction	This bean listens for two OMEvents: an OMApplication list of vectors, and an OMApplication function. The bean outputs the list of vectors with the function applied to each y value. The Function MUST use OMVariable "x" as its variable. Currently, openmath.util.EvalFloat is used to evaluate the function.	When the "graph" button is clicked, this bean listens for the the 'x' values from the "GenerateFixedPoints" bean and the function from the "MapleDecoder" bean. It generates (x,f(x)) pairs.
PointPlotter	This bean takes in an OMApplication list of vectors and plots them with dots on a cartesian grid. Presently datapoints that fall outside of the graph area are discarded!!!	When the "graph" button is clicked, this bean listens for (x,f(x)) pairs from the "GeneralFunction" bean. It plots line segments between successive (x,f(x)) pairs on a cartesian axis.

Activity 1: Reproduce the Function Plotter

[ToC]

Purpose:	to become acquainted with the Java Studio programming environment
Overview:	In this activity, you will use Java Studio to reproduce the simple function plotter described above.
Procedure:
1.	Load Java Studio
2.	Ensure that you have the OpenMath beans. They should be found in the "User" class of the Bean Palette. The Bean Palette should look like this: If you do not have the OpenMath Beans you will need to download them and import them. Follow the instruction on the PDG download page.
User Tip	As they appear in the palette, most of the beans are represented by the generic OpenMath bean icon: In order to discover the name of a particular bean, hold the mouse pointer over top of it without clicking; its name will appear momentarily.
3.	The simple function plotter uses the following beans: OMStringBox MapleDecoder EventButtons (2 of them) GenerateFixedPoints GeneralFunction PointPlotter You need to incorporate each of these beans in the Design Window as follows: Find the OMStringBox bean in the Bean Palette and click on it. Click on the Design Window in roughly the position that you want to place the bean in the window. The bean will appear in the Design Window represented by a Design Window bean icon. You will be asked to customize the attributes of the bean. Foe this activity there are only three customizations that you need to take care of: make sure that the label on the first EventButton bean is "Graph" make sure that the label on the second EventButton bean is "Clear" make sure that for the PointPlotter bean, you set drawLines to "true" and drawPoints to "false" Lay out the rest of the Design Window with the beans arranged as follows:
4	You now need to "wire together" the beans that you have brought into the Design Window. You connect the beans by joining output (event triggering) connectors, located on the right of the bean image, to input (event listening) connectors, located on the left of the bean image. You connect output connectors to input connectors by clicking and holding on the output connector and dragging to the appropriate input connector. Acceptable connections are indicated by the connecting wire turning green while "illegal" connections are indicated by the connecting wire turning red. Wire up the beans as indicated in the screen shot of the Java Studio development environment at the top of this page.
5	As a final step, arrange and size the function plotter components in the GUI Window. You may have been tempted to do this as you brought the beans into the Design Window. There is nothing wrong with doing it this way; the components can be rearranged and resized at any time. Once you are satisfied with the appearance of your plotter, if you wish, you can generate an Applet under the "Generate" menu of the Bean Palette. Click here to view the working applet.

[ToC]

Wiring Beans: Component-based, Event-Driven Program Design

Beans communicate with each other by sending and receiving action events. As an example, consider the PointPlotter bean as it appears in the JavaStudio design window:

The OpenMath PointPlotter Bean[2]
The connectors on the left and right hand sides of the bean correspond to different types of events. The connectors on the left side correspond to events that the bean can respond to or "listen for" and the connector on the right side corresponds to events that the bean can send to trigger events in other beans. The PointPlotter plotter bean is a visible bean which creates a cartesian axis for plotting points, lines, and polygons. It can listen for seven different classes of events which prompt it to do such things as perform analysis on incoming data and clear the plotting surface. It can send only one class of event: typically an event packaged with data containing ordered pairs corresponding to the points plotted on its surface. If a programmer wanted the PointPlotter bean to repsond to a button click telling it to clear its plotting surface, then he would add and "wire up" an EventButton bean as follows:
EventButton connected to PointPlotter

EventButton "wired to" PointPlotter
In this case, the EventButton bean sends an "actionPerformed" event to the "clearPoints" listener of the PointPlotter bean.

Activity 2: Modify the Function Plotter

[ToC]

Purpose:	to use OpenMath beans and beans supplied with Java Studio to modify the function plotter to allow the user to set 'x' and 'y' scalings and set the step value.
Overview:	In this activity, you will make modifications to the function plotter that will allow the user to adjust the step value and the scaling of the domain and range. You will also create labels for your step value , domain, and range settings.
Procedure:
1.	Load Java Studio and load the simple function plotter of activity 1.
2.	The first thing modification that you are going to make is to give the user a box in which she can adjust the step value. (The step value is the distance between successive 'x' values used to generate (x,y) pairs. A smaller step value will produce a smoother graph but take longer to process if performance is a consideration.) You will need to add an OMFloatBox bean and make the appropriate connection. When looking for the appropriate connection, consider which bean is responsible for producing the (x,y) pairs. After you have wired it up, test your step value control to make sure that it works. You will also need to label the step value box in the GUI window. The "Label" bean is found in the GUI tab of the bean palette.
3.	The next modification will be to give the user boxes in which he can set the minimum and maximum 'y' values. Add two more OMFloatBoxes. To wire them up, you will need to find the appropriate connections; consider which beans have a direct role in processing and displaying the data. Once your controls are working, add labels as in step 2.
4.	Finally, you will need to give the user boxes in which she can set the minimum and maximum 'x' values. This is a little bit more complicated because two different OpenMath beans want to know what the maximum and minimum 'x' values are: GenerateFixedPoints needs to know what domain to generate fixed points on and PointPlotter wants to know what values to display. This creates a problem because OMFloatBoxes only have one output connector. Follow these steps: Add two more OMFloatBoxes. Go to the "Data Flow" tab of the bean palette and find the "Distributor" bean. Add two of these. Wire the OMFloatBox to the Distributor. The Distributor bean has two output connections and will broadcast data from the OMFloatBox through both of these connections. For each Distributor, you will need to make a connection to both GenerateFixedPoints and PointPlotter. Find and make the appropriate connections. Once your controls are working, add labels. Click here for a screen shot of the design window of a solution for this activity. Note: When reloading applets that have OMFloatBoxes into JavaStudio, you may have problems with values in these FloatBoxes being interpreted properly when the applet is tested in the JavaStudio test environment. The solution for this is to delete and reinsert any eventButtons that are involved with triggering the sending of input from these float boxes for processing. See the section on Design and Builder Environment Considerations for more information. Click here to view the working applet.

Exercises:

[ToC]

1.	Modify the function plotter of Activity 2 to to allow the user to see what happens when translations are applied to the 'x' and 'y' variables. You should add two more OMFloatBoxes to the design corresponding to translations on 'x' and 'y' respectively. Click here for a screen shot of the design window of a solution for this exercise.
2.	Design and test an applet that allows users to create a filled polygon and then apply 'x' and 'y'translations to the polygon. You will need the following beans: the PointPlotter: make sure that you customize it to allow the user to create filled polygons by clicking on the graph surface. TranslatePoints two OMFloatBox beans: one for the 'x' translation and the other for the 'y' translation two EventButton beans: one to trigger the translation and the other to clear the graph for a new polygon. a Hold bean: the purpose of this bean is to make sure that the translation occurs only when the "Translate" button is pushed. at least a couple of Label beans to indicate the 'x' and 'y' translations Click here for a screen shot of the design window of a solution for this exercise. Click here to view the working applet.
3.	Design and test an applet that allows users to create a filled polygon and then apply a rotation to the polygon. You will need the following beans: the PointPlotter: make sure that you customize it to allow the user to create filled polygons by clicking on the graph surface. GenerateRotationMatrix ApplyMatrix an OMFloatBox for the rotation angle (this defaults to radians) two EventButton beans: one to trigger the rotation and the other to clear the graph for a new polygon. a Hold bean a label bean for the rotation float box Click here for a screen shot of the design window of a solution for this exercise.
4.	Modify the polygon rotation of exercise 3 to accept rotation angles in degrees. You will need to add a MultiplyOMFloat bean (the conversion factor for converting degrees to radians is 0.017453293). Click here for a screen shot of the design window of a solution for this exercise. Click here to view the working applet.
5.	Create a filled polygon applet that allows users to apply horizontal and vertical scaling factors to the polygon. This can be accomplished by replacing the GenerateRotationMatrix beans in exercises 3 and 4 with a GenerateScalingMatrix bean. You will also need two OMFloatboxes: one for the horizontal scaling factor and one for the vertical scaling factor. Click here for a screen shot of the design window of a solution for this exercise.
6.	Create a filled polygon applet that allows users to translate, rotate, and apply horizontal and vertical scaling factors to the polygon. Click here to view the working applet.

Design and Builder Environment Considerations:

[ToC]

Except where indicated, the comments in this section reflect the authour's experiences with JavaStudio 1.0 and Bean Development Kit/Bean Box running in a UniX environment on a Silicon Graphics O2 (R10000, 195MHz) workstation. You may have better (or worse) luck on a different platform.

As noted in the introduction, JavaStudio 1.0 presents an excellent design and testing environment for JavaBeans programming however it seems to fail when generating applets. The applet generation routines execute without reporting errors, however the applets will not run on any platform. (At least, they will not run on the three platforms on which they were tested: Macintosh, WindowsNT, and UNIX.) In view of this, the adopted strategy for producing applets using the OpenMath JavaBeans included two stages:

design and test the applet with the help of Java Studio
rebuild and generate it in another building environment.

Initially, the building environment that I worked with was Sun's standard Bean Development Kit/Bean Box. This seemed to reasonably well however I began to run into problems when attempting to reload designs that I had worked on previously. I would frequently receive a message stating that the loading of the design failed because a particular component in the design could not be restored properly. Another point of note is that sometimes even when a design did reload succesfully, it would not run properly in the JavaStudio test environment. When this occurred, the error was always the same: numerical input was doubled, tripled or quadrupled, etc. depending on the number of times that the design had been reloaded. For example, for a tranlstor applet that had been reloaded once, an 'x' translation specified to be '2' would result in the applet creating an 'x' translation of '4'. The fix for this turned out to be to delete and reinsert the event button that triggered the translation event.

Finally, it was decided that I should try Borland's JBuilder 2 (Professional Edition) running on a WindowsNT machine. In this environment I recreated and built the applets that I had originally designed and tested in JavaStudio. The resulting applets did not run quite as smoothly as they did in the JavaStudio testing environment. The major differences seem to be associated with the function of the event buttons and are as follows:

it seems to be necessary to send numerical input from OMFloatBoxes to connected event listeners by striking the enter key rather than clicking on the appropriate event button. (JavaStudio accepted both forms of event trigger.)
when the enter key is pressed, numerical input often disappears from the OMFloatBox.

I have attempted to note the differences between the behaviour of the applet in the JavaStudio test window and the behaviour of the final applet on the pages where the applet is posted. I will also attempt to find a remedy for these anomalies.

footnotes:

[ToC]

[1]	The descriptions in this column are paraphrased from the PolyMath Development Group's documentation for the 0.5 release of the OpenMath Beans.
[2]	The OpenMath PointPlotter bean is one of the beans in the PolyMath Development Group's 0.5 alpha release of OpenMath Java packages. These packages are described on the PDG's Java OpenMath Library page.