Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
StackMorph Tutorial
Last updated at 11:04 pm UTC on 22 May 2007
This tutorial is for Squeak version 3.6 (90% of this tutorial, is based on a tutorial by Ted Kaehler, which was from the original demo by Scott Wallace. Scott wrote the code in class StackMorph.)

The Stack and Card model used by HyperCard is flexible and compelling. A user sees one Card at a time. It is a composite of Card-specific data and objects, over a background. The background gives the Card its "look". There can be multiple backgrounds in a Stack. Cards of different backgrounds can be intermixed and appear in any order.

In Squeak's version of a Stack, we have some additional features:

Get the Stack Flap

You may already have the "Stack Tools" flap at the bottom of your screen. If not, click in the empty space to the right to get a World menu. Choose "flaps...". If the menu has check boxes, turn on "Stack Tools". If not, choose "show shared flaps". Then get the menu again and turn on the "Stack Tools".

Create a Stack

Open the "Stack Tools" flap. On the far left is a blank stack. Drag it out onto the screen. This new stack has one card, which has nothing in it. One thing I found confusing was how to resize the stack. To resize the stack, use the card's yellow halo not stack's yellow halo. I don't know why the stack's yellow halo doesn't work for this.

The Stack Controls

Across the top of the Stack are a set of control buttons. Here is what they do:

- Delete this Card.
<<Turn to the first Card of the Stack.
< Turn to the previous Card.
Bring up a menu of commands. It is called the Stack Menu.
§ Show designation button. (Will be discused below)
> Turn to the next Card.
>> Turn to the last Card.
+ Add a new card (it will have the current background).
Diamond Show fewer controls. Press it again to see all of the controls again

The entire set of controls can also be hidden. Choose "hide page controls" from the Stack Menu.

From the Stack Tools flap, pull out the Stack Help object and place it on your World. Read through the Stack Help for an overview of how to use the stack and then return to this tutorial.

Let's Build a Personal Database

Add a Field and make it part of the background:
Let's make a field for a person's name. In the Stack Tools flap, there is an object labelled "Simple Text". Drag it out to your stack. Change the name of this object to "Name Field", by bringing up the object's halo and selecting the words 'Simple Text' under the object. Type in 'Name Field' and then hit carriage return. Use the yellow resize halo to enlarge the field to the right; make it long enough that it can hold 25 or 30 characters. (The simple text field defaults to growing downwards, so it is necessary to widen the field with the yellow halo). Type in the name of a person.

Add a Label beside the Field:
Drag another "Simple Text" object out of the Stack Tools Flap. Use the yellow halo to enlarge the Label. Type the word "Name" in this simple text field.

Now we talk about "designations". Select the Stack menu ( • ) and then select "explain designations". A rectangular object will appear with a green, orange and red background. Move the object to an empty spot in the world. The descriptions on this object, summarize the designation information that you read in the Stack Help file. On the Stack menu, select "show designations". The 2 fields we placed on the stack now have a red border around them. This indicates they are only on this card.

Next we are going to place these 2 fields onto the background. The "Name Field" is going to have unique data for each card. It is therefore going to be designated with an orange border when we are through. The Label field is going to say the exact same thing (Name) on each card, so it is going to be designated with a green border.

Select the "Name Field" and then select it's red menu halo. Select the "stacks and cards..." option and then select "background field, individual values". You have just added the 'name field' to the background. Now select "show designations" from the Stack menu, and you will see an orange border around the field, indicating it's data will be unique on each card.

Select the Label field called "Name" and select it's red menu halo. From the menu, select "stacks and cards" and then select "Background field, shared value". Now select "show designations" from the Stack menu, and you will see a green border around the field, indicating it's data will be the same for each card.

Now create 2 more "orange, data items on background" fields. The first should be a simple text object for the person's phone number and the second should be a scrolling text object to jot down notes about the person. Go through the above process to place these fields on the background as an "orange, data item"s.

Now make 2 Label fields for Phone Number and Notes. Make these "green, shared items on Background" because they will be the same on each card.

Make some New Cards: Press the "+" button to make a new card. This card has "blankText" in each field until you replace it. Put some data into the fields of this card. When entering data into the Note field, you have to accept the entry, (Alt S) before you leave the card or else the data will be lost. Use ">" to move between the Cards.

You can drag a jpg file from Explorer and drop it onto the stack. You can call up a set of halos on the image and resize it to fit on the stack. The image is saved on the card, not the background. Select the § to see the red border designation around the image, indicating it is unique to the card. Now you have the ability to put a picture of each person on his or her card.

Change the Background Color:
Get the Halo for the Card. Press the red menu icon. Choose "fill style" and "gradient fill". Experiment to get the colors you want.

More to come...

Older stuff...

Initially these will be notes on what I have learned from experimenting with creating a stack using StackMorph.
Question: How does one make a textMorph a data item on the background (orange designation) using direct manipulation?

Answer: I found my answer in the stack help file on the Stack Tools flap (which I didn't know existed before). If the image does not have a Stack Tools flap, open the World menu and select flaps. Another menu appears which lists all the flaps available, with selection buttons next to each; select the Stack Tools flap and the flap magically appears. Then you can drag out the Stack Help morph.

You first have to place a morph which supports text on the background by using the stack/cards menu and select "place onto background".

Then to have the data morph be seen on every card, with each card having its own value, use the stack/cards menu and select "start holding separate data for each instance". Now you can add different text data on each card.

If you use a Scrolling Text morph, the border will turn red when you enter text; be sure to type Cmd-s to save the text in the Scrolling Text morph before you go to another card or else your text will be erased. –Dave Raftery