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

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

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.

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

Example: a Model for Tax Code print("Tax Calculator\n") RATE = .15 EXEMPTION_AMOUNT = 3500.0 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)

Example: a Model for Tax Code App print("Tax Calculator\n") RATE = .15 EXEMPTION_AMOUNT = 3500.0 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

The GUI Version class TaxCodeApp(EasyFrame): """Application window for the tax calculator.""" RATE = .15 EXEMPTION_AMOUNT = 3500.0 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)

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())

The Tax Code Model """ File: taxcode.py. class TaxCode(object): """The model for the tax calculator.""" RATE = .15 EXEMPTION_AMOUNT = 3500.0 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)

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

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

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.)

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

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

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

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

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 4 # 0 + 4 9 # 4 + 5 18 # 9 X 2 6.0 # 18 / 3 None # Back to initial state -1 # 4 - 5 -6 # = with 5 and -

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

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

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

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

Read Chapter 2 on Collections For Friday Read Chapter 2 on Collections