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.  

salary1.gif (5995 bytes)

Importing Basic Application Beans

To import the Basic Application Beans (BAB) into the bean pallette:

  1. Select File - Import from the Workbench menu bar.  The SmartGuide Import panel displays. 
  2. Select Jar file and click Next.  The SmartGuide Import from a Jar/Zip file panel displays. 
  3. Click the Browse button next to the Filename field and select the baball.jar from the directory where you stored the jar. 
  4. With the baball.jar selected, clcik Open. You are returned to the SmartGuide Import from a Jar/Zip file panel.
  5. Check the class box.
  6. 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.
  7. Click Finish.  The Modify Pallette panel displays.
  8. Select all of the com.ibm.bab beans in the Available beans pane and click the New Category button next to the Palette pane.
  9. Enter BAB as the new category and click Add to Category.   An information window appears as the beans are added.  
  10. Click OK.  You are returned to the Workbench panel.

Importing the Salary1 Project File

In this section, you import salary1.dat.

  1. From the Workbench, right click on the empty space of the All Projects pane.  A pop-up menu displays.
  2. Select Import from the menu.  The SmartGuide Import panel displays.
  3. Select Repository as the import source and click Next.   The Import from another repository panel displays.
  4. Click the Browse button next to the Repository text field. 
  5. Navigate to where you unzipped bab100p.zip. and then samples\salary1\vajsalary1.dat.    
  6. Select vajsalary1.dat and click Open.
  7. Select Projects and the click the Details button.  
  8. Click the SalaryStage1 checkbox and then OK
  9. Click Finish. 

Creating the Salary1 Project

You are now ready to create the SalaryStage1 project.

  1. From the Workbench panel, choose Selected - Add - Project. The SmartGuide Add Project panel displays.
  2. Select Add project from the repository.  A list of projects displays in the Available project names pane.
  3. Click the SalaryStage1 project.
  4. Click Finish.  SalaryStage1 is added to the Workbench All Projects list.
  5. Double-click the SalaryStage1 project.  The SalaryStage1 package panel displays.
  6. Open the Visual Composition Editor (VCE) by:
    1. Double-click the salary1 package.  The salary1 Class Hierarchy panel displays.
    2. 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.

  1. Click the palette selection button at the top of the bean palette and select BAB.
  2. Click the BABApp icon and drop it outside the JFrame on the Visual Composition Editor (VCE) canvas.
  3. Right click on BABApp and select Properties.
  4. Set the beanName to theApp.
  5. Set appDescription to Employee Record Application.
  6. Set appVersion to 1.0.
  7. Set copyright to 1998.
  8. 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.

  1. Right click on theApp and select Connect - Connectable Features. The Start connection from (theApp) panel displays.
  2. Select appMainFrame from the list of properties and click OK.  
  3. Connect the wire to the JFrame by clicking on the JFrame and select this.
  4. 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.   
  5. Save and generate the code by clicking the Run button.  

Initializing the BABApp

You are now ready to add code to initialize the application.

  1. From the Class Hierarchy panel, scroll the methods list pane to find the Initialize method.
  2. Double-click the Initialize method.   The source code for the Initialize method displays in the Source pane.
  3. Add gettheApp().init(); to the user code (2) section.
  4. Select File - Save Workspace.   

Hiding and Showing the Toolbar

