1 / 41

Chapter 18 Integrating user interface and model: the Model-View-Controller pattern

Chapter 18 Integrating user interface and model: the Model-View-Controller pattern. Objectives. After studying this chapter you should understand the following: the Model-View-Controller pattern: components and their roles;

azra
Download Presentation

Chapter 18 Integrating user interface and model: the Model-View-Controller pattern

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Chapter 18Integrating user interface and model: the Model-View-Controller pattern

  2. Objectives • After studying this chapter you should understand the following: • the Model-View-Controller pattern: components and their roles; • the observer pattern, as realized by the class Observable and interface Observer, and its use in the MVC pattern. • Also, you should be able to: • write a graphical user interface for a simple application using the MVC architecture. NH-Chapter 18

  3. 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. NH-Chapter 18

  4. 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. NH-Chapter 18

  5. View view1 View view3 Controller control1 Model View view2 Controller control2 M-V-C architecture NH-Chapter 18

  6. 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. NH-Chapter 18

  7. 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. NH-Chapter 18

  8. RightTriangle class publicclass RightTriangle { privateint base; privateint height; privateint hypotenuse; public RightTriangle (int base, int height) { this.base = base; this.height = height; setHypotenuse(); } publicint base () { returnthis.base; } publicint height () { returnthis.height; } publicint hypotenuse () { returnthis.hypotenuse; } publicvoid setBase (int newBase) { this.base = newBase; setHypotenuse(); } publicvoid setHeight (int newHeight) { this.height = newHeight; setHypotenuse(); } privatevoid setHypotenuse () { this.hypotenuse = (int) Math.round( Math.sqrt(base*base + height*height)); } }//end RightTriangle. NH-Chapter 18

  9. Observable methods • java.util.Observable class specification provides several methods; among those: publicvoid addObserver (Observer o); protected void setChanged (); publicvoid notifyObservers (); publicvoid notifyObservers (Object arg); NH-Chapter 18

  10. Structuring an Observer/Observable • RightTriangle extends Observable: • When RightTriangle changes state, to notify all registered observers of the event, modifies commands to add: publicclass RightTriangle extendsObservable… • All views are Observer’sof RightTriangle instance rt • Client Observer registers to rt invoking addObserver. rt.addObserver(this); setChanged(); notifyObservers(); NH-Chapter 18

  11. 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(); } NH-Chapter 18

  12. Interface Observer interface Observer { void update (Observable o, Object arg); } NH-Chapter 18

  13. 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 structure • Observer must know target object. • Observer registers itself with the target. • When target notifies observer, observer executes update. NH-Chapter 18

  14. 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. NH-Chapter 18

  15. The View • View extends JPanel and implements Observer. • RightTriangle to display is provided as constructor argument. • class TextView extends JPanel implements Observer { • privatefinalstaticint 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); • … • } NH-Chapter 18

  16. The View • View extends JPanel and implements Observer. • RightTriangle to display is provided as constructor argument. NH-Chapter 18

  17. 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: publicvoid 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)); } NH-Chapter 18

  18. 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. NH-Chapter 18

  19. Controller structure • private class TVController implements ActionListener { • private RightTriangle model; • /** • * Create a new controller for this TextView of the • * specified RightTriangle. • */ • public TVController (RightTriangle model) { • this.model = model; • ¹ TextView.this.base.addActionListener(this); • TextView.this.height.addActionListener(this); • } NH-Chapter 18

  20. Controller structure • /** • * Update the model in response to user input. • */ • publicvoid actionPerformed (ActionEvent e) { • JTextField tf = (JTextField)e.getSource(); • try { • int i = Integer.parseInt(tf.getText()); • if (i < 0) thrownew NumberFormatException(); • String which = e.getActionCommand(); • if (which.equals("Base")) • model.setBase(i); • else • model.setHeight(i); • } catch (NumberFormatException ex) { • TextView.this.update(model, null); • } • } NH-Chapter 18

  21. Model, View and Controller NH-Chapter 18

  22. provides Game Pile s e s u 2 «interface» directs Player AbstractPlayer InteractivePlayer IndependentPlayer Nim Game : Model NH-Chapter 18

  23. Nim Game : TUI NH-Chapter 18

  24. 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. NH-Chapter 18

  25. Nim Game : GUI design NH-Chapter 18

  26. 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. NH-Chapter 18

  27. 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. NH-Chapter 18

  28. NimController NH-Chapter 18

  29. View • A NimInterface instance: • builds display, • observes the Game. NH-Chapter 18

  30. 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(); } } NH-Chapter 18

  31. 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. NH-Chapter 18

  32. NimInterface • When notified, • queries Game, • updates display. • NimInterface responsible for • displaying the number of sticks remaining in the game; • reporting the winner when the game is over. NH-Chapter 18

  33. 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. NH-Chapter 18

  34. Delaying IdependentPlayer’s move • NimController invokes Game’s play, • once for InteractivePlayer, • once for IndependentPlayer. • Need a delay between the two play invocations. NH-Chapter 18

  35. 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. NH-Chapter 18

  36. 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 NH-Chapter 18

  37. 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. NH-Chapter 18

  38. 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. NH-Chapter 18

  39. Summary • Overview basic format of Model-View-Controller pattern. • MVC commonly used to structure event-driven graphical user interfaces. • With MVC, interface responsibilities are partitioned into two segments: • view has display responsibilities, • controller modifies model in accordance with user input. NH-Chapter 18

  40. Summary • Developed three views of a right triangle. • Noted Java Observer interface and Observable class for implementing the observes relationship. • Fundamental relationship between view and model is observes, implemented by • making model object an extension of the class Observable, • view implements interface Observer. • Added a graphical user interface to the nim game, using the MVC pattern. NH-Chapter 18

  41. Summary • Swing components are structured along the lines of MVC. • Each Swing component has • an associated model object responsible for maintaining component’s state. • a UI delegate, to which view and control responsibilities are delegated. • This structure allows to change application look-and-feel in a system-independent way. NH-Chapter 18

More Related