1. Computer Science 111 Fundamentals of Programming I
Model/View/Controller and
Data model design

2. I/O and Computations 5 functions to complete
Add arithmetic to perform calculations when these buttons are clicked

3. Where Should the Calculations Go?
The code to perform the calculations can get complex
Hide this code in a new object, of type Calculator
Run methods on this object to calculate the results from inputs, clear the process, etc.

4. The Model/View Pattern
View (User Interface)
Data Model
The data model consists of software components that manage a system’s data (calculator arithmetic, tax code, etc.)
The view consists of software components that allow human users to view and interact with the data model
The view can be a TUI or a GUI, on the same data model

5. Example: a Model for Tax Code
print("Tax Calculator\n")
RATE = .15
EXEMPTION_AMOUNT =
income = float(input("Please enter your income: $"))
exemptions = int(input("Please enter the number of exemptions: "))
tax = max(0.0, (income - exemptions * EXEMPTION_AMOUNT) * RATE)
print("Your total tax is $%0.2f" % tax)
With no explicit model object, all the code for the calculations is visible within the code for the view (user interface)

6. Example: a Model for Tax Code App
print("Tax Calculator\n")
RATE = .15
EXEMPTION_AMOUNT =
income = float(input("Please enter your income: $"))
exemptions = int(input("Please enter the number of exemptions: "))
tax = max(0.0, (income - exemptions * EXEMPTION_AMOUNT) * RATE)
print("Your total tax is $%0.2f" % tax)
from taxcode import TaxCode // Model is in another module
print("Tax Calculator\n")
taxCode = TaxCode() // Instantiate the model
income = float(input("Please enter your income: $"))
exemptions = int(input("Please enter the number of exemptions: "))
taxCode.computeTax(income, exemptions) // Ask model to compute tax
print("Your total tax is $%0.2f" % taxCode.getTax())
RATE and EXEMPTION_AMOUNT are hidden in the model

7. The GUI Version class TaxCodeApp(EasyFrame):
"""Application window for the tax calculator."""
RATE = .15
EXEMPTION_AMOUNT =
def __init__(self):
"""Sets up the window and the widgets."""
EasyFrame.__init__(self, title = "Tax Calculator")
. . .
# The event handling method for the button
def computeTax(self):
"""Obtains the data from the input fields and uses
them to compute the tax, which is sent to the
output field."""
income = self.incomeField.getNumber()
exemptions = self.exField.getNumber()
tax = max(0.0,
(income - exemptions * TaxCode.EXEMPTION_AMOUNT) \
* TaxCode.RATE)
self.taxField.setNumber(tax)

8. The GUI Version from taxCode import taxCode
class TaxCodeApp(EasyFrame):
"""Application window for the tax calculator.""”
def __init__(self):
"""Sets up the window and the widgets."""
EasyFrame.__init__(self, title = "Tax Calculator”)
self.taxCode = TaxCode() // Instantiate the model
. . .
# The event handling method for the button
def computeTax(self):
"""Obtains the data from the input fields and uses
them to compute the tax, which is sent to the
output field."""
income = self.incomeField.getNumber()
exemptions = self.exField.getNumber()
self.taxCode.computeTax(income, exemptions) // Ask the model
self.taxField.setNumber(self.taxCode.getTax())

9. The Tax Code Model """ File: taxcode.py. class TaxCode(object):
"""The model for the tax calculator."""
RATE = .15
EXEMPTION_AMOUNT =
def __init__(self):
"""Sets up the model."""
self.tax = 0.0
def __str__(self):
"""Returns the string representation of the tax."""
return str(self.tax)

10. The Tax Code Model """ File: taxcode.py. class TaxCode(object):
"""The model for the tax calculator."””
. . .
def computeTax(income, exemptions):
"""Computes and updates the tax."""
self.tax = max(0.0,
(income - exemptions * \
TaxCode.EXEMPTION_AMOUNT) * TaxCode.RATE)
def getTax():
"""Returns the tax."""
return self.tax

11. Model/View/Controller Pattern
GUI-based, event-driven programs can be further decomposed by gathering code to handle user interactions into a third component called the controller
Displays
data
Manages data
View
Model
Controller
Responds to user events

