Graphical User Interfaces

A graphical user interface is a visual interface to a program. 

GUIs are built from GUI components (buttons, menus, labels etc). A GUI component is an object with which the user interacts via the mouse or keyboard. Together, the appearance and how user interacts with the program are known as the program look and feel.

Support for GUI in Java

=================================

The  classes  that  are  used  to  create  GUI  components  are  part  of  the  “java.awt”  or “javax.swing” package. Both these packages provide rich set of user interface components.

The classes present in the awt and swing packages can be classified into two broad categories. GUI classes & Non-GUI Support classes:

GUI classes are visible and user can interact with them. Examples of these are JButton, JFrame & JRadioButton etc.

Non-GUI support classes provide services and perform necessary functions for GUI classes. They do not produce any visual output. Examples of these classes are Layout managers & Event handling classes etc.

java.awt package

=================================

AWT stands for “Abstract Windowing Toolkit “contains original GUI components that came with the first release of JDK.  These components are tied directly to the local platform’s (Windows, Linux, MAC etc) graphical user interface capabilities. Thus results in a java program executing on different  platforms (windows, Linux, Solaris etc) has a different appearance and sometimes even different user interaction on each platform.

AWT components are often called Heavy Weight Components (HWC) as they rely on the local platform’s windowing system to determine their functionality and their look and feel. Every time we create an AWT component it creates a corresponding process on the operating system.

javax.swing package

=================================

These are new GUI components. Swing components are written, manipulated and displayed completely in java, therefore these are pure java components. The swing components allow the programmer to specify a uniform look and feel across all platforms.

Steps for GUI Creation

=================================

1) import required packages

import java.awt.* and/or javax.swing.* package.

2) Setup the top level containers

A container is a collection of related components, which allows other components to be nested inside it. Two important methods of container class are add and setLayout.

The add method is used for adding components to the content pane while setLayout method is used to specify the layout manager. Containers are classified into two broad categories that are Top Level containers and General Purpose Containers.

Top  level  containers  can  contain  other  containers  as  well  as  basic components (buttons, labels  etc)  while  general  purpose  containers  are typically  used  to  collect  basic  components  and  are  added  to  top  level containers. General purpose containers cannot exist alone they must be added to top level containers. Examples of top level container are  JFrame,  Dialog  and  Applet  etc. Examples of general purpose container are JPanel, Toolbar and ScrollPane etc.

So, here we will take a top level container and create its instance. 

Consider the following code of line if JFrame is selected as a top level container:

        JFrame frame = new JFrame(); 

3) Get the component area of the top level container

From the above figure we can say that JFrame   is a frame is a window.  So, it can be interpreted as JFrame is a window. Every window has two areas - System Area & Component Area. We cannot add/remove components to the System Area. The Component Area is a workable place for us. Components can be added/removed in this area.

So, to add components, component area of the JFrame is required. It can be done by the following code of line:

        Conntainer con = frame.getContentPane(); 

4) Apply layout to component area

The layout (size, position etc, how they appear) of components in a container is usually governed by Layout Managers. The layout manager is responsible for deciding the layout policy and size of its components added to the container. To set the layout, we use setLayout method and pass object of layout manager as an argument.

     con.setLayout( new FlowLayout( ) );

5) Create and Add components

Now we can create required components by calling their constructor.

   JButton button = new JButton ( );

After creating all components, the next task is to add these components into the component area of our JFrame  (i.e ContentPane). For this we have to use add method of the Container and pass it the component to be added.

   con.add(button);

The following line of code is used to exit the program on closing the window:

   frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 

If we run our program without this line, the desired GUI would be displayed. However if we close the window by using (X) button on top left corner of window, we’ll notice that the control doesn’t return back to command prompt. The reason for this is that the java process is still running. However on putting this line, when we exit our prompt will return.

6) Set size of frame and make it visible

A frame must be made visible via a call to setVisible(true) and its size defined via a call setSize(rows in pixel, columns in pixel) to be displayed on the screen. (By default, all JFrame’s are invisible.)

       frame.setSize(200, 300);

    frame.setVisible(true) ;

Layout Managers

=================================
Layout Managers are used to form the appearance of GUI. They are concerned with the arrangement of components of GUI.

The appearance of the GUI also depends on the underlying platform and to keep that same the responsibility of arranging layout is given to the LayoutManagers, so they can provide the same look and feel across different platforms. Commonly used layout managers are:- Flow Layout, Grid Layout, Border Layout, Box Layout, Card Layout, GridBag Layout and so on.

Flow Layout

Position components on line by line basis. Each time a line is filled, a new line is started. The size of the line depends upon the size of our frame. If we stretch the frame while program is running, GUI will be disturbed. Lets take an example:

    JFrame myFrame = new JFrame(“Flow Layout”);

    Container c = myFrame.getContentPane();

    c.setLayout( new FlowLayout( ) );

    JButton b1 =  new JButton(“Next Slide”);

    JButton b2 =  new JButton(“Previous Slide”);

    JButton b3 =  new JButton(“Back to Start”);

    JButton  b4 =  new JButton(“Last Slide”);

    JButton  b5 =  new JButton(“Exit”);

    c.add(b1);

    c.add(b2);

    c.add(b3);

    c.add(b4);

    c.add(b5); 

Grid Layout

Splits  the  panel/window  into  a  grid  (cells)  with  given  number  of  rows  and columns. Forces  the  size  of  each  component  to  occupy  the  whole  cell.
Size of each component is same. Components are added row wise.
When all the columns of the first row are get filled the components are then added to the next row. Only one component can be added into each cell.

Border Layout

Divides the area into five regions. North, South, East, West and Center. Components are added to the specified region. If any region not filled, the filled regions will  occupy the space  but the center region will still appear as background if it contains no component. Only one component can be added into each region.