1 Smalltalk architektura Model-View-Controller obiektowo zorientowany graficzny interfejs użytkownikaCezary BOŁDAK

2 Programowanie obiektowe 2 - Smalltalk MVCBrowser Programowanie obiektowe 2 - Smalltalk MVC

3 Programowanie obiektowe 2 - Smalltalk MVCTriada MVC podział zadań związanych z interfejsem - Model – przechowywanie danych - View – prezentacja danych - Controller – interakcja z użytkownikiem każdy z uczestników triady może się zmieniać niezależnie (ortogonalność) MVC obecne od Smalltalk-80 „dialekt” ze Squeak 3.8 interfejs oparty na myszy Programowanie obiektowe 2 - Smalltalk MVC

4 Programowanie obiektowe 2 - Smalltalk MVCModel może być nim każdy obiekt przechowujący dane: 'String', 'Integer', 'Float' specjalna klasa bazowa 'Model' ułatwiająca komunikację niezależny od prezentacji i interakcji przynajmniej nie bezpośrednio Programowanie obiektowe 2 - Smalltalk MVC

5 Programowanie obiektowe 2 - Smalltalk MVCWidok „główny rozgrywający” triady okno z prezentacją modelu okna główne – klasa 'StandardSystemView' struktura drzewiasta: 'subViews' i 'superView' 'window' – lokalny obszar okna 'viewPort' – obszar widoku w 'superView' Transformation: operację mapujące lokalne współrzędne na współrzędne 'superView' i ekranu Programowanie obiektowe 2 - Smalltalk MVC

6 Programowanie obiektowe 2 - Smalltalk MVCKontroler reprezentant triady główny szkielet działania globalna kolekcja kontrolerów 'ScheduledControllers' każdy widok ma 1 kontroler ('NoController'–bez interakcji) równoległe drzewo Programowanie obiektowe 2 - Smalltalk MVC

7 Programowanie obiektowe 2 - Smalltalk MVCBudowa triady VIEW dependents model controller MODEL CONTROLLER view model Programowanie obiektowe 2 - Smalltalk MVC

8 Programowanie obiektowe 2 - Smalltalk MVCRelacje triady ControllerView,ControllerModel,ViewController, View  Model : pola klas' Model  View: wzorzec Observer a) zmienna klasowa w 'Object': 'DependentFields' dependents ^ DependentsField at: self. b) pole klasy 'Model': 'dependents' dependents ^ dependents. c) protokół 'updating' klasy 'Object' changed: aParam self dependents do: [:aDep | aDep update: aParam] changed changed: self Programowanie obiektowe 2 - Smalltalk MVC

9 Działanie kontrolera (1)ScheduledControllers ScheduledControllers : ControlManager StandardSystemController ScreenController ... Znajdywanie aktywnego kontrolera activeController := ScheduledControllers scheduledControllers detect: [ :aController | aController isControlWanted ]. Controller | isControlWanted ^self viewHasCursor. Programowanie obiektowe 2 - Smalltalk MVC

10 Działanie kontrolera (2)Przekazywanie kontroli wybranemu kontrolerowi activeController startUp. Controller | startUp self controlInitialize. self controlLoop. self controlTerminate. Controller | controlLoop [self isControlActive] whileTrue: [self interActivityPause. self controlActivity. Processor yeld. ] Controller | controlActivity | aView | aView := view subViewWantingControl. aView == nil ifTrue: [aView controller startUp]. Programowanie obiektowe 2 - Smalltalk MVC

11 Programowanie obiektowe 2 - Smalltalk MVCWybrane kontrolery NoController isControlWanted ^ false ModalController isControlWanted ^ modeActive MouseMenuController ControlActivity | cursorPoint | cursorPoint := sensor cursorPoint. super controlActivity. (cursorPoint = self cursorPoint and: [self vewHasCursor]) ifTrue: [ sensor redButtonPressed ifTrue:[^self redButtonActivity]. sensor yellowButtonPressed ifTrue:[^self yellowButtonActivity]. sensor blueButtonPressed ifTrue:[^self blueButtonActivity]] ScreenController, StandardSystemController Programowanie obiektowe 2 - Smalltalk MVC