12. The Controller
In Python, the controller consists of the methods that respond to user events
These methods are defined in the main view class, and are associated with the command attribute of the buttons
Other types of widgets can have their own event-handling methods (for mouse presses, etc.)

13. M/V/C and Event-Driven Programming
Set up a window with its widgets
Connect it to a data model
Wait for users to press buttons, enter text, drag the mouse, etc.
Respond to these events by running methods that update the data model and the view

14. Add a Data Model to the Calculator
The model will handle the calculation when the +, -, X, /, and = buttons are clicked
The model tracks a running total, as well as a previous operator and operand
The controller
Obtains the number in the digits label
Passes the operator and the number to the model
Resets the digits label to the result obtained from the model

15. The View and the Model for the Calculator
Label
String
EasyFrame
CalculatorApp
Calculator
displays 2 19
Button
int/float

16. The Model’s Interface
model = Calculator() # Returns a new model with an initial state
str(model) # Returns the model’s state (the current total)
model.applyOperator(operator, # Performs an arithmetic operation and updates the
operand) # total
model.clear() # Restores the model to its initial state
applyOperator works with a previous operator and possibly a previous operand, if they exist; the model tracks these as well

17. The Model’s Behavior: A Test Drive
c = Calculator()
print(c)
c.applyOperator("+", 4)
c.applyOperator("+", 5)
c.applyOperator("X", 2)
c.applyOperator("/", 3)
c.clear()
c.applyOperator("-", 5)
c.applyOperator("=", 5)
None # Startup # #
# 9 X 2
# 18 / 3
None # Back to initial state #
# = with 5 and -

18. Changes to Main View Class
from calculator import Calculator
class CalculatorApp(EasyFrame):
"""Displays labels in the window's quadrants."""
def __init__(self):
"""Sets up the window and the labels."""
EasyFrame.__init__(self, background = "black", title = "Calculator",
resizable = False)
self.calculator = Calculator() # Instantiate the data model
self.operatorEntered = False # Track the entry of an operator
row = 1
for op in ("/", "X", "-", "+", "="):
button = self.addButton(op, row = row, column = 3)
button["command"] = self.makeOperatorCommand(op))
row += 1
makeOperatorCommand builds a command for each operator

19. The Controller for All Digits
class CalculatorApp(EasyFrame):
"""Displays labels in the window's quadrants."””
. . .
# Event handling method builder for digit buttons
def makeDigitCommand(self, buttonText):
"""Define and return the event handler for a digit button."""
def addDigit():
if self.operatorEntered or self.digitsLabel["text"] == "0":
self.digitsLabel["text"] = ""
self.operatorEntered = False
self.digitsLabel["text"] += buttonText
if buttonText != "0":
self.clearButton["text"] = "C"
return addDigit
self.operatorEntered is True after an operator is entered, which allows the user to begin a new series of digits
When it’s False, the user continues the series of digits

20. The Controller for 5 Operators
class CalculatorApp(EasyFrame):
"""Displays labels in the window's quadrants."””
. . .
# Event handling method builder for /, X, +, -, and = buttons
def makeOperatorCommand(self, buttonText):
"""Define and return the event handler for a button."""
def applyOperator():
number = self.digitsLabel["text"]
if "." in number:
number = float(number)
else:
number = int(number)
self.calculator.applyOperator(buttonText, number)
self.digitsLabel["text"] = str(self.calculator)
self.operatorEntered = True
return applyOperator
Get the label’s text, convert it to the appropriate number, pass it and the operator to the model for calculation, and display the model’s state

21. Changes to Main View Class
class CalculatorApp(EasyFrame):
"""Displays labels in the window's quadrants."””
. . .
def clear(self):
"""Sets number to 0 in the view.
Clears the model if the button is AC."""
self.digitsLabel["text"] = "0"
if self.clearButton["text"] == "AC":
self.calculator.clear()
self.operatorEntered = False
else:
self.clearButton["text"] = "AC"
Clear button shows “AC”:
Reset the digits label and reset the model
Clear button shows “C”:
Reset the digits label only

22. Read Chapter 2 on Collections
For Friday
Read Chapter 2 on
Collections