Friday, November 6, 2009

Java GUI - using Eclipse (GridLayout)

I have spent the last few days searching online a tutorial with a decent explanation on how to create/use GUI functions in Eclipse using Java. Unfortunately, no luck. So after a number of hair pulling and frustrating hours I managed to get down a simple technique which works flawlessly and now I understand how to use the GridLayout properly. This guide is for those that have a general idea of the methods and functions used with GUI and their parameters, but if you want me to expand on something just leave a comment and I'll be glad to do that. At the bottom of the page you will find a screen shot with the code nicely organized.


Here are the steps to making your first GUI using Java. I will use one JComponent to illustrate the use and from there you can expand as much as you like. Here we go.

Step 1: Create a class and import the following: import javax.swing.*; , java.awt.*; and java.awt.event.*;

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

public class Boom extends JFrame {

}

Step 2: Declare the variables and initial objects you will use as private. We declare the variables and objects in the class because we want them to be accessible to all methods of the class.

public class Boom {
private JLabel entry;
private JTextField input;
private JButton display;

public String userInput;
}


Step 3: Create a constructor for the class you created. This is where you will place all of your code for GUI so that when you call the class everything will be initialized, created and drawn to the frame.

public class Boom extends JFrame {
private JLabel entry;
private JTextField input;
private JButton display;

public Boom()
{
}
}


Step 4: Create JPanel. I will post only the portion of the code we are creating but still within the public Boom() constructor.

JPanel p = new JPanel(new GridLayout(3,1));

Step 5: Finalize object declaration.

JPanel p = new JPanel(new GridLayout(3,1));
entry = new JLabel("Text to display:");
input = new JTextField(20);
display = new JButton("Display");


Step 6: Add objects to JPanel.

p.add(entry);
p.add(input);
p.add(display);


Step 7: Create and register handlers. These will be responsible to identify which handler reacts to which action, you will see what I mean in a second. (Still in the constructor). Note: Don't worry if the ButtonHandler is underlined as red because we are going to create it in the next few steps.

ButtonHandler b = new ButtonHandler();
display.addActionListener(b);


Step 8: Create a JFrame and set the necessary values to begin. Add the JPanel you created to the JFrame.


JFrame frame = new JFrame();
frame.setSize(300, 400);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(p);
frame.setVisible(true);


Step 9: Create a private inner class with the same name as the handler object with ActionListener implementation. Here we are outside of the constructor, but still in the class itself, that's why this is called an inner class. Because we are using the same name for the class as the handler, the display button registered with this handler will only react to the ButtonHandler action event.

private class ButtonHandler implements ActionListener
{
}


Step 10: Within the private class, create a public void actionPerformed method with (ActionEvent e) parameters. Inside the curly braces set what you want to execute when the handler is triggered.

private class ButtonHandler implements ActionListener
{
public void actionPerformed(ActionEvent e)
{
if(e.getSource() == display)
{
userInput = input.getText();
JOptionPane.showMessageDialog(null, userInput);
}
}
}


Step 11: Create a new class with main method and call for Boom class.

public class Run {
public static void main(String[] args) {
new Boom();
}
}


Using this technique you can make as many panels as you want grouping your fields, buttons nicely and then simply adding them to the JFrame, like we did (frame.add(p);)

Image here: http://img80.imageshack.us/img80/9863/javagridlayout.jpg

No comments:

Post a Comment