Tutorial Tutorial Step 05

Step 4: Add a FontChooser dialog and set its properties

Let's begin hooking up the menu events, starting with the Edit|Font menu which is going to bring up a FontChooser dialog.

First, you have to add a FontChooser dialog to your TextEditFrame class before it can be used by the menu item.

  1. Open the UI Designer on the TextEditFrame.java file.
  2. Select the Dialogs tab of the Component Palette and click on the FontChooser component.
  3. Click anywhere in the Component Tree or the UI Designer to add the FontChooser to your design.
    This places the component into the class as fontChooser1, and displays it under the Other section at the bottom of Component Tree. You will not see the dialog component in the UI Designer, only in the Component Tree.

Set the dialog's frame and title properties

You must set the frame property for a dialog component before it will work properly at runtime. All of the dialogs on the Dialogs page of the Component Palette have a frame property which must be set to reference a java.awt.Frame, or descendant, before being shown. The container Frame (in this case TextEditFrame) is represented by this.) If you don't do this, the dialog will not show, and the results are unpredictable. You will also want to set the title property so the dialog will have an appropriate caption.

To set the frame and title properties,

  1. Select fontChooser1 in the Other section of the Component Tree and double-click its frame property value in the Inspector. Use View|Inspector, if necessary, to bring the Inspector to the top.
  2. Click on the property value down arrow and select this from the list of values.
  3. Click on the title property value, and type in the word Font.
  4. Press Enter to commit the changes to the generated code.

As a result, the following lines are added to the source code in the jbInit() method:

    fontChooser1.setFrame(this);
    fontChooser1.setTitle("Font");
Placing the FontChooser into the Component Tree and setting these properties creates code in your class that instantiates a FontChooser for your class, sets its title to "Font", and sets its frame to this. But this code won't show the dialog (make it visible), or make use of it in any way. That has to be done in the "event handler" for the Edit|Font menu item. Let's create that code now.

Add an event to the Font menu item

To add an event to the Edit|Font menu item from the UI Designer,

  1. Select the Edit|Font menu item in the Component Tree. It should be the first MenuItem in the second Menu (menuItem5 under menu1. To confirm that you have selected the right menu item, look at its label property in the Inspector which should say "Font".

  2. Go to the Inspector, select the Events page, and double-click the value field (second column) for the actionPerformed event.

    For menus, buttons, and many other Java UI components, actionPerformed is the main user event of interest, the one you should hook for responding to the user operating that menu or button. Notice that a menuItem has only one event, an actionPerformed event.

    When you double-click the value field for an event in the Inspector, the name of the event handling method appears. If the method doesn't already exist, this will show the proposed default name for a new event handling method. For this new event handler in this tutorial, the value will probably be menuItem5_actionPerformed. The default value is just fine in this case.

  3. Double-click a second time on the value field for the actionPerformed event, when it is already in edit mode. If the event handling method doesn't already exist, doing this will generate an empty stub for the method in your source code. Whether the method exists or is new, you will then be taken into the source view, with your cursor positioned in the event handling method named in the Inspector. For a new event handling method, as is the case at this step of this tutorial, you will see that there is no code yet in the body of the method.

  4. With your cursor positioned inside the body of this new empty method, type the following line:

        fontChooser1.show();

    So your method should now look like this:

      void menuItem5_actionPerformed(ActionEvent e) {
        fontChooser1.show();
      }

    Note: To get the most viewing area in the Content pane, you can expand it by pressing Alt+Z to toggle the curtain.

  5. Now save and run your application.

    Note: If the TextEdit runtime window disappears behind JBuilder, just bring it to the top again using standard operating system methods, such as clicking its button on the task bar.

    Try the Edit|Font menu item and see what happens. You should be able to get a Font Chooser dialog to appear. If not, check that you set its frame property to this. With what you've made so far, the FontChooser dialog should show.

    Try typing some text into the text area of your application and then using the Edit|Font menu item. Notice that you don't see any font changes take effect yet. This is because you aren't using the results from the FontChooser to change the text in the text area. Let's do that next.

Tutorial Tutorial Step 05