GUI Tutorial in Java

Gui Tutorial

Gui stand for Graphical User Interface.

Using Gui you can create GUI based Application like Login form Register form etc.

Java provide two API to create User Interface:

1. AWT (Abstract Window Toolkit)
2. JFC (Java Foundation Classes)

Difference between AWT and JFC:

AWT	JFC
AWT stand for Abstract Window Toolkit.	JFC stand for Java Foundation Classes.
AWT components are Windows components.	JFC components are Java components.
AWT components are exist in java.awt package.	JFC components are exist in javax.swing package.
AWT components are not Platform Independent.	JFC components are Platform Independent.
AWT components are heavy weight.	JFC components are light weight.
AWT API provides limited classes around 300.	JFC API provides unlimited classes around 2000.
AWT does not support pluggable look and feel.	JFC supports pluggable look and feel.
AWT provides event and listener classes.	JFC does not provide event and listener classes.
AWT does not support MVC (Model View and Controller).	JFC support MVC (Model View and Controller).

Hierarchy of AWT Components:

What is Components ?

Components are basic building blocks of a GUI application.

Component is a root class.

Components are divided into two forms:

1. Container
2. Components

1. Container

Container provide a space where components like button,textfield,radiobutton,textarea etc can be placed.

Container is used to hold group of components.

In Java every Container has own default layout like BorderLayout,FlowLayout etc.

Java Swing provide following Containers which is mostly used:

1. JWindow
2. JFrame
3. JPanel
4. JDesktopPane
5. JInternalFrame
6. JDialog

2. Components

A component is an independent visual control.

A component placed inside a container.

Some Swing components are following:

1. JOptionPane
2. JTextField
3. JLabel
4. JPasswordField
5. JTextArea
6. JRadioButton
7. JCheckBox
8. JComboBox
9. JSpinner
10. JProgressBar
11. JScrollPane
12. JList
13. JButton
14. JTable
15. JSplitPane
16. JTree
17. JFileChooser
18. JColorChooser
19. JMenuBar
20. JMenu
21. JMenuItem
22. JPopupMenu
23. JToolBar
24. JToggleButton
25. JEditorPane
26. JSlider
27. JSeparator

What is Layout ?

Layout means the arrangement of components within the container.

Layout is a part of container.

Each and every container has a default layout to specify the components.

There are some following types of Layouts:

1. BorderLayout
2. FlowLayout
3. GridLayout

1. BorderLayout

BorderLayout add components in five directions like NORTH,SOUTH,EAST,WEST,CENTER.

BorderLayout is a default layout of JWindow, JFrame, JDesktopPane,JDialog and JInternalFrame.

When direction is not specify in container then it add components in CENTER.

Example:

import java.awt.BorderLayout;

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

public class Example {
 private JButton b1, b2, b3, b4, b5;

 public Example() {
  //initialize components privately
  initComponents();
 }

 private void initComponents() {
  b1 = new JButton("EAST");
  b2 = new JButton("WEST");
  b3 = new JButton("NORTH");
  b4 = new JButton("SOUTH");
  b5 = new JButton("CENTER");
  
  //create a container to contain components
  JFrame f = new JFrame("Border Layout Example");
  //give the size of container
  f.setSize(300, 300);
  //to close from internal
  f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  //to open container in center on screen 
  f.setLocationRelativeTo(null);

  //add all components in particular directions
  f.add(b1, BorderLayout.EAST);
  f.add(b2, BorderLayout.WEST);
  f.add(b3, BorderLayout.NORTH);
  f.add(b4, BorderLayout.SOUTH);
  f.add(b5, BorderLayout.CENTER);
  //to visible container otherwise it can be never visible 
  f.setVisible(true);
 }

 public static void main(String[] args) {
  //call constructor from main method
  //because program will start from here
  new Example();
 }
}

2. FlowLayout

The FlowLayout is used to arrange the components in a sequence.

FlowLayout is a default layout of JPanel.

Example:

        import java.awt.FlowLayout;
        
        import javax.swing.JButton;
        import javax.swing.JFrame;
        import javax.swing.JPanel;
        
        public class FlowLayoutDemo {
            private JButton b1, b2, b3, b4, b5;
        
            public FlowLayoutDemo() {
                initComponents();
            }
        
            private void initComponents() {
                b1 = new JButton("EAST");
                b2 = new JButton("WEST");
                b3 = new JButton("NORTH");
                b4 = new JButton("SOUTH");
                b5 = new JButton("CENTER");
        
                // create a container to contain components
                JFrame f = new JFrame("Flow Layout Example");
                // give the size of container
                f.setSize(400, 300);
                // to close from internal
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                // to open container in center on screen
                f.setLocationRelativeTo(null);
        
                // create a JPanel container
                JPanel p = new JPanel();
                // get layout from panel
                FlowLayout fl = (FlowLayout) p.getLayout();
                // fl.setAlignment(FlowLayout.LEFT);
                // fl.setAlignment(FlowLayout.RIGHT);
                // fl.setAlignment(FlowLayout.LEADING);
                // fl.setAlignment(FlowLayout.TRAILING);
                fl.setAlignment(FlowLayout.CENTER);
        
                // add all components
                p.add(b1);
                p.add(b2);
                p.add(b3);
                p.add(b4);
                p.add(b5);
                // add panel to root container
                f.add(p);
                // to visible container otherwise it can be never visible
                f.setVisible(true);
            }
        
            public static void main(String[] args) {
                new FlowLayoutDemo();
            }
        }
    

3. GridLayout

GridLayout is used to arrange components in grid format.

GridLayout is based on rows and columns.

Example:

import java.awt.GridLayout;

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

public class GridLayoutExample {
 private JButton b1, b2, b3, b4, b5;

 public GridLayoutExample() {
  // initialize components privately
  initComponents();
 }

 private void initComponents() {
  b1 = new JButton("EAST");
  b2 = new JButton("WEST");
  b3 = new JButton("NORTH");
  b4 = new JButton("SOUTH");
  b5 = new JButton("CENTER");

  // create a container to contain components
  JFrame f = new JFrame("Grid Layout Example");
  // give the size of container
  f.setSize(300, 300);
  // to close from internal
  f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  // to open container in center on screen
  f.setLocationRelativeTo(null);
  f.setLayout(new GridLayout(2, 3));
  // add all components
  f.add(b1);
  f.add(b2);
  f.add(b3);
  f.add(b4);
  f.add(b5);
  // to visible container otherwise it can be never visible
  f.setVisible(true);
 }

 public static void main(String[] args) {
  // call constructor from main method
  // because program will start from here
  new GridLayoutExample();
 }
}