4. HCI the O-O Way: Count's User Interface

• Creating UI in an O-O Way
• We want our domain objects to remain models
• What we don't want:
• Modifying the models to integrate UI calls (ala Visual Basic)
• Making UI into a functional model: We want to stay true to objects
• Allowing the UI to have un-object-like access to the models
• What we do want:
• Change the model, can leave the UI alone.
• Change the UI, can leave the model alone.
• Can have multiple interfaces on the same model
• On the same Patient info, different UI for doctor, nurse, billing office, visitors desk, etc.
• Model-View-Controller Approach
• How do you connect domain objects to interfaces in an object-oriented way?
• Solution: Have a different kind of object for each role in the UI
• Handling domain (model), handling display (view), handling user input (controller)
• Very common even today.
• A Model broadcasts any changes in its information.
• (This is what most objects that you design are.)
• A View gets user input via a Controller and displays information from the Model.
• A Controller determines how information can be manipulated.
• (relatively low-level -- we avoid it mostly)
• How does the View find out that it must update?
• A View gets created on a specific model
• When the Model changes (self changed: parameter>), it announces that the change to all of its Views
• The view gets told to update:
• If the View cares about the aspect that has changed, it asks for the data.
• Picture of MVC Update Process
• 
• Important Observations:
• At no time does the Model directly send info to the View.
• It only responds to a request
• In fact, the Model has no idea what Views care about which of its aspects at all!
• It only has a list of dependents that get alerted when there is a change.
• Example of changed/update mechanism
• Model subclass: #Reactor
• instanceVariableNames: 'name '
• classVariableNames: ''
• poolDictionaries: ''
• category: 'change example'
• name: aName
• name := aName
• change
• Transcript show: name, ' is changing' ; cr.
• self changed: name
• update: something
• Transcript show: 'Uh-oh!! ',name,' has to change because of ',something; cr.
• self change.
• Reactor class demo method
• demo
• | one two three four five |
• one := Reactor new name: 'One'.
• two := Reactor new name: 'Two'.
• three := Reactor new name: 'Three'.
• four := Reactor new name: 'Four'.
• five := Reactor new name: 'Five'.
• one addDependent: two.
• one addDependent: three.
• two addDependent: four.
• two addDependent: five.
• one change.
• Transcript after demo
• One is changing
• Uh-oh! Two has to change because of One
• Two is changing
• Uh-oh! Four has to change because of Two
• Four is changing
• Uh-oh! Five has to change because of Two
• Five is changing
• Uh-oh! Three has to change because of One
• Three is changing
• MVC using the Coad and Nicola User-Interface Library
• We'll build UI's using the Coad and Nicola library (Chapter 2)
• File in Squeak-UI.st
• To create a user interface using ModelValueViewContainer from Coad & Nicola:
• Make sure that your Model class is a subclass of Model.
• -Be sure to send the changed: message to update text views.
• Make your View class a subclass of ModelValueViewContainer
• -Create a buildView: method to create the View.
• -Use makeDisplayBoxOn:for: to create display box views.
• -Use makeButton:on:for: to create buttons.
• -Use constraintFrame:corner: to layout the views.
• -Use addView:in: to compose the views.
• Defining a User-Interface for Count
• 
• (Recall 3. Design and The Count)
• Coding the User Interface: The Window
• Make your View class a subclass of ModelValueViewContainer
• ModelValueViewContainer subclass: #CountViewContainer
• instanceVariableNames: ''
• classVariableNames: ''
• poolDictionaries: ''
• category: 'Count Views'
• Coding the User Interface: Collect the Subcomponents
• Create a buildView: method to create the View.
• buildViewOn: aCount
• self addDisplayBoxOn: aCount.
• self addIncrementButtonOn: aCount.
• self addDecrementButtonOn: aCount.
• self addResetButtonOn: aCount.
• Coding the User Interface: Make the Decrement button
• Use makeButton:on:for: to create buttons.
• Use constraintFrame:corner: to layout the views.
• Use addView:in: to compose the views.
• addDecrementButtonOn: aCount
• | button buttonArea |
• button := self makeButton: 'decrement' on: aCount for: #decrement.
• buttonArea := self constraintFrame: 1/3 @ 0 corner: 2/3 @ (1/3).
• self addView: button in: buttonArea.
• Coding the User Interface: Other Buttons
• Use makeButton:on:for: to create buttons.
• addIncrementButtonOn: aCount
• | button buttonArea |
• button := self makeButton: 'increment'
• on: aCount for: #increment.
• buttonArea := self constraintFrame: 0 @ 0
• corner: 1/3 @ (1/3).
• self addView: button in: buttonArea.
• addResetButtonOn: aCount
• | button buttonArea |
• button := self makeButton: 'reset' on: aCount for: #reset.
• buttonArea := self constraintFrame: 2/3 @ 0
• corner: 1 @ (1/3).
• self addView: button in: buttonArea.
• Coding the User Interface: Display Area
• addDisplayBoxOn: aCount
• | itemView itemArea |
• itemView := self makeDisplayBoxOn: aCount for: #value.
• itemArea := self constraintFrame: 1/3 @ 1/2
• corner: 2/3 @ 1.
• self addView: itemView in: itemArea.
• Changes to Count
• value: aValue
• value := aValue.
• self changed: #value. "#value is a token for the aspect of the Count that a View may care about"
• reset
• self value: resetValue.
• Changes to IntegerCount
• increment
• self value: value + 1. "Pipe all changes through the method that calls changed:"
• decrement
• self value: value 1 1
• Using the UI
• CountViewContainer new openOn: (IntegerCount new).
• CountViewContainer new openOn: (DateCount new).