Designing the GUI front-end: the Model-View-Controller pattern

1
Chapter 19

• Designing the GUI front-end the
  Model-View-Controller pattern

2
This chapter discusses

• The Model-View-Controller (MVC)
• Two components View and Controller.
• Implementing MVC and the observes relation in
  Java.
• Basic Swing components structured along the lines
  of the MVC pattern

3
Model-View-Controller

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

4
Advantages

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

5
Model

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

6
View

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

7
Controller

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

8
Example

• Lets consider a system that models a right
  triangle.
• It accepts base and height and calculates the
  hypotenuse.

9
Example Model

• public class RightTriangle
• //Contructors
• /
• Create right triangle with base and height
• require
• basegt0 height gt 0
• /
• public RightTriangle (int base, int height)
• this.base base
• this.height height
• setHypotenuse()
• //Queries
• /
• The base
• ensure
• result gt 0
• /
• public int base()

10
Example Model (cont.)

• /
• The height
• ensure
• result gt 0
• /
• public int height()
• return this.height
• /
• The hypotenuse
• ensure
• result gt 0
• /
• public int hypotenuse()
• return this.hypotenuse
• //Commands
• /
• Change base

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(basebase heightheight))
• //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
ExampleModel (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
ExampleObserver

• class RTObserver implements Observer
• public RTObserver (RightTriangle rt)
• target rt
• target.addObserver(this)
• private RightTriangle target

15
Observer

• The interface Observer specifies only one method
• void update (Observable o, Object arg)
• 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)
• 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 lt len i i1)
• ((Observer)observers.get(i)).update(
• this, arg)
• hasChanged false
• public void notifyObservers ()
• this.notifyObservers(null)
• private boolean hasChanged
• private ObserverList observers

18
Exampleview and controller

• The components of the view are the 3 text fields.
• 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.
• Because the controller and the view are very
  closely related, we make the controller class an
  inner class of TextView.
• The controller will then have direct access to
  the views text field components.
• 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)

23
Example
24
View layout

• We lay out components in a 2 ? 3 grid, using a
  GridBagLayout layout manager.
• 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)

27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
A graphic view

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

32
A graphical view

• 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.
• The Graphics object provides several methods for
  drawing on components.

33
(No Transcript)
34
(No Transcript)
35
View

• A view does not need to be a part of a graphical
  interface.
• Example A view can log changes in the models
  state to a file.

36
(No Transcript)
37
(No Transcript)
38
MVC and Swing

• Swing components are structured along the
  Model-View-Controller pattern.

39
Swing model

• Each Swing JComponent has an associated model
  object that is responsible for maintaining the
  components state.

40
Swing model (cont.)

• ButtonModel
• public boolean isPressed()
• public boolean isEnabled()
• public void setPressed (boolean b)
• public void setEnabled (boolean b)
• default class DefaultButtonModel.
• State information is maintained by a Document.

41
Swing UI delegate

• Because the view and controller for a component
  are very closely related, they are combined into
  one object for many Swing components.
• 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

• A standard JButton implementation consists of
• a model (implements the interface ButtonModel)
• a look-and-feel specific view element
• An element that responds to user input and
  functions as a controller

43
JButton MVC
44
Weve covered

• The Model-View-Controller pattern.
• The standard Java library for implementing the
  observes relation.
• Swing components structured along the lines of
  MVC.

45
Glossary