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: SimpleButtons
  6. Delete all the lines of code provided as an example.
  7. Copy the SimpleButtons.java Template (Java) code (below)
  8. Paste that code into your new SimpleButtons class in the editor
  9. Change the @author put-your-username-here

SimpleButtons.java Template (Java)

/*
 * 
 * File: SimpleButtons.java
 * 
 * Description: The GUI of this program contains four number 
 * buttons and a textfield. It consists of a panel that uses a 
 * Border layout manager containing a text field and another 
 * panel that uses a Group layout manager. The smaller panel 
 * contains the four buttons.  When a button is pressed, the 
 * label that belongs to the button appears at the bottom of 
 * the GUI in the textfield.
 * 
 */
/**
 * 
 * @author: put-your-name-here
 *
 */

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

public class Main extends JPanel implements ActionListener {
  
  private static final long serialVersoinUID = 1L;
  private final static int numButtons = 4; // number of buttons, used in a loop
  private JButton[] buttonKeys; // array to hold button numbers
  private JTextField numberField; // to hold button labels ('0','1','2','3')
  /**
   * Constructor:
   * Creates the GUI and implements Border and Group layout managers
   */
  public Main() {
    // set layout manager for GUI (Border layout)
    setLayout(new BorderLayout());
        
    numberField = new JTextField(50);    //text field
        
    // create panel to hold buttons
    JPanel numberPanel = new JPanel();
    numberPanel.setMaximumSize(new Dimension(400,40));    //set size of panel
        
    // set layout manager for panel that holds the buttons (Group layout)
    GroupLayout layout = new GroupLayout(numberPanel);
    numberPanel.setLayout(layout);    
        
    buttonKeys = new JButton[numButtons];//array of buttons
        
    // set labels, add action listener, set size for each button, 
    // and prevent border from appearing around selected button
    for (int i = 0; i < numButtons; i++) {
      buttonKeys[i] = new JButton(Integer.toString(i));
      buttonKeys[i].addActionListener(this);
      buttonKeys[i].setMaximumSize(new Dimension(200,60));
      buttonKeys[i].setFocusPainted(false);
    }
        
    // Horizontally align components
    layout.setHorizontalGroup(
      layout.createSequentialGroup()
      .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(buttonKeys[0])
        .addComponent(buttonKeys[2])
      )
      .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(buttonKeys[1])
        .addComponent(buttonKeys[3])        
      )
    );
                        
    // Vertically align components
    layout.setVerticalGroup(
      layout.createSequentialGroup()
      .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(buttonKeys[0])
        .addComponent(buttonKeys[1])
      )
      .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
        .addComponent(buttonKeys[2])
        .addComponent(buttonKeys[3])
      )
    );
    
    // add panel holding the buttons and the text field
    add(numberPanel, BorderLayout.CENTER);
    add(numberField, BorderLayout.SOUTH);
  }  //constructor
    
  /**
   * Event handler:
   *   When a button is pressed, the label that belongs to the 
   *   button appears at the bottom of the GUI in the text field.
   *   
   * @param a String representing the event (button clicked)
   */
  public void actionPerformed(ActionEvent e) {
    JButton b = (JButton) e.getSource();
    numberField.setText( b.getText() );
  } // event handler
    
  // launch the GUI
  public static void main( String args[ ] ) { 
    SwingUtilities.invokeLater(new Runnable() {
      public void run() {
        Main myNumbers = new Main(); // create SimpleButtons object
        JFrame myFrame = new JFrame();    // create JFrame
        myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        myFrame.getContentPane().add(myNumbers);
        myFrame.setSize(400,400);        //set size of program
        myFrame.setResizable(true);    //prevent resizing program
        myFrame.setVisible(true);        //make GUI visible
      }
    });        
  } // end main here
}

SimpleButtons Class Output

SimpleBUttons Screenshot