1. Graphical User Interface (GUI)
Java API

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

3. 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—for I/O of multiple lines of text
JScrollBar—to implement scrollbar
JCheckBox—for multiple selections of choices
JRadioButton—for one selection out a set of choices

4. 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

5. 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

6. 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*

7. 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

8. Completing Event Handlers
Java Interface
Like a class, but has no instance variables
Contains abstract method—an outline of a method whose contents must be provided by the interface client
To use Interface ActionListener
import java.awt.event.*; class MyApplet extends Japplet implements ActionListener {

9. Completing Event Handlers (cont.)
// Event handler for action events on buttons
public void actionPerformed(ActionEvent event) Object object = event.getSource(); if (object == btnPush) { count++; lblResult.setText("Number of Pushes: " count); } else if (object == btnReset) { count = 0; lblResult.setText("Number of Pushes: " count); } }

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

11. 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.

12. Developing a GUI frame panel component txt fld 1 Label 2 txt fld 2

13. 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.

14. 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.

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

16. 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(); } }

17. 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");

18. setSize(400, 200); setDefaultCloseOperation(JFrame
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);

19. pane. add(lbLastName); pane. add(txLastName); pane
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

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

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

22. 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.

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

24. 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);

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