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:
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
Label one ExplicitButton bean 'Stop', and have it call the Juggler's stopJuggling
method when it is selected.
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.
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.
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.