12 Pluggable Views (1) ? 1 model – wiele widoków Rozwiązanie: adapteryclassView : CodeView +getCode myBrowser : BrowserModel +getClass: Class +getMethod: Method model ? model methodView : CodeView +getCode Rozwiązanie: adaptery BrowserModel subclass: #ClassAdapter ... getCode ^self getClass. BrowserModel subclass: #MethodAdapter ... ^self getMethod. Programowanie obiektowe 2 - Smalltalk MVC

13 Programowanie obiektowe 2 - Smalltalk MVCPluggable Views (2) lepsze rozwiązanie: pluggable selector View subclass: #PluggableCodeView instanceVariables ”getCodeSelector” ... setGetCodeSelector: getCodeSel getCodeSelector := getCodeSel. ^ self getCode ^ model perform: getCodeSelector aClassView := PluggableCodeView new setGetCodeSelector: #getClass. aMethodView := PluggableCodeView new setGetCodeSelector: #getMethod. Programowanie obiektowe 2 - Smalltalk MVC

14 Programowanie obiektowe 2 - Smalltalk MVCProste okno topView := StandardSystemView new. topView initialize; window: extent: label: 'Pierwsze okno'. subView := DisplayTextView new model: 'Witaj' asDisplayText. subView controller: NoController new. subView window: extent: borderWidth: 1. topView addSubView: subView viewport: extent: topView controller open. Programowanie obiektowe 2 - Smalltalk MVC

15 Programowanie obiektowe 2 - Smalltalk MVCLista z dodawaniem (1) Model subclass: #ListModel instanceVariableNames: 'list selection' classVariableNames: '' oolDictionaries: '' category: 'OOP2-Example'! !ListModel methodsFor: 'initialize-release' ! initialize list := OrderedCollection new. selection := 0. ^ self! ! ! ListModel methodsFor: 'accesing' ! add: newPosition list addLast: newPosition. self changed: #list.! list ^ list ! ! Programowanie obiektowe 2 - Smalltalk MVC

16 Programowanie obiektowe 2 - Smalltalk MVCLista z dodawaniem (2) ! ListModel methodsFor: 'selection' ! selected (selection > 0) ifTrue: [^ list at: selection] ifFalse: [^ nil]. ! selection ^ selection ! selection: newSelection (newSelection > list size) ifFalse: [selection := newSelection. self changed: #selected].! ! ListModel class instanceVariableNames: ''! !ListModel class methodsFor: 'class initialization' ! new ^ super new initialize! ! Programowanie obiektowe 2 - Smalltalk MVC

17 Programowanie obiektowe 2 - Smalltalk MVCLista z dodawaniem (3) StandardSystemView subclass: #ListTestView instanceVariableNames: 'listModel listView button infoView newView' classVariableNames: '' poolDictionaries: '' category: 'OOP2-Example'! !ListTestView methodsFor: 'displaying' ! run super controller open.! ! !ListTestView methodsFor: 'action' ! newPosition |newPos| newPos := newView displayContents asString. (newPos = '') ifTrue: [^ nil]. listModel add: newPos. listView list: (listView getList asArray). listView display; displaySelectionBox. newView editString: ''; display. ! ! Programowanie obiektowe 2 - Smalltalk MVC

18 Programowanie obiektowe 2 - Smalltalk MVCLista z dodawaniem (4) !ListTestView methodsFor: 'initialize-release' ! initialize super initialize. listModel := ListModel new. listModel add: 'abc'; add:'def'; add: 'ghi'; selection: 1. super label: 'OOP2 MVC Example - lists'. listView := PluggableListView on: listModel list: #list selected: #selection changeSelected: #selection: . listView autoDeselect: false. infoView := PluggableTextView on: listModel text: #selected accept: nil. infoView borderWidth: 1. newView := StringHolderView new. newView borderWidth: 1. button := PluggableButtonView on: self getState: nil action: #newPosition. button borderWidth:3; extent: new:'. super window: super addSubView: listView viewport: extent: super addSubView: infoView viewport: extent: super addSubView: button viewport: extent: super addSubView: newView viewport: extent: ! ! Programowanie obiektowe 2 - Smalltalk MVC

19 Programowanie obiektowe 2 - Smalltalk MVCLista z dodawaniem (5) ListTestView class instanceVariableNames: ''! !ListTestView class methodsFor: 'instance creation' ! new ^ super new initialize! ! runExample self new run! ! Programowanie obiektowe 2 - Smalltalk MVC