cs2340: ModelViewController

1
cs2340 Model-View-Controller

• Summer 2007

2
THE standard Smalltalk Architecture
Model Information for the application. View
Visual Representation of the Information. Control
ler Mechanism to allow user to change
information or view.
3
Passive MVC

• Model is unaware of view/controller
• Simple text editor, user keys each letter, so
  controller notifies model and view of letter
  typed, everything in sync.
• But what if we want to reformat or load a
  document from disk?

4
Active MVC

• Model has to actively notify the view that it has
  changed.
• In our text editor, we load a new file, so the
  model needs to tell the view that the text has
  changed.
• changed message allows notification
• update message allows reaction

5
Coupling

• Model - View loose coupling through dependents
  collection (class Model)
• View Control Tight coupling through direct
  reference
• View - Model Tight coupling through direct
  reference
• Controller - Model Tight coupling through direct
  reference
• Model - Controller No reference at all

6
Sample
Class Employee name
The VM detects a mouse click and sends it to the
current Controller. The Controller has a
method redButtonPressed. Assume we implement it
to send view okButtonPress. The view sends
model name newName. The model can then update
the name and send the self changed name
message. Why?
7
Dependent
update anAspectSymbol anAspectSymbol
name ifTrue self invalidate.
8
Drawbacks of Traditional MVC

• Model has to manage all information, windows and
  views
• Model has to broadcast update to everyone, even
  if only 1 object cares.
• View often has to know about models internals to
  respond to update correctly.
• Opening the interface requires a lot of
  redundant, cumbersome, non-OO code.

9
More Drawbacks

• The model contains information germane to the
  problem domain AND the interface.
• Everyone interested in an aspect must register
  directly with the model.
• Every change in the model must be accompanied by
  a changed message.

10
Visualworks MVC

• Extends the traditional MVC paradigm.
• Splits model into ApplicationModel and
  DomainModel.
• DomainModel Entities in the Problem Domain
• ApplicationModel Intermediary between user
  interface and model
• Adapters replace the huge notify methods
• We can begin prototyping the application without
  a Domain model

11
VisualWorks
12
Making the UI
windowSpec
13
Built-in Standard Dialogs

• Dialog class
• warn (Show a message)
• confirm (Show a yes/no selection)
• chooselabelsvaluesdefault (Choose from a set
  of buttons)
• choosefromListvalueslinescancel (Choose from
  a list)
• requestinitialAnswer (Get a string input)
• requestFilename (Get a file io dialog)

14
Editing the Gui

• Open UI Painter (or find existing resource)
• Drag and Drop widgets in the Painter
• Edit properties
• Install (to create or update the class
  windowspec)
• Define (to create the data adapters and hooks)
• Edit class in System Browser to add required
  functionality
• Can test from within Painter

15
Understanding Data

• ValueModel / ValueHolder
• PluggableAdapter
• AspectAdapter
• These are usually stubbed out by using the Define
  selection after you have installed the UI.

16
Adapters

• ValueHolder For simple data managed by UI (like
  input fields on a dialog)
• Aspect Adapters hook up a model element to a UI
  element
• Look in examples directory for sample code.

17
ValueHolders

• Make one by sending the asValue message or create
  with with
• FooBar asValue.
• 5.54 asValue.
• ValueHolder with FooBar.
• Get/Set the internal value with value or value
• aValueHolder value foo.
• aValueHolder value 5.14
• Transcript show aValueHolder value.

18
Aspect Adaptor Basic Requirements

• Initialize the widget data to be an AspectAdapter
• displayEmployee SelectionInList new.
• displayEmployee listHolder ((UI.AspectAdapter
  subject employeeModel sendsUpdates true)
  forAspect names)
• In class (employeeModel) add changed names
  message to notify gui of changes.

19
Hooking up to an Event

• in your ApplicationModel initialize method
  (assume you have a model called graph and a list
  widget named nodes)
• graph Graph new.
• nodes SelectionInList new.
• nodes listHolder ( (AspectAdaptor subject
  graph) forAspect nodes).
• self nodes selectionIndexHolder onChangeSend
  changedNodeSelection to self.

20
Getting the Main Window

• Within the application model, you can get the
  main window by asking for it
• self mainWindow
• From there then you can ask the window for any
  normal service like
• self mainWindow invalidate
• self mainWindow unmap
• Close application with
• self closeRequest
• self mainWindow close

21
Getting a Widget

• To get widget directly (invalidate)
• widget self widgetAt identifier.
• widget invalidate.
• To get the widget wrapper (for enable/disable,
  hide, etc)
• wrapper self wrapperAt identifier.
• wrapper disable.

22
Trapping Window Events

• Register by overriding the postBuildWith
  aBuilder
• Look in GUI Developers Guide for events
• For instance trap a close event
• postBuildWith aBuilder
• self mainWindow when close send closing to
  self

23
Making a Custom View

• Put a view holder on the canvas.
• Give an accessor that returns an instance of your
  custom view
• Write a view class that subclasses UI.View.
• Tell the view what its model is (model)
• Write a displayOn aGraphicsContext method that
  contains your drawing code

24
Controllers

• Need if we make a custom view
• Subclass Controller or ControllerWithMenu
• If you want keyboard input, need to
• create a keyboardProcessor instance var
• override desiresFocus to return true
• provide accessor/mutator for keyboardProcessor
• Trap mouse and keypress events
• Hook up to the view
• return the class name for defaultControllerClass
  (in view class)

25
Typical Controller Events

• keyPressedEvent anEvent
• anEvent keyValue.
• redButtonPressedEvent anEvent
• self sensor cursorPointFor anEvent
• Mouse colors
• red left (primary)
• yellow right (secondary)
• blue alt-left (tertiary)