The following was posted in reply to a question on comp.lang.smalltalk; I thought I'd send it to the Squeak mailing list for those new folks who don't browse that newsgroup.
"Andre M. (Mike) Maloney" wrote:
Hi all,
I'm just starting to learn smalltalk and am using Squak (2.4c).
Welcome to Smalltalk and Squeak! You'll find a lot of things here to explore and have fun with.
I'm trying to build a simple counter and need some help. The counter will have three buttons and a display. The displayed value will start at one and the buttons will increment the displayed value by one, decrement the displayed value by one, and reset the displayed value to zero. I've found the ValueHolder, button, and PluggableButtonController classes, but how do I put the buttons and ValueHolder into a parent frame (window?, view?)?
Squeak has two different interface models: the older MVC (Model, View, Control), and the newer Morphic. The classes you found are part of MVC. You can use these to build an MVC interface, but it is a little more complicated than Morphic.
If you want to try your example using Morphic, do the following:
1) make sure you are in the Morphic interface. If your menus are white with a blue frame around them, you are. Otherwise, select "open..." then "project (morphic)" from the main display menu, then enter the project by clicking on it.
2) Open up a Browser and have a look at the SameGame class; we're going to borrow heavily from it, here.
3) Open up a Workspace and type in the following:
---- cut here ---- "this is going to be the box containing our panel" frame := AlignmentMorph new orientation: #vertical.
"create a 4-digit LED display to contain the count" display := LedMorph new digits: 4; extent: (4*10@15).
"we want our buttons arranged in a horizontal row" controls := AlignmentMorph new orientation: #horizontal.
"add a quit button" controls addMorph: (SimpleButtonMorph new target: frame; label: 'quit'; actionSelector: #delete).
"add an increment button" controls addMorph: (SimpleButtonMorph new target: display; label: 'inc'; actionSelector: #increment).
"add a decrement button" controls addMorph: (SimpleButtonMorph new target: display; label: 'dec'; actionSelector: #decrement).
"add a clear button" controls addMorph: (SimpleButtonMorph new target: display; label: 'clear'; actionSelector: #clear).
"add the controls and display to our panel" frame addMorph: controls. frame addMorph: display.
"start playing with it!" frame openInWorld
--- cut here ---
We're not quite ready to run it yet. We don't have anything to handle the increment/decrement logic. To make this easy, we'll just add it to the existing LedMorph class, which we are using for the display.
In the browser, find the LedMorph class, go to the "accessing" category, and find the "value:" method. We'll just tweak this a few times to add the new methods "increment", "decrement", and "clear".
First, select the bold method header (value: aNumber) and change it to increment. Then replace the line "value := aNumber." with "value := value + 1.". Then accept your change (hit command-s or select "accept" from the menu in the lower pane. Now do the same thing for "decrement" and "clear" (doing the right thing with value).
Now we're ready to give it a try. Select everything you typed in the Workspace and doIt (command-d or select doit from the menu). You should now have a light green panel with buttons and an LED display.
-- Tim Olson