java software solutions lewis and loftus chapter 10 copyright 1997 by john lewis and william loftus....

Chapter 10 Copyright 1997 by John Lewis and William Loftus. All rights reserved. 1

Java Software Solutions Lewis and Loftus

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



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



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



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



Example : Mimicimport 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



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



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



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



The GUI Program Model

Listeners

Program-specific

GUIEvent effects

Add listeners Handle events



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



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



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



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



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



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



Container vs Components

Component1Component2

Component3

TextFieldButton

Container

Container



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



Containers

Component

Container

WindowPanel

DialogFrameApplet



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



Exampleimport 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



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



GUI Components

• There are several GUI components that permit specific kinds of user interaction:

– labels– text fields– text areas– lists– buttons– scrollbars



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



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



Example : Fahrenheitimport 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);



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



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



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



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



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



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);

}



Example: ButtonDemo.javapublic 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;

}}



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) {

…

}



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)



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



Example: ChoiceDemo.javaimport 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);}



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;}

}



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



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



Example: CheckboxDemo.javaimport 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);



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);

}

}



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



Example: Zoom.javaimport 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;



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



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



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



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



Example: Flow.javaimport 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 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



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



Example: Grid.javaimport java.applet.Applet;

import java.awt.*;

public class Grid extends Applet {


private Button button2 = new Button ("think");

private Button button3 = new Button ("therefore");


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



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



Example: Border.javaimport 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



Border Layout

North

South

West EastCenter



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



Example: Card.javaimport 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



Example: Card.java

public void start() {

for (int cards = 1; cards < 50; cards++) {

layout.next(this);

for (int pause = 1; pause < 400000; pause++);

}

} // method start

} // class Card



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



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

java software solutions lewis and loftus chapter 10 copyright 1997 by john lewis and william loftus....

Documents