Introduction to GUI Programming with Java Graphical User

Introduction to GUI Programming with Java Graphical User Interfaces With AWT and Swing Towson University 2013. *Ref: http: //chortle. ccsu. edu/java 5/index. html

Graphical User Interface

GUI - Users interact with application programs using graphical components such as buttons, text boxes, and menus as well as console. - Hard to write a GUI application, but most of functions are provided by a set of classes called Swing • Swing – A large package – Composed of graphical components: • Windows • Buttons • Menus • Text fields – Built on the fundamental classes of the Abstract Windowing Toolkit (AWT) – Come with recent Java releases 3

Events - Users controls the application by interacting with the graphical components, generating events. • GUI Events – – Mouse clicking on a button Making a choice from a menu Entering text in a text box Dragging a scroll bar • Event-driven programming – Users cause events on the GUI components and the program responds to these events. – Programming by organizing the GUI components contained in the Swing package. 4

GUI Program ● GUI Program – Graphical Components: Swing objects or extended one – Listener methods: Java methods the interface GUI components with the application tasks by calling application methods – Application methods: Java methods performing specific functional tasks 5

GUI Component

Container Classes ● Window – A fundamental container – Includes other GUI components – Ex) Browser is a window (container) containing buttons, menus, slides, icons, and other GUI components. • Container – A container can contain another container. – Ex) Main window contains frames which contain other components. 7

Java Classes ● AWT and Swing – Inherited from Java Object class • AWT – Contains the fundamental classes used for constructing GUIs. – Component class is defined as the base abstract class. – AWT classes: Button, Canvas, and Container inherited from Component class • Swing classes – Swing JComponent(derived rom AWT Container class) • one of the base class of Swing – Swing JFrame(from AWT Frame class) • Usually the main container for a GUI application 8

Swing component hierarchy • Graphical components in Java form an inheritance hierarchy: java. lang. Object +--java. awt. Component +--java. awt. Container | +--javax. swing. JComponent | +--javax. swing. JButton | +--javax. swing. JLabel | +--javax. swing. JMenu. Bar | +--javax. swing. JOption. Pane | +--javax. swing. JPanel | +--javax. swing. JText. Area | +--javax. swing. JText. Field | +--java. awt. Window +--java. awt. Frame +--javax. swing. JFrame • When doing GUI programming, always import these packages: import java. awt. *; import javax. swing. *; 9

Inheritance Hierarchy Java Programming: Program Design Including Data Structures 1010

Java GUI: AWT and Swing • Sun's initial idea: create a set of classes/methods that can be used to write a multi-platform GUI (Abstract Windowing Toolkit, or AWT) – problem: not powerful enough; limited; a bit clunky to use • Second edition (JDK v 1. 2): Swing – a newer library written from the ground up that allows much more powerful graphics and GUI construction • Drawback: Both exist in Java now; easy to get them mixed up; still have to use both sometimes! 11

JComponent Classes ● Container family – – – Can Can Can contain components be placed inside containers be displayed on the monitor generate events register event listeners • Swing classes – All Swing classes are descendants of Container class. – In addition to JComponent, JLabel, JPanel, JSlider, JText. Component, JButton, … 12

JFrame class ● JFrame – Represents the window of a GUI application program – Can hold the components and methods of your application • Methods – – set. Size() set. Bounds() set. Visible() set. Default. Close. Operation() ● Frame in Java – A window containing borders, buttons, and other features. 13

JFrame example 1 • A simple program that creates and shows a JFrame: import javax. swing. *; public class Simple. Frame { public static void main(String[] args) { JFrame frame = new JFrame(“Simple. Frame”); frame. set. Size(300, 200); frame. set. Visible(true); frame. set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE ); } } • Graphical output: 14

JFrame example 2 import java. awt. *; import javax. swing. *; public class Simple. Frame 2 { public static void main(String[] args) { JFrame frame = new JFrame(); frame. set. Foreground(Color. WHITE); frame. set. Default. Close. Operation(JFrame. EXIT_ON_C LOSE); frame. set. Location(new Point(100, 50)); frame. set. Size(new Dimension(300, 120)); frame. set. Title("A frame"); frame. set. Visible(true); } } • Graphical output: 15

JFrame A frame is a graphical window that can be used to hold other components • public JFrame() public JFrame(String title) Creates a frame with an optional title. • public void set. Title(String text) Puts the given text in the frame’s title bar. • public void set. Default. Close. Operation(int op) Makes the frame perform the given action when it closes. Common value: JFrame. EXIT_ON_CLOSE • public void add(Component comp) Places the given component or container inside the frame. – How would we add more than one component to the frame? • NOTE: Call set. Visible(true) to make a frame appear on screen after creating it. 16

JButton class ● JButton – Inherited from Abstract. Button which is inherited from JComponent – Can contain other components – Button. Frame and Button. Demo 17

Components example • This program attempts to show 2 buttons: import java. awt. *; import javax. swing. *; public class Components. Example 1 { public static void main(String[] args) { JFrame frame = new JFrame(); frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); frame. set. Size(new Dimension(300, 100)); frame. set. Title("A frame"); JButton button 1 = new JButton(); button 1. set. Text("I'm a button. "); button 1. set. Background(Color. BLUE); frame. add(button 1); JButton button 2 = new JButton(); button 2. set. Text("Click me!"); button 2. set. Background(Color. RED); frame. add(button 2); frame. set. Visible(true); } } 18

