Tutorial Tutorial Step 13

Step 12: Hook up the ButtonBar buttons

A ButtonBar is a simple toolbar containing buttons that display either text or images, or both. Unlike an ordinary panel where you actually draw buttons on the panel, the button bar draws its own buttons, based on the buttonType, labels, and imageNames properties of the ButtonBar. Using these properties, you can choose the appearance and number of buttons, as well as optional labels or images.

A ButtonBar has a single actionPerformed event for the button bar as a whole. Inside its event handler, you determine which button was pressed by testing the actionCommand string property of the event. The actionCommand string will tell you the label of the button that was pressed. Each button in the ButtonBar has a label, as set in the labels property of the ButtonBar, and even if labels aren't being displayed, the actionCommand contains the label associated with that button.

Set the ButtonBar labels as follows:

  1. Switch to the UI Designer, by clicking the Design tab.

  2. Select buttonBar in the Component Tree, then in the Inspector, double click the labels property.

  3. Click the ellipsis button to display the Labels property editor, which contains a list of button labels, one per line. Note the button labels, because those are what you need to test for in your actionPerformed event handler. In this wizard generated code, the labels are "File", "Close", and "Help". Change the labels to "Open,", "Save", and "About".

    Note: Up until now we have had you create event handlers by double clicking twice on the event in the Inspector. Many controls define a "default" event (as defined in their BeanInfo class). For example, buttons, menus, and button bars define actionPerformed as their default event. When a control has a default event, there is a shortcut for getting to its default event handler in source: double click on the control in the UI Designer.

  4. Let's use this shortcut to create the event handler for the ButtonBar. Double click on the button bar in the UI Designer. This should switch you to the source tab and place your cursor in the new event handling method for the button bar's actionPerformed event.

  5. Edit the buttonBar actionPerformed event handler to look like this:
    void buttonBar_actionPerformed(ActionEvent e) {
      String actionCommand = e.getActionCommand();
      if (actionCommand.equals("Open")) {
        fileOpen();
      }
      else if (actionCommand.equals("Save")) {
        saveFile();
      }
    //  else if (actionCommand.equals("About")) {
    //     helpAbout();
    //  }
    }
    
    Note that this code makes a call to a fileOpen() method that doesn't exist yet. Let's create that next.

  6. Create a new fileOpen() method. The purpose of this method will be to perform the operations that are currently in your File|Open menu handling method. However, since we need to perform the same operations when the Open button is pressed, we will create a new method called fileOpen so we can have just one copy of that code, and call it from both the File|Open menu and the Open button.

    You can use the following substeps to create the method:

    1. Create the fileOpen method stub. You can put this method just above the openFile method. The stub should look like this:
      /**
       * Handle the File|Open menu or button, invoking okToAbandon and openFile
       * as needed.
       */
      void fileOpen() {
      }
      
    2. Select all the code (except the first comment line) inside your existing File|Open event handler, which is probably called menuItem2_actionPerformed(). The code selected should be:
       if (!okToAbandon()) {
         return;
       }
      
       // Filer makes use of a java.awt.FileDialog, and so its
       // mode property uses the same values as those of FileDialog.
       filer1.setMode(FileDialog.LOAD); // Use the OPEN version of the dialog.
      
       // Make the dialog visible as a modal dialog box.
       filer1.show();
      
       // Upon return, getFile() will be null if user cancelled the dialog.
       if (filer1.getFile() != null) {
         // Non-null file property after return implies user
         // selected a file to open.
      
         // Call openFile to attempt to load the text from file into TextArea
         openFile(filer1.getDirectory()+filer1.getFile());
       }
      

    3. Cut this code from the source code to the clipboard, and paste it into the new fileOpen() method stub.

      Here is what the completed fileOpen() method should look like:

      /**
       * Handle the File|Open menu or button, invoking okToAbandon and openFile
       * as needed.
       */
      void fileOpen() {
        if (!okToAbandon()) {
          return;
        }
      
        // Filer makes use of a java.awt.FileDialog, and so its
        // mode property uses the same values as those of FileDialog.
        filer1.setMode(FileDialog.LOAD); // Use the OPEN version of the dialog.
      
        // Make the dialog visible as a modal dialog box.
        filer1.show();
      
        // Upon return, getFile() will be null if user cancelled the dialog.
        if (filer1.getFile() != null) {
          // Non-null file property after return implies user
          // selected a file to open.
      
          // Call openFile to attempt to load the text from file into TextArea
          openFile(filer1.getDirectory()+filer1.getFile());
        }
      }
      
    4. The new fileOpen() method is already being called from the new buttonBar event handler. Call it also from the File|Open event hander, which should be modified to look like this:
      void menuItem2_actionPerformed(ActionEvent e) {
        // Handle the File|Open menu item.
        fileOpen();
      }
      
  7. Similarly, gather the code that is currently in the Help|About event handler into a new helpAbout() method and call it from both the menu and button event handlers.

    1. Here is a stub for the helpAbout() method, which you can place just before the fileOpen() method:
      /**
       * Display the About box.
       */
      void helpAbout() {
      }
      

    2. Move the code that is currently in helpAbout_actionPerformed() into the new helpAbout() method.

    3. Insert the call helpAbout(); into helpAbout_actionPerformed().

    4. Uncomment the following three lines in buttonBar_actionPerformed().
      else if (actionCommand.equals("About")) {
        helpAbout();
      }
      

  8. Run the application and try the Open, Save, and About buttons. Compare them with the File|Open, File|Save, and Help|About menu items. If the buttons don't work, make sure that you changed their button labels to "Open", "Save", and "About", as indicated earlier in this step.

Tutorial Tutorial Step 13