Tutorial Tutorial Step 03

Building a Java text editor

Step 2: Adding a text area

In this step, you'll make a text area completely fill the UI frame between the menu bar at the top and the status bar at the bottom. To accomplish this, the layout manager for the main UI container needs to use BorderLayout. As a result of using the Application wizard, the main container in this UI, referred to as this in the component tree, contains a JPanel called contentPane that has been already been changed to BorderLayout. All you need to do now is add the components for the text area to the contentPane.

To do this, you'll add a scroll pane to the contentPane, then put a text area component inside the scroll pane. The scroll pane provides the text area with scroll bars.

  1. Click the TextEditFrame.java tab at the top of the editor, then click the Design tab.

  2. Click the contentPane component in the component tree to select it.

  3. Click the Swing Containers tab on the component palette and select the JScrollPane component.

    JScrollPane

  4. Click the center of the contentPane in the UI designer. This drops the JScrollPane component into the contentPane panel and should give it a BorderLayout constraint of Center, making it completely fill the area between the toolbar and the scroll bar. If you miss, choose Edit|Undo and try again.

    A BorderLayout container is divided into five areas: North, South, East, West, and Center. Each area can hold only one component for a maximum of five components. (Note that a panel containing multiple components is considered as one component.) A component placed into the Center area completely fills the container space not occupied by any other areas containing components. For example, in this case, the toolbar occupies the North area (top), and the status bar occupies the South (bottom). Since no components are assigned to East and West, the scroll pane component occupies the Center area and expands to the left (West) and right (East) edges of the container.

  5. Select the new jScrollPane1 component in the component tree.

  6. Look at its constraints property value in the Inspector and verify that it is set to Center. If not, select Center from the property's drop-down list.

  7. Click the Swing tab on the palette and select the JTextArea component.

  8. Click the jScrollPane1 component in the component tree or the UI designer to put the JTextArea into the scroll pane.

  9. Right-click the text property in the Inspector and choose Clear Property Setting to remove jTextArea1 from the text area.

  10. Finally, you need to set some properties on jTextArea1 to make it wrap lines of text automatically and at word boundaries. In the Inspector, set the following:

    lineWrap = true
    wrapStyleWord = true
    background = white

Now, compile your program and run it to see how it looks.

  1. Choose Project|Make Project from the menu.
    This compiles all the files in the project and creates a TextEditClass.class file and a TextEditFrame.class in a classes folder in the project folder. It should compile without any errors.

  2. Click the Run button   on the JBuilder toolbar, or choose Run|Run Project from the menu.

Your UI should now look like this at runtime:

TextEdit UI

Notice that there are no scroll bars. This is because the horizontalScrollBarPolicy and verticalScrollBarPolicy properties for jScrollPane1 are set to AS_NEEDED by default. If you want scroll bars to be visible all the time, you would need to change these property values to ALWAYS.

Choose File|Exit in the "Text Editor" application to close the runtime window.

Next we'll create the menus.

Tutorial Tutorial Step 03