Lesson 03 – simpleGUI

Lesson 03 is starting to get a little interesting as we will setup instructions to perform an action when a button is clicked and in this instance the instruction is to close the simpleGUI when clicked.

We will implement an ActionEvent, ActionListener, JButton and we will be using BorderLayout to place the button at the bottom of the Frame window.

Let’s take a quick look and overview of what each item is with a small description…

ActionEvent = is the object that implements the initial action and it’s normally initiated by the click of a button.

ActionListener = this one is the listener he will perform whatever action you want but will never do it without being told to do, in lame terms he sits there listen and wait for the ActionEvent to say go ahead and do your thing.

JButton = its as simply as the name describes… it’s a button we can click on it and when you do the ActionEvent does it’s thing by requesting the ActionListener to perform the action we coded it to do.

BorderLayout = You can do several things with BorderLayout but for the purpose of this Lesson we will be using it to arranging its components to fit in one of the five available regions: north, south, east, west, and center and we will be using it display the button SOUTH of the frame..

Here is the example of the SimpleGUI – Lesson 03 after completed.

blog-lesson03

SimpleGUI – Lesson 03

What we are going to do first for lesson 03 is once again update the title reflect what lesson we are working on. “SimpleGUI – Lesson 03”

JFrame frame = new JFrame(“SimpleGUI – Lesson 03”); // Lesson 03

We are now going to create the button and rather than creating a separate label and assigning it to the button afterwards we will create the button and give it a name (label) straight away as it’s simple and for now that is all we need as we have no need to change the name of a exiting button depending on the action we want it to take. For now the button is called “Exit” and the ActionEvent is going to be called “exitButton”

JButton exitButton = new JButton( “Exit”); // Lesson 03

Although we have created a button you still won’t see it anywhere as we have not initiated it nor have we added it to the frame so what we need to do now is we are going to take the frame we created and add the button to the frame we are also going to add the ActionEvent to the button and to complete we are going to tell the frame that we want to see the Button displayed SOUTH of the frame (at the button basically)

frame.add(exitButton, BorderLayout.SOUTH); // Lesson 03

I have added this line of code just above the container “c” so it gets nicely packed together with the other details.

For the last part of this lesson we are finally going to create the actual listener the bit of the code that will actually perform the action when instructed.

exitButton.addActionListener(new ActionListener() { // Lesson 03
public void actionPerformed(ActionEvent e)
{
System.exit(0);
}
});

We started by taking the exitButton and adding the listener and telling it this is a new Action so listen to it() we then when on making a public event that will be performed the action and as it will not return any data we hake into a void.

When ActionEvent tell the ActionListener it’s time the Listener will then initialise the actionPerfomed and execute the System.exit(0) command with a exist staus “0” (all good).

Following that we close the actionPerformed event, and don’t forget to close the ActionListener also followed by a semicolon (;) as it’s an assignment statement rather than a block statement.

There is one more thing you need to do before this code will work and as you noticed in eclipse there is loads of underlined squiggles markings asking you to create a class for the ActionEvents or the BorderLayout and ActionListener but do not fear just press “CRTL,SHIFT,O” in Eclipse and that will import required classes or add them manually if you are not using Eclipse.

import java.awt.BorderLayout; // Lesson 03
import java.awt.event.ActionEvent; // Lesson 03
import java.awt.event.ActionListener; // Lesson 03
import javax.swing.JButton; // Lesson 03

At last but not least we have made another great change and hopefully we all learned some more if you have entered all the code then go for it just Menu –> Run –> Run or click on the GREEN run button.
On command line you can run the following command assuming you are in the correct PATH.

$ javac simpleGUI.java && java cp . simpleGUI

I am sure you are happy with the results but if you want to cross check with the full code including all the changes we made today here it is.

Don’t forget if you are going to copy and paste the code you need to reset the indentation and in eclipse you use CRTL-SHIFT-F.

—————- START CODE —————-

package gcclinux.co.uk;

import java.awt.BorderLayout; // Lesson 03
import java.awt.Color;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.event.ActionEvent; // Lesson 03
import java.awt.event.ActionListener; // Lesson 03

import javax.swing.JButton; // Lesson 03
import javax.swing.JFrame;

public class SimpleGUI {
private static void buildGUI() {

JFrame frame = new JFrame(“SimpleGUI – Lesson 03”);
frame.setPreferredSize(new Dimension(300, 200));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JButton exitButton = new JButton( “Exit”); // Lesson 03

int y = 100;
int x = 300;
frame.setLocation(x, y);
frame.add(exitButton, BorderLayout.SOUTH); // Lesson 03

Container c = frame.getContentPane();
c.setBackground(Color.red);

frame.pack();
frame.setVisible(true);

exitButton.addActionListener(new ActionListener() { // Lesson 03
public void actionPerformed(ActionEvent e)
{
System.exit(0);
}
});
}

public static void main(String[] args) {
buildGUI();
}
}

—————- END CODE —————-

Next time for lesson 04 I will be doing less talking and more coding with the hope to pull more interest in those that do want to simple learn by example and prefer to copy and paste. But I will still pass you my simple explanation in certain areas where required.