1. IFS410: Advanced Analysis and Design
Week 8 (was planned on Week 6)
Graphical User Interface Components
In this chapter you will learn:
The design principles of graphical user interfaces (GUIs).
To build GUIs and handle events generated by user interactions with GUIs.
To understand the packages containing GUI components, event-handling classes and interfaces.
To create and manipulate buttons, labels, lists, text fields and panels.
To handle keyboard events.
To use layout managers to arrange GUI components
11/23/2018
8.1

2. Ch.11: Graphical User Interface
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.
Fig A sample Netscape Navigator windows with GUI components.
button
menu
menu bar
Text field
11/23/2018
(Netscape Communicator browser window© 1999 Netscape Communications Corporation. Used with permission. Netscape Communications has not authorized, sponsored, endorsed, or approved this publication and is not responsible for its content.)

3. Fig. 11.4 Some basic GUI components.
Dialog boxes
Used by applications to interact with the user
Provided by Java’s JOptionPane class
Contains input dialogs and message dialogs
Advanced GUI components (Ch. 22)
JSlider: Sliders
JMenuBar & JMenuItem: Menus
JPopupMenu
JDeskTopPane JInternalFrame
JTabbedPane
BoxLayout & GridBagLayout
Consistent user interfaces enable a user to learn new applications faster.
11/23/2018

4. Swing Overview 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
Class Component
Contains method paint for drawing Component onscreen
java.awt.Component (extends Object)
Class Container
Collection of related components
Contains method add for adding components
java.awt.Container (extends Component )
Class JComponent
Pluggable look and feel for customizing look and feel
Shortcut keys (mnemonics)
Common event-handling capabilities
javax.swing.JComponent (extends Container)
AWT: Abstract Window Toolkit
Swing components are implemented in Java, so they are more portable and flexible than the original Java GUI components from package java.awt, which were based on the GUI components of the underlying platform. For this reason, Swing GUI components are generally preferred.
11/23/2018

5. Displaying Text and Images in a Window
Class JFrame
Most windows are an instance or subclass of this class
Provides title bar
Provides buttons to minimize, maximize and close the application
Heavyweight component
Three operations when user closes window
DISPOSE_ON_CLOSE
DO_NOTHING_ON_CLOSE
HIDE_ON_CLOSE
Laying out containers
Determines where components are placed in the container
Done in Java with layout managers
One of which is class FlowLayout
Set with the setLayout method of class JFrame
Other JFrame methods
setDefaultCloseOperation
Dictates how the application reacts when the user clicks the close button
setSize
Specifies the width and height of the window
setVisible
Determines whether the window is displayed (true) or not (false)
11/23/2018

6. JLabel Label Method add of class Container Provide text on GUI
Defined with class JLabel
Can display:
Single line of read-only text
Image
Text and image
Method add of class Container
Adds a component to a container
Jlabel: subclass of JComponent
Text in a JLabel normally uses sentence-style capitalization.
If you do not explicitly add a GUI component to a container, the GUI component will not be displayed when the container appears on the screen.
11/23/2018

7. Fig. 12.4: LabelTest.java
// JLabel constructor with a string argument label1 = new JLabel( "Label with text" ); label1.setToolTipText( "This is label1" ); container.add( label1 ); // JLabel constructor with string, Icon and // alignment arguments Icon bug = new ImageIcon( "bug1.gif" ); label2 = new JLabel( "Label with text and icon", bug, SwingConstants.LEFT ); label2.setToolTipText( "This is label2" ); container.add( label2 ); // JLabel constructor no arguments label3 = new JLabel(); label3.setText( "Label with icon and text at bottom" ); label3.setIcon( bug ); label3.setHorizontalTextPosition( SwingConstants.CENTER ); label3.setVerticalTextPosition( SwingConstants.BOTTOM ); label3.setToolTipText( "This is label3" ); container.add( label3 );
Other JLabel methods
getText and setText
For setting and retrieving the text of a label
getIcon and setIcon
For setting and retrieving the icon displayed in the label
getHorizontalTextPosition and setHorizontalTextPosition
For setting and retrieving the horizontal position of the text displayed in the label
11/23/2018

8. JTextField and JPasswordField
Single-line area in which user can enter text
JPasswordField
Extends JTextField
Hides characters that user enters
11/23/2018

