Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 1 Graphical User Interfaces -- Introduction Users have become accustomed to using a graphical user interface (GUI) through which they interact with a program Java provides strong support for building GUIs through the java.awt package Chapter 10 focuses on: –GUI components –event-driven programming –containers and component hierarchies –layout managers

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 2 GUI Elements The key elements of a Java graphical user interface –GUI components –layout managers –event processing GUI components, such as text fields and buttons, are the screen elements that a user manipulates with the mouse and keyboard Layout managers govern how the components appear on the screen Events signal important user actions, like a mouse click

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 3 Event-Driven Programming Programs with GUIs must respond to events, generated by GUI components, that indicate that specific actions have occurred A special category of classes, called listeners, wait for events to occur Therefore, a GUI program is composed of: –the code that presents the GUI to the user –the listeners that wait for events to occur –the specific code that is executed when events occur

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 4 Event-Driven Programming There is a listener interface defined for each event type –Each listener interface contains the abstract methods required to respond to specific events –A listener class implements a particular listener interface Listeners are "added" to a particular GUI component When a component generates an event, the method corresponding to that event is executed in the listener See Mimic.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 5 Example : Mimic import java.applet.Applet; import java.awt.*; import java.awt.event.*; public class Mimic extends Applet { Mimic_GUI gui = new Mimic_GUI (this); public void init() { gui.init(); } // method init public void update_label() { System.out.println("Action"); gui.update_label (gui.get_quote()); } // method set_uppercase } // class Mimic

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 6 class Mimic_GUI import java.awt.*; class Mimic_GUI { private Label label = new Label ("No news is good news."); private TextField quote = new TextField(20); private Mimic applet; private Mimic_Action_Listener listener; public Mimic_GUI (Mimic mimic_applet) { applet = mimic_applet; listener = new Mimic_Action_Listener (applet); } // constructor Mimic_GUI

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 7 public void init() { applet.add (quote); applet.add (label); applet.resize (250,100); quote.addActionListener (listener); // Add listeners } // method init public void update_label (String message) { label.setText (message); } // method update_label public String get_quote() { return quote.getText(); } // method get_quote } // class Mimic_GUI

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 8 Class Mimic_Action_Listener import java.awt.event.*; class Mimic_Action_Listener implements ActionListener { private Mimic applet; public Mimic_Action_Listener (Mimic listening_applet) { applet = listening_applet; } // constructor Mimic_Action_Listener public void actionPerformed (ActionEvent event) { applet.update_label(); } // method actionPerformed } // class Mimic_Action_Listener

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 9 The GUI Program Model Listeners Program- specific GUI Event effects Add listeners Handle events

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 10 Event Interfaces Multiple listeners can be added to a component Multiple components can be processed by the same listener –One listener class can implement multiple listener interfaces for many types of events GUI Component Listener1 Listener2 GUI Component 1 GUI Component 2 Listener1

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 11 import java.awt.*; import java.awt.event.*; import java.applet.*; public class Events extends Applet { private TextArea log = new TextArea (10, 65); private int count = 0; private Label count_label = new Label("", Label.CENTER); private … listener = new Universal_Listener (log, count_label); public void init() { add ("North", new Label ("Event Logging", Label.CENTER)); add ("Center", log);add ("South", count_label); addComponentListener (listener); log.addFocusListener (listener); log.addKeyListener (listener); log.addMouseListener (listener); log.addMouseMotionListener (listener); setSize (500, 300); } // method init } // class Events

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 12 class Universal_Listener implements ComponentListener, MouseMotionListener, MouseListener, KeyListener, FocusListener { private TextArea log; private Label count_label; private String count_text = "Number of Events: "; private int count = 0; public Universal_Listener (TextArea log, Label count_label) { this.log = log; this.count_label = count_label; } // constructor Universal_Listener

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 13 private void log_event (AWTEvent event) { count++; count_label.setText (count_text + count); log.append (event.toString() + "\n"); } // method log_event public void componentMoved (ComponentEvent event) { log_event (event); } // method componentMoved public void componentHidden (ComponentEvent event) { log_event (event); } // method componentHidden public void mouseDragged (MouseEvent event) { log_event (event); } // method mouseDragged

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 14 public void keyPressed (KeyEvent event) { log_event (event); } // method keyPressed public void keyTyped (KeyEvent event) { log_event (event); } // method keyTyped public void focusGained (FocusEvent event) { log_event (event); } // method focusGained... } // class Universal_Listener

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 15 Containers A container is a special category of GUI components that group other components –All containers are components, but not all components are containers An applet is a container –Therefore, buttons, text fields, and other components can be added to an applet to be displayed Each container has an associated layout manager to control the way components in it are displayed

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 16 Container vs Components Component1 Component2 Component3 TextField Button Container

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 17 Containers Some containers must be attached to another graphical surface: –panel –applet An applet is attached to a browser or appletviewer window Other containers can be moved independently: –window –frame –dialog

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 18 Containers Component Container Window Panel Dialog Frame Applet

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 19 Component Hierarchies A GUI is created when containers and other components are put together The relationships between these components form a component hierarchy For example, an applet can contain panels which contain other panels which contain buttons, etc. See Rings_Display.java Careful design of the component hierarchy is important for visually pleasing and consistent GUIs

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 20 Example import java.applet.Applet;import java.awt.*; public class Rings_Display extends Applet { private Panel group = new Panel(); private Rings rings1 = new Rings(); private Rings rings2 = new Rings(); private Rings rings3 = new Rings(); public void init () { add (rings1); group.add (rings2); group.add (rings3); add (group); resize (200, 150); } // method init } // class Rings_Display

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 21 class Rings extends Canvas { private Dimension size = new Dimension (60, 60); public void paint (Graphics page) { page.drawOval (30,30,8,8); page.drawOval (40,30,8,8); page.drawOval (50,30,8,8); page.drawOval (35,35,8,8); page.drawOval (45,35,8,8); } // method paint public Dimension getMinimumSize() { return size; } // method getMinimumSize public Dimension getPreferredSize() { return getMinimumSize(); } // method getPreferredSize } // class Rings

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 22 GUI Components There are several GUI components that permit specific kinds of user interaction: –labels –text fields –text areas –lists –buttons –scrollbars

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 23 Labels A label defines a line of text displayed on a GUI Labels are static in the sense that they cannot be selected or modified by the human user once added to a container A label is instantiated from the Label class The Label class contains several constructors and methods for setting up and modifying a label's content and alignment

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 24 Text Fields and Text Areas A text field displays a single line of text in a GUI It can be made editable, and provide a means to get input from the user A text area is similar, but displays multiple lines of text They are defined by the TextField and TextArea classes A text area automatically has scrollbars on its bottom and right sides See Fahrenheit.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 25 Example : Fahrenheit import java.applet.Applet; import java.awt.*; import java.awt.event.*; public class Fahrenheit extends Applet { private Label title = new Label ("Fahrenheit to Celcius Converter"); private Label question = new Label ("Enter Fahrenheit:"); private Label answer = new Label ("Temperature in Celcius:"); private TextField fahrenheit = new TextField (5); private Label celcius = new Label ("N/A"); private TextArea log = new TextArea (5, 20); private Fahrenheit_Listener listener = new Fahrenheit_Listener (this);

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 26 public void init() { fahrenheit.addActionListener (listener); log.setEditable (false); add (title); add (question); add (fahrenheit); add (answer); add (celcius); add (log); resize (200,200); } // method init public void convert() { int fahrenheit_temperature, celcius_temperature; String text = fahrenheit.getText(); fahrenheit_temperature = Integer.parseInt (text); celcius_temperature = (fahrenheit_temperature-32)*5/9; celcius.setText (Integer.toString (celcius_temperature)); log.append (text + " converts to " + celcius.getText() + "\n"); } // method convert } // class Fahrenheit

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 27 class Fahrenheit_Listener implements ActionListener { private Fahrenheit applet; public Fahrenheit_Listener (Fahrenheit listening_applet) { applet = listening_applet; } // constructor Fahrenheit_Listener public void actionPerformed(ActionEvent action) { applet.convert(); } // method actionPerformed } // class Fahrenheit_Listener

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 28 Lists A list, in the Java GUI sense, is used to display a list selectable strings A list component can contain any number of strings and can be instantiated to allow multiple selections within it The size of the list is specified by the number of visible rows or strings within it A scrollbar will automatically appear on the right side of a list if the number of items exceed the visible area A list is defined by the List class

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 29 Buttons The java.awt package supports four distinct types of buttons: –Push buttons –Choice Buttons –Checkbox buttons –Radio buttons Each button type serves a particular purpose

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 30 Push Button A push button is a single button which can be created with or without a label A system is usually designed such that when a push button is pressed, a particular action occurs It is defined by the Button class

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 31 Example: ButtonDemo.java import java.awt.*; import java.applet.Applet; public class ButtonDemo extends Applet { Button b1,b2,b3; public void init( ) { b1 = new Button( ); b1.setLabel("Disable middle button"); b2 = new Button("Middle button"); b3 = new Button("Enable Middle button"); add(b1); add(b2); add(b3); setVisible(true); }

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 32 Example: ButtonDemo.java public boolean action(Event e, Object arg) { Object target = e.target; if (target == b1) { b2.disable( ); b1.disable( ); b3.enable( ); return true; } if (target == b3) { b2.enable( ); b1.enable( ); b3.disable( ); return true; } return false; }

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 33 The action method. The action method is an especially important event-handling method. Basic components produce action events –Button –Checkbox –Choice –List –TextField public boolean action(Event e, Object arg) { … }

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 34 Other methods for event handling mouseEnter(Event.MOUSE_ENTER) mouseExit(Event.MOUSE_EXIT) mouseMove(Event.MOUSE_MOVE) mouseDown(Event.MOUSE_DOWN) mouseDrag(Event.MOUSE_DRAG) mouseUp(Event.MOUSE_UP) keyDown(Event.KEY_PRESS or Event.KEY_ACTION) keyDown(Event.KEY_RELEASE or Event.KEY_ACTION) handleEvent(all event types)

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 35 Choice button A choice button is a single button which displays a list of choices when pushed The user can then scroll through and choose the appropriate option The current choice is displayed next to the choice button It is defined by the Choice class

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 36 Example: ChoiceDemo.java import java.awt.*; import java.applet.Applet; public class ChoiceDemo extends Applet { Choice choice; Label label; public void init(){ choice = new Choice( ); choice.addItem("hana"); choice.addItem("dul"); choice.addItem("set"); choice.addItem(" 넷 "); label = new Label( ); setLabelText(choice.getSelectedIndex( ), choice.getSelectedItem( )); add(choice); add(label); }

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 37 Example: ChoiceDemo.java void setLabelText(int num, String text) { label.setText("Item #" + num + " selected" + "Text = \"" + text + "\"."); } public boolean action(Event e, Object arg) { if (e.target instanceof Choice) { setLabelText(choice.getSelectedIndex( ), (String) arg); return true; } return false; }

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 38 Checkbox button A checkbox button can be toggled on or off A set of checkbox buttons are often used to define a set of options as a group, though one can be used by itself If used in a group, more than one option can be chosen at any one time Defined by the Checkbox class

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 39 Radio buttons A radio button, like a checkbox button, is toggled on or off Radio buttons must be grouped into a set, and only one button can be selected at any one time When one button of a group is selected, the currently selected button in that group is automatically reset They are used to select among a set of mutually exclusive options Radio button sets are defined by the Checkbox and CheckboxGroup classes

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 40 Example: CheckboxDemo.java import java.awt.*; import java.applet.Applet; public class CheckboxDemo extends Applet { public void init( ) { Panel p1, p2; Checkbox cb1, cb2, cb3; Checkbox cb4, cb5, cb6; cb1 = new Checkbox( ); cb1.setLabel("Checkbox 1"); cb2 = new Checkbox("Checkbox 2"); cb3 = new Checkbox("Checkbox 3"); cb3.setState(true); p1 = new Panel( ); p1.setLayout(new FlowLayout( )); p1.add(cb1); p1.add(cb2); p1.add(cb3);

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 41 Example: CheckboxDemo.java CheckboxGroup cbg = new CheckboxGroup( ); cb4 = new Checkbox("Checkbox 4", cbg, false); cb5 = new Checkbox("Checkbox 5", cbg, false); cb6 = new Checkbox("Checkbox 6", cbg, false); p2 = new Panel( ); p1.setLayout(new FlowLayout( )); p2.add(cb4); p2.add(cb5); p2.add(cb6); setLayout(new GridLayout(0, 2)); add(p1); add(p2); }

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 42 Scrollbars A scrollbar is a slider that indicates a relative position or quantity They are automatic on text areas and list components, but can be used independently The position of the slider in the range corresponds to a particular numeric value in a range associated with the scrollbar A scrollbar is defined by the Scrollbar class See Zoom.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 43 Example: Zoom.java import java.applet.*; import java.awt.*; import java.awt.event.*; public class Zoom extends Applet { private final int SIZE = 300; private Scrollbar bar = new Scrollbar(Scrollbar.HORIZONTAL, 10, 64, 10, SIZE); private Zoom_Listener listener = new Zoom_Listener (this); private int current_size = 10; private Image picture;

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 44 public void init() { setLayout (new BorderLayout()); setBackground (Color.white); bar.addAdjustmentListener (listener); picture = getImage (getDocumentBase(), "owl.gif"); add (bar, "South"); setSize (SIZE, SIZE);setVisible (true); } // method init public void zoom_image (int size) { current_size = size; repaint(); } // method zoom_image public void paint (Graphics page) { page.drawImage (picture, SIZE/2-current_size/2, SIZE/2-current_size/2, current_size, current_size, this); } // method draw } // class Zoom

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 45 class Zoom_Listener implements AdjustmentListener { private Zoom applet; public Zoom_Listener (Zoom zoom_applet) { applet = zoom_applet; } // constructor Zoom_Listener public void adjustmentValueChanged (AdjustmentEvent event) { applet.zoom_image (event.getValue()); } // method adjustmentValueChanged } // class Zoom_Listner

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 46 Layout Managers There are five predefined layout managers in the java.awt package: –flow layout –border layout –card layout –grid layout –grid bag layout Each container has a particular layout manager associated with it by default A programmer can also create custom layout managers

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 47 Flow Layout Components are placed in a row from left to right in the order in which they are added A new row is started when no more components can fit in the current row The components are centered in each row by default The programmer can specify the size of both the vertical and horizontal gaps between the components Flow layout is the default layout for panels and applets See Flow.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 48 Example: Flow.java import java.applet.Applet; import java.awt.*; public class Flow extends Applet { private Button button1 = new Button ("I"); private Button button2 = new Button ("think"); private Button button3 = new Button ("therefore"); private Button button4 = new Button ("I"); private Button button5 = new Button ("am"); public void init() { setLayout (new FlowLayout()); add (button1);add (button2);add (button3); add (button4);add (button5);setVisible(true); } // method init } // class Flow

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 49 Grid Layout Components are placed in a grid with a user- specified number of columns and rows Each component occupies exactly one grid cell Grid cells are filled left to right and top to bottom All cells in the grid are the same size See Grid.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 50 Example: Grid.java import java.applet.Applet; import java.awt.*; public class Grid extends Applet { private Button button1 = new Button ("I"); private Button button2 = new Button ("think"); private Button button3 = new Button ("therefore"); private Button button4 = new Button ("I"); private Button button5 = new Button ("am"); public void init() { setLayout (new GridLayout(2,3)); add (button1);add (button2);add (button3); add (button4);add (button5);setVisible(true); } // method init } // class Flow

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 51 Border Layout Defines five locations each of which a component or components can be added –North, South, East, West, and Center The programmer specifies the area in which a component should appear The relative dimensions of the areas are governed by the size of the components added to them See Border.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 52 Example: Border.java import java.applet.Applet; import java.awt.*; public class Border extends Applet { private Button button1 = new Button ("I"); private Button button2 = new Button ("think"); private Button button3 = new Button ("therefore"); private Button button4 = new Button ("I"); private Button button5 = new Button ("am"); public void init() { setLayout (new BorderLayout()); add (button1, "North"); add (button2, "South"); add (button3, "East");add (button4, "West"); add (button5, "Center"); } // method init } // class Flow

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 53 Border Layout North South West East Center

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 54 Card Layout Components governed by a card layout are "stacked" such that only one component is displayed on the screen at any one time Components are ordered according to the order in which they were added to the container Methods control which component is currently visible in the container See Card.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 55 Example: Card.java import java.applet.Applet; import java.awt.*; public class Card extends Applet { private Button button1 = new Button ("I"); private Button button2 = new Button ("think"); private Button button3 = new Button ("therefore"); private Button button4 = new Button ("I"); private Button button5 = new Button ("am"); public void init() { setLayout (new CardLayout()); add (button1, "North"); add (button2, "South"); add (button3, "East");add (button4, "West"); add (button5, "Center"); } // method init

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 56 Example: Card.java public void start() { for (int cards = 1; cards < 50; cards++) { layout.next(this); for (int pause = 1; pause < ; pause++); } } // method start } // class Card

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 57 Grid Bag Layout Designed as a two-dimensional grid of columns and rows However, not all cells in the grid are the same size Components may span multiple columns and rows Each component in a grid bag layout is associated with a set of constraints, defined by the GridBagConstraints class A grid bag layout is the most versatile, and most complex, of the predefined layout managers See Grid_Bag.java

Java Software Solutions Lewis and Loftus Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 58 GUI Design Careful design of a graphical user interface is key to a viable software system To the user, the user interface is the system For each situation, consider which components are best suited and how they should best be arranged See Quotes.java