Changing layouts • We can correct the program's appearance by changing the frame's layout manager. • Change the layout by calling the set. Layout method on the frame and passing a layout manager object. – We will see several layout managers later. – We'll use one called a Flow. Layout, which sizes each component to its preferred size and positions them in left-to-right rows. – If the following line is added to the preceding program just before calling set. Visible(true), its appearance will be: frame. set. Layout(new Flow. Layout()); 19

Action events with Action. Listener

Event-driven programming • program's execution is indeterminate • on-screen components cause events to occur when they are clicked / interacted with • events can be handled, causing the program to respond, driving the execution thru events (an "event-driven" program) 21

Java Event Hierarchy java. lang. Object +--java. util. Event. Object +--java. awt. AWTEvent +--java. awt. event. Action. Event +--java. awt. event. Text. Event +--java. awt. event. Component. Event +--java. awt. event. Focus. Event +--java. awt. event. Window. Event +--java. awt. event. Input. Event +--java. awt. event. Key. Event +--java. awt. event. Mouse. Event • import java. awt. event. *; 22

Action events: Action. Event • most common / simple event type in Swing • represent an action occurring on a GUI component • created by: – – – button clicks check box checking / unchecking menu clicks pressing Enter in a text field etc. 23

Listening for events • attach a listener to the component • listener’s appropriate method will be called when event occurs (e. g. when the button is clicked) • for Action events, use Action. Listener • Action. Listeners are event handlers to define what should be done when an user performs certain operation. 24

Writing Action Listener • Declare an event handler class by specifying that the class either implements an Action. Listener interface or extends a class that implements an Action. Listener interface. public class My. Handler implements Action. Listener { … } • Register an instance of the event handler class as a listener on one or more components some. Component. add. Action. Listener(instance. Of. My. Handler); • Action. Listener interface is special, enforcing the inclusion of the method, action. Performed(). Public void action. Performed(Action. Event e) { … } 25

Writing an Action. Listener // part of Java; you don't write this public interface Action. Listener { public void action. Performed(Action. Event event); } // Prints a message when the button is clicked. public class My. Action. Handler implements Action. Listener { public void action. Performed(Action. Event event){ JButton. show. Message. Dialog(null, "An event occurred!"); } } 26

Attaching an Action. Listener import java. awt. *; import java. awt. event. *; public class My. AH extends Frame implements Window. Listener, Action. Listener { Text. Field text = new Text. Field(20); Button b; private int num. Clicks = 0; public static void main(String[] args) { My. AH my. Window = new My. AH("My first window"); my. Window. set. Size(350, 100); my. Window. set. Visible(true); } public My. AH(String title) { super(title); set. Layout(new Flow. Layout()); add. Window. Listener(this); b = new Button("Click me"); add(b); add(text); b. add. Action. Listener(this); } public void action. Performed(Action. Event e) { num. Clicks++; text. set. Text("Button Clicked " + num. Clicks + " times"); } public void window. Closing(Window. Event e) { dispose(); System. exit(0); }. . . } // end of class My. AH 27

Text Field Example • Capturing user input from a text field public void action. Performed(Action. Event e) { String text. Field. Value = text. get. Text(); text. set. Text(text. Field. Value + " PASSED. . . "); } 28

JText. Field methods • get. Text() • set. Text() 29

import import java. awt. *; java. awt. event. *; javax. swing. JText. Field; javax. swing. JText. Area; javax. swing. JButton; javax. swing. JLabel; public class My. AH extends Frame implements Window. Listener, Action. Listener { JText. Field text = new JText. Field(20); JLabel label 1 = new JLabel("AWT Button Example"); Button b; private int num. Clicks = 0; JLabel label 2 = new JLabel("Please type numeric expression"); JText. Field input = new JText. Field(20); JButton b. Submit; //Button. Frame frm = new Button. Frame("Button Demo"); JText. Area output = new JText. Area(20, 20); public static void main(String[] args) { My. AH my. Window = new My. AH("My first window"); my. Window. set. Size(350, 250); my. Window. set. Layout(new Flow. Layout()); my. Window. set. Visible(true); } 30

public My. AH(String title) { super(title); set. Layout(new Flow. Layout()); add. Window. Listener(this); b = new Button("Click Me!"); b. Submit = new JButton("Submit"); // construct a JButton add(label 1); add(b); add(text); add(label 2); add(input); add(b. Submit); //input. set. Text("Type numeric expression. "); add(output); b. add. Action. Listener(this); My. Action. Handler calc. Handler = new My. Action. Handler(); b. Submit. add. Action. Listener(calc. Handler); } 31

public void action. Performed(Action. Event e) { num. Clicks++; String text. Field. Value = text. get. Text(); text. set. Text("Button has been pressed " + num. Clicks + " times. "); /* String input. Text. Field. Value = input. get. Text(); Double output. Value = calculate(input. Text. Field. Value); input. set. Text(input. Text. Field. Value); //output. set. Text("Result equals" + i*100); output. set. Text("Result equals " + input. Text. Field. Value); //output. set. Text("Result equals" + output. Value); */ } public double calculate(String exp) { return 100; } public void window. Closing(Window. Event e) { dispose(); System. exit(0); } 32

public public void void window. Opened(Window. Event e) {} window. Activated(Window. Event e) {} window. Iconified(Window. Event e) {} window. Deiconified(Window. Event e) {} window. Deactivated(Window. Event e) {} window. Closed(Window. Event e) {} public class My. Action. Handler implements Action. Listener { public void action. Performed(Action. Event e) { String input. Text. Field. Value = input. get. Text(); Double output. Value = calculate(input. Text. Field. Value); input. set. Text(input. Text. Field. Value); output. set. Text("Result equals " + input. Text. Field. Value); } } // end of class My. Action. Handler } // end of class My. AH 33