Home  |  Software Components  |  Examples  |  Books  
   Beanbox Example -> Interface

Design the User Interface

We will create a graphical user interface for the financial calculator in this step.   We will build the interface from the cedarspring.TVM and getObjects.BigDecimalField beans that we downloaded in steps 1 and 2, and the OurButton and  ChangeReporter beans that are included as samples in the Bean Development Kit (BDK).  

Start the BeanBox

Set your default directory  to the /beanbox subdirectory located at the top of the BDK directory structure that was created during the installation. Enter "run.sh" if you are using a Unix system, or "run.bat" if you are using a Windows system.  In either case, the command will run a batch file that starts the BeanBox tool.  Three panels should appear.  The left panel (ToolBox) contains a list of Beans that are available for you to manipulate.  The center panel (BeanBox) is used to visually assemble the Beans.  The right panel contains the property sheet for the currently selected Bean which you can use to modify the Bean's properties.

An image of the BeanBox consisting of a ToolBox, BeanBox, and Properties Sheet.

 

If you do not see the TVM and BigDecimalField beans on the ToolBox panel, make sure that they were moved into the /jars subdirectory during the bean installation steps.

 

Add The Interface Objects

Move the cursor to the ToolBox panel and click once on the BigDecimalField bean.   The cursor should change to a cross. Now, move the cursor to the upper-left corner of the middle BeanBox panel and click once on the surface.   A text entry field should appear.  Move the cursor back to the ToolBox and click on OurButton.  Move the cursor to the BeanBox again and position it on the right side of the entry field you just added and click once.  A button should appear.  Click on the button to highlight it (a black border will surround the button).  In the Properties panel on the far right, change the label property to "Present Value".  Adjust the field and button if necessary so they are in a horizontal line as shown in the image below. 

An entry field is on the left. A compute button labeled Present Value is on the right.

 

Add four additional rows of BigDecimalField and OurButton pairs.   Label the buttons: Future Value, Payment, Rate, and Periods.

Add another OurButton after the last row.  Stretch it so that it as wide as both fields above it.  Label the button "Clear".

Finally, add a ChangeReporter bean from the ToolBox just below the Clear button.  This field will be used to display error messages.   Stretch the field so that it is as wide as the Clear button above it.

The complete interface should now look like this:

a column of 5 entry fields on the left, aligned with 5 compute buttons on the right.  A clear button and message field is at the bottom

 

Save a Copy of the Interface

Choose File-->Save from the pulldown menu of the BeanBox panel.  Enter GUI.tmp as the file name and click Save.  Now you can restore the interface at any time by selecting File-->Load from the pulldown menu and entering gui.tmp as the file to load. 

 


 
Copyright ©1998-2004 GetObjects.com  All Rights Reserved
Privacy | Legal & Terms of Use | Trademarks | Feedback | About