You now use the ToggleToolBarAction bean to hide or show the Toolbar.

  1. Select the ToggleToolbarAction bean and drop it outside the JFrame near the View menu.
  2. Select the BCheckBoxMenuItem and drop it on the View menu.
  3. Right click the BCheckBoxMenuItem and select Properties.
  4. Set text to Show Tool Bar.
  5. Right click the BCheckBoxMenuItem and select Connect - Connectable Features.
  6. Select targetAction and click OK
  7. 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.

  1. Select the ToggleStatusbarAction bean and drop it outside the JFrame near the View menu.
  2. Select the BCheckBoxMenuItem and drop it on the View menu.
  3. Right click the BCheckBoxMenuItem and select Properties.
  4. Set text to Show Status Bar.
  5. Right click the BCheckBoxMenuItem and select Connect - Connectable Features.
  6. Select targetAction and click OK
  7. Click the ToggleStatusBarAction bean and select this to connect the wire.
  8. Right click the StatusBar button on the toolbar and select Connect - Connectable Features.
  9. 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.

  1. Add a BButton to the toolbar for each look and feel - Windows, Metal, and Motif.   Set textVisible to false.
  2. Add a BRadioButtonMenuItem to the View menu for each look and feel. 
  3. Add the WindowsAction, MetalAction and MotifAction beans outside the JFrame.
  4. 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.

  1. From the Workbench, right click on the empty space of the All Projects pane.  A pop-up menu displays.
  2. Select Import from the menu.  The SmartGuide Import panel displays.
  3. Select Repository as the import source and click Next.   The Import from another repository panel displays.
  4. Click the Browse button next to the Repository text field. 
  5. Navigate the path to where you unzipped bab100p.zip. and then samples\salary1\vajsalary2.dat.    
  6. Select vajsalary2.dat and click Open.
  7. Select Projects and the click the Details button.  
  8. Click the SalaryStage2 checkbox and then OK
  9. Click Finish. 

Creating the Salary2 Project

You are ready to add the Salary2 project to the Workbench.

  1. From the Workbench panel, choose Selected - Add - Project. The SmartGuide Add Project panel displays.
  2. Select Add project from the repository.  A list of projects displays in the Available project names pane.
  3. Click the SalaryStage2 project.
  4. Click Finish.  SalaryStage2 is added to the Workbench All Projects list.
  5. Double-click the SalaryStage2 project.  The SalaryStage2 package panel displays.
  6. Open the Visual Composition Editor (VCE) by:
    1. Double-click the salary2 package.  The salary2 Class Hierarchy panel displays.
    2. 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.

  1. Select and drop an UndoAction bean outside the JFrame.
  2. Add a BMenuItem to the edit menu for the UndoAction bean.
  3. Right click the BMenuItem and select Properties.
  4. Set text to Undo.
  5. Exit the property sheet.
  6. Right click the BMenuItem and select Connect - Connectable Features.
  7. Select targetAction and click OK
  8. Click the UndoAction bean and select this to connect the wire.
  9. Add a BButton to the tool bar.
  10. Right click the BButton and set text to Undo.
  11. Exit the property sheet.
  12. Right click the Undo button on the toolbar and select Connect - Connectable Features.
  13. Click the UndoAction bean and select this connect the wire.
  14. 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.

  1. Select and drop a BAction bean outside the JFrame.
  2. Right click the BAction bean and select Properties.
  3. Set:
  4. Navigate to where you unzipped bab100p.zip. and then samples\VAJava.text.
  5. Copy the code from Phase2 Task3. This is the code for ClearAction.
  6. Right click the ClearAction bean and select Properties - Event to Code.  The Event to Code window displays.
  7. Highlight the code after the comment and paste the code from VAJava.text to replace it.
  8. 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.

  1. Right click the Clear button located inside the JFrame and select Connections - Connectable Features.
  2. Select targetAction and click OK.
  3. Right click the ClearAction bean and select this to connect the wire.
  4. Add a BMenuItem to the Edit menu.
  5. Right click the BmenuItem, select properties, and set text to Clear.
  6. Exit the property sheet.
  7. Right click Clear menu item and select Connections - Connectable Features.
  8. Select targetAction and click OK.
  9. Right click the ClearAction bean and select this to connect the wire.
  10. Add a BButton to the tool bar.
  11. Right click the BmenuItem, select properties, and set text to Clear.
  12. Exit the property sheet.
  13. Right click Clear menu item and select Connections - Connectable Features.
  14. Select targetAction and click OK.
  15. Right click the ClearAction bean and select this to connect the wire.

