Upload
vivien-rice
View
214
Download
0
Tags:
Embed Size (px)
Citation preview
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
1
94.204* Object-Oriented Software Development
Part 18-c
Building Graphic User Interfaces with Java
Layout Managers
• Copyright © 1998-2001 D.L. Bailey, Systems and Computer Engineering, Carleton University
• revised April 2002
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
2
Revisiting the Curve-Fitting Application
• Let's change the curve-fitting (method of least squares) application so that it– displays the equation of the line when the line is
plotted, and – has a button that, when pressed, will erase the display
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
3
Ten points clicked Button pressed
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
4
GUI Components for the Curve-Fitting Application
• In the first version of this application, a subclass of JPanel was used to plot the points and line
– we’ll try to reuse this JPanel subclass
• Now we need to place additional GUI components in the frame
– JLabel object : For the label “Equation of the line
– JTextField object : display the equation in the form “y=mx+b”
– JButton : to clear the plot
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
6
Labels - Class JLabel
• Jlabel is the simplest component that contains a single line of text that cannot be edited by the user
• Here is a sequence of statements that creates three labels
JLabel l1 = new JLabel("Label 1", JLabel.CENTER);
JLabel l2 = new JLabel("Label 2");
// Default is left justified.
// So this is the same as
// JLabel l2 = JLabel("Label 2", JLabel.LEFT);
JLabel l3 = new JLabel("Label 3", JLabel.RIGHT);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
7
Text Fields - Class JTextField
• A JTextField object is a text component that displays a single line of text in a box that can be edited
(although editing should be disabled if the field is used to display program output, but is not used for input)
• The following statements create a 20 column wide, “output-only” JTextField with a white background
JTextField tf = new JTextField(20);
tf.setBackground(Color.white);
// Don't allow the user to type in the text field
tf.setEditable(false);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
8
Buttons - Class JButton
• A JButton object is a GUI pushbutton with a text label (a String object) or an icon (an Icon object)
• The following statement creates a JButton with the label “Press Me!”:
JButton b = new JButton(“Press Me!”);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
9
Events Sent By JButtons
• When a JButton object is clicked, it generates an ActionEvent action
• To handle these button clicks, an ActionListener object must be registered as the listener for the button
• The ActionListener declares a single method:
public void actionPerformed(ActionEvent e)
• There is no ActionAdapter abstract class (Why?)
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
10
Events Sent By JButtons
• Here is a listener object for a JButton that sends the doThis message to an instance of SomeClass when the button is clicked:
class ButtonHandler implements ActionListener{ private SomeClass anObject;
public ButtonHandler(SomeClass anObject) {
this.anObject = anObject;
}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
11
Events Sent By JButtons
public void actionPerformed(ActionEvent e) { anObject.doThis(); }}
• To register an instance of this ActionListener with JButton b:
SomeClass obj;// initialization of obj to a SomeClass object// not shown hereb.addActionListener(new ButtonHandler(obj));
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
12
Back to the Curve-Fitting Application
• The revised version of the application is in file LinearRegression2.java
• As before, LinearRegression2() builds the GUI
• What associations are needed between the various objects?
• Let’s walk through some scenarios :
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
13
CloseableFrame
LinearRegression2
JTextField
JButton
JLabel
JPanel
Vector
MyMouseInputHandler
MouseInputAdapterButtonHandler
Plot
ActionListener
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
14
First Cut at Building the GUI
private Plot plot;
private JButton b;
private JTextField tf;
// In LinearRegression2()...
tf = new JTextField(20);
tf.setBackground(Color.white);
tf.setEditable(false);
plot = new Plot(tf);
Container contentPane = getContentPane();
contentPane.add(plot);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
15
First Cut at Building the GUI
JLabel l = new JLabel(" Equation of the line ",
JLabel.RIGHT);
l.setForeground(Color.black);
contentPane.add(l);
contentPane.add(tf);
b = new JButton("Clear Plot");
b.addActionListener(new ButtonHandler(plot));
contentPane.add(b);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
16
First Cut at Building the GUI
• When the program runs, it doesn’t display all of the GUI components !
• To understand why, we have to look at how AWT and Swing GUI components are placed in containers
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
17
Component Layout
• Container defines an add() method that is invoked to add components to the container
– recall that the content pane return by JFrame’s getContentPane() method is a Container
• Recall that our Components were not placed in the pane by specifying their (x,y) coordinates. Q: Why not?
– A: what looks good in one environment may not look as good in another environment
• Instead, each Container object has a layout manager object that controls how components are positioned in the container
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
18
Component Layout
• The default layout manager for a JFrame’s content pane object is a BorderLayout object (there are other Layout managers available)
• A border layout divides the container into 5 regions: “North”, “South”, “East”, “West”, and “Center”
• One component can be placed in each region:
North
South
EastWest Center
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
19
Second Cut at Building the GUI
private Plot plot;
private JButton b;
private JTextField tf;
// in LinearRegression2()...
tf = new JTextField(20);
tf.setBackground(Color.white);
tf.setEditable(false);
plot = new Plot(tf);
Container contentPane = getContentPane();
contentPane.add(plot, "North");
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
20
Second Cut at Building the GUI
JLabel l = new JLabel(" Equation of the line ",
JLabel.RIGHT);
l.setForeground(Color.black);
contentPane.add(l, "West");
contentPane.add(tf, "Center");
b = new JButton("Clear Plot");
b.addActionListener(new ButtonHandler(plot));
contentPane.add(b, "South");
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
21
LinearRegression2: 2nd Cut at Building the GUI
JLabel l = new JLabel(" Equation of the line ",
JLabel.RIGHT);
l.setForeground(Color.black);
contentPane.add(l, "West");
contentPane.add(tf, "Center");
b = new JButton("Clear Plot");
b.addActionListener(new ButtonHandler(plot));
contentPane.add(b, "South");
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
22
An expanded display
• Suppose we want to change the GUI to look like this:
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
23
GUI for Iteration 3
• Starting from the top of the frame, there are 4 components:
– the JPanel– the JLabel– the JTextField– the JButton
• But, the BorderLayout that manages a JFrame’s content pane has only 3 regions, top to bottom
• So, how do we arrange the components the way we want them?
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
24
GUI for Iteration 3
• Recall that a JPanel is a subclass of Container (see next slide)
• That means we can put components in a JPanel, and put the JPanel in the JFrame’s content pane
– we can even put JPanels inside JPanels
• Each Container has its own layout manager, which can be changed by sending the container the setLayout() message, passing a new layout manager object as the message argument
– the default layout manager for a JPanel is a FlowLayout object
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
25
Object
Component
Container
Frame
Window
Applet
Panel
JFrame JApplet
JPanel
JComponent
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
26
Component
ComponentComponent
Component
Component
Component
JPanel
JPanel
JPanel
content paneof JFrame(a Container)
Component Nesting
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
27
JLabel
JTextField
JButton
Plot(is-aJPanel)
JPanel
content paneof JFrame(a Container)
GUI Components for Iteration 3
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
28
LinearRegression3
JTextField
JButton
JLabel
JPanel
Vector
MyMouseInputHandler
MouseInputAdapterButtonHandler
Plot
ActionListener
JPanel
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
29
Class LinearRegression3: Building the GUI
private Plot plot;
private JButton b;
private JTextField tf;
tf = new JTextField(20);
tf.setBackground(Color.white);
tf.setEditable(false);
plot = new Plot(tf);
Container contentPane = getContentPane();
contentPane.add(plot, "Center");
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
30
Class LinearRegression3: Building the GUI
// Create a panel to hold a label, the textfield
// that displays the equation, and the button.
JPanel p = new JPanel();
p.setLayout(new BorderLayout());
JLabel l = new JLabel(" Equation of the line ",
SwingConstants.CENTER);
l.setForeground(Color.black);
p.add(l, "North");
p.add(tf, "Center");
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
31
Class LinearRegression3: Building the GUI
b = new JButton("Clear Plot");
b.addActionListener(new ButtonHandler(plot));
p.add(b, "South");
// Now put the panel in the frame.
contentPane.add(p, "South");
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
32
The GridLayout Layout Manager
• The GridLayout layout manager organizes a container's components in a rectangular grid
• The container is divided into equal size rectangles, and one component is placed in each rectangle
• In LinearRegression3.java, we could change the JPanel’s layout manager to a GridLayout object this way:
JPanel p = new JPanel();
p.setLayout(new GridLayout(3,1));
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
33
The GridLayout Layout Manager
• This code lays out the panel’s components in a rectangular grid consisting of 3 rows and 1 column
• The panel is divided into 3 equal sized rectangles, and one component is placed in each rectangle
• Components are placed in the panel by invoking Container’s add() method:
p.add(l); // place label at top
p.add(tf); // place text field below
p.add(b); // place button at bottom
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
34
GridLayout Layout Manager Example
• Here’s how to build a panel that models a telephone keypad:
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
35
GridLayout Layout Manager Example
public class Telephone extends
CloseableFrame
{
public static void main(String args[])
{
JFrame f = new Telephone();
f.pack();
f.show();
}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
36
GridLayout Layout Manager Example
public Telephone ()
{
super();
setTitle("Telephone");
JPanel p = new JPanel();
p.setLayout(new GridLayout(4,3));
p.add(new JButton("1"));
p.add(new JButton("2"));
p.add(new JButton("3"));
p.add(new JButton("4"));
p.add(new JButton("5"));
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
37
GridLayout Layout Manager Example
p.add(new JButton("6"));
p.add(new JButton("7"));
p.add(new JButton("8"));
p.add(new JButton("9"));
p.add(new JButton("*"));
p.add(new JButton("0"));
p.add(new JButton("#"));
Container contentPane = getContentPane();
contentPane.add(p);
}
}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
38
Handling Events From Multiple Sources
• A single event listener object can be registered as the listener for several components
• To handle the event, the listener must first identify which component sent the event
• The event listener starts by sending the event object the getSource() message, which returns a reference to the object that generated the event
• Let’s look at how to write an event listener that is sent events by two buttons
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
39
Example 1
• The class that creates the buttons also serves as the event listener for the buttons:
public class Example1 extends CloseableFrame implementsActionListener{ private JButton b1, b2;
public Example1() { ...
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
40
Example 1
b1 = new JButton(“Up”);
contentPane.add(b1);
b1.addActionListener(this);
b2 = new JButton(“Down”);
contentPane.add(b2);
b2.addActionListener(this);
...
}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
41
Example 1
public void
actionPerformed(ActionEvent e)
{
Object o = e.getSource();
// Determine which kind of
// component sent the ActionEvent.
if (o instanceof JButton) {
// A button was clicked.
JButton b = (JButton)o;
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
42
Example 1
if (b == b1) // We clicked the “Up” this.doUp(); else if (b == b2) this.doDown(); } }}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
43
Example 1
• Note the use of instanceof to determine the kind of object that sent the eventObject o = e.getSource();if (o instanceof JButton) {
JButton b = (JButton)o;
• How do the listener determine which button was clicked?
• In this example, b is a reference to the JButton object that generated the event
• This reference is compared to the references saved in instance variables b1 and b2
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
44
Example 2
• The event listener is a different class from the class that creates the button
• As such, the private instance variables b1 and b2 in the class where the buttons are created are not visible to the event listener
• To overcome this, when the event listener is created, its constructor is passed references to
– the buttons
– the object that the event listener will ask to do work when the buttons are clicked
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
45
Example 2
public class Example2 extends CloseableFrame { private JButton b1, b2;
public Example2() { ... b1 = new JButton(“Up”);
contentPane.add(b1);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
46
Example 2
b2 = new JButton(“Down”); contentPane.add(b2);
ButtonListener l = new ButtonListener(this, b1, b2);
b2.addActionListener(l);
b1.addActionListener(l);
...
}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
47
Example 2
class ButtonListener implements ActionListener{ private Example2 app; private JButton b1, b2;
public ButtonListener(Example2 app, JButton b1, JButton b2) { this.app = app; this.b1 = b1; this.b2 = b2; }
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
48
Example 2
public void actionPerformed(ActionEvent e) { Object o = e.getSource();
// Determine which kind of // component sent the ActionEvent. if (o instanceof JButton) { // A button was clicked. JButton b = (JButton)o;
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
49
Example 2
if (b == b1) // We clicked the “Up” app.doUp(); else if (b == b2) app.doDown(); } }}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
50
Example 3
• We can avoid passing the event listener references to all the buttons by invoking JButton’s getActionCommand() method
• The JButton’s getActionCommand() method returns a String containing the button’s “action command”
• By default, the action command is the button’s label, but this can be changed by sending the button the setActionCommand() message
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
51
Example 3
public class Example3 extends CloseableFrame { public Example3() { private JButton b1, b2; // Notice that these are no longer // instance variables ... b1 = new JButton(“Up”); contentPane.add(b1);
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
52
Example 3
b2 = new JButton(“Down”); contentPane.add(b2);
ButtonListener l = new ButtonListener(this);
b2.addActionListener(l);
b1.addActionListener(l);
...
}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
53
Example 3
class ButtonListener implements ActionListener{ private Example3 app;
public ButtonListener(Example3 app) { this.app = app; }
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
54
Example 3
public void actionPerformed(ActionEvent e) { Object o = e.getSource();
// Determine which kind of // component sent the ActionEvent. if (o instanceof JButton) { // A button was clicked. JButton b = (JButton)o;
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
55
Example 3
String s = b.getActionCommand(); if (s.equals(“Up”)) // We clicked the “Up” app.doUp(); else if (s.equals(“Down”)) app.doDown(); } }}
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
56
Recap - Using the Java 1.1 Event Model
• Select AWT or Swing components
– a GUI-based application has at least one component: its frame (a subclass of Frame or JFrame)
• Look up the event classes for the events generated by the components
• Look up the listener interface for each event class
• Design listener classes to handle the events
– build a class that implements the listener interface, or...
– subclass an adapter class that implements the listener interface, and override the methods of interest
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
57
Recap - Using the Java 1.1 Event Model
• Write the GUI initialization code (usually placed in the constructor of the top-level application class):
– create instances of each component
– create listener objects
– register each listener with its event source
Copyright © 2002, Systems and Computer Engineering, Carleton University. 94.204-18c-Gui3.ppt
58
Recap - Using the Java 1.1 Event Model
• If componentObject generates event XEvent– its event listener, listenerObject, is an instance
of a class that implements the XListener interface or extends XAdapter
– listenerObject must be registered with componentObject
componentObject.addXListener(listenerObject);
• Exception to the rule: MouseEvent has two listeners (MouseMotionListener and MouseListener) so components that generate MouseEvents have two add-listener methods