TOPICS

Graphical User Interfaces (GUI)

DESCRIPTION

Create a Graphical User Interface (GUI-based) application that converts a temperature in Fahrenheit to Centigrade and vice verse. See picture below.

Picture

See image: see image.

Discussion

GUI-based Program

A program that contains a Graphical User Interface (GUI) is called a GUI-based program. It uses GUI components for interfacing with the user.

A GUI Component

A GUI component is a visual component that a user can use for communicating with the program . Buttons, text fields, menus, drop-down lists etc are all examples of GUI components.

GUI Object

Internally, each GUI component is a program object. For example, two buttons displayed above are internally two JButton objects. Similarly, other GUI components above are also objects of Java classes such as JPanel, JTextField, JLabels, etc.

Difference Between a GUI Object and Non-GUI Object

Both a GUI Object and a non-GUI object have internal representations consisting of its field values and methods. However a GUI Object additionally has an external representation that a user can visually see. The Java runtime keeps the two representations always in synch. For example, each GUI program starts by displaying a window. This window is an external representation of an internal JFrame object. When the user changes the width of a JFrame window visually by clicking and dragging the mouse, the internal value of the field named "width" also changes accordingly. Similarly, when the program changes the value of field named width by calling the method setWidth, the external width of the JFrame window also changes accordingly. The two representations always stay in synch.

Creating a GUI program

You can create a GUI program by creating an object of JFrame. However, this program would have minimal functionality.

In creating a practical GUI program, we extend the JFrame class using inheritance and then add functionality to it. Then we create an object of extended JFrame class and display the extended JFrame object.

Content Pane

In creating a GUI-based program, the programmer first extends the JFrame class. Then, in its constructor, the programmer creates a main JPanel object and puts all the needed GUI in it. Then the programmer makes the main JPanel as the content pane. When the main JPanel is made into a content pane, all the GUI in it becomes the GUI of the running program. (Note that the main JPanel may contain other JPanels which may contain GUI objects. Above, the main JPanel object contains three JPanel objects. Each of which contain other GUI objects).

Creating A GUI program.

Creating a GUI program involves the following:

JFrameExt class

Create a class that extends JFrame (e.g JFrameExt). In the constructor of this class, create the GUI as below:

  • Create a main JPanel
  • Make the main JPanel as the content pane of the extended JFrame object
  • Create a layout object (such as GridLayout, FlowLayout or BorderLayout object).
  • Set the layout of the main JPanel by passing it the above layout object
  • Add GUI components to the main JPanel object by calling its add method.
  • Register the extended JFrame object as a listener with GUI components (such as JButton object) from which you want to receive events.
  • Write an event handler in extended JFrame for receiving the events (e.g. event handler actionPerformed).

TestJFrameExt class

Create another class containing the main method (e.g. TestJFrameExt class). In the main method, do the following:

  • Create an object of extended JFrame class created above (use new to create the object).
  • Set the size of the extended JFrame. (by calling its method setSize)
  • Make the JFrame visible (by calling its method setVisible)

Note that when you create the JFrameExt, its constructor is called which creates its GUI. So when the main method shows the JFrameExt object, you will see the GUI.

Synchronous I/O

In this type of I/O, the program initiates input/output activity and is called Synchronous I/O. For example when you use showMessageDialog and showInputDialog methods of the class JOptionPane for input and output.

Asyncronous I/O or Event Driven I/O

In this type of I/O, the user initiates the input/output activity and is called Asynchronous I/O or Event Driven I/O. For example, the user may initiate I/O by clicking on a button or by selecting a menu item. In this type of I/O, each time user initiates an I/O activity, the system creates an event. The program responds to the event by invoking an event handler.

GUI Programs

All GUI based programs use Event Driven I/O. For example, when the user selects a menu item such as Open File, it results in an event. This event results in invoking a method (event handler) in the program that responds to the user request.

Thus a GUI program is made up of a number of event handling methods which are invoked to handle specific events.

Sample Code

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class JFrameExt extends JFrame implements ActionListener{
private JPanel jpMain = new JPanel();
private JPanel jpFrom = new JPanel();
private JPanel jpTo = new JPanel();
private JPanel jpOp = new JPanel();
private JLabel jlbFrom = new JLabel("From");
private JLabel jlbTo = new JLabel ("To ");
private JTextField jtfFrom = new JTextField(10);
private JTextField jtfTo = new JTextField(10);
private JButton jbtFtoC = new JButton("FtoC");
private JButton jbtCtoF = new JButton("CToF");


public JFrameExt (){
setTitle ("Converter");
setSize(400, 200);
setVisible(true);
//set jpMain layout
GridLayout gl = new GridLayout (3,1);
jpMain.setLayout(gl);
//add panels to jpMain
jpMain.add(jpFrom);
jpMain.add(jpTo);
jpMain.add(jpOp);
jpFrom.setBackground(Color.red);
jpTo.setBackground(Color.green);
jpOp.setBackground(Color.magenta);
//Make jpMain as the content pane
this.setContentPane(jpMain);
//add components to panels
jpFrom.add(jlbFrom);
jpFrom.add(jtfFrom);
jpTo.add(jlbTo);
jpTo.add(jtfTo);
jtfTo.setEditable(false);
jpOp.add(jbtFtoC);
jpOp.add(jbtCtoF);
//register this object as a listener with buttons
jbtFtoC.addActionListener(this);
jbtCtoF.addActionListener(this);
}
//Listener method
public void actionPerformed(ActionEvent ev) {
String sFrom,sTo;
double dFrom, dTo;
sFrom = jtfFrom.getText().trim();
dFrom = Double.parseDouble(sFrom);

if (ev.getSource()==jbtFtoC){
dTo = 5.0/9.0 * (dFrom - 32.0);
sTo = "" + dTo;
jtfTo.setText(sTo);
}
else if (ev.getSource()==jbtCtoF){
dTo = (9.0/5.0 *dFrom) + 32.0;
sTo = "" + dTo;
jtfTo.setText(sTo);
}
}
}
Academic Honesty!
It is not our intention to break the school's academic policy. Posted solutions are meant to be used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly complete the form. Please provide a valid email address and we will get back to you within 24 hours. Payment is through PayPal, Buy me a Coffee or Cryptocurrency. We are a nonprofit organization however we need funds to keep this organization operating and to be able to complete our research and development projects.