GUI-Based Software Development. The Model/View/Controller Pattern

Size: px

Start display at page:

Download "GUI-Based Software Development. The Model/View/Controller Pattern"

Junior Shields
5 years ago
Views:

1 GUI-Based Software Development The Model/View/Controller Pattern

2 Origins of Personal Computing The most important part of a computer system is the individual human user. - Alan Kay

3 Origins of Personal Computing Vannevar Bush (Memex, 1945) Ivan Sutherland (Sketchpad, 1963) Douglas Engelbart (NLS online System, ARPANET, late 1960s) Alan Kay (Smalltalk, Alto, 1972)

4 Xerox Parc (1970s) Bitmap graphics Graphical User Interfaces (GUIs) WYSIWYG editors Ethernet The first desktop computer the Alto

5 GUIs WIMP Interface Window, Icon, Mouse, Pull-down menu Early 1980s Steve Jobs takes a tour of Xerox PARC and gets some ideas that went into the Macintosh

6 Smalltalk Created by Alan Kay s research group at Xerox/ PARC in the early 1970s Intended as a development environment for GUIbased apps for desktop and mobile computers (the Dynabook) Origin of many features incorporated into later object-oriented languages

7 Smalltalk If you open up a computer, you find other little computers (objects), and so on The computer should integrate in a seamless way with ordinary user activity, using common metaphors (GUIs, etc.)

8 A System of Cooperating Objects Object Object An object can hide state that is modifiable. Objects communicate by sending messages (and parameters) to each other. Object Object

9 Fundamental Ideas of OOP Data encapsulation Inheritance Message passing Polymorphism

10 Smalltalk Syntax Odd at first, but very simple and regular Expressions can be entered and evaluated in an interpreter window Run-time type checking and completely dynamic memory management

11 Syntax: Unary Messages 'Hi there' size 8

12 Syntax: Unary Messages 'Hi there' size 8 6 odd false

13 Syntax: Unary Messages 'Hi there' size 8 6 odd false 5 abs 5

14 Syntax: Unary Messages 'Hi there' size 8 6 odd false 5 abs asinteger 6

15 Syntax: Unary Messages 'Hi there' size 8 6 odd false 5 abs asinteger 6 true not false

16 Syntax: Binary Messages 4 is the receiver object is the message 67 is the parameter object 71 is the object returned

17 Syntax: Binary Messages * 2 142

18 Syntax: Binary Messages * (67 * 2) 138

19 Syntax: Binary Messages * (67 * 2) 138 'Hi ', 'there' 'Hi there'

20 Syntax: Binary Messages * (67 * 2) 138 'Hi ', 'there' 'Hi there' 6 < 5 false

21 Syntax: Binary Messages * (67 * 2) 138 'Hi ', 'there' 'Hi there' 6 < 5 false 'Hi ' < 'there' true

22 Syntax: Keyword Messages 3 max: 4 4

23 Syntax: Keyword Messages 3 max: gcd: 16 8

24 Syntax: Keyword Messages 3 max: gcd: between: 1 and: 8 true

25 Repetition sum sum := 0. 1 to: 5 do: [:i sum := sum + i]. ^sum 15 i is a block variable that is bound to each number in the series from 1 to 5

26 Repetition sum sum := 0. 1 to: 5 do: [:i sum := sum + i]. ^sum 15 a a := Array new: 5. 1 to: 5 do: [:i a at: i put: i]. ^a #( )

27 Iterators do: collect: detect: select: reject: inject:into:

28 Mapping with collect: ^'Hi there' collect: [ :ch ch isvowel iftrue: [ch asupperase] iffalse: [ch aslowerase]] 'hi there'

29 Filtering with select: ^'Hi there' select: [:ch ch isvowel] asset size 2 ^'the cat sat on the mat' select: [:ch ch isvowel not]. 'th ct st n th mt'

30 Filtering with reject: ^'the cat sat on the mat' reject: [:ch ch isvowel]. 'th ct st n th mt' ^#( ) reject: [:grade grade < 60] #( )

31 Searching with detect: ^#( ) detect: [:grade (grade > 50) & (grade < 80)] 60

32 Reducing with inject:into: #( ) inject: 0 into: [:n1 :n2 n1 + n2] 10 #( ) inject: 1 into: [:n1 :n2 n1 * n2] 24

33 A Complete "Program " str i j ch freq freq := Array new: to: 26 do: [:i freq at: i put: 0]. str := Prompter prompt: 'Enter a string' default: ''. 1 to: str size do: [:i ch := (str at: i) asuppercase. ch isletter iftrue: [ j := ch asciivalue - $A asciivalue + 1. freq at: j put: (freq at: j) + 1]]. 1 to: 26 do: [:i Transcript nextputall: (freq at: i) printstring, ' ']. Transcript cr

34 A Better "Program " string characters characters := Bag new. string := Prompter prompt: 'Enter a string: ' default: ''. string do: [:ch ch isletter iftrue: [characters add: ch asuppercase]]. characters asset assortedcollection do: [:ch Transcript nextput: ch; nextputall: ' ', (characters occurrencesof: ch) printstring, ' ']. Transcript cr

35 Smalltalk Not just a programming language, but a set of tools and resources integrated in a common environment Was the first IDE (Integrated Development Environment)

36 Class Hierarchy Browser

37 Class Hierarchy Browser

38 The Model/View Pattern We can have different views of a data model Terminal I/O, uses keyboard and terminal window Graphical user interface (GUI), uses mouse, windows, dialogs, data fields, buttons and pull-down menus

39 Class Diagram EmployeeModel 1 EmployeeManagerView * Employee 1 EmployeeDialog Model 1 = contains just one 0..1 = contains zero or one * = contains zero or more View

40 A Banking System ManagerView SavingsAccount * ATMView Bank Model File storage

41 The Model/View/Controller Pattern The model manages the data The view presents the data to the human user The controller handles the interaction between the user, the view, and the model

42 Model/View/Controller (MVC) Requests for data View User events Actions to update the view Controller (listeners) Actions to update the model Model

43 A GUI-Based Application Set up the data model (instantiate it, or get it from a file) Set up the view Create window objects Add them to the window with a particular layout Set up the controller Define event handlers which take action when the user initiates events in the view (clicks the mouse, etc.) Create the main window, set its size, make it visible, and wait for user events to occur

44 Summary Classes in the data model manage the application s data Classes in the view present the data to users and provide input controls Classes (or methods) in the controller handle interactions among the user, the view, and the model

History. A (brief) history of interaction. Outline. Major paradigms of interaction. Visionaries who inspired advances

History. A (brief) history of interaction. Outline. Major paradigms of interaction. Visionaries who inspired advances History A (brief) history of interaction Outline Major paradigms of interaction - Batch interfaces - Conversational interfaces - Graphical interfaces Visionaries who inspired advances - Vannevar Bush -