Tutorial: Creating an Employee Record Application with Basic
Application Beans
Introduction
This tutorial creates an application in VisualAge for Java that allows entry and
editing of employee records. Doing this tutorial allows you to see how Basic
Application Beans (BAB) work and the value they bring to your application development
efforts.
Importing Basic
Application Beans
To import the Basic Application Beans (BAB) into the bean pallette:
- Select File - Import from the Workbench menu bar. The SmartGuide
Import panel displays.
- Select Jar file and click Next. The SmartGuide
Import from a Jar/Zip file panel displays.
- Click the Browse button next to the Filename field and select the baball.jar
from the directory where you stored the jar.
- With the baball.jar selected, clcik Open. You are returned to the
SmartGuide Import from a Jar/Zip file panel.
- Check the class box.
- It is a good idea to set up a project that you use to import beans into VisualAge for
Java. Enter the project name in the Project field.
- Click Finish. The Modify Pallette panel displays.
- Select all of the com.ibm.bab beans in the Available beans pane and
click the New Category button next to the Palette pane.
- Enter BAB as the new category and click Add to Category.
An information window appears as the beans are added.
- Click OK. You are returned to the Workbench panel.
Importing the Salary1 Project File
In this section, you import salary1.dat.
- From the Workbench, right click on the empty space of the All Projects
pane. A pop-up menu displays.
- Select Import from the menu. The SmartGuide Import panel
displays.
- Select Repository as the import source and click Next.
The Import from another repository panel displays.
- Click the Browse button next to the Repository text field.
- Navigate to where you unzipped bab100p.zip. and then samples\salary1\vajsalary1.dat.
- Select vajsalary1.dat and click Open.
- Select Projects and the click the Details button.
- Click the SalaryStage1 checkbox and then OK .
- Click Finish.
Creating the Salary1 Project
You are now ready to create the SalaryStage1 project.
- From the Workbench panel, choose Selected - Add - Project. The
SmartGuide Add Project panel displays.
- Select Add project from the repository. A list of projects
displays in the Available project names pane.
- Click the SalaryStage1 project.
- Click Finish. SalaryStage1 is added to the Workbench All Projects
list.
- Double-click the SalaryStage1 project. The SalaryStage1 package
panel displays.
- Open the Visual Composition Editor (VCE) by:
- Double-click the salary1 package. The salary1 Class Hierarchy
panel displays.
- Double-click the SalaryFrame class. The VCE displays with
SalaryFrame class loaded into it
Adding the BABApp Bean
In this section, you add the BABApp bean to the salary1 package.
- Click the palette selection button at the top of the bean palette and
select BAB.
- Click the BABApp icon and drop it outside the JFrame on the Visual
Composition Editor (VCE) canvas.
- Right click on BABApp and select Properties.
- Set the beanName to theApp.
- Set appDescription to Employee Record Application.
- Set appVersion to 1.0.
- Set copyright to 1998.
- Set fileExtension to emp.
Wiring BABApp Properties to
UI Components
With this procedure, you wire BABApp properties, appMainFrame, toolbar, and statusbar,
to the corresponding UI components.
- Right click on theApp and select Connect - Connectable Features.
The Start connection from (theApp) panel displays.
- Select appMainFrame from the list of properties and click OK.
- Connect the wire to the JFrame by clicking on the JFrame
and select this.
- Connect the toolbar and statusbar properties in the
same manner as appMainFrame. The toolbar is located at the top of the JFrame and has
the SatusBar button on it. The statusbar is located at the bottom of the JFrame.
When connecting the statusbar, it is easy to get the JFrame instead of the status bar.
As you move the wire over the bottom lines, look for the narrow set of dotted lines
which outline the statusbar. If you are over the JFrame, the dotted lines outline
the whole JFrame.
- Save and generate the code by clicking the Run button.
Initializing the BABApp
You are now ready to add code to initialize the application.
- From the Class Hierarchy panel, scroll the methods list pane to find the Initialize
method.
- Double-click the Initialize method. The source code for the Initialize
method displays in the Source pane.
- Add gettheApp().init(); to the user code (2) section.
- Select File - Save Workspace.
Hiding and Showing the
Toolbar
You now use the ToggleToolBarAction bean to hide or show the Toolbar.
- Select the ToggleToolbarAction bean and drop it outside the JFrame near
the View menu.
- Select the BCheckBoxMenuItem and drop it on the View menu.
- Right click the BCheckBoxMenuItem and select Properties.
- Set text to Show Tool Bar.
- Right click the BCheckBoxMenuItem and select Connect - Connectable Features.
- Select targetAction and click OK
- Click the ToggleToolBarAction bean and select this to
connect the wire.
Hiding and Showing
the Statusbar
In this section, you use the ToggleStatusBarAction bean to hide or show the Statusbar.
- Select the ToggleStatusbarAction bean and drop it outside the JFrame
near the View menu.
- Select the BCheckBoxMenuItem and drop it on the View menu.
- Right click the BCheckBoxMenuItem and select Properties.
- Set text to Show Status Bar.
- Right click the BCheckBoxMenuItem and select Connect -
Connectable Features.
- Select targetAction and click OK
- Click the ToggleStatusBarAction bean and select this to
connect the wire.
- Right click the StatusBar button on the toolbar and select Connect
- Connectable Features.
- Click the ToggleStatusAction bean and select this connect
the wire.
Adding Look and
Feel Functionality
In this section, you add Windows, Metal, and Motif Look and Feel to the application.
- Add a BButton to the toolbar for each look and feel -
Windows, Metal, and Motif. Set textVisible
to false.
- Add a BRadioButtonMenuItem to the View menu for each
look and feel.
- Add the WindowsAction, MetalAction and MotifAction
beans outside the JFrame.
- Wire the respective BButtons and BRadioButtonMenuItems
to the respective action beans using the targetAction property.
Importing the
Salary2 Project File
In this section, you import salary2.dat.
- From the Workbench, right click on the empty space of the All Projects
pane. A pop-up menu displays.
- Select Import from the menu. The SmartGuide Import panel
displays.
- Select Repository as the import source and click Next.
The Import from another repository panel displays.
- Click the Browse button next to the Repository text field.
- Navigate the path to where you unzipped bab100p.zip. and then samples\salary1\vajsalary2.dat.
- Select vajsalary2.dat and click Open.
- Select Projects and the click the Details button.
- Click the SalaryStage2 checkbox and then OK .
- Click Finish.
Creating the Salary2
Project
You are ready to add the Salary2 project to the Workbench.
- From the Workbench panel, choose Selected - Add - Project. The
SmartGuide Add Project panel displays.
- Select Add project from the repository. A list of projects
displays in the Available project names pane.
- Click the SalaryStage2 project.
- Click Finish. SalaryStage2 is added to the Workbench All Projects
list.
- Double-click the SalaryStage2 project. The SalaryStage2 package
panel displays.
- Open the Visual Composition Editor (VCE) by:
- Double-click the salary2 package. The salary2 Class Hierarchy
panel displays.
- Double-click the SalaryFrame class. The VCE displays with
SalaryFrame class loaded into it
Implementing the Undo and Redo
Actions
In this section, you add Undo and Redo to the Edit menu.
- Select and drop an UndoAction bean outside the JFrame.
- Add a BMenuItem to the edit menu for the UndoAction
bean.
- Right click the BMenuItem and select Properties.
- Set text to Undo.
- Exit the property sheet.
- Right click the BMenuItem and select Connect - Connectable
Features.
- Select targetAction and click OK
- Click the UndoAction bean and select this to connect
the wire.
- Add a BButton to the tool bar.
- Right click the BButton and set text to Undo.
- Exit the property sheet.
- Right click the Undo button on the toolbar and select Connect -
Connectable Features.
- Click the UndoAction bean and select this connect the
wire.
- Repeat the above steps for the RedoAction bean
Implementing the Clear Fields
Action
In this section, you add a clear action which clears the text fields.
- Select and drop a BAction bean outside the JFrame.
- Right click the BAction bean and select Properties.
- Set:
- actionName to Clear
- beanName to ClearAction
- shortDescription to clears data fields
- Navigate to where you unzipped bab100p.zip. and then samples\VAJava.text.
- Copy the code from Phase2 Task3. This is the code for ClearAction.
- Right click the ClearAction bean and select Properties - Event
to Code. The Event to Code window displays.
- Highlight the code after the comment and paste the code from VAJava.text
to replace it.
- Click OK. An actionPerformed connected to the ClearAction is
added to the VCE.
Adding the Clear Buttons
With this procedure, you add Clear buttons to the application.
- Right click the Clear button located inside the JFrame and select Connections
- Connectable Features.
- Select targetAction and click OK.
- Right click the ClearAction bean and select this to
connect the wire.
- Add a BMenuItem to the Edit menu.
- Right click the BmenuItem, select properties, and set text to Clear.
- Exit the property sheet.
- Right click Clear menu item and select Connections - Connectable Features.
- Select targetAction and click OK.
- Right click the ClearAction bean and select this to
connect the wire.
- Add a BButton to the tool bar.
- Right click the BmenuItem, select properties, and set text to Clear.
- Exit the property sheet.
- Right click Clear menu item and select Connections - Connectable Features.
- Select targetAction and click OK.
- Right click the ClearAction bean and select this to
connect the wire.
Importing the
Salary3 Project File
In this section, you import salary3.dat.
- From the Workbench, right click on the empty space of the All Projects
pane. A pop-up menu displays.
- Select Import from the menu. The SmartGuide Import panel
displays.
- Select Repository as the import source and click Next.
The Import from another repository panel displays.
- Click the Browse button next to the Repository text field.
- Navigate the path to where you unzipped bab100p.zip. and then samples\salary1\vajsalary3.dat.
- Select vajsalary3.dat and click Open.
- Select Projects and the click the Details button.
- Click the SalaryStage3 checkbox and then OK .
- Click Finish.
Creating the Salary3 Project
You are ready to add the Salary3 project to the Workbench and open it in the Visual
Composition Editor.
- From the Workbench panel, choose Selected - Add - Project. The
SmartGuide Add Project panel displays.
- Select Add project from the repository. A list of projects
displays in the Available project names pane.
- Click the SalaryStage3 project.
- Click Finish. SalaryStage3 is added to the Workbench All Projects
list.
- Double-click the SalaryStage3 project. The SalaryStage3 package
panel displays.
- Open the Visual Composition Editor (VCE) by:
- Double-click the salary3 package. The salary3 Class Hierarchy
panel displays.
- Double-click the SalaryFrame class. The VCE displays with
SalaryFrame class loaded into it
Implementing File Commands
In this section, you add file commands to the file menu and toolbar.
- Select the ExitAction bean and drop it near the File
menu.
- Right click the Exit item on the File menu and select Connect
- Connectable Features.
- Select targetAction and click OK.
- Click on the ExitAction bean and select this to
connect the wire.
- Select the SaveAsAction bean and drop it near the File
menu.
- Right click the SaveAs item on the File menu and
select Connect - Connectable Features.
- Select targetAction and click OK.
- Click on the SaveAsAction bean and select this to
connect the wire.
- Select the SaveAction bean and drop it near the File
menu.
- Right click the Save item on the File menu and select Connect
- Connectable Features.
- Select targetAction and click OK.
- Click on the SaveAction bean and select this to
connect the wire.
- Right click the New button on the toolbar Connect - Connectable
Features.
- Select targetAction and click OK.
- Click on the NewAction bean and select this to connect
the wire.
- Right click the Open button on the toolbar Connect -
Connectable Features.
- Select targetAction and click OK.
- Click on the OpenAction bean and select this to
connect the wire.
- Right click the Save button on the toolbar Connect -
Connectable Features.
- Select targetAction and click OK.
- Click on the SaveAction bean and select this to
connect the wire.
Connecting Text Fields to theModel
You connect the Name, Social Security #, Age, and Salary text fields to theModel
in this section.
- Right click the Name text field and select Connect - text.
- Click theModel and select Connectable Features - Name.
- Doble-click the wire you just connected.
- Click Show expert features and select focusLost from
Source Event.
- Click OK.
- Repeat the above steps for Social Security #, Age and Salary
text fields.
Connecting theModel and
theApp
In this section, you connect theModel and theApp.
- Right click theApp and select Connect - Connectable Features.
- Select theModel property and click OK.
- Click theModel and select this.
- Right click theModel and select Connect - Connectable Features.
- Select propertyChange event and click OK.
- Click theApp and select Connectable Features.
- Select the modelChanged method and click OK.
Implementing
Open and New File Commands
With this procedure, you add the Open and New file commands.
- Select the OpenAction bean and drop it near the File
menu.
- Right click the Open item on the File menu and select Connect
- Connectable Features.
- Select targetAction and clcik OK.
- Click on the OpenAction bean and select this to
connect the wire.
- Select the NewAction bean and drop it near the File
menu.
- Right click the New item on the File menu and select Connect
- Connectable Features.
- Select targetAction and clcik OK.
- Click on the NewAction bean and select this to connect
the wire.
Implementing
a NewModelListener for theApp
You add a listener which notifys theApp at the start of a new model.
- Right click theApp.
- Select Event to Code.
- Select newModelAvailable from theApp event field.
- Add the code from VAJava.text for Phase3 Task3.
- Click OK.
- Click the Run button to run the application.
