JavaBeans Short Course: BDK Introduction with John Wayne

Print-friendly Version

[Tutorial Contents]
[Behavior] [API Docs] [Exercise] [Solution]

Help is available for each task, or you can go straight to the solution source code.

Task 1

From a command shell, change directories to the BDK installation directory. From there, change directories to the beanbox subdirectory, and execute the run.bat (Windows) or run.sh (UNIX) script. This will bring up the BeanBox.

If in a MageLang directed lab, it is installed locally, ask the instructor where. If not, you will have to install yourself from the net.

• cd beanbox
• run [Windows NT/95]
• run.sh [UNIX]

Task 2

The BeanBox actually consists of three things: the Tool Box, the Bean Box itself, and the Property Sheet. The Tool Box and Property Sheet are only shown when in design mode. To hide/show them, select the first menu item under the View menu. Before continuing, make sure they are displayed.

Tool Box
Bean Box
Property Sheet

Task 3

The active/current Bean has a dashed-angled line around it. Initially, this is the BeanBox. The Property Sheet lists all the properties for the current Bean. To change a property, select it on the sheet. This brings up the property editor if available, or you can edit its value directly when not. For example, if you click on the background box, it will bring up the BeanBox's ColorEditor. If you click on the 'Abcde...' for the font, it will be up the FontEditor. If you click on the box by the name, you can directly type in a name for the BeanBox panel. For now, just change the background color of the BeanBox to white.

The left column has the property name, the right column is what you need to select.

Color Editor
Font Editor

First, select the gray box next to the background property. This brings up the Color Editor. Then find the 'white' entry in the pull-down Choice object. This changed the background. Select the Done button to hide the Color Editor window. You can also enter 255,255,255 in the text field next to the pull-down.

Task 4

To place something in the BeanBox, select it from the Tool Box and place it in the BeanBox. For show-and-tell, lets place a JellyBean, Molecule, ExplicitButton, SorterBean, EventMonitor, and ChangeReport within the BeanBox. Since the BeanBox is a 'live' environment, you can drag your mouse over the Molecule to rotate it, or select the SorterBean to have it 'sort' its lines.

Notice that once you have selected something from the Tool Box, the cursor changes to a crosshair, however there is no way to tell WHICH Bean was selected. Other tools may implement this differently.

If you happen to place a Bean at a bad spot, you can move it by selecting the highlighted outline.

Some Beans have an icon next to their entry in the Tool Box. This means that there is a special support class available for it called BeanInfo.

Task 5

First, lets take a look at the ExplicitButton. One way to look at it, is to have the BeanBox use introspection and generate a report about it. Select the 'press' ExplicitButton, then select the 'Report' option under the 'Edit' menu. This generates a report to standard output for the Bean. The first part looks like the following:

Properties:
    foreground        class java.awt.Color
        getForeground/setForeground
    label             class java.lang.String
        getLabel/setLabel
    background        class java.awt.Color
        getBackground/setBackground
    font              class java.awt.Font
        getFont/setFont

The four properties correspond to the four entries on the PropertySheet. Basically, for every get/set pair of routines, a property is defined. If there is only a getter routine, it is read-only. If only a setter routine, it is considered write-only.

Events work in a similar way. Each 'event' is a subclass of EventObject. While listeners for these events implement the empty EventListener interface.

Event sets:
  actionPerformed
    addActionListener/removeActionListener
    actionPerformed
  propertyChange
    addPropertyChangeListener/
    removePropertyChangeListener
    // Note: The above two lines
    // need to be typed on the same line
    // in order to compile correctly
    propertyChange

These events are listed under the 'Events' menu item, under the 'Edit' menu. If you select one from the menu, a red line appears for you to notify a target when the event happens. Then you pick a public method to call from the target's list.

To demonstrate this concept, have the ExplicitButton Bean notify the ChangeReport Bean when the ExplictButton changes any properties. First, make sure the ExplicitButton is selected, then do the following:

• Select the 'Edit' menu.
• Select the 'Events' sub-menu.
• Select the 'bound property change' sub-menu.
• Select the 'propertyChange' menu item.
• Attach the red line to the ChangeReport text field Bean by selecting it.
  This can be a little tricky. Imagine where the highlight would appear around the object and select there. Once you get it, the 'EventTargetDialog' will appear, listing all the public methods of the Bean.
