Smalltalk/Squeak Video Tutorial

A few things before you start: Most Smalltalk/Squeak tutorials refer to the buttons as red, yellow, and blue. I found this confusing, so I’m going to use a more traditional scheme, but I though it should be mentioned what this means.

“click” => left click on a PC, click on a Mac, or red click in the Smalltalk scheme. “right click” => right click on a PC, command+click on a Mac, or blue click in the Smalltalk Scheme. (If using a 2 button mouse on a PC, it’s alt+left click) “middle click” => middle click on a PC, option+click on a Mac, or yellow click in the Smalltalk Scheme. (If using a 2 button mouse on a PC, it’s right click)

Once you’ve opened Squeak, and gotten over the shock of how different it looks from other programming environments, the first thing you should do is save your project under a new name, so that you can get back to the default start later if you need to. You can do this by clicking on an empty part of the world. This opens up the World Menu. Click ‘Save as’ and enter a name for you project (i.e. Video Tutorial) then click ‘Accept’.

Now we can close all of those windows that are in the world (by clicking on the ‘X’ in to top left of each window) and if the squeak mascot annoys you, click and drag him by the nose over to the ‘Squeak’ tab. Hover there for a second until the tab opens, the drop it in the trash can. (If you did trash squeak, you will need to click on the ‘Squeak’ tab again to close it.)

Now we can open the tools we need to start programming in Squeak. Start by clicking on the ‘Tools’ tab to open it, then click and drag it toward the middle so that you can see both columns of tools. The tools we will need are the workspace and the browser. Find them in the ‘Tools’ tab and drag them into the world (you will need to open the tab again, because it hides automatically). Before we go on, the workspace window’s default size is way too big for what we need it to do, so you can shrink it to about half its size. Now why don’t we save our project again so that we don’t have to clean up the world again if we have a problem; just click on the world and select ‘Save’.

The System Browser (or just Browser) is where we will do most of the actual coding, but before we can start that I need to explain some things about the browser. The fours across the top from left to right contain: class categories, classes within a category, message categories, and messages within a category. The big main pane is there the actual code goes.

Now we can start coding. Click on one of the class groups. This generates a shell code for a subclass of the class Object. First we want to name our subclass. The name goes in place of ‘NameOfSubclass’ in the first line. The first letter of any class name should be capitalized. Let’s change the name to ‘Video’. We should also change the category of our class to be something relevant so that we can find it again later; lets put out Video class in the ‘Video’ category. At this point our class code should look like this:

Object subclass: #Video instanceVariableNames: '' classVariableNames: '' poolDictionaries: '' category: 'Video'

Having the code right is great, but we need to save it for it to do any good. To do this, left click on the coding pane, and select ‘accept’ (or, on the keyboard, press alt+s for PC or option+s for Mac). We can save anything in the browser this way, whether it is a class, or a message.

The next thing we need to do is decided what information is important to store about our video. For simplicity, let’s stick to the title, the release date, and the production company. These should be set as instance variables, so in the code we just saved, add our instance variables between the '' on the instanceVariableNames: line (the first character should always be a lowercase letter, you can have pretty much whatever you want after that):

instanceVariableName: 'title date prodComp'

Now we need to write messages (or methods or functions in other languages like Java or C++) for our Video class, so each instance of Video can ‘talk’ to the rest of the world. To do this, click on ‘-- all --’ in the third list panel (the message category panel) to generate the message template in the code panel. Highlight the text and enter the following:

title "Returns the title of the Video"

^ title.

When you save this message, you will probably be prompted to enter you initials. Do it, and click accept, and it will save the message. You shouldn’t be prompted for them again, but if you are, just enter them again.

With the message saved, “title” should have been added to the forth pane. Now create the ‘date’ message by changing ‘title’ to ‘date’, and modifying the comment appropriately. Do the same for ‘prodComp’.

Next copy this message into to code pane and save it (make sure you delete any code that is already there):

title: newTitle "sets the title: title of the Video to newTitle"

title := newTitle.

This allows you to set or change the value of the instance variable title. Now create similar methods for each of the other instance variables.

Now if you switch to the workspace, you can enter this:

video _ Video new.

Now click at the end of the line to put the curser there, right click, and select ‘do it’ (or press alt+d for PC or option+d for Mac). It will seem like it did nothing, but it actually created an instance if Video called video. You can see this by entering:

video inspect.

on next line of the workspace and “doing-it” also. You can look around at this instance holds, but you’ll find that it isn’t too terribly interesting, because we haven’t told it to store any data yet. Now, we could go through and send each message to set the values, but there is a better way. What we can do is create an initialize message, that will set all of the values for the instance variable when the instance is created (in the case of the Video class, this would remove the need for the messages that set the variable to values, but it’s good practice).

To do this, return to the system browser, select a message, and replace the text with this:

initialize "initiate each instance by setting each variable to a value"

title _ FillInTheBlank request: 'What is the title of this Video?'. date _ FillInTheBlank request: 'What was the release date of this Video?'. prodComp _ FillInTheBlank request: 'What was the production company for this Video?'.

Save this message, then return to the workspace and recreate the instance of Video. You will be prompted to enter the title, release date, and production company in turn (Note: we didn’t have to set the value of each instance variable by prompting the user, we could have set the value directly, I chose to show you the FillInTheBlank object so you would get experience with it as well). One the instance is created, close the window that opened when you inspected it the first time, and inspect it again in the workspace. Now the video is far more interesting.

Other tutorials can be found at www.squeak.org.