CS062, Lecture 20

GUI Components in Java

In the next lab we will discuss GUI components such as buttons, labels, text fields, text areas, and pop-up menus (JComboBox). These components can be added to a frame and we can assign listeners to these objects. Let's look at a few simple examples. You will need to read the lab assignment to get more details.

Creating GUI components involves several steps. We will illustrate these with buttons, which are represented in Swing by the JButton class:

  1. Create the object: aButton = new JButton("MyButton");
  2. Add the button to a panel or frame (see below): aPanel.add(aButton);
  3. Add a listener for the button: aButton.addActionListener(aListener);
  4. Make sure the class of the listener implements the appropriate listener interface: class ... implements ActionListener
  5. Adding a method to the listener class that will be executed when the button is pressed: public void actionPerformed(ActionEvent evt) {...}

Look at the code in class ButtonDemo on-line, which has an inner class to listen to both buttons. Then look at the better button demo where each class has a separate listener.

Layout managers

Layout managers help the programmer lay out components on the applet so that they look good even if the user changes the size of the frame.

FlowLayout

The default Layout manager for applet and panels is FlowLayout, which simply lays out items from left to right across the top of the applet. When there is no more space it starts a new row. Thus if an applet's width is decreased, items from one row may move down to a lower row.

A JFrame can also be assigned this layout manager by executing: 

    setLayout(new FlowLayout());

BorderLayout

The default layout manager for frames (and WindowController) is BorderLayout, which provides a bit more control over placement by allowing the programmer to add components into one of 5 areas: North, South, East, West, and Center.

BorderLayout has two constructors: 

    public BorderLayout()
    public BorderLayout(int horizGap, int vertGap) 
            // leaves given gaps between components.

The layout manager of an applet or panel can be changed to BorderLayout by executing: 

    setLayout(new BorderLayout())

Components are added by using a more refined version of add: 

    add(component, direction)

Thus to add a button on the north, write 

    add(startButton, BorderLayout.NORTH)

Components added to "North" and "South" extend to the left and right edges of the Applet, while those added "East" and "West" extend up and down to the components to the "North" and "South". The component in the "Center" fills the remaining space.

If one component is omitted, other components stretch to fill that space.

With the BorderLayout, components stretch to fill all of the container. As a result using border layout by itself can often make layouts look distorted.

GridLayout

GridLayout arranges components into evenly spaced rows and columns. Constructors include: 
    public GridLayout(int rows, int cols)  
    // Construct layout w/ given rows and columns

    public GridLayout(int rows, int cols, int h, int v)  
    // Construct layout w/ given rows and columns, and 
    // horiz and vertical gaps of h and v between components

Executing 

    setLayout(new GridLayout(2,3))

divides the applet into 2 rows and 3 columns. When "add" method is executed, components are added from left to right first across the first row, then second row, etc.

The only somewhat unfortunate thing about GridLayout is that all components added are resized to be exactly the same size. See GridTest for an example where buttons all the same.

Mixing layouts

Most of the time, none of the three layout managers described above does exactly what you want them to do. However, you can build up your applet from components called panels and canvases and then place the GUI components directly on those components.

JPanels

A JPanel is a type of container. GUI components can be added to a panel, which can itself be added to an applet or JFrame (or indeed another JPanel).

The constructor for a panel is: 

    public JPanel()
Again, see GridTest for an example of using a panel

See the calculator program for another relatively complex example of laying out buttons and a label.

Example of Layout of GUI components

See GridTest for an example of a slightly more complex layout. See the calculator program for another relatively complex example of laying out buttons and a JLabel.