Week 4: b. MVC example (adapted from Swing version written by - PowerPoint PPT Presentation

Week 4: 
 b. MVC example (adapted from Swing version written by David Bonnet, Cédric Fleury, Arnaud Prouzeau

Model-View-Controller (MVC) Design Pattern TA Exercise 1. percentage pie chart 2. color chooser (MVC together)

MVC Based on the divide and conquer principle: Model Holds the abstract data (e.g. a number) and methods to handle it. View Defines the visual representation of a data (e.g. a slider to represent a number). Controller Manages the user input and sets the application behavior 
 (e.g. adds a listener to the slider that updates the number). � 3

MVC Controller View Model � 4

Example Controller Temperature 
 TemperatureController - Listeners on TextFields Converter - Listener on closeButton - Listener on resetButton View Model TemperatureModel TemperatureView - int celsius - int fahrenheit - TextField celsiusValue - TextField fahrenheitValue • setCelsiusValue(int value) - Button closeButton • setFahrenheitValue(int value) - Button resetButton • getCelsiusValue() • getFahrenheitValue() � 5

Example Controller TemperatureController Temperature 
 - TemperatureModel model Converter - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) modify notify request update View Model TemperatureModel - int celsius input - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) User • getCelsiusValue() • getFahrenheitValue() update � 6

MVC Controller References 
 between 
 View Model components 1 1 1+ View Model Model Controller 1 � 7

In-class exercise

In-class exercise Go to our website: http://www.lri.fr/~anab/teaching/HCID-ProgIS/ we start will start with TA on Colour Chooser � 9

Example Controllers Color 
 Chooser Views Models � 10

Example Controllers ColorController - ColorModel model ComponentController - CM red Color 
 - CM model - CM green - View[] views Chooser - CM blue • setValue(int Value, Object caller) • setRed(int value, Object caller) • addView(View view) • setGreen(int value, Object caller) • removeView(View view) • setBlue(int value, Object caller) modify • bind(View view) • bind(View view) notify request updates Views Models ColorModel - CM red ComponentModel (CM) - CM green 
 input - int value - CM blue - ColorModel parent • CM getRed() • setValue(int value) • CM getGreen() • int getValue() User • CM getBlue() updates • String toHex([int minLength]) • String toHex() � 11