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 at 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