GUI

Computer Science and Engineering „ The Ohio State University Swing: Components for Graphical User Interfaces

Computer Science and Engineering „ College of Engineering „ The Ohio State University

Lecture 24

GUI: A Hierarchy of Nested Widgets Visual (Containment) Hierarchy

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † Top-level widgets: outermost window (a container) „ Frame, applet, dialog † Intermediate widgets: allow nesting (a container) „ General purpose † Panel, scroll pane, tabbed pane, tool bar „ Special purpose † Layered pane † Atomic widgets: nothing nested inside „ Basic controls † Button, list, slider, text field „ Uneditable information displays † Label, progress bar, tool tip „ Interactive displays of highly formatted information † Color chooser, file chooser, tree † For a visual (“look & feel”) of widgets see: „ http://java.sun.com/docs/books/tutorial/uiswing/components † Vocabulary: Widgets usually referred to as “GUI components” or simply “components”

History Class Hierarchy: Component

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † Java 1.0: AWT (Abstract Window Toolkit) † Operations common to „ Platform-dependent implementations of widgets nonmenu-related GUI † Java 1.2: Swing widgets java.lang „ More than 60 (public) „ Most widgets written entirely in Java methods! Object „ More portable † Drawing the widget † Main Swing package: javax.swing „ paint(): draw the whole java.awt „ Defines various GUI widgets widget Component † Extensions of classes in AWT „ repaint(): schedule the † Many class names start with “J” widget to be redrawn, will result in framework „ Includes 16 nested subpackages calling… † javax.swing.event, javax.swing.table, javax.swing.text… „ update(): modifies part of † Basic GUI widgets include widget, or just calls „ JFrame, JDialog paint() for full refresh „ JPanel, JScrollPane, JTabbedPane, JToolBar † Appearance of widget „ JButton, JRadioButton, JCheckBox, JTextField, JSlider „ setvisible(): determine whether widget will be „ JLabel, JToolTip visible on screen „ JColorChooser, JFileChooser „ setLocation() extends † Dealing with user events

1 Class Hierarchy: Container Basic Hierarchy: JComponent

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † A widget that can † Base class for all include other widgets „ Visual nesting java.lang Swing widgets, java.lang † Contained widgets Object except top-level Object are called “children” containers (ie „ But not children as in java.awt java.awt behavioral subtypes Component applet, frame, Component † Methods for dialog) managing contained java.awt java.awt widgets Container Container „ add: adds components to container javax.swing „ setLayout: specifies JComponent the layout manager that helps container position and size contained components extends extends

Part of JComponent Hierarchy JLabel

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † A JLabel object provides text JComponent instructions or information on a GUI „ Displays a single line of read-only text, an image, or both JFileChooser AbstractButton JLabel JPanel . . . † See „ Example code JToggleButton JButton „ Output † One thing to be empasized: JCheckBox JRadioButton „ If you do not explicitly add a GUI component to a container, the GUI component will not be displayed when the extends container appears on the screen

An Interactive GUI Component Handling Events

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † To make an interactive GUI program, † GUI is event driven you need: † Event handling occurs as a loop: „ GUI program is idle „ Components „ User performs an action, for example: † Buttons, windows, menus, etc. † Moving the mouse, clicking a button, closing a window, typing in a text box, selecting an item „ EtEvents from a menu, … † Mouse clicked, window closed, button clicked, „ Such an action generates an event etc. „ The event is sent to the program, which „ Event listeners (implement an interface) responds † Code executes, GUI updates and event handlers (methods) „ GUI program returns to being idle † Listen for events to be trigged, and then † Many event types defined in perform actions to handle them java.awt.event and javax.swing.event

2 Part of AWTEvent Hierarchy Handling Events Mechanism

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † Three parts of the event-handling EventObject mechanism „ Event source: the GUI component with which the AWTEvent user interacts „ Event object: encapsulated information about the ActionEvent TextEvent occurred event „ Event listener: an object that is notified by the AdjustmentEvt ComponentEvt ItemEvent event source when an event occurs, and provides responds to the event

ContainerEvt WindowEvent ActionEvent FocusEvent InputEvent PaintEvent JButton ActionListener

extends ContainerEvt FocusEvent

Programmer Tasks JTextField and JPasswordField

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † Implement an event listener † Single-line areas for text „ Can be editable (user enters text from keyboard) „ A class X that implements one (or more) of or not the event listener interfaces „ Password field does not show individual interface ActionListener { characters void actionPerformed (ActionEvent e); † When the user types data into them and } presses the Enter key: interface FocusListener { „ An event occurs (ActionEvent) void focusGained (FocusEvent e); „ All registered listeners (ActionListeners) receive void focusLost (FocusEvent e); the event } „ Argument to method actionPerformed includes text from field † Register an instance of X with component † See: „ java.awt.Container has methods for adding „ Example code listeners „ Output void addFocusListener (FocusListener f)

Buttons Part of JComponent Hierarchy

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † A button is a component the user clicks to trigger a specific action JComponent † There are several types of buttons, all are subclasses of AbstractButton „ Command button: † Class JButton, generates ActionEvent JFileChooser AbstractButton JLabel JPanel . . . „ Toggle button: † Has on/off or true/false values „ Check boxes: † A group of buttons in which more than one can be JToggleButton JButton selected, generates ItemEvent „ Radio buttons: † A group of buttons in which only one can be selected, JCheckBox JRadioButton generates ItemEvent † See: „ Example code „ Output extends

3 More Components…

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † JComboBox: „ A drop-down list from which the user can make a selection „ Generates an ItemEvent † JList : „ A list supporting both single and multiple selection „ Generates a ListSelectionEvent

Layout Management Layout Management with Panels

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † Layout refers to how components are arranged in the † Problem with container BorderLayout: „ The button is stretched to fill the entire southern region of the frame „ If you add another button to the southern region, it just displaces the first button † Solution: use additional † This positioning is determined by a layout manager panels „ Buttons in the above example are managed by the flow layout „ Act as containers for manager, which is the default layout manager for a panel interface elements and can themselves be arranged „ The default manager lines the components horizontally until inside a larger panel there is no more room and then start a new row of components „ Use flow layout by default „ After resizing the container, the layout manager reflows the components automatically † To fix the BorderLayout problem „ The default is to center the components in each row, but this can JPanel p = new JPanel(); be overridden with left or right alignment 1. Create a new panel p.add(button1); † panel.setLayout(new FlowLayout(FlowLayout.LEFT)); 2. Add each element to the panel p.add(button2); † Other managers: for a visual (“look & feel”) index see 3. Add the panel to the larger P.add(button3); http://java.sun.com/docs/books/tutorial/uiswing/layout/visua container frame.add(panel, l.html BorderLayout.SOUTH);

Supplemental Reading Summary

Computer Science and Engineering „ The Ohio State University Computer Science and Engineering „ The Ohio State University † A visual index to the Swing † Containment hierarchy Components „ Containers (frame, applet, dialog) „ http://java.sun.com/docs/books/tutorial/u „ Components (panel, scroll pane, tabbed iswing/components pane,…) „ Con tr ol s (button, te xt fie ld, labe l, …) † CtiCreating a GUI with JFC/SiJFC/Swing † Event-driven programming „ http://java.sun.com/docs/books/tutorial/u „ Register handlers with components iswing/index.html „ Events are passed from components to † Building a User Interface handlers „ http://java.sun.com/developer/onlineTrain † Layout ing/new2java/divelog † Look and feel?

4