Cash Drawer Counter in Seaside

This is a simple application I wrote, just to learn more about Seaside, and specifically to figure out onChange: actions, which makes use of Scriptaculous to create an AJAXy web application without much effort.

You can see the application at work at:

agoric.seasidehosting.st/cashdrawer



WAComponent subclass: #MoneyCounter
instanceVariableNames: 'count myTotal mySlots'
classVariableNames: ''
poolDictionaries: ''
category: 'MoneyChanger'

total
| total |
  total := 0.0.
  mySlots do: [ :each | total := total + each total ].
^ total

total: amount
  "ignore"

initialize

  super initialize.
  myTotal := 0.
  count := 0.
  mySlots := OrderedCollection new.
  mySlots
  add: (MoneySlot new createNew: 'pennies' withValue: 0.01);
  add: (MoneySlot new createNew: 'nickles' withValue: 0.05);
  add: (MoneySlot new createNew: 'dimes' withValue: 0.1);
  add: (MoneySlot new createNew: 'quarters' withValue: 0.25);
  add: (MoneySlot new createNew: 'dollars' withValue: 1.0);
  add: (MoneySlot new createNew: 'fives' withValue: 5.0);
  add: (MoneySlot new createNew: 'tens' withValue: 10.0);
  add: (MoneySlot new createNew: 'twenties' withValue: 20.0);
  add: (MoneySlot new createNew: 'fifties' withValue: 50.0);
  add: (MoneySlot new createNew: 'hundreds' withValue: 100.0);
  add: (MoneySlot new createNew: 'penny rolls' withValue: 0.50);
  add: (MoneySlot new createNew: 'nickle rolls' withValue: 2.0);
  add: (MoneySlot new createNew: 'dime rolls' withValue: 5.0);
  add: (MoneySlot new createNew: 'quarter rolls' withValue: 10.0)

updateRoot: anHtmlRoot

  super updateRoot: anHtmlRoot.
  anHtmlRoot title: 'MoneyCounter'.

updateTotal

  myTotal := self total

renderContentOn: html

  html div class: 'main'; with: [
  html heading: 'Money Counter'.
  self renderFormOn: html]

renderFormOn: html

html form id: 'f'; with: [
html table:
[mySlots do: [:each | self renderRow: html forSlot: each].
html tableRow:
[ html tableData:  [ html text: 'TOTAL'; space];
tableData:  [ html span id: 'total' ; with: self total ] ] ] ]

renderRow: html for: type

  html tableRow:
  [ html tableData:  [ html text: type asString];
    tableData:
    [ html textInput
        id: type asString;
        on: type asSymbol of: self;
        onChange:
          (html updater id: 'total';
                triggerFormElement: type asString;
                callback: [ :r  |  self renderTotalOn: r])
   ] ]

renderRow: html forSlot: aSlot
  html tableRow:
    [ html
      tableData: [ html text: aSlot name ];
      tableData:
        [ html textInput
          id: aSlot name asString;
          on: #quantity
          of: aSlot;
          onChange:
            (html updater
                  id: 'total';
                  triggerFormElement: aSlot name asString;
                  callback: [ :r | self renderTotalOn: r ]) ] ]

renderTotalOn: html
  html render: self total

style

^ 'span {font-weight: bold}
  body {margin-left: 5%}
  div.main {background-color: rgb(215,250,179);padding-left: 1em;width: 250px;border: 1px solid rgb(161,196,127)}
  input {width: 60px; text-align: center}
  table {margin-left: 1em; text-align: right}'

"-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "

MoneyCounter class
instanceVariableNames: ''

canBeRoot
^true

Published by

kevin