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

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

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

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. 12.1 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.)

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

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

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

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

Fig. 12.4: LabelTest.java 23 // JLabel constructor with a string argument 24 label1 = new JLabel( "Label with text" ); 25 label1.setToolTipText( "This is label1" ); 26 container.add( label1 ); 27 28 // JLabel constructor with string, Icon and 29 // alignment arguments 30 Icon bug = new ImageIcon( "bug1.gif" ); 31 label2 = new JLabel( "Label with text and icon", 32 bug, SwingConstants.LEFT ); 33 label2.setToolTipText( "This is label2" ); 34 container.add( label2 ); 35 36 // JLabel constructor no arguments 37 label3 = new JLabel(); 38 label3.setText( "Label with icon and text at bottom" ); 39 label3.setIcon( bug ); 40 label3.setHorizontalTextPosition( SwingConstants.CENTER ); 41 label3.setVerticalTextPosition( SwingConstants.BOTTOM ); 42 label3.setToolTipText( "This is label3" ); 43 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

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

11/6/2018 Fig. 12.7: TextFieldTest.java 37 // construct textfield with default text 38 passwordField = new JPasswordField( "Hidden text" ); 39 container.add( passwordField ); 41 // register event handlers 42 TextFieldHandler handler = new TextFieldHandler(); 43 textField1.addActionListener( handler ); 44 textField2.addActionListener( handler ); 45 textField3.addActionListener( handler ); 46 passwordField.addActionListener( handler ); 78 else if ( event.getSource() == textField3 ) 79 string = "textField3: " + event.getActionCommand(); 80 81 // user pressed Enter in JTextField passwordField 82 else if ( event.getSource() == passwordField ) { 83 JPasswordField pwd = 84 ( JPasswordField ) event.getSource(); 85 string = "passwordField: " + 86 new String( pwd.getPassword() ); 11/6/2018

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

11/6/2018 Fig. 12.10: ButtonTest.java 26 27 Icon bug1 = new ImageIcon( "bug1.gif" ); 28 Icon bug2 = new ImageIcon( "bug2.gif" ); 29 fancyButton = new JButton( "Fancy Button", bug1 ); 30 fancyButton.setRolloverIcon( bug2 ); 31 container.add( fancyButton ); 32 33 // create an instance of inner class ButtonHandler 34 // to use for button event handling 35 ButtonHandler handler = new ButtonHandler(); 36 fancyButton.addActionListener( handler ); 37 plainButton.addActionListener( handler ); 38 11/6/2018

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

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

Create JPanel to hold JButtons Fig. 12.27: PanelDemo.java 20 // get content pane 21 Container container = getContentPane(); 22 23 // create buttons array 24 buttons = new JButton[ 5 ]; 25 26 // set up panel and set its layout 27 buttonPanel = new JPanel(); 28 buttonPanel.setLayout( 29 new GridLayout( 1, buttons.length ) ); 30 31 // create and add buttons 32 for ( int count = 0; count < buttons.length; count++ ) { 33 buttons[ count ] = 34 new JButton( "Button " + ( count + 1 ) ); 35 buttonPanel.add( buttons[ count ] ); 36 } 37 38 container.add( buttonPanel, BorderLayout.SOUTH ); 39 40 setSize( 425, 150 ); 41 setVisible( true ); 42 } Create JPanel to hold JButtons Add JButtons to JPanel Add JPanel to SOUTH region of Container 11/6/2018

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

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

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

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

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

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

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