1. Chapter 19 Designing the GUI front-end: the Model-View-Controller pattern

2. This chapter discusses n The Model-View-Controller (MVC) n Two components: View and Controller. n Implementing MVC and the observes relation in Java. n Basic Swing components structured along the lines of the MVC pattern

3. Model-View-Controller n model components -- the objects that model and solve the problem at hand. n view components -- the objects that determine the manner in which the model components are to be displayed. n controller components -- the objects that handle user input.

4. Advantages n Input processing is separated from output processing. n Controllers can be interchanged, allowing different user interaction modes. n Multiple views of the model can be supported easily.

5. Model n The model does not require details of the other components. n The model is independent. n The model can be retrofitted readily with a new look and feel.

6. View n The view must insure that the display accurately reflects the current state of the model. n The view is an observer, notified of state changes in a target (model). n The view-controller relationship is often has-as-strategy. n View is often a composite built of simpler views.

7. Controller n The controller defines how the view responds to user input. n The controller must effect changes in the model as determined by user input. n The controller listens to the view or its components.

8. Example n Let’s consider a system that models a right triangle. n It accepts base and height and calculates the hypotenuse.

9. Example: Model public class RightTriangle { //Contructors /** * Create right triangle with base and height * require: *base>=0; height >= 0 */ public RightTriangle (int base, int height) { this.base = base; this.height = height; setHypotenuse(); } //Queries /** * The base * ensure: *result >= 0; */ public int base() { return this.base; }

10. Example: Model (cont.) /** * The height * ensure: *result >= 0; */ public int height() { return this.height; } /** * The hypotenuse * ensure: *result >= 0; */ public int hypotenuse() { return this.hypotenuse; } //Commands /** * Change base * require: *newBase>= 0; */ public void setBase(int newBase) { this.base = newBase; setHypotenuse(); }

11. Example: Model (cont.) public void setHeight(int newHeight) { this.height = newHeight; setHypotenuse(); } //Private Methods /** * Adjust hypotenuse */ public void setHypotenuse() { this.hypotenuse = (int) Math.round( Math.sqrt(base*base + height*height)); } //Private Methods private int base; private int height; private int hypotenuse; }

12. Observer To support the observes relation, Java provides a class Observable and an interface Observer in the package java.util. Observable methods: public void addObserver(Observer o); protected void setChanged (); public void notifyObservers (); public void notifyObservers (Object arg); Class component: private boolean haschanged; private ObserverList observers;

13. Example:Model (cont.) public class RightTriangle extends Observable { … public void setBase (int newBase) { this.base = newBase; setHypotenuse(); setChanged(); notifyObservers(); } public void setHeight (int newHeight) { this.height = newHeight; setHypotenuse(); setChanged(); notifyObservers(); } … }

14. Example: Observer class RTObserver implements Observer { public RTObserver (RightTriangle rt) { target = rt; target.addObserver(this); } … private RightTriangle target; }

15. Observer n The interface Observer specifies only one method: void update (Observable o, Object arg); n The first parameter references the target; the second is the argument provided by the target to notifyObservers.  Called by the target to notify the observer of a state change notifyObservers(info); u causes the update method of each of its observers to be called.

16. Observer (cont.) public class Observable () { public Observable () { observer = new ObserverList(); hasChanged = false; } public void addObserver (Observer o) { observer.append(o); } public void setChanged () { hasChanged = true; }

17. Observer (cont.) public void notifyObservers(Object arg){ if (hasChanged) { int i; int len = observers.size(); for (i = 0; i < len; i = i+1) ((Observer)observers.get(i)).update( this, arg); hasChanged = false; } public void notifyObservers () { this.notifyObservers(null); } private boolean hasChanged; private ObserverList observers; }

18. Example:view and controller n The components of the view are the 3 text fields. n Each text field has an action command incorporated in any ActionEvent it generates.

19. Example: view class TextView extends JPanel implements Observer { 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.setActionCommand(“Hypotenuse”); … } …

20. Example: view (cont.) update is invoked whenever the model changes state. 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)); } private final static int FIELD_SIZE = 16; private JTextField base; private JTextField height; private JTextField hypotenuse; }

21. Example: controller It captures user input from the base and height text fields, and updates the model. n Because the controller and the view are very closely related, we make the controller class an inner class of TextView. n The controller will then have direct access to the view’s text field components. n The controller must be an ActionListener and must respond to ActionEvents generated by the text fields.  It implements actionPerformed.

22. Example: Controller class TVController implements ActionListener { public TVController(RightTriangle model, TextView view) { this.model = model; this.view = view; view.base.addActionListener(this); view.height.addActionListener(this); } public void actionPerformed (ActionEvent e) { JTextField tf = (JTextField)e.getSource(); try { int i = Integer.parseInt(tf.getText()); String which = e.getActionCommand(); if (which.equals(“Base”)); model.setBase(i); else model.setHeight(i); } catch (NumberFormatExeception ex) { view.update(model, null); } private TextView view; private RightTrangle model; }

23. Example

24. View layout n We lay out components in a 2  3 grid, using a GridBagLayout layout manager. n A GridBagLayout layout manager uses a GridBagConstraints object to position each component.

25. View layout (cont.) public TextView (RightTriangle model) { super(); setLayout(new GridBagLayout()); GridBagConstraints constraints = new GrideBagContraints(); constraints.gridx = 0; constraints.gridy = GridBagConstraints.RELATIVE; constraints.anchor = GridBagConstrains.EAST; constraints.insets = new Insets(5,5,5,5); add(new Label(“Base”),constraints); add(new Label(“Height”),constraints); add(new Label(“Hypotenuse”),constraints); constraints.gridx = 1; base = new JTextField(FIELD_SIZE); base.setActionCommand(“Base”); add(base,constraints);

26. View layout (cont.) height = new JTextField(FIELD_SIZE); height.setActionCommand(“Height”); add(height,constraints); hypotenuse = new JTextField(FIELD_SIZE); hypotenuse.setEditable(false); add(hypotenuse,constraints); model.addObserver(this); controller = new TVController(Model, this); update(model,null); }

31. A graphic view n This shows a graphic rendition of the triangle without a controller. n The basic structure is the same as the previous view.

32. A graphical view n JPanel is not just a container for other components, but also is useful as a blank canvas on which to draw. We override the JPanel paintComponent method to draw. n The Graphics object provides several methods for drawing on components.

35. View n A view does not need to be a part of a graphical interface. n Example: A view can log changes in the model’s state to a file.

38. MVC and Swing n Swing components are structured along the Model-View-Controller pattern.

39. Swing: model n Each Swing JComponent has an associated model object that is responsible for maintaining the component’s state.

40. Swing: model (cont.) n ButtonModel: public boolean isPressed() public boolean isEnabled() public void setPressed (boolean b) public void setEnabled (boolean b) default class: DefaultButtonModel. n State information is maintained by a Document.

41. Swing: UI delegate n Because the view and controller for a component are very closely related, they are combined into one object for many Swing components. n The component delegates the view and control responsibilities to its UI delegate. The plugable look-and-feel package ( javax.swing.plaf ) contains an abstract delegate class for each Swing component. Basic classes in javax.swing.plaf.basic can be used for building custom look-and-feel components.

42. Swing: UI delegate n A standard JButton implementation consists of: u a model (implements the interface ButtonModel) u a look-and-feel specific view element u An element that responds to user input and functions as a controller

43. JButton MVC

44. We’ve covered n The Model-View-Controller pattern. n The standard Java library for implementing the observes relation. n Swing components structured along the lines of MVC.

45. Glossary