• Select the reportChange method from the list.
• Select the OK button.

Now, whenever you change any property of the ExplicitButton, the ChangeReport Bean will be notified. The method happens to report the change in the text field. Change the button's label and foreground/background to demonstrate.

The 'EventTargetDialog' window contains all the public methods of a Bean. If you don't want someone to call something, you have to make it private or protected.

Task 6

Also, attach the 'actionPerformed' method of the ExplicitButton to the EventMonitor text area. Have it call its initiateEventSourceMonitoring method. Now, whenever any event happens with the ExplicitButton Bean as the source, you will see a message appear in the text area.

• Select the ExplicitButton
• Select the 'Edit' menu.
• Select the 'Events' sub-menu.
• Select the 'button push' sub-menu.
• Select the 'actionPerformed' menu item.
• Attach the red line to the EventMontitor TextArea Bean by selecting it.
  This can be a little tricky. Imagine where the highlight would appear around the object and select there.
• Select the iniateEventSourceMonitoring method from the list.
  The list displays public methods which either have no parameters or parameters of the type used by the method selected; in this case, ActionEvent with actionPerformed.
• Select the OK button.

Task 7

Now, let's take a look at the JellyBean. We'll use it to demonstrate how to bind one Bean's properties to another. That way, when one Bean changes, the change propagates and automatically changes others. We are going to bind the JellyBean's color property to the background of the ExplicitButton bean we've been using. First, make sure the JellyBean is selected, then do the following:

• Select the 'Edit' menu.
• Select the 'Bind property...' menu item to bring up the 'PropertyNameDialog' dialog.
• Select the color property from the list.
• Select the OK button.
• Attach the red line to the ExplicitButton to bring up its 'PropertyNameDialog'.
• Select the background property from the list.
• Select the OK button.

The first thing you should notice is the background immediately changed to the JellyBean's color. This should have triggered changes to the EventMonitor and ChangeReporter. Also, if you change the JellyBean color, the ExplicitButton background will automatically change too now.

The 'PropertyNameDialog' window contains the bindable properties of a Bean.

Task 8

Lets clear out the BeanBox and do one more thing. Select the 'Clear' option under the 'File' menu. Notice that the BeanBox doesn't warn you that the box hasn't been saved yet. The BeanBox source is included with the BDK if you wish to modify it to support prompting before clearing.

Task 9

For our last task, we are going to use the Juggler Bean. This is Duke, juggling some coffee beans. Place a Juggler and two ExplicitButton beans in the BeanBox.

Task 10

Label one ExplicitButton bean 'Stop', and have it call the Juggler's stopJuggling method when it is selected.

• Select the Start ExplicitButton
• Change the label to Start on the PropertySheet.
• Select the 'Edit' menu.
• Select the 'Events' sub-menu.
• Select the 'button push' sub-menu.
• Select the 'actionPerformed' menu item.
• Attach the red line to the Juggler Bean by selecting it.
• Select the startJuggling method from the list.
• Select the OK button.

Task 11

Label the other ExplicitButton bean 'Start', and have it call the Juggler's startJuggling method when it is selected. You can now turn off design mode and you have a fully functional program.

• Select the Stop ExplicitButton
• Change the label to Stop on the PropertySheet.
• Select the 'Edit' menu.
• Select the 'Events' sub-menu.
• Select the 'button push' sub-menu.
• Select the 'actionPerformed' menu item.
• Attach the red line to the Juggler Bean by selecting it.
• Select the stopJuggling method from the list.
• Select the OK button.

The end result should look something like the following:

Task 12

Finally, let's save our work. Select 'Save' under the 'File' menu and save the file as duke.ser. The .ser extension stands for serialized. It is not a required extension but is customary.

Task 13

You can now exit the BeanBox, restart, and reload duke.ser to return to your prior state.

To exit, select the 'Exit' option under the 'File' menu.

To reload, select the 'Load' option under the 'File' menu.

Notice that the background color of the BeanBox itself is not restored. Only the information about the Beans within it.

Copyright © 1997 MageLang Institute. All Rights Reserved.