Tutorial Tutorial Step 05

Building a Java text editor

Step 4: Adding a FontChooser dialog

JBuilder Foundation users skip Step 4 and 5, and go to Step 6. Ignore any directions in the rest of this tutorial pertaining to the Edit|Font menu item or FontChooser dialog.
Let's begin hooking up the menu events, starting with the Edit|Font menu item which is going to bring up a FontChooser dialog.

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

  1. Open TextEditFrame.java in the UI designer.

  2. Select the More dbSwing tab of the component palette, and click the FontChooser  db swing 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 in the Other folder of the component tree.
You will only see the dialog component in the component tree, not in the UI designer.

Setting the dialog's frame and title properties

You need to set the frame property on this dialog component for it to work properly at runtime. The frame property must reference a java.awt.Frame, or descendant, before being shown. In this case, the frame you need to reference is 'this' frame (TextEditFrame). If you fail to do this, the dialog will not show, and an error message occurs at runtime. You can also 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 folder of the component tree and click the frame property value in the Inspector.

  2. Click the property's Down arrow and select this from the list of values.

  3. Next, click the title property value, and type the word Font as its value.

  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 dialog for your class, sets its title to "Font", and sets its frame to this. But this code won't display the dialog 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.

Creating an event to launch the FontChooser

Create an event for the Edit|Font menu item that will launch the FontChooser:
  1. Select the Edit|Font menu item in the component tree. It should be jMenuItem5 (under the second menu node called jMenu1.) Notice that the text property for this menu item in the Inspector says "Font". (Don't worry if your Font menu item is a different number than this. Just make sure you select the one for the Font menu.)

  2. Click the Events tab in the Inspector, then 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.

    The name of the event handling method appears in the value field. 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, the suggested name is jMenuItem5_actionPerformed.

    actionPerformed event

  3. Double-click this event value, or press Enter to create the new event.

    When an event handling method is new, double-clicking it in the Inspector generates an empty stub for the method in your source code. Regardless of whether the method is new or already exists, the window focus will switch to the source code in the editor and position your cursor inside the event handling method. For a new event handling method, as is the case here, you will see that there is no code yet in the body of the method.

  4. Type the following line of code inside the body of this new empty method (between the open and close curly braces):
    fontChooser1.showDialog();
    
    Your method should now look like this:
    void jMenuItem5_actionPerformed(ActionEvent e) {
        fontChooser1.showDialog();
      }
    
    Tip: To get the most viewing area in the content pane, you can expand it by choosing View|Toggle Curtain (Ctrl+Alt+Z if you're using the CUA keymapping). This completely expands the content pane to the width of the JBuilder window. Of course, when you do this, the project and structure panes are hidden, so you have to toggle back when you want to access them.

  5. Now save and run your application. The Edit|Font menu item should open a FontChooser dialog. If not, check that you set its frame property to this.

    Nothing will happen yet if you try to change the font. 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.

  6. Close the "Text Editor" application.

Tutorial Tutorial Step 05