1. MSIS670: Object-Oriented Software Engineering
Week 2
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, text fields and panels.
To handle keyboard events.
To use layout managers to arrange GUI components
11/6/2018
2.1

2. Assignment 1: Addition Addition.java 11/6/2018
import javax.swing.JOptionPane;
public class Addition {
public static void main( String args[] ) {
String firstNumber; // first string entered by user
String secondNumber; // second string entered by user
int number1; // first number to add
int number2; // second number to add
int sum; // sum of number1 and number2
firstNumber =
JOptionPane.showInputDialog( "Enter first integer" );
secondNumber =
JOptionPane.showInputDialog( "Enter second integer" );
number1 = Integer.parseInt( firstNumber );
number2 = Integer.parseInt( secondNumber );
sum = number1 + number2;
JOptionPane.showMessageDialog(
null, "The sum is " + sum, "Results",
JOptionPane.PLAIN_MESSAGE );
System.exit( 0 ); // terminate application
} // end method main
} // end class Addition
11/6/2018

3. A few tips for Java programming
Comments
Every program should begin with a comment that explains the purpose of the program, the author and the date and time the program was last modified.
Blank line
Makes program more readable
Blank lines, spaces, and tabs are white-space characters
Ignored by compiler
Use blank lines and space characters to enhance program readability.
Java Application:
Applications begin executing at main()
Parentheses indicate main is a method (Ch. 3 and 6)
Java applications contain one or more methods
Exactly one method must be called main()
Each line within this method (ex. String firstNumber;) is called a statement.
Statements must end with semicolon ;
11/6/2018

4. 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/6/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.)

5. JOptionPane Dialog boxes
Used by applications to interact with the user
Provided by Java’s JOptionPane class
Contains input dialogs and message dialogs
11/6/2018

6. 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/6/2018

7. Fig. 11.4 Some basic GUI components.
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/6/2018

8. 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/6/2018

9. 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/6/2018

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

11. 11/6/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/6/2018

12. 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/6/2018

13. 11/6/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/6/2018

14. JTextArea JTextArea Area for manipulating multiple lines of text
Inherits from JTextComponent
11/6/2018

15. 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/6/2018

16. 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/6/2018

17. 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/6/2018

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

19. 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/6/2018

20. 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/6/2018

21. 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/6/2018

22. 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/6/2018

23. Lab activities (Week 2)
Create the following GUI. You do not have to provide any functionality at first. If you have time, consider putting the functionality (actionPerformed() ).
For this assignment:
The Window is created by JFrame.
The JFrame contains one JLabel, one JTextField, two JButtons, and a JTextArea.
The TextField is supposed to accept an input from user (double number).
The Buttons are labeled as “F -> C”, and “C -> F”.
The TextArea is the Output field.
The ActionListeners should be attached to both of buttons (not to the textbox). Therefore, the ActionPerformed() method has to be provided. If you need assistance, talk to the instructor.
11/6/2018