Title: Simple GUI Components
Course: CPS 161: An Intro to Programming with Java - DL MM MASTER

Simple GUI Components

In cps261, you will spend some time doing more extensive GUI (Graphical User Interface) work.

We have discussed drawing things with the Graphics class. Java also provides higher level components that already know how to respond to user inputs and draw themselves .... such as Buttons.

To illustrate some of this capability, I'm going to create a TicTacToe GUI. Most of the work is in the next video. However, in this video I want to go over the fundamental building blocks needed.

SimpleComponents.java


import java.awt.FlowLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JTextField;


public class SimpleComponents extends JFrame{

    SimpleComponents()
    {
        super("Simple Components");
        setSize(400, 300);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        setLayout(new FlowLayout());

        JTextField tf = new JTextField(20);
        add(tf);

        for (int i=0; i < 8; i++)
        {
            JButton b1 = new JButton("button "+ i);
            add(b1);
        }

        setVisible(true);
    }

    public static void main(String[] args) {
        SimpleComponents sc = new SimpleComponents();

    }

}


Finding out when the buttons are clicked


import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JTextField;


public class SimpleComponents extends JFrame implements ActionListener{

    JButton[] myButtons = new JButton[8];

    SimpleComponents()
    {
        super("Simple Components");
        setSize(400, 300);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        setLayout(new FlowLayout());

        JTextField tf = new JTextField(20);
        add(tf);

        for (int i=0; i < myButtons.length; i++)
        {
            JButton b1 = new JButton("button "+ i);
            add(b1);
            myButtons[i] = b1;
            b1.addActionListener(this);
        }

        setVisible(true);
    }

    public static void main(String[] args) {
        SimpleComponents sc = new SimpleComponents();

    }

    @Override
    public void actionPerformed(ActionEvent e) {

        JButton buttonClicked = (JButton)e.getSource();
        for (int i=0; i < myButtons.length; i++)
        {
            if (buttonClicked == myButtons[i])
                System.out.println("The button clicked was "+ i);
        }
    }

}



Other Layouts: GridLayout

Replace the line:

setLayout(new FlowLayout());

with

setLayout(new GridLayout(3,3));

You will probabaly have to do a "Control-Shift o" to adjust the import statements.

What we really want for TicTacToe

BorderLayout example:


import java.awt.BorderLayout;

import javax.swing.JButton;
import javax.swing.JFrame;


public class SimpleBorderLayout extends JFrame{

	SimpleBorderLayout()
	{
		super("Simple Border Layout");
		setSize(400, 300);
		setDefaultCloseOperation(EXIT_ON_CLOSE);

		setLayout(new BorderLayout());

		JButton north = new JButton("North");
		add(north, BorderLayout.NORTH);

		JButton center = new JButton("Center");
		add(center, BorderLayout.CENTER);

		setVisible(true);	
	}

	public static void main(String[] args) {
		SimpleBorderLayout sb = new SimpleBorderLayout();

	}

}



Containers within Containers: BorderLayout


import java.awt.BorderLayout;
import java.awt.FlowLayout;
import java.awt.GridLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;


public class SimpleBorderLayout extends JFrame{

    SimpleBorderLayout()
    {
        super("Simple Border Layout");
        setSize(400, 300);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        setLayout(new BorderLayout());

        JPanel north =  setupNorth();
        add(north, BorderLayout.NORTH);

        JPanel center = setupCenter();
        add(center, BorderLayout.CENTER);

        setVisible(true);
    }

    JPanel setupCenter()
    {
        JPanel center = new JPanel();
        center.setLayout(new GridLayout(3,3));
        for (int i=0; i < 9; i++)
        {
            JButton b = new JButton("button "+i);
            center.add(b);
        }
        return center;
    }

    JPanel setupNorth()
    {
        JPanel north = new JPanel();
        north.setLayout( new FlowLayout());

        JTextField tf = new JTextField(20);
        north.add(tf);

        JButton b = new JButton("Reset");
        north.add(b);

        return north;
    }

    public static void main(String[] args) {
        SimpleBorderLayout sb = new SimpleBorderLayout();

    }

}



Last Updated: November 19, 2013 11:41 AM