1 Graphical User Interface Components Part 1 Outline

1 Graphical User Interface Components: Part 1 Outline • Introduction • Overview of Swing Components • Frames • JLabel • Event Handling • Text. Fields • How Event Handling Works • JButton

2 Introduction • Graphical User Interface (GUI) – Gives program distinctive “look” and “feel” – Provides users with basic level of familiarity – Built from GUI components (controls, widgets, etc. ) • User interacts with GUI component via mouse, keyboard, etc.

3 Netscape window with GUI components button menus menu bar combo box scroll bars

4 Some basic GUI components

5 Overview of Swing Components • Swing GUI components – Package javax. swing – Components originate from AWT (package java. awt) – Contain look and feel • Appearance and how users interact with program – Lightweight components • Written completely in Java

6 Overview of Swing Components • Class Component – Contains method paint for drawing Component onscreen • Class Container – Collection of related components – Contains method add for adding components • Class JComponent – Pluggable look and feel for customizing look and feel – Shortcut keys (mnemonics) – Common event-handling capabilities

Common superclasses of many of the Swing components Object Component Container JComponent . . week 6warm_up_1 7

What is a frame? Frame object is a window with a title bar that provides the basic attributes of a window such as buttons to minimize, maximize and close. 8

9 Resizing windows Frame with less width Width reduced further

10 My mental picture of a frame Visualize Graphical User interfaces as pictures to be mounted on this picture frame.

11 How to show a GUI object? Create the object Attach the object to the frame. Question Where to attach the object? Decided by the layout manager. In this course we will only look at the simplest layout manager - the flow layout manager

How does a flow layout manager work? 12 It works by placing the GUI objects left to right top to bottom. Example of picture frame Suppose we have 3 pictures to mount. How do we proceed? Take the first picture Put it on. Take the second picture. Put it on. etc

13 Where does the next picture go? Look for space - place from left to right, top to bottom. There is enough space for the first 2 pictures in the top row.

Where will the last picture go? Since there is no place in the top row, it goes to the next row. 14

What if the window is resized? The layout manager automatically moves the position of the GUI objects, moving them from row to row as needed. 15

General form of a frame based program import javax. swing. *; import java. awt. event. *; public class your_application_name extends JFrame implements an interface { Variables needed for your application Constructor method other methods as needed methods needed for the interface main method }. . week 6Frame_2 16

17 JLabel • Label – Provide text on GUI – Defined with class JLabel – Can display: • Single line of read-only text • Image • Text and image . . week 6label_3

18 Event & Handling • GUIs are event driven – Generate events when user interacts with GUI • e. g. , moving mouse, pressing button, typing in text field, etc. • Class java. awt. AWTEvent • An event is something that happens in the outside world that our program should be aware of. • Examples : – pressing the Carriage Return (CR) – pressing a Java button – clicking or dragging a mouse button

19 Event & Handling • Event-handling model – Three parts • Event source – GUI component with which user interacts • Event object – Encapsulates information about event that occurred • Event listener – Receives event object when notified, then responds – Programmer must perform two tasks • Register event listener for event source • Implement event-handling method (event handler)

Some event classes of package java. awt. event Object Action. Event. Object Adjustment. Event AWTEvent Container. Event Item. Event Focus. Event Text. Event Paint. Event Component. Event Window. Event Input. Event Key. Event Mouse. Wheel. Event 20

Event-listener interfaces of package java. awt. event interface «interface» Action. Listener interface «interface» Adjustment. Listener «interface» interface Component. Listener interface «interface» Container. Listener interface «interface» Focus. Listener «interface» interface Event. Listener «interface» interface Item. Listener interface «interface» Key. Listener interface «interface» Mouse. Motion. Listener interface «interface» Text. Listener «interface» interface Window. Listener Text. Listener 21

22 An example

23 An example(Cont’d)

24 What GUI objects do we need? A label Another label A place to type a line A box to display results

JText. Field class Objects of the JText. Field class used for two way communication either to display a String on say a frame or to allow the user to type in a String in a JText. Field object for retrieval and manipulation. This class is very useful for interacting with lines of text. 25

Useful methods of this class JText. Field(n) where n gives how many characters are to be displayed. set. Text(Astring) defines the string to be saved. get. Text() returns the String saved in the object. 26

A diagram showing event handling 27

The problem public class My. Second. Frame { // GUI objects we need // Constructor // event handler // main method which will // display the JFrame object }. . week 6My. Second. Frame 28

29 Text. Fields • JText. Field – Single-line area in which user can enter text • JPassword. Field – Extends JText. Field – Hides characters that user enters . . week 6textfield_3

30 How Event Handling Works • How did event handler get registered? – Answer: • Through component’s method add. Action. Listener • How does component know to call action. Performed? – Answer: • Event is dispatched only to listeners of appropriate type • Each event type has corresponding event-listener interface – Event ID specifies event type that occurred

31 JButton • Button – Component user clicks to trigger a specific action – Several different types • • Command buttons Check boxes Toggle buttons Radio buttons – javax. swing. Abstract. Button subclasses • Command buttons are created with class JButton – Generate Action. Events when user clicks button

32 Swing button hierarchy JComponent Abstract. Button JToggle. Button JButton JToggle. Button JCheck. Box . . week 6button_4 JRadio. Button

33 Panels • Panel – Helps organize components – Class JPanel is JComponent subclass – May have components (and other panels) added to them . . week 6panel_demo_17