TA Programming of Interactive Systems http://davidbonnet.com/is David Bonnet [email protected] Cédric Fleury [email protected] Model-View-Controller (MVC) Design Pattern Exercise 2 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 Converter View Model 5 Example Controller Temperature Converter View Model TemperatureModel - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 5 Example Controller Temperature Converter View Model TemperatureModel TemperatureView - JTextField celsiusValue - JTextField fahrenheitValue - JButton closeButton - JButton resetButton - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 5 Example Controller Temperature Converter TemperatureController - Listeners on JTextFields - Listener on closeButton - Listener on resetButton View Model TemperatureModel TemperatureView - JTextField celsiusValue - JTextField fahrenheitValue - JButton closeButton - JButton resetButton - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 5 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) View Model TemperatureModel - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) View Model TemperatureModel - int celsius - int fahrenheit User • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) View Model TemperatureModel input User - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) notify View Model TemperatureModel input User - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) modify notify View Model TemperatureModel input User - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) modify notify View request update Model TemperatureModel input User - int celsius - int fahrenheit • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 Example Controller TemperatureController Temperature Converter - TemperatureModel model - View[] views • setCelsiusValue(int value, Object caller) • setFahrenheitValue(int value, Object caller) • bind(View view) modify notify View request update Model TemperatureModel - int celsius - int fahrenheit input User update • setCelsiusValue(int value) • setFahrenheitValue(int value) • getCelsiusValue() • getFahrenheitValue() 6 MVC Controller References between components View Model View Controller Model Model 7 MVC Controller References between components View Model 1 1 1+ View Controller Model 1 Model 7 Example Controllers Color Chooser Views Models 8 Example Controllers Color Chooser Views Models 9 Example Controllers Color Chooser Views Models ColorModel - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers Color Chooser Views Models ColorModel - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController Views Models ColorModel - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController Views Models ColorModel - CM red - CM green - CM blue User ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController Views Models ColorModel input User - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController notify Views Models ColorModel input User - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController modify notify Views Models ColorModel input User - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController modify notify Views request updates Models ColorModel input User - CM red - CM green - CM blue ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Example Controllers ColorController Color Chooser - ColorModel model - CM red - CM green - CM blue - CM model - View[] views • setRed(int value, Object caller) • setGreen(int value, Object caller) • setBlue(int value, Object caller) • bind(View view) • setValue(int Value, Object caller) • addView(View view) • removeView(View view) • bind(View view) ComponentController modify notify Views request updates Models ColorModel - CM red - CM green - CM blue input User updates ComponentModel (CM) - int value - ColorModel parent • CM getRed() • CM getGreen() • setValue(int value) • CM getBlue() • int getValue() • String toHex() • String toHex([int minLength]) 9 Models Different types Values String, numbers Sequences Lists (AbstractListModel) 10 Views Provide a representation of a model The representation is often discrete Examples from Java Swing: String JTextField, JLabel Numbers JSlider, JTextField, JLabel Sequences JLists, JComboBox Methods JButton, JMenuItem 11
© Copyright 2024 ExpyDoc