Importing the Salary3 Project File

In this section, you import salary3.dat.

  1. From the Workbench, right click on the empty space of the All Projects pane.  A pop-up menu displays.
  2. Select Import from the menu.  The SmartGuide Import panel displays.
  3. Select Repository as the import source and click Next.   The Import from another repository panel displays.
  4. Click the Browse button next to the Repository text field. 
  5. Navigate the path to where you unzipped bab100p.zip. and then samples\salary1\vajsalary3.dat.    
  6. Select vajsalary3.dat and click Open.
  7. Select Projects and the click the Details button.  
  8. Click the SalaryStage3 checkbox and then OK
  9. 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.

  1. From the Workbench panel, choose Selected - Add - Project. The SmartGuide Add Project panel displays.
  2. Select Add project from the repository.  A list of projects displays in the Available project names pane.
  3. Click the SalaryStage3 project.
  4. Click Finish.  SalaryStage3 is added to the Workbench All Projects list.
  5. Double-click the SalaryStage3 project.  The SalaryStage3 package panel displays.
  6. Open the Visual Composition Editor (VCE) by:
    1. Double-click the salary3 package.  The salary3 Class Hierarchy panel displays.
    2. 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.

  1. Select the ExitAction bean and drop it near the File menu.
  2. Right click the Exit item on the File menu and select Connect - Connectable Features.
  3. Select targetAction and click OK.
  4. Click on the ExitAction bean and select this to connect the wire.
  5. Select the SaveAsAction bean and drop it near the File menu.
  6. Right click the SaveAs item on the File menu and select Connect - Connectable Features.
  7. Select targetAction and click OK.
  8. Click on the SaveAsAction bean and select this to connect the wire.
  9. Select the SaveAction bean and drop it near the File menu.
  10. Right click the Save item on the File menu and select Connect - Connectable Features.
  11. Select targetAction and click OK.
  12. Click on the SaveAction bean and select this to connect the wire.
  13. Right click the New button on the toolbar Connect - Connectable Features.
  14. Select targetAction and click OK.
  15. Click on the NewAction bean and select this to connect the wire.
  16. Right click the Open button on the toolbar Connect - Connectable Features.
  17. Select targetAction and click OK.
  18. Click on the OpenAction bean and select this to connect the wire.
  19. Right click the Save button on the toolbar Connect - Connectable Features.
  20. Select targetAction and click OK.
  21. 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.  

  1. Right click the Name text field and select Connect - text.
  2. Click theModel and select Connectable Features - Name.
  3. Doble-click the wire you just connected.
  4. Click Show expert features and select focusLost from Source Event.
  5. Click OK.
  6. Repeat the above steps for Social Security #, Age and Salary text fields.

Connecting theModel and theApp

In this section, you connect theModel and theApp.

  1. Right click theApp and select Connect - Connectable Features.
  2. Select theModel property and click OK.
  3. Click theModel and select this.
  4. Right click theModel and select Connect - Connectable Features.  
  5. Select propertyChange event and click OK.
  6. Click theApp and select Connectable Features.
  7. Select the modelChanged method and click OK.

Implementing Open and New File Commands

With this procedure, you add the Open and New file commands.

  1. Select the OpenAction bean and drop it near the File menu.
  2. Right click the Open item on the File menu and select Connect - Connectable Features.
  3. Select targetAction and clcik OK.
  4. Click on the OpenAction bean and select this to connect the wire.
  5. Select the NewAction bean and drop it near the File menu.
  6. Right click the New item on the File menu and select Connect - Connectable Features.
  7. Select targetAction and clcik OK.
  8. 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.

  1. Right click theApp.
  2. Select Event to Code.
  3. Select newModelAvailable from theApp event field.
  4. Add the code from VAJava.text for Phase3 Task3.
  5. Click OK.
  6. Click the Run button to run the application.