MSIS 670 ObjectOriented Software Engineering Week 2 Graphical

MSIS 670: Object-Oriented Software Engineering Week 2 Graphical User Interface Components 10/30/2020 2. 1

Assignment 1: Addition. java 10/30/2020 2

A few tips for Java programming n Comments w 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. n Blank line w Makes program more readable w Blank lines, spaces, and tabs are white-space characters n 10/30/2020 Ignored by compiler 4

Ch. 11: Graphical User Interface (GUI) n n n Gives program distinctive “look” and “feel” Provides users with basic level of familiarity Built from GUI components (controls, widgets, etc. ) w User interacts with GUI component via mouse, keyboard, etc. 10/30/2020 5

JOption. Pane Dialog boxes n n Used by applications to interact with the user Provided by Java’s JOption. Pane class w Contains input dialogs and message dialogs 10/30/2020 6

Displaying Text and Images in a Window Class JFrame n n n 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 w DISPOSE_ON_CLOSE w DO_NOTHING_ON_CLOSE w HIDE_ON_CLOSE 10/30/2020 7

Fig. 11. 4 Some basic GUI components. 10/30/2020 8

JLabel n Provide text on GUI Defined with class JLabel n Can display: n w Single line of read-only text w Image w Text and image Method add of class Container n Adds a component to a container 10/30/2020 10

Fig. 12. 4: Label. Test. java 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 // JLabel constructor with a string argument label 1 = new JLabel( "Label with text" ); label 1. set. Tool. Tip. Text( "This is label 1" ); container. add( label 1 ); // JLabel constructor with string, Icon and // alignment arguments Icon bug = new Image. Icon( "bug 1. gif" ); label 2 = new JLabel( "Label with text and icon" , bug, Swing. Constants. LEFT ); label 2. set. Tool. Tip. Text( "This is label 2" ); container. add( label 2 ); // JLabel constructor no arguments label 3 = new JLabel(); label 3. set. Text( "Label with icon and text at bottom" ); label 3. set. Icon( bug ); label 3. set. Horizontal. Text. Position( Swing. Constants. CENTER ); label 3. set. Vertical. Text. Position( Swing. Constants. BOTTOM ); label 3. set. Tool. Tip. Text( "This is label 3" ); container. add( label 3 ); 10/30/2020 11

JText. Field and JPassword. Field JText. Field n Single-line area in which user can enter text JPassword. Field n Extends JText. Field n Hides characters that user enters 10/30/2020 12

Fig. 12. 7: Text. Field. Test. java 37 38 39 // construct textfield with default text password. Field = new JPassword. Field( "Hidden text" ); container. add( password. Field ); 41 42 43 44 45 46 // register event handlers Text. Field. Handler handler = new Text. Field. Handler(); text. Field 1. add. Action. Listener( handler ); text. Field 2. add. Action. Listener( handler ); text. Field 3. add. Action. Listener( handler ); password. Field. add. Action. Listener ( handler ); 78 79 80 81 82 83 84 85 86 else if ( event. get. Source() == text. Field 3 ) string = "text. Field 3: " + event. get. Action. Command(); // user pressed Enter in JText. Field password. Field else if ( event. get. Source() == password. Field ) { JPassword. Field pwd = ( JPassword. Field ) event. get. Source(); string = "password. Field: " + new String( pwd. get. Password() ); 10/30/2020 13

JButton n n Component user clicks to trigger a specific action Several different types w w n Command buttons Check boxes Toggle buttons Radio buttons javax. swing. Abstract. Button subclasses w Command buttons are created with class JButton n 10/30/2020 Generate Action. Events when user clicks button 14

Fig. 12. 10: Button. Test. java 26 27 28 29 30 31 32 33 34 35 36 37 38 Icon bug 1 = new Image. Icon( "bug 1. gif" ); Icon bug 2 = new Image. Icon( "bug 2. gif" ); fancy. Button = new JButton( "Fancy Button", bug 1 ); fancy. Button. set. Rollover. Icon ( bug 2 ); container. add( fancy. Button ); // create an instance of inner class Button. Handler // to use for button event handling Button. Handler handler = new Button. Handler(); fancy. Button. add. Action. Listener ( handler ); plain. Button. add. Action. Listener ( handler ); 10/30/2020 15

JText. Area n n Area for manipulating multiple lines of text Inherits from JText. Component 10/30/2020 23

Panels Panel n n n Helps organize components Class JPanel is JComponent subclass May have components (and other panels) added to them 10/30/2020 24

Fig. 12. 27: Panel. Demo. java 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 // get content pane Container container = get. Content. Pane(); // create buttons array buttons = new JButton[ 5 ]; // set up panel and set its layout button. Panel = new JPanel(); button. Panel. set. Layout( new Grid. Layout( 1, buttons. length ) ); Create JPanel to hold JButtons // create and add buttons for ( int count = 0; count < buttons. length; count++ ) { buttons[ count ] = new JButton( "Button " + ( count + 1 ) ); button. Panel. add( buttons[ count ] ); } Add JButtons to JPanel container. add( button. Panel, Border. Layout. SOUTH ); set. Size( 425, 150 ); set. Visible( true ); } 10/30/2020 Add JPanel to SOUTH region of Container 25

Layout Managers Layout managers n n n Provided for arranging GUI components Provide basic layout capabilities Processes layout details Programmer can concentrate on basic “look and feel” Interface Layout. Manager 10/30/2020 33

Flow. Layout n n Most basic layout manager GUI components placed in container from left to right 10/30/2020 34

Border. Layout n Arranges components into five regions w NORTH w SOUTH w EAST w WEST w CENTER 10/30/2020 (top of container) (bottom of container) (left of container) (right of container) (center of container) 35

Grid. Layout n n Divides container into grid of specified row an columns Components are added starting at top-left cell w Proceed left-to-right until row is full 10/30/2020 36

Event-Handling Model GUIs are event driven n Generate events when user interacts with GUI w e. g. , moving mouse, pressing button, typing in text field, etc. w Class java. awt. AWTEvent 10/30/2020 39

Event-Handling Model (cont. ) Event-handling model n Three parts w Event source n GUI component with which user interacts w Event object n Encapsulates information about event that occurred w Event listener n n Receives event object when notified, then responds Programmer must perform two tasks w Register event listener for event source w Implement event-handling method (event handler) 10/30/2020 40

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 (action. Performed() ). 10/30/2020 43