Swing: Components For Graphical User Interfaces

Swing: Components forGraphical User InterfacesComputer Science and Engineering College of Engineering The Ohio State UniversityLecture 22

GUIComputer Science and Engineering The Ohio State University

GUI: A Hierarchy of Nested WidgetsComputer Science and Engineering The Ohio State University

Visual (Containment) HierarchyComputer Science and Engineering The Ohio State University Top-level widgets: outermost window (a container) Frame, applet, dialog General purposeIntermediate widgets: allow nesting (a container) Special purpose Basic controls Button, list, slider, text fieldUneditable information displays Label, progress bar, tool tipInteractive displays of highly formatted information Color chooser, file chooser, treeFor a visual (“look & feel”) of widgets see: Layered paneAtomic widgets: nothing nested inside Panel, scroll pane, tabbed pane, tool /componentsVocabulary: Widgets usually referred to as “GUIcomponents” or simply “components”

HistoryComputer Science and Engineering The Ohio State University Java 1.0: AWT (Abstract Window Toolkit) Platform-dependent implementations of widgets Most widgets written entirely in JavaMore portable Defines various GUI widgetsJava 1.2: SwingMain Swing package: javax.swing Includes 16 nested subpackages Extensions of classes in AWTMany class names start with “J”javax.swing.event, javax.swing.table, javax.swing.text Basic GUI widgets include JFrame, JDialogJPanel, JScrollPane, JTabbedPane, JToolBarJButton, JRadioButton, JCheckBox, JTextField, JSliderJLabel, JToolTipJColorChooser, JFileChooser

Class Hierarchy: ComponentComputer Science and Engineering The Ohio State University Operations common tononmenu-related GUIwidgets Drawing the widget paint(): draw the wholewidgetrepaint(): schedule thewidget to be redrawn, willresult in frameworkcalling update(): modifies part ofwidget, or just callspaint() for full refreshObjectjava.awtComponentAppearance of widget More than 60 (public)methods!java.langsetvisible(): determinewhether widget will bevisible on screensetLocation()Dealing with user eventsextends

Class Hierarchy: ContainerComputer Science and Engineering The Ohio State University A widget that caninclude other widgets Visual nestingjava.langObject Contained widgetsare called “children” But not children as inbehavioral subtypesjava.awtmanaging containedwidgetsjava.awtContainer Methods for add: adds widgets tocontainer setLayout: specifiesthe layout managerthat helps containerposition and sizecontained widgetsComponentextends

Basic Hierarchy: JComponentComputer Science and Engineering The Ohio State University Base class for allSwing widgets,except top-levelcontainers (ieapplet, awtContainerjavax.swingJComponentextends

Part of JComponent HierarchyComputer Science and Engineering The Ohio State extends

JLabelComputer Science and Engineering The Ohio State University A JLabel object provides textinstructions or information on a GUI Displays a single line of read-only text, animage, or both See Example code Output One thing to be empasized: If you do not explicitly add a widget to acontainer, the widget will not be displayedwhen the container appears on the screen

An Interactive GUI ComponentComputer Science and Engineering The Ohio State University To make an interactive GUI program,you need: Widgets (ie GUI components) Buttons, windows, menus, etc. Events Mouse clicked, window closed, button clicked,etc. Event listeners (implement an interface)and event handlers (methods) Listen for events to be triggered, and thenperform actions to handle them

Handling EventsComputer Science and Engineering The Ohio State University GUI is event driven Event handling occurs as a loop: GUI program is idle User performs an action, for example: Moving the mouse, clicking a button, closing awindow, typing in a text box, selecting an itemfrom a menu, Such an action generates an event The event is sent to the program, whichresponds Code executes, GUI updates GUI program returns to being idle Many event types defined injava.awt.event and javax.swing.event

Part of AWTEvent HierarchyComputer Science and Engineering The Ohio State djustmentEvt nds

Handling Events MechanismComputer Science and Engineering The Ohio State University Three parts of the event-handlingmechanism Event source: the widget with which the userinteracts Event object: encapsulated information about theoccurred event Event listener: an object that is notified by theevent source when an event occurs, and providesresponds to the eventActionEventJButtonActionListener

Programmer TasksComputer Science and Engineering The Ohio State University Implement an event listener A class X that implements one (or more) ofthe event listener interfacesinterface ActionListener {void actionPerformed (ActionEvent e);}interface FocusListener {void focusGained (FocusEvent e);void focusLost (FocusEvent e);} Register an instance of X with widget java.awt.Container has methods for addinglistenersvoid addFocusListener (FocusListener f)

JTextField and JPasswordFieldComputer Science and Engineering The Ohio State University Single-line areas for text Can be editable (user enters text from keyboard)or not Password field does not show individualcharacters When the user types data into them andpresses the Enter key: An event occurs (ActionEvent) All registered listeners (ActionListeners) receivethe event Argument to method actionPerformed includestext from field See: Example code Output

ButtonsComputer Science and Engineering The Ohio State University A button is a clickable widget There are several types of buttons, all aresubclasses of AbstractButton Command button: Class JButton, generates ActionEvent Toggle button: Has on/off or true/false values Check boxes: A group of buttons in which more than one can beselected, generates ItemEvent Radio buttons: A group of buttons in which only one can be See:selected, generates ItemEvent Example code Output

Part of JComponent HierarchyComputer Science and Engineering The Ohio State extends

More Widgets Computer Science and Engineering The Ohio State University JComboBox: A drop-down list from which the user canmake a selection Generates an ItemEvent JList: A list supporting both single and multipleselection Generates a ListSelectionEvent

Computer Science and Engineering The Ohio State University

Layout ManagementComputer Science and Engineering The Ohio State University Layout refers to how components are arranged in thecontainer This positioning is determined by a layout manager Buttons in the above example are managed by the flow layoutmanager, which is the default layout manager for a panelThe default manager lines the components horizontally untilthere is no more room and then start a new row of componentsAfter resizing the container, the layout manager reflows thecomponents automaticallyThe default is to center the components in each row, but this canbe overridden with left or right alignmentpanel.setLayout(new FlowLayout(FlowLayout.LEFT)); Other managers: for a visual (“look & feel”) index /layout/visual.html

Layout Management with PanelsComputer Science and Engineering The Ohio State University Problem withBorderLayout: Solution: use additionalpanels The button is stretched tofill the entire southernregion of the frameIf you add another button tothe southern region, it justdisplaces the first buttonAct as containers forinterface elements and canthemselves be arrangedinside a larger panelUse flow layout by defaultTo fix the BorderLayoutproblem1.2.3.Create a new panelAdd each element to thepanelAdd the panel to the largercontainerJPanel p new n3);frame.add(panel,BorderLayout.SOUTH);

Supplemental ReadingComputer Science and Engineering The Ohio State University A visual index to the SwingComponents mponents Creating a GUI with JFC/Swing dex.html

SummaryComputer Science and Engineering The Ohio State University Containment hierarchy Containers (frame, applet, dialog) Components (panel, scroll pane, tabbedpane, ) Controls (button, text field, label, ) Event-driven programming Register handlers with components Events are passed from components tohandlers Layout Look and feel?

Java 1.2: Swing Most widgets written entirely in Java More portable Main Swing package: javax.swing Defines various GUI widgets Extensions of classes in AWT Many class names start with “J” Includes 16 nested subpackages javax.swing.event, javax.swing.table, javax.swing