Home : Course Map : Chapter 6 : Java :
User Interface (UI) Layout
Course Map
Chapter 6

  Demo 1
UI Components
  Demo 2
UI Layout
  Demo 3   Demo 4
Text Display
  Demo 5
  Demo 6   Demo 7
Draw Polygons
  Demo 8   Demo 9
Text Draw 
  Demo 10
  Demo 11

  Demo 1
  Demo 2
Text Drawing
  Demo 3
UI Components
  Demo 4

Shapes & Areas
  Demo 1   Demo 2
Stroke & Paint
  Demo 3
  Demo 4
  Demo 5   Demo 6
  Demo 7   Demo 8
     About JavaTech
     Codes List
     Topic Index
     Course Guide
     What's New

Two more useful components include

  • JTextField - provides for input of text in a single line display.
  • JLabel - used to place text and icon labels on the interface.

For both components you can pass a string via a constructor parameter to provide the initial text. The classes contain a number of methods but the two primary ones for basic operation are:

  public String getText ()
public void setText (String str)

While JLabel objects do not interact with the user, the JTextField is an active component like JButton that can respond to user actions. We discuss adding behavior to text fields in Chapter 7.

You can allow or disallow user modification of the text in a textfield display by invoking setEnabled (boolean flag). An enabled state of true means that the text can be user modified while false prevents any modification.

For our next applet we want create a subclass of JPanel to hold two text fields. To identify the textfields we also want to put labels beside each. To insure that the labels and textfields are arranged in a logical manner we need to use a layout manager.

Panels use several optional layout managers to control how the components are arranged. We will discuss the different types of layout managers in Chapter 7: Java: LayoutManagers, so for now we will only briefly mention two:

  • FlowLayout - the default manager. Components will be laid out in the order they were added, starting horizontally until all the room is used up and then starting at left on the next row down. The exact arrangement will depend on the amount of area available and the minimum and maximum sizes allowed for each component.

  • GridLayout(nRows, nColumns) - the components will be distributed in a matrix arrangement of nRows by nColumns. As they are added, components will be placed horizontally until the row is filled before incrementing to the next row down.

The following applet shows how to arrange our four components using a GridLayout. It also shows how to initialize the text in at JTextField object and a JLabel. The text in the label is justified to the right so that it clearly refers to the values in the text fields.

This applet creates an instance of the InputsPanel class, shown below, and adds it to the content pane. Using JPanel subclasses like InputsPanel allows for a flexible modular approach to graphical interface building.

+ InputsPanel.java
import java.awt.*;
import javax.swing.*;

public class InputsPanelApplet extends JApplet
  public void init () {
    Container contentPane = getContentPane ();

    // Next create a panel of input fields and labels
    InputsPanel inputsPanel =
      new InputsPanel("Input x ","1.5",
                      "Input y ","3.14");

    // Add the button to the contentPane.
// Class InpustsPanelApplet

import java.awt.*;
import javax.swing.*;

/** Panel to hold input textfields. **/

public class InputsPanel extends JPanel
   JTextField fTextfieldTop;
   JTextField fTextfieldBot;

   /** Constructor builds panel with labels and text fields. **/
   InputsPanel (String label_str_top, String init_top,
                String label_str_bot, String init_bot) {

     // Set the layout with 2 rows by 2 columns
     setLayout (new GridLayout (2,2));

     // Create two text fields with the initial values
     fTextfieldTop = new JTextField (init_top);
     fTextfieldBot = new JTextField (init_bot);

     // Create the first label and right justify the text
     JLabel label_top =
JLabel (label_str_top, SwingConstants.RIGHT);

     // Insert the label and textfield into the top grid row
     add (label_top);
     add (fTextfieldTop);

     // Create the second label and right justify the text
     JLabel label_bot =
JLabel (labelBot, SwingConstants.RIGHT);

     // Insert the second label and textfield into the bottom grid row
     add (label_bot);
     add (fTextfieldBot);
   } // ctor

// Class InputsPanel


The text in the labels is right justified (using the SwingConstants.RIGHT setting) so that each label clearly refers to the values in the corresponding text field. The text field references are instance variables so that in a more ambitious program that uses InputsPanel other methods could access them and display text on the text fields or grab user input text from them.

The following applet - MultiPanelApplet - shows how we can create a more complex interface by combining multiple panels and components. Here we also introduce the JTextArea component that provides for multiple lines of text input or output. Here we fix it the text area for just output and set its background color to yellow.

Note that we set the layout manager for the content pane to a GridLayout of one row by 3 columns. We create instances of our ButtonsPanel and InputsPanel classes mentioned previously and also an instance of a TextArea. These are added in the order that we wish them appear left to right.

import java.awt.*;
import javax.swing.*;

/** Demonstrate a GUI built from multiple JPanel subclasses. **/
public class MultiPanelApplet extends JApplet
  InputsPanel fInputsPanel;
  JTextArea fTextOutput;

  public void init () {
    Container content_pane = getContentPane ();

    // Set the layout with 1 row of 3 columns
    // but now in one step
    content_pane.setLayout (new GridLayout (1, 3));

   // Create an instance of JButton
    ActionButtonsPanel buttons_panel =
      new ActionButtonsPanel ();

    // Next create a panel of input fields and labels
    fInputsPanel =
      new InputsPanel ("Input x ","1.5",
                       "Input y , "3.14");

    // Use a JTextArea for the output of the calculations.
    fTextOutput = new JTextArea ();
    fTextOutput.setBackground (Color.yellow);
    fTextOutput.setEditable (false);

    // The grid fills the 3 columns sequentially.
    content_pane.add (buttons_panel);
    content_pane.add (fInputsPanel);
    content_pane.add (fTextOutput);
  } // init
// Class InputsPanelApplet


The above applet illustrates the creation of a simple program interface. We will show in the next chapter how to add event handling to the program so that it can actually do something in response to user input.

References and Web Resources

Latest update: Nov. 3, 2006

Java Tech Graphics
Starting to Plot
  Demo 1
Drawing Panel
  Demo 2
Histogram Display

  Demo 3

Display Text Data
  Demo 1
Plot Data
  Demo 2
Find Max/Min
  Demo 3

  Part I Part II Part III
Java Core 1  2  3  4  5  6  7  8  9  10  11  12 13 14 15 16 17
18 19 20
22 23 24

1  2  3  4  5  6  7  8  9  10  11  12

Tech 1  2  3  4  5  6  7  8  9  10  11  12
Physics 1  2  3  4  5  6  7  8  9  10  11  12

Java is a trademark of Sun Microsystems, Inc.