9. 11/23/2018 Fig. 12.7: TextFieldTest.java
// construct textfield with default text passwordField = new JPasswordField( "Hidden text" ); container.add( passwordField );
// register event handlers TextFieldHandler handler = new TextFieldHandler(); textField1.addActionListener( handler ); textField2.addActionListener( handler ); textField3.addActionListener( handler ); passwordField.addActionListener( handler ); else if ( event.getSource() == textField3 ) string = "textField3: " + event.getActionCommand(); // user pressed Enter in JTextField passwordField else if ( event.getSource() == passwordField ) { JPasswordField pwd = ( JPasswordField ) event.getSource(); string = "passwordField: " new String( pwd.getPassword() );
11/23/2018

10. JButton Button Component user clicks to trigger a specific action
Several different types
Command buttons
Check boxes
Toggle buttons
Radio buttons
javax.swing.AbstractButton subclasses
Command buttons are created with class JButton
Generate ActionEvents when user clicks button
11/23/2018

11. 11/23/2018 Fig. 12.10: ButtonTest.java
Icon bug1 = new ImageIcon( "bug1.gif" ); Icon bug2 = new ImageIcon( "bug2.gif" ); fancyButton = new JButton( "Fancy Button", bug1 ); fancyButton.setRolloverIcon( bug2 ); container.add( fancyButton ); // create an instance of inner class ButtonHandler // to use for button event handling ButtonHandler handler = new ButtonHandler(); fancyButton.addActionListener( handler ); plainButton.addActionListener( handler ); 38
11/23/2018

12. JCheckBox and JRadioButton
State buttons
On/Off or true/false values
Java provides three types
JToggleButton
JCheckBox
JRadioButton
11/23/2018

13. 11/23/2018

14. 11/23/2018

15. JTextArea JTextArea Area for manipulating multiple lines of text
Inherits from JTextComponent
11/23/2018

16. Panels Panel Helps organize components
Class JPanel is JComponent subclass
May have components (and other panels) added to them
Creating a Customized Subclass of Jpanel (13.3)
Extend JPanel to create new components
Dedicated drawing area
Method paintComponent of class Jcomponent
JPanel
Does not support conventional events
e.g., events offered by buttons, text areas, etc.
Capable of recognizing lower-level events
e.g., mouse events, key events, etc.
Self-contained panel
Listens for its own mouse events
11/23/2018

17. Create JPanel to hold JButtons
Fig : PanelDemo.java
// get content pane Container container = getContentPane(); // create buttons array buttons = new JButton[ 5 ]; // set up panel and set its layout buttonPanel = new JPanel(); buttonPanel.setLayout( new GridLayout( 1, buttons.length ) ); // create and add buttons for ( int count = 0; count < buttons.length; count++ ) { buttons[ count ] = new JButton( "Button " + ( count + 1 ) ); buttonPanel.add( buttons[ count ] );
} container.add( buttonPanel, BorderLayout.SOUTH ); setSize( 425, 150 ); setVisible( true ); }
Create JPanel to hold JButtons
Add JButtons to JPanel
Add JPanel to SOUTH region of Container
11/23/2018

18. Layout Managers Layout managers Provided for arranging GUI components
Provide basic layout capabilities
Processes layout details
Programmer can concentrate on basic “look and feel”
Interface LayoutManager
Fig Layout managers.
11/23/2018

19. FlowLayout FlowLayout Most basic layout manager
GUI components placed in container from left to right
11/23/2018

20. BorderLayout BorderLayout Arranges components into five regions
NORTH (top of container)
SOUTH (bottom of container)
EAST (left of container)
WEST (right of container)
CENTER (center of container)
11/23/2018

21. GridLayout GridLayout
Divides container into grid of specified row an columns
Components are added starting at top-left cell
Proceed left-to-right until row is full
11/23/2018

22. BoxLayout BoxLayout Arranges GUI components Horizontally along x-axis
Vertically along y-axis
11/23/2018

23. Event-Handling Model 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
GUIs are event-driven
A user interaction creates an event
Common events are clicking a button, typing in a text field, selecting an item from a menu, closing and window and moving the mouse
The event causes a call to a method called an event handler
Several coding steps are required for an application to respond to events
Create a class for the event handler
Implement an appropriate event-listener interface
Register the event handler
Top-level classes
Not declared within another class
Nested classes
Declared within another class
Non-static nested classes are called inner classes
Frequently used for event handling
11/23/2018

24. Event-Handling Model (cont.)
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)
Event source
Component from which event originates
Can be determined using method getSource
Text from a JTextField can be acquired using getActionCommand
Text from a JPasswordField can be acquired using getPassword
11/23/2018

25. Lab activities (Week 7)
Create the following GUI. You do not have to provide any functionality at first. If you have time, consider putting the functionality.
For this assignment
11/23/2018