Smalltalk architektura Model-View-Controller obiektowo zorientowany graficzny interfejs użytkownika Cezary BOŁDAK

Programowanie obiektowe 2 - Smalltalk MVC Browser Programowanie obiektowe 2 - Smalltalk MVC

Programowanie obiektowe 2 - Smalltalk MVC Triada 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

Programowanie obiektowe 2 - Smalltalk MVC Model 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

Programowanie obiektowe 2 - Smalltalk MVC Widok „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

Programowanie obiektowe 2 - Smalltalk MVC Kontroler 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

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

Programowanie obiektowe 2 - Smalltalk MVC Relacje 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

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

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

Programowanie obiektowe 2 - Smalltalk MVC Wybrane 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

Pluggable Views (1) ? 1 model – wiele widoków Rozwiązanie: adaptery classView : 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

Programowanie obiektowe 2 - Smalltalk MVC Pluggable 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

Programowanie obiektowe 2 - Smalltalk MVC Proste okno topView := StandardSystemView new. topView initialize; window: (0@0 extent: 100@50); label: 'Pierwsze okno'. subView := DisplayTextView new model: 'Witaj' asDisplayText. subView controller: NoController new. subView window: (0@0 extent: 100@50); borderWidth: 1. topView addSubView: subView viewport: (0@0 extent: 100@50). topView controller open. Programowanie obiektowe 2 - Smalltalk MVC

Programowanie obiektowe 2 - Smalltalk MVC Lista 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

Programowanie obiektowe 2 - Smalltalk MVC Lista 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

Programowanie obiektowe 2 - Smalltalk MVC Lista 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

Programowanie obiektowe 2 - Smalltalk MVC Lista 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; window:(0@0 extent: 150@50);label:'Add new:'. super window: (0@0 extent:300@150). super addSubView: listView viewport: (0@0 extent: 150@150). super addSubView: infoView viewport: (150@0 extent: 150@50). super addSubView: button viewport: (150@50 extent: 150@50). super addSubView: newView viewport: (150@100 extent: 150@50). ! ! Programowanie obiektowe 2 - Smalltalk MVC

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