Graphical User Interface (GUI)

Graphical User Interface(GUI) Java API

GUI Contains 1 label, 1 text box and 2 buttons Contains 3 buttons, 3 image icons , and 3 labels with text.

Window Objects • A GUI contains many objects in a window. • Classes for creating window objects are found in javax.swing package. • JButton—clickable buttons • JLabel—to display text and images • JTextField—to input and output text • JTextArea—forI/O of multiple lines of text • JScrollBar—to implement scrollbar • JCheckBox—for multiple selections of choices • JRadioButton—forone selection out a set of choices

Container Class • The swing objects—labels, buttons, etc.—are arranged within a container object. • Panel (JPanel)—an intermediate container in which objects are arranged • The intermediate container is then inserted into a top-level container • Frame (JFrame)—a window with border, title, and button for closing • Applet (JApplet)—container for a program to be embedded in a Web page

Developing GUI Application • Developing an application that involves a GUI requires the following steps. • Create a Frame by extending JFrame and “implementing” ActionListener • Create GUI objects • Choose objects to cause events and associate them with actionListener • Create a panel • Add objects to the panel • Define actionPerformed method to be executed for each event* • In the main() method: • Instantiate a frame by extending JFrame • Call SetdefaultCloseOperation • Add panel to the frame • Make the frame visible

Developing GUI Applet • Developing an applet that involves a GUI requires the following steps. • Create an Applet by extending JApplet and “implementing” ActionListener • In the init() method: • Create GUI objects • Decide which objects will be responsible for events and associate them to actionListener • Create a panel • Add objects to the panel • Insert panel into the applet • Make applet visible • Define actionPerformed method to be executed for each event*

Event • Event—an action initiated outside the program, e.g., by the user, that can trigger the program to execute a particular code segment. • Event Examples • Clicking a button • Hovering over a text box • Sliding a scroll bar • Striking a particular key on the keyboard Back

Creating a Simple GUI • Create the GUI above, which contains one label, one text box, and two buttons in a frame.

Developing a GUI • Create a frame class by extending JFrame class. • Create GUI’s individual elements. • In the constructor • Call the parent class’s constructor. • Arrange GUI elements in a panel. • Insert the panel into the frame. • In the main() method, instantiate the frame.

frame label 1 Label 2 Label 3 panel txt fld 2 txt fld 3 txt fld 1 label 1 label 2 panel txt fld 1 txtfld 1 Developing a GUI component

Java Code for a Simple GUI • Here is the source code for creating the GUI. • Note: • public class GUIDemo extends JFrame declares GUIDemo as a subclass of JFrame • Instantiation of GUI elements (c.f., Java API) • super("GUI Demo"); calls the parent class’s constructor, which displays title in frame. • setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); tells the program to end when window is closed.

Code (cont.) • JPanel pane = new JPanel(); All elements must be arranged in an intermediate container before they can be inserted into the frame. • setContentPane(pane); Insert container into the frame. • setVisible(true); Make the frame visible.

Exercise Write a program that displays the interface shown below. Skip code

High-level Procedure import javax.swing.*; class MyInterface extends JFrame { // declare objects // constructor public MyInterface() { // prepare frame // instantiate components // create intermediate container // add components to container // insert pane into frame // make frame visible } public static void main(String[] args) { MyInterface demo = new MyInterface1(); } }

Code import javax.swing.*; class MyInterface extends JFrame { // declare objects JLabel lbFirstName; JLabel lbLastName; JLabel lbFirstTime; JTextField txFirstName; JTextField txLastName; JRadioButton rbFirstTime; JButton btStart; JButton btClear; // constructor public MyInterface1() { // prepare frame super("INTERFACE DEMO");

setSize(400, 200); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // prepare components lbFirstName = new JLabel("Enter your first name.") lbLastName = new JLabel("Enter your last name."); lbFirstTime = new JLabel("Check if this your first time?"); txFirstName = new JTextField(20); txLastName = new JTextField(20); rbFirstTime = new JRadioButton("First Time?"); btStart = new JButton("Start"); btClear = new JButton("Clear"); // intermediate container JPanel pane = new JPanel(); // add components to container pane.add(lbFirstName); pane.add(txFirstName);

pane.add(lbLastName); pane.add(txLastName); pane.add(lbFirstTime); pane.add(rbFirstTime); pane.add(btStart); pane.add(btClear); // insert pane into frame setContentPane(pane); // make frame visible setVisible(true); } // Interface public static void main(String[] arguments) { MyInterface1 demo = new MyInterface1(); } // main // Interface To GUI

Layout Managers • Java uses layout manager classes to control arrangement of GUI elements. • FlowLayout (default) • GridLayout • BorderLayout • GridBagLayout • CardLayout

This is the default scheme. Elements are inserted in a container in order, moving to the next row as needed. Flow Layout Click image to see source code

Flow Layout (cont.) • In the source code, note: • Declarations of objects are at the class level, but instantiations are local, inside the constructor. This makes the objects visible to all methods, but details of object formatting are deferred until the constructor is called. • gui.show(); in the main() makes the frame visible. Same as setVisible(true) inside the constructor.

Grid Layout • Elements are inserted in particular cells an N x M matrix Click image to see source code

Grid Layout (cont.) • In the source code note that a GridLayout object grid is created, and the it is associated with the JPanel object panel. JPanel panel = new JPanel(); GridLayout grid = new GridLayout(3, 3); // create layout manager panel.setLayout(grid);

Border Layout • Elements are inserted at North, South, East, West, and Center positions Click image to see source code

Graphical User Interface (GUI)