Download Chapter 18: Integrating user interface and model: the Model

An Introduction to
Programming and Object
Oriented Design using Java
3rd Edition. Dec 2007
Jaime Niño
Frederick Hosch
Chapter 18
Integrating user interface and model: the ModelView-Controller pattern
Model-View-Controller
 An Application structure
 model components –objects that model and solve
problem;
 view components –objects that display model;
 controller components –objects that handle user
input.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
1
Model-View-Controller advantages
 Processing of input and output is separate;
 Controllers can be interchanged, allowing different user
interaction modes;
 Allows multiple views of model.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
2
M-V-C architecture
View view1
View view3
Controller control1
Model
View view2
Controller control2
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
3
Observer/Observable relationships




java.util provides class Observable, interface Observer.
Observer is client and Observable is server.
Observer registers with the Observable,
Observable informs Observer when it changes state.
«interface»
notifies
Observer
SomeClient
Dec 2007
Observable
registers with
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
4
M-V-C example
 Model: a right triangle.
 base and height can be modified.
 Three different views of triangle.
 View one displays lengths of sides.
 View two displays triangle graphically.
 View three logs changes in triangle state to file.
 A controller for view one, to modify triangle.
 No controller for other views.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
5
RightTriangle class
public class RightTriangle {
private int base;
private int height;
private int hypotenuse;
public RightTriangle (int base, int height) {
this.base = base;
this.height = height;
setHypotenuse();
}
public int base () {
return this.base;
}
public int height () {
return this.height;
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
6
RightTriangle class
public int hypotenuse () {
return this.hypotenuse;
}
public void setBase (int newBase) {
this.base = newBase;
setHypotenuse();
}
public void setHeight (int newHeight) {
this.height = newHeight;
setHypotenuse();
}
private void setHypotenuse () {
this.hypotenuse = (int) Math.round(
Math.sqrt(base*base + height*height));
}
}//end RightTriangle.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
7
Observable methods
 java.util.Observable class specification provides several
methods; among those:
public void addObserver (Observer o);
protected void setChanged ();
public void notifyObservers ();
public void notifyObservers (Object arg);
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
8
Structuring an Observer/Observable
RightTriangle extends Observable:
public class RightTriangle extends Observable …
 All views are Observer’s of RightTriangle instance rt
 Client Observer registers to rt invoking addObserver.
rt.addObserver(this);
 When RightTriangle changes state, to notify all registered
observers of the event, modifies commands to add:
setChanged();
notifyObservers();
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
9
Implementing an Observable
 RightTriangle changes state in setBase or setHeight :
public void setBase (int newBase) {
this.base = newBase;
setHypotenuse();
setChanged();
notifyObservers();
}
public void setHeight (int newHeight) {
this.height = newHeight;
setHypotenuse();
setChanged();
notifyObservers();
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
10
Interface Observer
interface Observer {
void update (Observable o, Object arg);
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
11
Observer structure
 Observer must know target object.
 Observer registers itself with the target.
 When target notifies observer, observer executes update.
class RTObserver implements Observer {
private RightTriangle target;
// Create an observer of RightTriangle rt.
public RTObserver (RightTriangle rt) {
target = rt;
target.addObserver(this);
…
observer registers with model
}
}
Dec 2007
public void update((Observable o, Object arg){
do something about o’s state change.
}
…
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
12
A simple view and controller for RightTriangle
 Build a view that shows the three components of the
triangle in text fields.
 Controller will capture input from text fields labeled Base
and Height, and modify state of the RightTriangle
appropriately.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
13
The View
 View extends JPanel and implements Observer.
 RightTriangle to display is provided as constructor argument.
class TextView extends JPanel implements Observer {
private final static int FIELD_SIZE = 16;
private JTextField base;
private JTextField height;
private JTextField hypotenuse;
public TextView (RightTriangle model) {
super();
…
base = new JTextField(FIELD_SIZE);
base.setActionCommand("Base");
…
height = new JTextField(FIELD_SIZE);
height.setActionCommand("Height");
…
hypotenuse = new JTextField(FIELD_SIZE);
hypotenuse.setEditable(false);
…
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
14
The View
 View extends JPanel and implements Observer.
 RightTriangle to display is provided as constructor
argument.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
15
The View
 When model changes state, notifies view to update text
fields.
 View’s update queries model for new state information,
and writes it into text fields:
public void update (Observable model, Object arg) {
int side;
RightTriangle rt = (RightTriangle)model;
side = rt.base();
base.setText(String.valueOf(side));
side = rt.height();
height.setText(String.valueOf(side));
side = rt.hypotenuse();
hypotenuse.setText(String.valueOf(side));
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
16
Controller structure
 Captures user input from base and height text fields
 must have references to the text fields,
 must respond to ActionEvents generated by text
fields,
 must be an ActionListener,
 must be added as listener to text fields.
 Updates model.
 This is response to ActionEvent text fields generate.
 Must have reference to RightTriangle.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
17
Controller structure
private class TVController implements ActionListener {
private RightTriangle model;
/**
* Create a new controller for this TextView of
* specified RightTriangle.
*/
public TVController (RightTriangle model) {
this.model = model;
TextView.this.base.addActionListener(this);
TextView.this.height.addActionListener(this);
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
18
Controller structure
//Update the model in response to user input.
public void actionPerformed (ActionEvent e) {
JTextField tf = (JTextField)e.getSource();
try {
int i = Integer.parseInt(tf.getText());
if (i < 0) throw new NumberFormatException();
String which = e.getActionCommand();
if (which.equals("Base"))
model.setBase(i);
else
model.setHeight(i);
}catch (NumberFormatException ex) {
TextView.this.update(model, null);
}
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
19
Model, View and Controller
observes
TextView
has
3
JTextFi eld
Ri ghtTriangle
2
listens-t o
TVController
Dec 2007
modifies
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
20
Nim Game : Model
provides
Pile
uses
Game
2
directs
«interface»
Player
AbstractPlayer
InteractivePlayer
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
IndependentPlayer
21
Nim Game : TUI
creat es
G ame
creat es
NimG ame
NimTUI
creat es
«i nterface»
Pl ayer
«interface»
notifies
InteractiveController
TUIControl ler
Dec 2007
InteractivePl ayer
provides moves
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
22
Nim Game : TUI v.s. GUI design
 TUI design:
 TUIController
registers with InteractivePlayer,
prompts and reads user’s move,
InteractivePlayer.
forwards it to
 The play loop is in the interface.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
23
Nim Game : GUI design
«i nterface»
O bser ver
observes
O bser vabl e
NimInterface
Dec 2007
Game
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
24
Nim Game : TUI v.s. GUI design
 GUI design
 No explicit loop coded.
 User repeats some event.
 NimController
 When user presses an input button it invokes
setNumberToTake on InteractivePlayer.
 Invokes Game’s play,
once for InteractivePlayer,
once for IndependentPlayer.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
25
View
 Display composed of four panels:
 a panel to display number of sticks remaining,
 two panels each with a text field to report player’s
moves,
 a panel containing buttons for user to make a move.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
26
NimController
directs play
NimI nterface.NimControl ler
G ame
provides moves
Interacti vePlayer
listens t o
3
JButton
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
27
View
 A NimInterface instance:
 builds display,
 observes the Game.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
28
Model’s Game
 When Game completes a play, it notifies its Observers.
public void play () {
if (!gameOver()) {
nextPlayer.takeTurn(pile,MAX_ON_A_TURN);
previousPlayer = nextPlayer;
nextPlayer = otherPlayer(nextPlayer);
setChanged();
notifyObservers();
}
}
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
29
GUI structure
 User selects “New Game” from main menu.
 Menu
item
listener
invokes
NimController’s
initializeGame:
 displays a JDialog to get initialization data from
user,
 creates a Game.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
30
NimInterface
 When notified,
 queries Game,
 updates display.
 NimInterface responsible for
 displaying number of sticks remaining in the game;
 reporting the winner when the game is over.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
31
Sub-views
 NimInterface
 defines an inner class PlayerView
responsibility to report player’s moves.
with
the
 A PlayerView observes a Player, and updates the text
field when the Player takes a turn.
NimInterface.PlayerView
Dec 2007
observes
«interface»
Player
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
32
Delaying IdependentPlayer’s move
 NimController invokes Game’s play,
 once for InteractivePlayer,
 once for IndependentPlayer.
 Need a delay between the two play invocations.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
33
Delaying IdependentPlayer’s move
public void actionPerformed (ActionEvent e) {
…
user.setNumberToTake(number);
game.play();
nhUtilities.utilities.Control.sleep(2); //delay
game.play();
…
}
 Attempt to delay the two plays fails.
 Application will pause, but moves appear to take place
at the same time.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
34
Delaying IdependentPlayer’s move
Event dispatch thread
user presses button
button-press event handler starts
display updates resulting from
InteractivePlayer move are scheduled
thread sleeps for two seconds
display updates resulting form
IndependentPlayer move are scheduled
button-press event handler completes
display is updated
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
35
Scheduling a move to delay the action
 NimController uses javax.swing.Timer to schedule
IndependentPlayer’s play seconds after play of
InteractivePlayer.
 User’s Button-press event handling is complete.
 IndependentPlayer’s move occurs after and when
scheduled.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
36
MVC and Swing components
 Swing components are structured using MVC pattern.
 Each Swing JComponent has an associated model object
responsible for maintaining component’s state.
 JButton or JCheckBox has a ButtonModel,
 JTextArea or JTextField has a Document.
 A Swing component delegates
responsibilities to its UI delegate.
view
and
control
 The package javax.swing.plaf contains an abstract
delegate class for each Swing component.
Dec 2007
NH-Chapter 18:An Introduction To Programming
And Object Oriented Design Using Java
37