Java Video Tutorial 29

Java GridBagLayoutIn this part of the Java Video Tutorial series, I cover GridLayout, GridBagLayout, GridBagConstraints, Font, Insets and much more.

I do this by showing you how to create a calculator layout with Java Swing. You’ll see just how easy it is to layout a nice GUI interface using constraints. You don’t necessarily need to measure X and Y coordinates to get everything to look right.

The code follows the video and it is heavily commented.

If you like videos like this, share it

Code from the Video

import java.awt.Font;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;

import javax.swing.*;

public class Lesson29 extends JFrame{
	
	JButton but1, but2, but3, but4, but5, but6,
		but7, but8, but9, but0, butPlus, butMinus,
		clearAll;
	
	JTextField textResult;
	
	int num1, num2;
	
	public static void main(String[] args){
		
		new Lesson29();
		
	}
	
	public Lesson29(){
		
		// Create the frame, position it and handle closing it
		
		this.setSize(400,400);
		this.setLocationRelativeTo(null);
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setTitle("Calculator");
		
		JPanel thePanel = new JPanel();
		
		// Create a Grid Layout with as many rows as needed
		// and 3 columns. The last 2 parameters create a
		// horizontal gap of 2 pixels and a vertical gap of
		// 2 pixels.
		
		// thePanel.setLayout(new GridLayout(0,3,2,2));
		
		thePanel.setLayout(new GridBagLayout());
		
		// You create a GridBagContraints object that defines
		// defaults for your components
		
		GridBagConstraints gridConstraints = new GridBagConstraints();
		
		// Define the x position of the component
		
		gridConstraints.gridx = 1;
		
		// Define the y position of the component
		
		gridConstraints.gridy = 1;
		
		// Number of columns the component takes up
		
		gridConstraints.gridwidth = 1;
		
		// Number of rows the component takes up
		
		gridConstraints.gridheight = 1;
		
		// Gives the layout manager a hint on how to adjust
		// component width (0 equals fixed)
		
		gridConstraints.weightx = 50;
		
		// Gives the layout manager a hint on how to adjust
		// component height (0 equals fixed)
		
		gridConstraints.weighty = 100;
		
		// Defines padding top, left, bottom, right
		
		gridConstraints.insets = new Insets(5,5,5,5);
		
		// Defines where to place components if they don't
		// fill the space: CENTER, NORTH, SOUTH, EAST, WEST
		// NORTHEAST, etc.
		
		gridConstraints.anchor = GridBagConstraints.CENTER;
		
		// How should the component be stretched to fill the
		// space: NONE, HORIZONTAL, VERTICAL, BOTH
		
		gridConstraints.fill = GridBagConstraints.BOTH;
		
		textResult = new JTextField("0",20);
		
		// Defines the font to use in the text field
		
		Font font = new Font("Helvetica", Font.PLAIN, 18);
        textResult.setFont(font);
		
		but1 = new JButton("1");
		but2 = new JButton("2");
		but3 = new JButton("3");
		but4 = new JButton("4");
		but5 = new JButton("5");
		but6 = new JButton("6");
		but7 = new JButton("7");
		but8 = new JButton("8");
		but9 = new JButton("9");
		butPlus = new JButton("+");
		but0 = new JButton("0");
		butMinus = new JButton("-");
		clearAll = new JButton("C");
		
		thePanel.add(clearAll,gridConstraints);
		gridConstraints.gridwidth = 20;
		gridConstraints.gridx = 5;
		thePanel.add(textResult,gridConstraints);
		gridConstraints.gridwidth = 1;
		gridConstraints.gridx = 1;
		gridConstraints.gridy = 2;
		thePanel.add(but1,gridConstraints);
		gridConstraints.gridx = 5;
		thePanel.add(but2,gridConstraints);
		gridConstraints.gridx = 9;
		thePanel.add(but3,gridConstraints);
		gridConstraints.gridx = 1;
		gridConstraints.gridy = 3;
		thePanel.add(but4,gridConstraints);
		gridConstraints.gridx = 5;
		thePanel.add(but5,gridConstraints);
		gridConstraints.gridx = 9;
		thePanel.add(but6,gridConstraints);
		gridConstraints.gridx = 1;
		gridConstraints.gridy = 4;
		thePanel.add(but7,gridConstraints);
		gridConstraints.gridx = 5;
		thePanel.add(but8,gridConstraints);
		gridConstraints.gridx = 9;
		thePanel.add(but9,gridConstraints);
		gridConstraints.gridx = 1;
		gridConstraints.gridy = 5;
		thePanel.add(butPlus,gridConstraints);
		gridConstraints.gridx = 5;
		thePanel.add(but0,gridConstraints);
		gridConstraints.gridx = 9;
		thePanel.add(butMinus,gridConstraints);
		
		
		// Adding buttons using the Grid Layout
		
		/*
		thePanel.add(but1);
		thePanel.add(but2);
		thePanel.add(but3);
		thePanel.add(but4);
		thePanel.add(but5);
		thePanel.add(but6);
		thePanel.add(but7);
		thePanel.add(but8);
		thePanel.add(but9);
		thePanel.add(butPlus);
		thePanel.add(but0);
		thePanel.add(butMinus);
		*/
		
		this.add(thePanel);
		
		this.setVisible(true);
		
	} // END OF Lesson29 CONSTRUCTOR
	
} // END OF Lesson29 CLASS

