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

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

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 {

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); } }

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.

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

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

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

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