6. Designing the VendingMachine UI

• 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
• ^'Cash Device'
• windowSize
• ^250 @ 50 "pixels"
• CashDeviceViewContainer new openOn: CashDevice new
• 
• ItemViewContainer
• [Macro error: Can't call the script because the name "iamgeRef" hasn't been defined.]
• 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
• ^'Items'
• windowSize
• ^200 @ 66 "pixels"
• 
• 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