Graphical User Graphical User InterfaceInterface

(GUI)(GUI)

Java API

GUIGUIContains 1 label, 1

text box and 2 buttons

Contains 3 buttons, 3 image icons , and 3 labels with text.

Window ObjectsWindow Objects A GUI contains many objects in a window.A GUI contains many objects in a window. Classes for creating window objects are found Classes for creating window objects are found

in in javax.swingjavax.swing package. package. JButton—JButton—clickable buttonsclickable buttons JLabel—JLabel—to display text and imagesto display text and images JTextField—JTextField—to input and output textto input and output text JTextArea—JTextArea—forfor I/O of multiple lines of text I/O of multiple lines of text JScrollBar—JScrollBar—to implement scrollbarto implement scrollbar JCheckBox—JCheckBox—forfor multiple selections of multiple selections of

choices choices JRadioButton—JRadioButton—forfor one selection out a set of one selection out a set of

choices choices

Container ClassContainer Class

The The swingswing objects—labels, buttons, etc.—are objects—labels, buttons, etc.—are arranged within a arranged within a container objectcontainer object.. PanelPanel ( (JPanelJPanel)—an intermediate container )—an intermediate container

in which objects are arranged in which objects are arranged The intermediate container is then inserted The intermediate container is then inserted

into a top-level containerinto a top-level container FrameFrame ( (JFrameJFrame)—a window with border, )—a window with border,

title, and button for closingtitle, and button for closing AppletApplet ( (JAppletJApplet)—container for a program )—container for a program

to be embedded in a Web pageto be embedded in a Web page

Developing GUI Developing GUI Application Application

Developing an application that involves a GUI Developing an application that involves a GUI requires the following steps.requires the following steps.

1.1. Create a Frame by extending JFrame and Create a Frame by extending JFrame and “implementing” ActionListener“implementing” ActionListener

2.2. Create GUI objectsCreate GUI objects3.3. Choose objects to cause events and associate them Choose objects to cause events and associate them

with actionListener with actionListener 4.4. Create a panelCreate a panel5.5. Add objects to the panelAdd objects to the panel6.6. Define actionPerformed method to be executed for Define actionPerformed method to be executed for

each each eventevent* * 7.7. In the main() method:In the main() method:

1.1. Instantiate a frame by extending JFrameInstantiate a frame by extending JFrame2.2. Call SetdefaultCloseOperationCall SetdefaultCloseOperation3.3. Add panel to the frameAdd panel to the frame4.4. Make the frame visibleMake the frame visible

Developing GUI Applet Developing GUI Applet Developing an applet that involves a GUI Developing an applet that involves a GUI

requires the following steps.requires the following steps.1.1. Create an Applet by extending JApplet and Create an Applet by extending JApplet and

“implementing” ActionListener“implementing” ActionListener2.2. In the init() method:In the init() method:3.3. Create GUI objectsCreate GUI objects4.4. Decide which objects will be responsible for Decide which objects will be responsible for

events and associate them to actionListenerevents and associate them to actionListener5.5. Create a panelCreate a panel6.6. Add objects to the panelAdd objects to the panel7.7. Insert panel into the appletInsert panel into the applet8.8. Make applet visibleMake applet visible9.9. Define actionPerformed method to be Define actionPerformed method to be

executed for each executed for each eventevent* *

EventEvent

EventEvent—an action initiated outside —an action initiated outside the program, e.g., by the user, that the program, e.g., by the user, that can trigger the program to execute a can trigger the program to execute a particular code segment.particular code segment.

Event ExamplesEvent Examples Clicking a buttonClicking a button Hovering over a text boxHovering over a text box Sliding a scroll barSliding a scroll bar Striking a particular key on the keyboardStriking a particular key on the keyboard

Back

Creating a Simple GUICreating a Simple GUI

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

Developing a GUIDeveloping a GUI

1.1. Create a frame class by extending Create a frame class by extending JFrameJFrame class. class.

2.2. Create GUI’s individual elements.Create GUI’s individual elements.3.3. In the constructor In the constructor

1.1. Call the parent class’s constructor.Call the parent class’s constructor.2.2. Arrange GUI elements in a Arrange GUI elements in a panelpanel..3.3. Insert the Insert the panelpanel into the into the frameframe..

4.4. In the In the main()main() method, instantiate method, instantiate the frame.the frame.

Developing a GUIDeveloping a GUI

component

txt fld 1

frame

panelLabel 2txt fld 2

label 1

Label 3txt fld 3

label 1 label 2

txt fld 1 txtfld 1

panel

Java Code for a Simple Java Code for a Simple GUIGUI

Here is the Here is the source code source code for creating the for creating the GUI.GUI.

Note:Note: public class GUIDemo extends JFrame public class GUIDemo extends JFrame declares declares

GUIDemo as a subclass of JFrameGUIDemo as a subclass of JFrame Instantiation of GUI elements (c.f., Instantiation of GUI elements (c.f., Java APIJava API)) super("GUI Demo"); super("GUI Demo"); calls the parent class’s calls the parent class’s

constructor, which displays title in frame.constructor, which displays title in frame. setDefaultCloseOperation(JFrame.EXIT_ON_CLOSEsetDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ); tells the program to end when window is tells the program to end when window is closedclosed..

Code (cont.)Code (cont.)

JPanel pane = new JPanel pane = new JPanelJPanel(); (); All elements All elements must be arranged in an intermediate must be arranged in an intermediate container before they can be inserted into container before they can be inserted into the frame.the frame.

setContentPane(pane)setContentPane(pane); Insert container ; Insert container into the frame.into the frame.

setVisible(true); setVisible(true); Make the frame visible. Make the frame visible.

ExerciseExerciseWrite a program that displays the interface shown below.

Skip code

High-level ProcedureHigh-level Procedureimport 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(); } }

CodeCodeimport 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 ManagersLayout Managers

Java uses layout manager classes to Java uses layout manager classes to control arrangement of GUI elements.control arrangement of GUI elements. FlowLayout (default)FlowLayout (default) GridLayoutGridLayout BorderLayoutBorderLayout GridBagLayoutGridBagLayout CardLayoutCardLayout

Flow LayoutFlow Layout

This is the default scheme.This is the default scheme. Elements are inserted in a container in Elements are inserted in a container in

order, moving to the next row as needed.order, moving to the next row as needed.

Click image to see source code

Flow Layout (cont.)Flow Layout (cont.) In the source code, note:In the source code, note:

Declarations of objects are at the class Declarations of objects are at the class level, but instantiations are local, inside the level, but instantiations are local, inside the constructor. This makes the objects visible constructor. This makes the objects visible to all methods, but details of object to all methods, but details of object formatting are deferred until the constructor formatting are deferred until the constructor is called.is called.

gui.show();gui.show(); in the in the main()main() makes the frame makes the frame visible. Same as visible. Same as setVisible(true)setVisible(true) inside inside the constructor.the constructor.

Grid LayoutGrid Layout

Elements are inserted in particular Elements are inserted in particular cells an N x M matrixcells an N x M matrix Click image

to see source code

Grid Layout (cont.)Grid Layout (cont.)

In the source code note that a In the source code note that a GridLayoutGridLayout object object gridgrid is created, and is created, and the it is associated with the the it is associated with the JPanelJPanel object object panelpanel..

JPanel panel = new JPanel(); GridLayout grid = new GridLayout(3, 3); // create layout manager panel.setLayout(grid);

Border LayoutBorder Layout Elements are inserted at North, South, Elements are inserted at North, South,

East, West, and Center positionsEast, West, and Center positions

Click image to see source code