Vend UI Slides
P | N
- Designing UI for the Vending Machine
- Goals:
- Identify the problem domain objects that a person needs to interact with.
- Design and program human interaction classes to provide interaction.
- How do we do it?
- 1 First, consider giving each class (object/model) its own window
- 1 Next, consider what are the most relevant classes
- -Consider what the user expects
- -Consider what the user needs
- Choices: Item and CashDevice
- An Item View
- A CashDevice View
- Recall MVC
- o A Model broadcasts any changes in its information.
- o A View gets user input via a Controller and displays information from the Model.
- o A Controller determines how information can be manipulated.
- CashDeviceView
- ModelValueViewContainer subclass: #CashDeviceViewContainer
- instanceVariableNames: ''
- classVariableNames: ''
- poolDictionaries: ''
- category: 'Vending Views'
- CashDeviceViewContainer methodsFor: 'view creation'
- buildViewOn: aMoneyDevice
- self addValueViewOn: aMoneyDevice.
- self addIncrementButtonOn: aMoneyDevice.
- self addReturnButtonOn: aMoneyDevice.
- More CashDeviceView
- CashDeviceViewContainer methodsFor: 'view layout'
- addIncrementButtonOn: aCashDevice
- | button buttonArea |
- button := self
- makeButton: 'Add Cash'
- on: aCashDevice
- for: #addCash.
- buttonArea := self constraintFrame: 2 /3 @ 0
- corner: 1 @ (1 / 2).
- self addView: button in: buttonArea
- addReturnButtonOn: aCashDevice
- | button buttonArea |
- button := self
- makeButton: 'Return'
- on: aCashDevice
- for: #return.
- buttonArea := self constraintFrame: 2 /3 @ (1 / 2)
- corner: 1 @ 1.
- self addView: button in: buttonArea
- addValueViewOn: aMoneyDevice
- | itemView itemArea |
- itemView := self makeDisplayBoxOn: aMoneyDevice
- for: #amountCollected.
- itemArea := self constraintFrame: 0 @ 1 / 3
- corner: 2 / 3 @ 2 / 3.
- self addView: itemView in: itemArea
- Finishing up CashDeviceView
- CashDeviceViewContainer methodsFor: 'window opening'
- windowLabel
- windowSize
- CashDeviceViewContainer new openOn: CashDevice new
- ItemViewContainer
- ItemViewContainer methodsFor: 'view creation'
- "NOTE CAREFULLY WHAT THE ITEMVIEWCONTAINER OPENS ON"
- buildViewOn: aDispensingHolder
- self addNameViewOn: aDispensingHolder.
- self addPriceViewOn: aDispensingHolder.
- self addSelectButtonOn: aDispensingHolder.
- ItemViewContainer Pieces
- ItemViewContainer methodsFor: 'view layout'
- addNameViewOn: aDispensingHolder
- | itemView itemArea |
- itemView := self makeDisplayBoxOn: aDispensingHolder
- for: #dispensableItemName.
- itemArea := self constraintFrame: 0 @ 0
- corner: 2 / 3 @ (1 / 2).
- self addView: itemView in: itemArea
- addPriceViewOn: aDispensingHolder
- | itemView itemArea |
- itemView := self makeDisplayBoxOn: aDispensingHolder
- for: #dispensableItemPrice.
- itemArea := self constraintFrame: 0 @ (1 / 2)
- corner: 2 / 3 @ 1.
- self addView: itemView in: itemArea
- addSelectButtonOn: aDispensingHolder
- | button buttonArea |
- button := self
- makeButton: 'Select'
- on: aDispensingHolder
- for: #vendTheDispensableItem.
- buttonArea := self constraintFrame: 2 / 3 @ (1 / 2) corner: 1 @ 1.
- self addView: button in: buttonArea
- Finishing up ItemViewContainer
- ItemViewContainer methodsFor: 'window opening'
- windowLabel
- windowSize
- Maing Necessary Changes in DispensingHolder
- DispensingHolder methodsFor: 'view access'
- dispensableHolderSize
- ^self isEmpty
- ifTrue: [0]
- ifFalse: [items size]
- dispensableItemName
- ^self isEmpty
- ifTrue: ['Empty']
- ifFalse: [items first name]
- dispensableItemPrice
- ^self isEmpty
- ifTrue: [0]
- ifFalse: [items first price]
- vendTheDispensableItem
- self isEmpty ifTrue: [^false].
- items first vend ifFalse: [^false].
- self changed: #dispensableItemName.
- self changed: #dispensableItemPrice.
- self changed: #dispensableHolderSize
Previous | Next
Last modified at 7/17/97; 4:41:38 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
