Making Graphical interfaces in Java using Frames


Making GUI in Java is actually easier than you can think. It need only AWT or Swing api and few classes like frame, button, textfield, action listeners and some more relevent Classes. It is all available all you need to do is create and add objects to the display which could be either a frame or an applet

In the last part Basics of Java AWT and GUI we told you what is AWT what are its uses, and how you can get started. In this part we will tell you that you can call up on a Frame from an applet or another class but you need to pay attention to some finer points.

The applet is itself a sub class of Component is AWT hierarchy, If you try to create and add a frame to applet it would not work. So what? Well you can call up on a frame anyway. In following few code snippets we will take you through the creating of frame from applet and what happens when we do so.


package GUI;

import java.applet.Applet;
import java.awt.*;
import java.awt.event.*;

public class DemoFramedApplet extends Applet{

    Frame f;
    public void init() {
        f = new Frame("frame inside applet");
        f.setSize(400,500);
        f.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent we){
                System.exit(0);
            }
        });
    }
    
    public void start(){
        f.setVisible(true);
    }
    
    public void stop(){
        f.setVisible(false);
    }
    
}

As we already extended a class in DemoFramedApplet, we can not extend Frame class so we will need to create an object of Frame. Rest goes as it used to be. Set the properties of frame and so on. But See what happens when we run this program.

Frame With Applet

As you can clearly see that there are two windows instead of one. The Applet window and the frame window. This happens because Frame lies in a different hierarchy of the AWT environment and we can not overlap them. However we can work both in nearly similar way So from now on we will be working with the this same example but all the work will be done on the Frame instead of applet. we will leave applet as it is in the background.

In the further program we are going to create some elements and place them on the window.


package GUI;

import java.applet.Applet;
import java.awt.Component;
import java.awt.*;
import java.awt.event.*;

public class DemoFramedApplet extends Applet{

    Frame f;
    Label l;
    TextField tf;
    Button b;
    public void init() {
        f = new Frame("frame inside applet");
        f.setSize(400,500);
        f.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent we){
                System.exit(0);
            }
        });
        
        f.setLayout(new FlowLayout());
        
        l = new Label("Email:");
        f.add(l);
        
        tf = new TextField(20);
        f.add(tf);
        
        b = new Button("submit");
        f.add(b);
      
    }
    
    public void start(){
        f.setVisible(true);
    }
    
    public void stop(){
        f.setVisible(false);
    }
    
}

Now we have added a Label a text field and a Button to the frame and here is how it looks

Frame with components

As you can see it is easier than adding frame, all you needed was to create an object and add it to the frame. But mind that they will not be doing anything, they are just there. For any element to do something we need to bind events with them which is what we are going to see in the next code snippet. But meanwhile you should know about the layout. we have set layout to Flow Layout, this layout places the elements in a linear flow, one after other as we add them. There are other type of layouts available like GridLayout or Linear layout each one with its specialty. However AWT allows you to create custom layout. You can customize the position and size of any element on board.

So let us see how we can make anything do something. For that as we told you that we will be binding some events to the component. Well not all but at least for a demonstration we are going to add up an action event with the button. For this we first need to implement ActionListener interface.


package GUI;

import java.applet.Applet;
import java.awt.Component;
import java.awt.*;
import java.awt.event.*;
import javax.swing.JOptionPane;

public class DemoFramedApplet extends Applet implements ActionListener {

    Frame f;
    Label l;
    TextField tf;
    Button b;
    public void init() {
        f = new Frame("frame inside applet");
        f.setSize(400,500);
        f.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent we){
                System.exit(0);
            }
        });
        
        f.setLayout(new FlowLayout());
        
        l = new Label("Email:");
        f.add(l);
        
        tf = new TextField(20);
        f.add(tf);
        
        b = new Button("submit");
        b.addActionListener(this);
        f.add(b);
      
    }
    
    public void actionPerformed(ActionEvent ae){
        if(ae.getSource()== b){
            System.out.println("event triggered"+tf.getText());
            JOptionPane.showMessageDialog(f, tf.getText());
        }
    }
    
    public void start(){
        f.setVisible(true);
    }
    
    public void stop(){
        f.setVisible(false);
    }
    
}

Dialog box

As we told you already we will need to implement an interface named action listener. you can learn more about Listeners and event handling in out Event handling section. However We are going to cover the basics here.

An event is a signal or interrupt in terms of computer vocabulary, which is generated when some action takes place. Event can be of any kind like click, type, mouse move, window close, window restore, window minimize, window resize or scrolling of scroll bar. There are many more if you go in finer details.

To specify what happens when we do something on some component, we need to bind some event listener to it. So that when some action will be performed it will notify the system about that action and accordingly we can define the reaction to that action. That is when some event occurs we can specify the code which will be executing in response of that event. Here the interface ActionListener provide a method named actionPerformed(ActionEvent ae);, which can be overridden to specify the event handling code. We use addActionListener(), method on the button to bind the action of that button with the event.

Finally in the action performing code we have used JOptionPane to display a message. This generates a kind of dialog box and in dialog box we display the text that we enter in the text field. We use getText() method to get the text value from text field.

Note: The JOptionPane is part of javax.swings API. AWT provide the Dialog class to serve the purpose but it takes too much coding effort to do small bidding like displaying a message. So we preferred the JOptionPane for the purpose. Simple and effective.