10 Responses to “Java Video Tutorial 29”

  1. mr.roshik says:

    nice tutorial with nice information 🙂

  2. Punit says:

    probably this one was i always want….
    just going to watch….
    thank you…

  3. Punit says:

    nice video..
    also by following your tutorial, i started to write code for a registration form, i added a label and a textbox but both are coming in center of my frame, can u help me in that, i want all should appear from top of my jframe like a registration form..
    also let me know if anything i m doing wrong for a registration form..

    here is my code

    import java.awt.Font;
    import java.awt.GridBagConstraints;
    import java.awt.GridBagLayout;
    import java.awt.GridLayout;
    import java.awt.Insets;

    import javax.swing.*;

    public class Form extends JFrame{
    private static final long serialVersionUID = 1L;

    JLabel lbl1, lbl2, lbl3, lbl4, lbl5, lbl6,
    lbl7, lbl8, lbl9, lbl0;
    JTextField txtBox1;
    int num1, num2;
    public static void main(String[] args){
    new Form();
    }

    public Form(){

    // Create the frame, position it and handle closing it

    this.setSize(400,400);
    this.setLocationRelativeTo(null);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    this.setTitle("Calculator");

    JPanel thePanel = new JPanel();
    thePanel.setLayout(new GridBagLayout());
    GridBagConstraints gridConstraints = new GridBagConstraints();
    gridConstraints.gridx = 0;
    gridConstraints.gridy = 1;
    gridConstraints.gridwidth = 1;
    gridConstraints.gridheight = 1;
    gridConstraints.weightx = 0;
    gridConstraints.weighty = 0;
    gridConstraints.insets = new Insets(5,5,5,5);
    gridConstraints.anchor = GridBagConstraints.NORTH;
    gridConstraints.fill = GridBagConstraints.BOTH;
    lbl1 = new JLabel("Enter First Name");
    gridConstraints.gridx = 1;
    gridConstraints.gridy = 1;
    txtBox1 = new JTextField("",20);
    Font font = new Font("Helvetica", Font.PLAIN, 18);
    txtBox1.setFont(font);
    thePanel.add(lbl1,gridConstraints);
    thePanel.add(txtBox1,gridConstraints);
    this.add(thePanel);
    this.setVisible(true);
    }
    }

    thank you..

  4. Nicky says:

    Hello again, I watched ur vedio, it was nice but i did not get the last part with gridwidth and gridy and gridx, what is gridwidth ? and what does it do in my laytout? thanks

    • admin says:

      Thank you 🙂 gridwidth is used to define how many columns each component takes up on the grid. It changes depending on the size of the component. I hope that helps

  5. Rasme says:

    Hi sir, nice tutorial.I have been watchin your java video tutorials from the beginnin, thanks. Please I need your help, I want add action listener to this code
    JTextField writeDown = new JTextField(“0”, 12);
    String[] theKeys = {“7”, “8”, “9”, “/”, “4”, “5”, “6”, “*”, “1”, “2”, “3”, “-“, “0”, “.”, “+”, “=”};
    for (int i = 0; i < theKeys.length; i++) {
    JButton but = new JButton(theKeys[i]);
    }

Leave a Reply

Your email address will not be published.

Google+