Swing Tutorial 2: Layout, TextAreas and Buttons

Guest Posts ljc1999

In this second swing tutorial we're going to start to add some components to our JFrame window we created in the first tutorial.

The first thing we're going to do is create another class that extends JFrame, we will use this class to add our components and define things like size and our default close operation. Create a class in the same place as the first one and call it something like "MainFrame".

Next we need to make our class extend the JFrame class, to do that we need to add "extends JFrame" to our class, we also need to import JFrame. Your class should now look like this:

import javax.swing.JFrame;

public class MainFrame extends JFrame {

}


Lets give our class a constructor:

public MainFrame() {

}


Lets start to modify our JFrame by using our class. To set the title you need to call the super class constructor by adding this:

super("Hello World");


The String inside the double quotes is the title of our new JFrame window.

 

Our new class is looking good so far so lets actually tell our application to use it! Go to the first class you created and replace the JFrame line for this:

new MainFrame();


Then copy all the "frame.????" lines into the "MainFrame" class under the "super" line, and remove all the "frame." references, the "MainFrame" class should look like this:

import javax.swing.JFrame;

public class MainFrame extends JFrame {
    public MainFrame() {
        super("Hello World");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
        setSize(600, 500);
    }
}


Now our application runs as before but with its own class, lets add some more stuff to our "MainFrame" class.

First lets add a Layout Manager. A layout manager's job is to decide where to put all the components we add, like buttons, text fields, etc., and it will reposition and resize everything when we resize the window.

For this example we are going to use a Border Layout, this is a very basic layout manager that lets us choose what position to put our components (Example: Centre).

To use the border layout add this line in your "MainFrame" class:

setLayout(new BorderLayout());


Next import Border Layout by pressing CTRL + SHIFT + O (CMD + SHIFT + O on mac).

Let's add a Text Area to our window, a text area is a box that allows large amounts of text input.
In the "MainFrame" class, before the constructor, add a new instance of a JTextArea, ill call my instance "textArea":

private JTextArea textArea;


Don't forget to import JTextArea.

Lets also add a Button to our window, I don't think I need to explain what that is! Add a new instance of JButton under our JTextArea one, ill call mine btn:

private JButton btn;


Import JButton too.

To initialize these components add this inside our constructor, the String parameter inside JButton() is the text that is displayed on top of the button:

textArea = new JTextArea();
btn = new JButton("Click Me!");


Now we have successfully created our 2 new components, lets add them to our window by adding this code:

add(textArea, BorderLayout.CENTER);
add(btn, BorderLayout.SOUTH);


You could also use BorderLayout.NORTH, EAST, WEST and many more!

If you run this now we have a working application and you can type and click the button, they don't do anything yet though. In the next tutorial ill show you how to make it do stuff, but for now here's the complete code for this tutorial:

Main.class

import javax.swing.SwingUtilities;

public class Main {
   public static void  main(String[] args) {
       SwingUtilities.invokeLater(new Runnable() {
           @Override
           public void run() {
               new MainFrame();
           }
       });
   }
}


MainFrame.class

import java.awt.BorderLayout;

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

public class MainFrame extends JFrame {

    private JTextArea textArea;
    private JButton btn;

    public MainFrame() {
        super("Hello World");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
        setSize(600, 500);
        setLayout(new BorderLayout());

        textArea = new JTextArea();
        btn = new JButton("Click Me!");

        add(textArea, BorderLayout.CENTER);
        add(btn, BorderLayout.SOUTH);
    }
}