copyright © 2002, systems and computer engineering, carleton university. 94.204-18c-gui3.ppt 1...

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


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


3

Ten points clicked Button pressed


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


5


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


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


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


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


10


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

}


11


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


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 :


13

CloseableFrame

LinearRegression2

JTextField

JButton

JLabel

JPanel

Vector

MyMouseInputHandler

MouseInputAdapterButtonHandler

Plot

ActionListener


14

First Cut at Building the GUI

private Plot plot;

private JButton b;

private JTextField tf;

// In LinearRegression2()...

tf = new JTextField(20);



plot = new Plot(tf);

Container contentPane = getContentPane();

contentPane.add(plot);


15


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


16


• 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


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


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


19

Second Cut at Building the GUI

private Plot plot;

private JButton b;


// in LinearRegression2()...






contentPane.add(plot, "North");


20

Second Cut at Building the GUI


JLabel.RIGHT);


contentPane.add(l, "West");

contentPane.add(tf, "Center");



contentPane.add(b, "South");


21

LinearRegression2: 2nd Cut at Building the GUI


JLabel.RIGHT);


contentPane.add(l, "West");

contentPane.add(tf, "Center");



contentPane.add(b, "South");


22

An expanded display

• Suppose we want to change the GUI to look like this:


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?


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


25

Object

Component

Container

Frame

Window

Applet

Panel

JFrame JApplet

JPanel

JComponent


26

Component

ComponentComponent

Component

Component

Component

JPanel

JPanel

JPanel

content paneof JFrame(a Container)

Component Nesting


27

JLabel

JTextField

JButton

Plot(is-aJPanel)

JPanel

content paneof JFrame(a Container)

GUI Components for Iteration 3


28

LinearRegression3

JTextField

JButton

JLabel

JPanel

Vector

MyMouseInputHandler

MouseInputAdapterButtonHandler

Plot

ActionListener

JPanel


29

Class LinearRegression3: Building the GUI

private Plot plot;

private JButton b;







contentPane.add(plot, "Center");


30


// Create a panel to hold a label, the textfield

// that displays the equation, and the button.

JPanel p = new JPanel();

p.setLayout(new BorderLayout());


SwingConstants.CENTER);


p.add(l, "North");

p.add(tf, "Center");


31




p.add(b, "South");

// Now put the panel in the frame.

contentPane.add(p, "South");


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:


p.setLayout(new GridLayout(3,1));


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


34

GridLayout Layout Manager Example

• Here’s how to build a panel that models a telephone keypad:


35


public class Telephone extends

CloseableFrame

{

public static void main(String args[])

{

JFrame f = new Telephone();

f.pack();

f.show();

}


36


public Telephone ()

{

super();

setTitle("Telephone");


p.setLayout(new GridLayout(4,3));

p.add(new JButton("1"));






37






p.add(new JButton("*"));


p.add(new JButton("#"));


contentPane.add(p);

}

}


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


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


40

Example 1

b1 = new JButton(“Up”);

contentPane.add(b1);

b1.addActionListener(this);

b2 = new JButton(“Down”);


b2.addActionListener(this);

...

}


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;


42

Example 1

if (b == b1) // We clicked the “Up” this.doUp(); else if (b == b2) this.doDown(); } }}


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


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


45

Example 2

public class Example2 extends CloseableFrame { private JButton b1, b2;

public Example2() { ... b1 = new JButton(“Up”);



46

Example 2

b2 = new JButton(“Down”); contentPane.add(b2);

ButtonListener l = new ButtonListener(this, b1, b2);

b2.addActionListener(l);


...

}


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


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;


49

Example 2

if (b == b1) // We clicked the “Up” app.doUp(); else if (b == b2) app.doDown(); } }}


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


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


52

Example 3

b2 = new JButton(“Down”); contentPane.add(b2);

ButtonListener l = new ButtonListener(this);



...

}


53

Example 3

class ButtonListener implements ActionListener{ private Example3 app;

public ButtonListener(Example3 app) { this.app = app; }


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;


55

Example 3

String s = b.getActionCommand(); if (s.equals(“Up”)) // We clicked the “Up” app.doUp(); else if (s.equals(“Down”)) app.doDown(); } }}


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


57


• 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


58


• 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

copyright © 2002, systems and computer engineering, carleton university. 94.204-18c-gui3.ppt 1...

Documents

gui pushbutton

actionlistener object

icon object

additional gui components

string object

framejlabel object

linejtextfield object

new jlabellabel