Basic Java GUI's

**RobbieSS** · 12-09-2018

Hello! I'm making this tutorial because java is in my opinion a pretty simple language and a pretty interesting one to learn. And in this tutorial I'm gonna cover how to make a basic Java gui!

If you have no experience in java whatsoever I'd recommend looking at this tutorial or playing around in replit, it is an online java compiler.

Requirements:
- Any sort of java Compiler(I'd Recommend Eclipse)

Over View:
We will be learning how to make a window, a button, and a text box with a submit button that stores it in a string.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

To start, when making GUI's in Java your going to want to import the following:

Code:

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

- these go at the top of your source code

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

After you have imported those your gonna want to make a class, we will call the class mpghtut

Code:

public class mpghtut {

}

And where you will be storing the majority of your code most of the time you'll want to put this inside the mpghtut class

Code:

public class mpghtut {
public static void main(String[] args) {

}
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

now that you have your classes set up we can start with the real coding. When making GUI's you want to make a frame(or a border) with the following code:

Code:

JFrame frame = new JFrame("mpghtut Window");

What you put after the JFrame declaration will be what we will refer to in the code and what you put in the ("") is what will show up as the title on the window border and remember to put ; after every line of code unless it is a opening or closing Bracket --> {}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now you will want to declare a GridBagLayout so all your buttons and such fit together nicely

Code:

JPanel panel = new JPanel(new GridBagLayout());

I wouldn't focus so much on what this does

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now we want to tell our computer that when we close the window we want our program to stop entirely with the following line:

Code:

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now we will declare what size we want our window to be, ill be using 500x500 pixels

Code:

frame.setSize(500, 500);

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

now we want to tell the computer that we want to see the window(we don't have to do this with all our things) with the following line of code:

Code:

frame.setVisible(true);

And now if you hit run you should see a window pop up with the title "mpghtut Window"

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now we are going to add code that tells the computer where we want to put our button or textfield on the window.

Code:

JPanel centerPanel = new JPanel();
frame.getContentPane().add(BorderLayout.CENTER, centerPanel);

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now we are going to add our button and text field and give them commands

To add our button we are going to use JButton.

Code:

JButton submit = new JButton("Submit Me!");

The text submit right after we declare JButton the first time is what we will call our button and the text in the quotation marks is what will be shown on the button

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now we tell the computer where to put the button:

Code:

centerPanel.add(submit);

the capital P in panel is important make sure it is there.

And now you should see your button! to spice things up you can change the color with the following code:

Code:

submit.setBackground(Color.WHITE);

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now we'll declare our text field and tell the computer where we want it

Code:

TextField tfield = new TextField("", 20);
centerPanel.add(tfield);

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Now, to the more confusing stuff, we are going to tell the computer what we want to happen when we press submit. To start you need to make an actionlistener that waits for the button to be pressed. To do that we write the following code:

Code:

//we declare the label we want to store the text in, we have to store it outside of the action listener because anything declared inside a set of brackets {} exists only in those brackets and no where outside of it
Label input = new Label();
centerPanel.add(input);//we are going to add this to our panel so we can see what we inputted
input.setVisible(false);//we are going to make this invisible for now since it holds nothing
submit.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
//This is where we will tell the computer what to do when submit is pressed
}});

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Okay! now we tell the computer to store whatever is currently in the text box in a string(for this i will be storing it in a Label) and lock the textfield from being edited anymore:

Code:

// make sure all of this is inside the {} of your actionPerformed
//then we store the text into our Label
input.setText(tfield.getText());//this stores the text
tfield.setEditable(false);//this disables editing
input.setVisible(true);//we make it visible now that it holds text
frame.repaint();//these two lines of code just refresh our frame so it updates it and we can see our input
frame.revalidate();

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

And there we go! you now have a functioning GUI that stores and reads inputs! Your code should look something like this:

Code:

import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
public class mpghtut {
	public static void main(String[] args) {
		JFrame frame = new JFrame("window");
		JPanel panel = new JPanel(new GridBagLayout());
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setSize(500, 500);
        frame.setVisible(true);
        JPanel centerPanel = new JPanel();
        frame.getContentPane().add(BorderLayout.CENTER, centerPanel);
        JButton submit = new JButton("Submit Me!");
        centerPanel.add(submit);
        submit.setBackground(Color.WHITE);
        TextField tfield = new TextField("", 20);
        centerPanel.add(tfield);
        Label input = new Label();
        centerPanel.add(input);
        input.setVisible(false);
        submit.addActionListener(new ActionListener() {
        	public void actionPerformed(ActionEvent e) {
        		input.setText(tfield.getText());
        		tfield.setEditable(false);
        		input.setVisible(true);
        		frame.repaint();
        		frame.revalidate();
        	}
        });}}