JavaBeans Short Course

Print-friendly Version

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

This exercise takes you on a tour of the Beans Development Kit (BDK) 1.0. It introduces the BeanBox, a test Bean container, and demonstrates some of the example Beans. Finally, it walks you through the process of connecting some of the example Beans together to provide a juggling John Wayne, a.k.a. The Duke.

Perform the following tasks:

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.
   
   
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.
   
   
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.
   
   
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.
   
   
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.

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.
   
   

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.

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.
   
   
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.
   
   
10. Label one ExplicitButton bean 'Stop', and have it call the Juggler's stopJuggling method when it is selected.
    
    
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.
    
    
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.
    
    
13. You can now exit the BeanBox, restart, and reload duke.ser to return to your prior state.
    
    

The task numbers above are linked to the step-by-step help page. Also available is a complete solution to the problem, and expected behavior, to demonstrate it.

Copyright © 1997 MageLang Institute. All Rights Reserved.