gcp Logo

Let's get started with a GUI application!

  1. Login to your Repl.It account.
  2. Click on: Languages
  3. In the GUI Development section choose: Java Swing: A Java GUI widget toolkit
  4. Click the pencil icon next to your repl name.
  5. In the Default name: input box type: HelloGUI
  6. Delete all the lines of code provided as an example.
  7. Copy the HelloGui.java Template (Java) code (below)
  8. Paste that code into your new HelloGUI class in the editor
  9. Change the @author put-your-username-here

HelloGui Template (Java)

/*
 * 
 * File: HelloGUI.java
 * 
 * Description: The GUI of this program create a Graphical User
 * Interface with a textfield for thr user to enter their name,
 * a button for the user to click to submit their name, a text field 
 * that displays a "Hello" message, and a graphic.
 * 
 */
/**
 * 
 * @author: put-your-name
 *
 */
import java.awt.EventQueue;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;

public class Main extends JFrame {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private JPanel contentPane;
	private JTextField nameStr;
	private JTextField outStr;

	/**
	 * Launch the application.
	 */
	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			public void run() {
				try {
					Main frame = new Main();
					frame.setVisible(true);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}

	/**
	 * Create the frame.
	 */
	public Main() {
		setTitle("Hello World App");
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 650, 450);
		contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		contentPane.setLayout(new BorderLayout(0, 0));
		setContentPane(contentPane);
		
		JPanel panel = new JPanel();
		contentPane.add(panel, BorderLayout.CENTER);
		panel.setLayout(null);
		
		JLabel lblName = new JLabel("Name: ");
		lblName.setBounds(55, 25, 60, 14); 
		panel.add(lblName);
		
		nameStr = new JTextField();
		nameStr.setBounds(105, 22, 110, 20); 
		panel.add(nameStr);
		nameStr.setColumns(40);
		
		JLabel lblOutput = new JLabel("Message: ");
		lblOutput.setBounds(34, 68, 86, 14); // 86 wss 46
		panel.add(lblOutput);

		outStr = new JTextField();
		outStr.setBounds(105, 65, 110, 20); 
		panel.add(outStr);
		outStr.setColumns(40);
		
		JButton clickBtn = new JButton(" Click Me! ");
		clickBtn.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e) {
				outStr.setText("Hello " + nameStr.getText() + "!");
			}
		});
		clickBtn.setPreferredSize(new Dimension(400, 400));
		clickBtn.setBounds(250, 21, 150, 23); 
		panel.add(clickBtn);
		
		JPanel imgPanel = new JPanel();
		imgPanel.setBounds(400, 15, 206, 99);
		panel.add(imgPanel);	
    
		ImageIcon image = new ImageIcon("put-the-name-of-your-image-here");
		JLabel label = new JLabel("", image, JLabel.CENTER);
		imgPanel.add( label, BorderLayout.CENTER );
	}
}

HelloGui Class Output

Hello Gui Screenshot