1 / 28

Computer Science 111

Computer Science 111. Fundamentals of Programming I List boxes and dialogs. The Model/View Pattern. View (User Interface). Data Model. The data model consists of software components that manage a system’ s data (game logic, tax code, etc.)

mabelf
Download Presentation

Computer Science 111

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer Science 111 Fundamentals of Programming I List boxes and dialogs

  2. The Model/View Pattern View (User Interface) Data Model The data model consists of software components that manage a system’s data (game logic, tax code, etc.) The view consists of software components that allow human users to view and interact with the data model

  3. Example: The Counter App View (User Interface) Data Model CounterGUI Counter

  4. Example: The Number Guess App View (User Interface) Data Model NumberGuessGUI NumberGuess

  5. Example: The Tax Code App View (User Interface) Data Model TaxCodeGUI TaxCode

  6. Another Example • A simple-minded course management system calls for representing students’ information • Each student has a name and a set of exam scores • There can be zero or more students

  7. Data Modeling:Composition and Aggregation * int list Student str means “is composed of” * means “aggregates zero or more within” A student’s name is a string, and a list holds the student’s scores

  8. Data Modeling:Composition and Aggregation * Student dict Roster means “is composed of” * means “aggregates zero or more within” The roster has a single dictionary, and the dictionary has zero or more students, keyed by names

  9. Behavior of a Student s = Student(scores = 3) # Creates and returns a student with # the given number of scores s.getNumberOfScores() # Returns the number of scores s.getName() # Returns the student’s name s.setName(newName) # Sets student’s name to newName s.getScore(i) # Returns the score at position i s.setScore(i, newScore) # Sets score at position i to newScore s.getAverage() # Returns the student’s average score s.getHighScore() # Returns the student’s high score str(s) # Returns the string rep of the student

  10. Behavior of the Roster model = Roster(numberOfScores = 3) model.getNumberOfScores() # Returns the number of scores model.getNames() # Returns a list of student names model.add(s) # Adds s to the roster model.remove(name) # Removes the student with the name model.get(name) # Returns the student with the name len(model) # Returns the number of students str(model) # Returns the string rep of the roster

  11. Two Views of a Student StudentGUI1 Student StudentGUI2

  12. StudentGUI1 from breezypythongui import EasyFrame classStudentGUI1(EasyFrame): """Displays the student's info in a text area.""" def__init__(self, student): """Sets up the window.""" EasyFrame.__init__(self, title = "Student") # Instance variable to track the student. self.student = student # A text area to display the student's info self.addTextArea(text = str(self.student), row = 0, column = 0, width = 25))

  13. GUI Tradeoffs • GUI 1 is easy for viewing • GUI 2 is easy for editing • Use GUI 1 for viewing, and pop up a new window (a dialog) for making changes

  14. StudentGUI3

  15. Popup Dialogs • Like a window (can display all the widgets, handle events, etc.) • Takes control until closed • The user can click OK to accept changes or Cancel toback out • Define as a subclass of EasyDialog

  16. StudentGUI3 from breezypythongui import EasyFrame, EasyDialog classStudentGUI3(EasyFrame): """Displays the student's info in a text area.""" def__init__(self, student): """Sets up the window.""" EasyFrame.__init__(self, title = "Student") # Instance variable to track the student. self.student = student # A text area to display the student's info. self.textArea = self.addTextArea(text = str(self.student), row = 0, column = 0, width = 25)) # A text area to to modify the Student object. self.addButton(text = "Modify", row = 1, column = 0, command = self.modify)

  17. StudentGUI3 from breezypythongui import EasyFrame, EasyDialog classStudentGUI3(EasyFrame): """Displays the student's info in a text area.""” . . . # Event-handling method for the Modify button. defmodify(self): """Pops up a dialog to modify the student's info. Updates the text area if the user clicks OK.""" dialog = StudentDialog(self, self.student) if dialog.modified(): self.textArea.setText(str(self.student)) Pass the data model to the dialog, just like you do to the top-level window

  18. Two Views of a Student StudentGUI3 Student StudentDialog StudentGUI3 is the main window StudentDialog is the popup dialog Student is the data model

  19. The Structure of a Dialog Class • __init__: sets up the parent class and saves a reference to the data model • body: creates and lays out the widgets • apply: the event handler for the OK button

  20. StudentGUI3 from breezypythongui import EasyFrame, EasyDialog classStudentDialog(EasyDialog): """Opens a dialog on a student object.""” def__init__(self, parent, student): """Sets up the window.""" self.student = student EasyDialog.__init__(self, parent, "Student Editor")

  21. StudentGUI3 - body from breezypythongui import EasyFrame, EasyDialog classStudentDialog(EasyDialog): """Opens a dialog on a student object.""" defbody(self, master): """Sets up the widgets.""" self.addLabel(master, text = "Name", row = 0, column = 0) self.nameField = self.addTextField(master, text = self.student.getName(), row = 0, column = 1) #Labels and fields for the student's scores self.scoreFieldList = list() for index inrange(self.student.getNumberOfScores()): self.addLabel(master, text = "Score " + str(index + 1), row = index + 1, column = 0) field = self.addIntegerField(master, value = self.student.getScore(index), row = index + 1, column = 1) self.scoreFieldList.append(field)

  22. StudentGUI3 - apply from breezypythongui import EasyFrame, EasyDialog classStudentDialog(EasyDialog): """Opens a dialog on a student object.""" def apply(self): """When the OK button is clicked, transfers data from the fields to the song.""" if self.nameField.getText() == "": self.messageBox("ERROR", "Name is missing") return self.student.setName(self.nameField.getText()) for index inrange(self.student.getNumberOfScores()): self.student.setScore(index, self.scoreFieldList[index].getNumber()) self.setModified()

  23. The GUI for the Roster List box Text area

  24. The Structure of the Roster App RosterGUI Roster StudentDialog Student RosterGUI is the main window class StudentDialog is the popup dialog class Student and Roster are the data model classes

  25. RosterApp from roster import createRoster from rostergui import RosterGUI defmain(): """Instantiates the model and the view, and opens the window.""” model = createRoster(3) view = RosterGUI(model) view.mainloop() # Entry point of the application. if __name__ == "__main__": main() createRoster is a helper function that creates several Student objects and adds them to a roster for testing

  26. List Boxes • Hold zero or more strings • Can respond to a user’s selection of an item • Can add or remove items, track the list’s length, etc.

  27. Example: listboxdemo.py

  28. For Friday Read Chapter 2 on Collections

More Related