Java:Tutorial - Adding more objects to your window

[John]

This is the fifth of six tutorials that will show you how to create graphical user interfaces using java.

Prerequisites
This tutorial is moderately difficult. If you know the Java basics please refer to my previous tutorials. If you do know the Java basics you should be familiar with my previous tutorials on GUI's. To read my tutorials please refer to my INDEX

The Idea
In order for your program to be attractive, the user must be able to easily navigate through your program. By creating a GUI the user is presented with all the features of the program in a clear and coherent manner. Adding buttons to your interface allow for user interaction which is the reason for a GUI.

Solution
Now if you have read my previous tutorials and were experimental, I’m sure you have tried to add another button to your program with no luck. I said that using the add() method “adds” a object to your window. Well it does, but you have to specify where to place the object. If you don’t specify, they are placed on top of each other causing you not to see the other objects. There are a few ways to specify the locations and ill discuss two layouts here. Here is the code we created in a previous tutorial.

 package cctuts;

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

public class InterfaceFour implements ActionListener {
    JFrame interfaceFrame;
    JButton startButton;
    
    public InterfaceFour() {
    	JFrame.setDefaultLookAndFeelDecorated(true);
    	interfaceFrame = new JFrame("First GUI");
    	interfaceFrame.setSize(200,70);
    	interfaceFrame.setVisible(true);
    	
		startButton = new JButton("Start");
		startButton.addActionListener(this);
		interfaceFrame.add(startButton);
    
		interfaceFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		interfaceFrame.setVisible(true);
    }

	public void actionPerformed(ActionEvent a) {
		for(int i = 0; true; i++){
			System.out.println(i);
		}
	}
	
    public static void main(String[] args) {
        new InterfaceFour();
    }
}

To add the layout we are going to use the addLayout() method available to us, and im sure you wont be surprised that that method requires an object. The most basic layout you can use is called the FlowLayout. It basically takes your objects and centers them in your window depending on your dimensions. To do this we add this line of code in our constructor.

 interfaceFrame.setLayout(new java.awt.FlowLayout());

So if you create your code with two buttons, it should look similar to this:

 package cctuts;

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

public class InterfaceFive implements ActionListener {
    JFrame interfaceFrame;
    JButton startButton, stopButton;
    
    public InterfaceFive() {
    	JFrame.setDefaultLookAndFeelDecorated(true);
    	interfaceFrame = new JFrame("First GUI");
    	interfaceFrame.setSize(200,70);
    	interfaceFrame.setVisible(true);
    	interfaceFrame.setLayout(new java.awt.FlowLayout());
    	
		startButton = new JButton("Start");
		startButton.addActionListener(this);
		interfaceFrame.add(startButton);
		
		stopButton = new JButton("Stop");
		stopButton.addActionListener(this);
		interfaceFrame.add(stopButton);
    
		interfaceFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		interfaceFrame.setVisible(true);
    }

	public void actionPerformed(ActionEvent a) {
		for(int i = 0; true; i++){
			System.out.println(i);
		}
	}
	
    public static void main(String[] args) {
        new InterfaceFive();
    }
}

Image:


The second way, and my preference, to do this is to use a grid layout. It works very similar to a HTML table. To create a grid we are again going to use the addLayout() method and give it a parameter, but this time rather than using java.awt.FlowLayout() we are going to use java.awt.GridLayout() which itself requires a x and y integer dimension. So it would look like this:

interfaceFrame.setLayout(new java.awt.GridLayout(1,2));

Giving you a similar look as the previous method: