Objective

Learn about:
·        Creating Graphical User Interface (GUI) in JAVA using the java.awt Package

Concept:

Introduction

Most modern software includes a graphical user interface (GUI) through the user interacts with the program. In Java, the AWT API (Abstract Windowing Toolkit) is a package (jawa.awt) that contains classes from which GUIs are built.

Each of the GUI components is defined by a class or set of classes in the java.awt package.

GUIs are built from GUI components. A GUI component is a visual object with which the user interacts via the mouse or the keyboard. The classes that are used to create the GUI components are part of the java.awt package.

To effectively user GUI components, the java.awt inheritance hierarchy must be understood – especially class Component and class Container. A class that inherits from the Component class is a Component. Class Label inherits from class Component and class Component inherits from the class Object. Thus, a Label is a Component and an Object but a component is only an object. A class that inherits from class Container is a Container. A container is an area where components are place.

Components

Every GUI component that appears on the screen is a subclass of the abstract class Component. That is, every graphical object, which extends from the Component class shares a number of methods and inheritance variables, that allows them to be operated.

The Component class provides basic drawing support, image handling, control of colors and fonts. It defines the set of methods that can be applied to an object of any subclass of a Component.

Containers

Container is an abstract subclass of Component, which allows other components to be nested inside it. Containers are helpful in arranging GUI components on the screen. An Applet is a container. It defines the set of methods that can be applied to an object of any subclass of Container.

There are two types of Containers:

Those that must be attached to another graphical user surface (Panel or Applet)

Those that can be moved independently  (Window, Frame, Dialog)

Positioning Components

The position and size of a component in a container is determined by a layout manager. The layout manager takes full control over all components within the container. It is responsible for computing and defining the preferred size of the object in the context of the actual screen size.

If the size or position of components is to be set manually, the layout manager can be disabled by issuing the following command:

setLayout (null);

Creating GUI Containers

Frames

A frame is a subclass of Window. It is a window with title and resize corners.

Example

import java.awt.*;
public class MyFrame extends Frame {
        public static void main(String args[]) {
                MyFrame fr = new MyFrame (“Hello”);
                fr.setSize(500, 500);
                fr.setBackground(Color.blue);
                fr.setVariable(true);
        }
        public MyFrame (String str) {
                super(str);
        }
}

Panels

Panels like Frames, provide the space to attach any GUI component, including other panels. Once a Panel object is created, it must be added to a window or Frame object in order to be visible.

Example

import java.awt.*;
public class FrameWithPanel (String args[]) {
        //constructor
        public FrameWithPanel (String str) {
                super (str);
        }
        public static void main(String args[]) {
                FrameWithPanel fr = new FrameWithPanel (“Frame With Panel”);
                Panel pan = new Panel();
                fr.setSeize (200, 200);
                fr.setBackground (Color.blue);
                fr.setLayout(null);
                pan.setSize(100, 100);
                pan.setBackground(Color.yellow);
                fr.add(pan);
                fr.setVariable(true);
        }
}

Labels

Labels are components that specify a line of te4xt to be included in the GUI. They are defined by the Label class. Labels are not selectable and cannot be modified by the user. Like other objects, a Label must be instantiated with a call to a constructor.

Example

import java.awt.*;
public class FrameWithLabel extends Frame {
        public static void main (String args[]) {
                Frame fr = new Frame (“A Frame with Lables”);
                Label label1, label2;
                fr.setBackground (Color.blue);     
                fr.setLayout (new FlowLayout());

                // call label constructor with no text
                label1 = new label ();

                // set the label’s text
                label1.setText(“Started with no text”);      
                //call label constructor with a string argument
                label2 = new Label(“This is read-only text”);
                fr.add(label1);
                fr.add(label2);
                fr.setVisible(true);
        }
}

Buttons

A button is defined by the Button class and triggers a specific action when the user clicks on it. JAVA can use three types of buttons: push buttons, choice buttons and checkboxes.

The text on the face of the button is called a button label. A GUI can have many buttons, but each button label should be unique.

Example

import java.awt.*;
public class FrameWithButton extends Frame {
        public static void main (String args[]) {
                Frame fr = new Frame (“A Frame with Buttons”);
                Button button1, button2;
                fr.setLayout (new FlowLayout());
                // call Button Constructor with a string argument
                button1 = new Button (“Button 1”);

                button2 = new Button (“Button 2”);
                fr.add(button1);
                fr.add(button2);
                fr.setVisible(true);
        }
}

Text Fields and Text Areas

A text field displays a single text line of text that can be entered by the user from the keyboard or text can simple be displayed. They are normally used to get input from the user. It is defined by the TextField class.

A text area is similar to the text field, except that it lets you view and edit multiple lies of text. It is defined by the TextArea class.

Example

import java.awt.*;
public class FrameWithComponents extends Frame {
        public static void main(String args[]) {
                Frame fr = new Frame (“A Frame with GUI Components”);
                Label label1, label2;
                TextField text1, text2, text3;
                TextArea txtarea;
                Button button1, button2;
                fr.setLayout (new FlowLayout());
                label1 = new Label (“Enter Your name: ”);
                label2 = new Label (“Enter Your Subject: ”);
                text1 = new TextField();
                text2 = new TextField(10);
                text3 = new TextField(“Uneditable text”, 20);
                text3.setEditable(false);
                txtarea = new TextArea();
                button1 = new Button (“Button 1”);
                button2 = new Button (“Button 2”);
                fr.add(label1);
                fr.add(label2);
                fr.add(text1);
                fr.add(text2);
                fr.add(text3);
                fr.add(txtarea1);
                fr.add(txtarea2);
                fr.add(txtarea3);
        }
}

Defining your own Layouts

You can define you won frame and control layouts and set tem as needed by disabling the Layout Manager. This is done by:

        SetLayout (null);

Then use the setBounds() method to control the size and the position of the controls and containers.

Example

import java.awt.*;
class myClass extends Frame {
        myClass () {
                this.setBounds (0, 0, 200, 200);
                Button b = new Button (“OK”);
                TextField tf = new TextField(“Hello”);
                this.setLayout (null);
                b.setBounds(10, 50, 30, 30);
                this.add(b);
                tf.setBounds(10, 100, 50, 30);
                this.add(tf);
        }
        public static void main(String args[]) {
                myClass a = new class ();
                a.setVisible(true);
        }
}

Layout Managers

Every container uses a layout manager to arrange its components. There are several predefined layout managers in the java.awt package. Its own class in the java.awt package defines each layout manager.

Predefined Layout Managers

Flow Layout Manager

All panels and applets use flow layout by default. As components are added to a container that is governed by the flow layout manager, they are placed in a row from left to right. If a component cannot be added to a row in the remaining space, a new row is started. All components on a row are centered vertically.

Example

import java.awt.*;
//show how the flow layout manager works
public class flow extends Frame {
        flow () {
                button b1 = new Button (“One”);
                button b2 = new Button (“Two”);
                button b3 = new Button (“Three”);
                button b4 = new Button (“Four”);
                button b5 = new Button (“Five”);

this.setLayout (new FlowLayout());
this.add(b1);
this.add(b2);
this.add(b3);
this.add(b4);
this.add(b5);

        }
        public static void main(String args[]) {
                flow f = new flow();
                f.setVisible(true);
        }
}

Grid Layout Manager

A grid layout manager places components in a grid with a specific number of rows and columns. Each component occupies exactly one cell in the grid, which is filled left to right and top to bottom. All cells in a grid are the same size.

Example

import java.awt.*;
//show how the grid layout manager works
public class grid extends Frame {
        grid() {
                button b1 = new button (“One”);
                button b2 = new button (“Two”);
                button b3 = new button (“Three”);
                button b4 = new button (“Four”);
                button b5 = new button (“Five”);
                //GridLayout (rows, columns)
                this.setLayout (new GridLayout(2,3));
                this.add(b1);
                this.add(b2);
                this.add(b3);
                this.add(b4);
                this.add(b5);
        }
        public static void main (String args[]) {
                grid g = new grid();
                g.setVisible (true);
        }
}

Border Layout Manager

A border layout defines five locations in which to place components: North, South        , East, West and Center. North occupies the top of a panel, East occupies the right side, and so on. The Center area represents left over once the North, South East and West areas are filled.

When the Window is stretched vertically, the East, West and Center regions are stretched, whereas when the Window is stretched horizontally, the North, South and Center regions are stretched.

When a component is added to a container governed by a border layout, one of the five locations must be specified. Only one component should be placed in each location. If you wish to have multiple components in a location, group them in a panel and add the panel to the container with the border layout.

Example:

import java.awt.*;
//show how the grid layout manager works
public class border extends Frame {
        border() {
                button b1 = new Button (“One”);
                button b2 = new Button (“Two”);
                button b3 = new Button (“Three”);
                button b4 = new Button (“Four”);
                button b5 = new Button (“Five”);
                this.setLayout (new BorderLayout());
                this.add(b1, “North”);
                this.add(b2, “South”);
                this.add(b3, “East”);
                this.add(b4, “West”);
                this.add(b5, “Center”);
        }
        public static void main (String args[]) {
                border b = new border();
                b.setVisible (true);
        }
}

Card Layout Manager

The card layout manager you to treat the interface as a series of cards, one of which is viewable at any one time. The components are ordered according to the order in which they were added to the container. The currently visible component is resized to take up the entire visible area of the container.

Example:

import java.awt.*;
//show how the card layout manager works
public class card extends Frame {
        card() {
                button b1 = new Button (“One”);
                button b2 = new Button (“Two”);
                button b3 = new Button (“Three”);
                button b4 = new Button (“Four”);
                button b5 = new Button (“Five”);
                this.setLayout (new CardLayout());
                this.add(b1, “A”);
                this.add(b2, “B”);
                this.add(b3, “C”);
                this.add(b4, “D”);
                this.add(b5, “E”);
        }
        public static void main (String args[]) {
                card b = new card();
                b.setVisible (true);
        }
}

GridBag Layout Manager

The grid bag layout manager provides complex layout facilities based on a grid but allowing a single component to take their preferred size within a cell rather than fill the whole cell.

A grid bag has no cells initially. They are automatically created as components are added. Not all cells need to be occupied. It aligns components within a rectangular grid of “cells”. By setting values within the GridBagConstraints object, components can be aligned vertically or horizontally.

A GridBagLayout and its associated GridBagConstraints object is initialized and used as follows:

        private GridBagLayout myLayout;
        private GridBagConstraints myConstraints;

The GridBagConstraints object contains instance variables that can be set to govern how components are laid out. Valid values are:

GridBagConstraints.Center (default)
GridBagConstraints.NORTH

GridBagConstraints.NORTHEAST

GridBagConstraints.EAST

GridBagConstraints.SOUTHEAST

GridBagConstraints.SOUTH

GridBagConstraints.SOUTHWEST

GridBagConstraints.WEST

GridBagConstraints.NORTHWEST

Example 1 (Two rows of buttons)

import java.awt.*;
//show how the gridbag layout manager works
public class gridbag1 extends Frame {
        gridbag1() {
                Panel p = new Panel();            
                GridbagLayot myGb = new GridBagLayout();
                GridBagConstraints myCons = new GridBagConstraints();
                button b1 = new Button (“One”);
                button b2 = new Button (“Two”);
                button b3 = new Button (“File”);
                button b4 = new Button (“Help”);
                setLayout (myGB);
                myCons.weightx = 1;
                myCons.fill = GridBagConstraints.HORIZONTAL;
                myGB.setConstraints(b1, myCons);
                this.add(b1);
                myGB.setConstraints(b2, myCons);
                this.add(b2);
                myCons.gridwidth = GridBagConstraints.REMAINDER;
                myGB.setConstraints(b3, myCons);
                this.add(b3);
               

                myCons.fill = GridBagConstraints.NONE; //don’t stretch the button
                myCons.gridwidth = GridBagConstraints.REMAINDER;
                myGB.setConstraints(b4, myCons);
                this.add(b4);
        }

public static void main (String args[]) {
gridbag1 gb = new gridbag1();
gb.setSize (200, 200);
gb.setVisible(true);
}

}

Example 2 (Buttons in multiple Cells)

import java.awt.*;
//show how the gridbag layout manager works
public class gridbag2 extends Frame {

        gridbag2() {

                Panel p = new Panel();            

                GridbagLayout myGb = new GridBagLayout();

                GridBagConstraints myCons = new GridBagConstraints();

                Button b1 = new Button (“One”);
                Button b2 = new Button (“Two”);

                Button b3 = new Button (“File”);
                Button b4 = new Button (“Help”);
                setLayout (myGB);
                myCons.weightx = 1;

                myCons.fill = GridBagConstraints.HORIZONTAL;

                myGB.setConstraints(b1, myCons);

                this.add(b1);
                myGB.setConstraints(b2, myCons);

                this.add(b2);

                myCons.gridwidth = GridBagConstraints.REMAINDER;

                myGB.setConstraints(b3, myCons);

                this.add(b3);

                myCons.gridwidth = GridBagConstraints.REMAINDER;

                myCons.fill = GridBagConstraints.BOTH;

                myGB.setConstraints(b4, myCons);

                this.add(b4);

        }
public static void main (String args[]) {
        gridbag1 gb = new gridbag2();
        gb.setSize (200, 200);

gb.setVisible(true);
}

}