An Introduction to Programming and Object Oriented Design using Java 3 rd Edition. Dec 2007 Jaime Niño Frederick Hosch Chapter 18 Integrating user interface and model: the Model- View-Controller pattern

1Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

2Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

3Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java M-V-C architecture Model Controller control1 Controller control2 View view1 View view2 View view3

4Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

5Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

6Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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; } RightTriangle class

7Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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. RightTriangle class

8Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Observable methods public void addObserver (Observer o); protected void setChanged (); public void notifyObservers (); public void notifyObservers (Object arg);  java.util.Observable class specification provides several methods; among those:

9Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java  When RightTriangle changes state, to notify all registered observers of the event, modifies commands to add: 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); setChanged(); notifyObservers();

10Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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(); }

11Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Interface Observer interface Observer { void update (Observable o, Object arg); }

12Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Observer structure class RTObserver implements Observer { private RightTriangle target; // Create an observer of RightTriangle rt. public RTObserver (RightTriangle rt) { target = rt; target.addObserver(this); … } public void update((Observable o, Object arg){ do something about o’s state change. } … } observer registers with model  Observer must know target object.  Observer registers itself with the target.  When target notifies observer, observer executes update.

13Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

14Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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); … }

15Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java The View  View extends JPanel and implements Observer.  RightTriangle to display is provided as constructor argument.

16Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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)); }

17Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

18Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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); }

19Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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); }

20Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Model, View and Controller

21Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Nim Game : Model Player «interface» IndependentPlayerInteractivePlayer AbstractPlayer GamePile directs provides 2 u s e s

22Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Nim Game : TUI

23Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Nim Game : TUI v.s. GUI design  TUI design:  TUIController  registers with InteractivePlayer,  prompts and reads user’s move, forwards it to InteractivePlayer.  The play loop is in the interface.

24Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Nim Game : GUI design

25Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

26Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

27Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java NimController

28Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java View  A NimInterface instance:  builds display,  observes the Game.

29Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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(); }

30Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

31Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

32Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Sub-views  NimInterface  defines an inner class PlayerView with the responsibility to report player’s moves.  A PlayerView observes a Player, and updates the text field when the Player takes a turn.

33Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Delaying IdependentPlayer’s move  NimController invokes Game’s play,  once for InteractivePlayer,  once for IndependentPlayer.  Need a delay between the two play invocations.

34Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Delaying IdependentPlayer’s move  Attempt to delay the two plays fails.  Application will pause, but moves appear to take place at the same time. public void actionPerformed (ActionEvent e) { … user.setNumberToTake(number); game.play(); nhUtilities.utilities.Control.sleep(2); //delay game.play(); … }

35Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java Delaying IdependentPlayer’s move user presses button thread sleeps for two seconds display updates resulting form display is updated display updates resulting from InteractivePlayer move are scheduled IndependentPlayer move are scheduled button-press event handler starts button-press event handler completes Event dispatch thread

36Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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.

37Dec 2007NH-Chapter 18:An Introduction To Programming And Object Oriented Design Using Java 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 view and control responsibilities to its UI delegate.  The package javax.swing.plaf contains an abstract delegate class for each Swing component.