Smalltalk/Squeak Basics - System Browser

(Material provided by Rodney Walker at Georgia Tech)

In part 2 of our intro to Smalltalk and Squeak, we'll be looking at how we use the system browser to do more work, save/edit our code, and manage our classes. Part 1 of the basics can be found by clicking here.

As with our previous work, we need to open up a system browser first. Left click on the background, hold the button down, select "open", and select "browser". A green window labeled "System Browser" should appear. The window should look like this:

Note: My browser window looks different. Just like other environments, you can change the preferences in this one as well. You can check other options by left clicking in the system window and choosing 'help', and then choosing 'preferences'. A window will pop up, and you can click on true/false to toggle the selection.

The top half contains (or will contain) all of the class information in this image of Squeak. This contains everything needed not only for Smalltalk, but also the Squeak environment itself. It is organized as shown below:

Leftmost Pane - This contains the categories under which the classes are grouped. This includes such things as kernel classes, music classes, graphic classes, etc.
Left-Center Pane - This contains the list of classes. Clicking on a category in the leftmost pane will automatically bring up this list. This can be anywhere from 2 to 30 classes long.
Right-Center Pane - This contains the different categories of methods that the classes are comprised of. It is brought up automatically when you click on a class. This can be organized into things such as "accessing", "initialization", "primitives", "private", etc.
Rightmost Pane - This contains all of the methods under a certain category. Again, these are brought up by clicking on a selection in the previous pane.

The bottom half contains all of the code and other text for the classes. We'll step through an example to show how it changes.

If we click on a class category in the leftmost pane, then on the bottom we should see code that looks like this:

Object subclass: #NameOfClass
	instanceVariableNames: 'instVarName1 instVarName2'
	classVariableNames: 'ClassVarName1 ClassVarName2'
	poolDictionaries: ''
	category: 'Music-Scores'

This is what the various pieces are here. Make a note that at this stage, everything shown will be default values. When we start making our own classes, this is where we will always want to begin:

Line 1 - "Object" tells what the parent class of our class is. Object is the parent of all classes, so this is the default. However, it can be changed to another class if we want to. (ie - if we have a "MixedTerrier" class, then "Dog" would be its parent).
"#NameOfClass" is just what it says - you need to change this to whatever name you want for your class.
Line 2 - These are the names of any instance variables we want. Putting them here makes them global, so they can be used by any method in our class. If we don't have any, then we just make this blank.
Line 3 - Same as line 2 above, but for our class methods. The difference between class and instance will be explained later.
Line 4 - For our purposes, we will ignore this for the time being.
Line 5 - This sets the category that our class is stored under. This is from the list in the leftmost pane.

Clicking on a class in the left-center pane should bring up something similar in the bottom pane:

AlignmentMorph subclass: #ScorePlayerMorph
	instanceVariableNames: 'scorePlayer trackInstNames 
instrumentSelector scrollSlider pianoRoll playOrPause scoreTitle '
	classVariableNames: 'LastMIDIPort '
	poolDictionaries: ''
	category: 'Music-Scores'

As you can see, it follows the same format as the previous section. The difference here is that the values shown are specifically for the class and are not defaults. In this case, take note that the parent class is AlignmentMorph and not Object. Also notice that the number of instance and class variables is not bounded - it can be any number greater than 0.

In most cases, you won't be making any major changes to classes which are already in the image. However, if you do, this would be where you start. This is where you would start/continue working on a class you have done.

Clicking on a class method category in the right-center pane should bring up something looking like this:

message selector and argument names
	"comment stating purpose of message"

	| temporary variable names |
	statements

Again as with our first example, these are default values. They mean the following:

Line 1 - This is where the method name and any parameters passed will be at. If this were a real method, these would be in a boldface type. In general, the format for this is "method: value". Not all methods will have an associated value with them.
Line 2 - This shows where we would put a comment at describing the method and what is done in it. Although not necessary, this is good programming style and allows you an easy way to remember this. Remember that comments are put inside double quotes.
Line 3 - This is where any temporary variables used in this function will be declared. As with C and C++, but unlike Java, these must all be declared at the top of the method before any code.
These are different from the class and instance variables that were discussed earlier. These variables exist only within the method in which they are declared. Remember that our earlier variables were essentially global and could be used in any method.
Line 4 - This is where our code goes for the method.

Our last example comes from clicking on a particular method. In this case, I'm chosing a different method which incorporates all of the elements shown above:

onScorePlayer: aScorePlayer title: scoreName 

	"This method takes in a scorePlayer and the file name"
        "It then sets up the controls in the scorePlayerMorph"

	| divider col volRow rateRow scrollRow rateRow1 volRow1 
scrollRow1 pianoRow rightCol leftCol r |

	scorePlayer _ aScorePlayer.
	scoreTitle _ scoreName.

This time, the various lines have values in them:

The top line shows a method which takes in 2 variables. As you can see, this is done using the format onScorePlayer: value1 title: value2. The method would be written as onScorePlayer:title:. The number of commas not only tells you how many variables this method takes, but also where they go.
So, the two variables which are passed to this method are "aScorePlayer" and "scoreName".
Next line is a comment. This could've been written as it is, or as one long comment which stretched over two lines. The "" works in a similar fashion to the /* and */ in C and C++.
Next we have a list of temporary variables.
Lastly, we see the first couple of lines of code for the method.

For more help, you can go on to step 3 of our little tutorial on Squeak basics. This has to deal with menu basics. You can also find out about the menus we can use with the browser by going to the browser menus page.