Count UI Slides
P | N
- 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, it announces that the change to all of its Views
- 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.
- MVC using the Coad and Nicola User-Interface Library
- We'll build UI's using the Coad and Nicola library (Chapter 2)
- 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
- 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
- self addView: button in: buttonArea.
- addResetButtonOn: aCount
- | button buttonArea |
- button := self makeButton: 'reset' on: aCount for: #reset.
- buttonArea := self constraintFrame: 2/3 @ 0
- 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
- 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
- Changes to IntegerCount
- increment
- self value: value + 1. "Pipe all changes through the method that calls changed:"
- decrement
- Using the UI
- CountViewContainer new openOn: (IntegerCount new).
- CountViewContainer new openOn: (DateCount new).
Previous | Next
Last modified at 7/17/97; 2:58:55 PM
Other Links of Interest
College of Computing | EduTech Institute | GVU Center
Mark Guzdial | Papers | CS 2390 Spring '97 Home Page | STABLE | MMC-CaMILE
Slide Master
