1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
|
<!--startcut ==============================================-->
<!-- *** BEGIN HTML header *** -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML><HEAD>
<title>Making Smalltalk: Spreading the OO Fun LG #59</title>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#0000AF"
ALINK="#FF0000">
<!-- *** END HTML header *** -->
<CENTER>
<A HREF="http://www.linuxgazette.com/">
<H1><IMG ALT="LINUX GAZETTE" SRC="../gx/lglogo.jpg"
WIDTH="600" HEIGHT="124" border="0"></H1></A>
<!-- *** BEGIN navbar *** -->
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="nielsen.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue59/steffler.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../faq/index.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="lg_backpage59.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
<!-- *** END navbar *** -->
<P>
</CENTER>
<!--endcut ============================================================-->
<H4 ALIGN="center">
"Linux Gazette...<I>making Linux just a little more fun!</I>"
</H4>
<P> <HR> <P>
<!--===================================================================-->
<!-- END header -->
<table COLS=2 WIDTH="100%" NOSAVE >
<tr NOSAVE>
<td NOSAVE>
<center>
<h1>
<img SRC="misc/steffler/makingSmalltalk.jpg" height=53 width=417></h1></center>
<center>
<h3>
Spreading the OO Fun (Series Introduction)</h3></center>
<center>
<p><br>By <a href="mailto:jagwar@magma.ca">Jason Steffler</a></center>
</td>
<td WIDTH="200" NOSAVE>
<center><img SRC="misc/steffler/penguinInBalloon.gif" height=230 width=200></center>
</td>
</tr>
</table>
<h2>
<a NAME="abstract"></a>Abstract</h2>
<a href="http://www.magma.ca/~jagwar/makingSmalltalkForwardingPage.html"><img SRC="misc/steffler/toc.jpg" ALT="Series Table of Contents" align=RIGHT></a>
<br> When I wrote the first Making Smalltalk with the
Penguin <a href="http://www.linuxgazette.com/issue51/steffler.html">article
back in March of 2000</a> <a href="../issue0-tourOfSmalltalk/tourOfSmalltalk.html">[LL]</a>,
my target audience was experienced programmers who didn't have much exposure
to <a href="#articleGlossary">OO</a> programming or to Smalltalk.
The article's intent was to give an overview of my favourite programming
language on my favourite operating system. Since then, I've had a
fair amount of email asking introductory type questions about Smalltalk
and OO programming. So I thought I'd try my hand at a small series.
It's been a while coming as after the first article I relocated from KS->CT
and had a baby (obviously using the corporate 'I' here! :-)
<br> The target audience for this series are people new
to OO or new to programming altogether. The intent is to not only
introduce OO programming, but to also spread the fun of Smalltalking.
Why do this format/effort when there's lots of good <a href="http://www.squeak.org/#tutorials">tutorials
out there</a>? Two reasons really: 1) Tutorials are great,
but can be static and dated pretty quickly. 2) An ongoing series
tends to be more engaging and digestible.
<br> To help address the second reason above, my intent
is to keep the articles concise so they can be digested in under an hour<sup><a href="#footnotes">1</a></sup>.
Hopefully, as newbies follow along, they can refer back to the original
article and make more sense of it. I plan on having a touch of advanced
stuff once in a while to add flavour and as before, the articles are going
to be written for read-along or code-along people.
<br> Something new I'm going to try is to make the ongoing
series viewable in a contiguous fashion and downloadable in one chunk for
people who want to browse the series locally. To do this, click on
TOC grapic to right. The articles are going to have 2 sets of links:
one set for www links, another set for local links, indicated as: <a href="#articleGlossary">[LL]</a>
<br> If you like what you're reading, <a href="mailto:jagwar@magma.ca">drop
me a line</a> letting me know, and I'll keep putting precious time into
it.
<br>
<h2>
<a NAME="whySmalltalk"></a>Why Smalltalk?</h2>
Before we can get into OO stuff, I feel the need to
set the context of the articles. Unfortunately, this will take up
the bulk of this first article, but it's an important thing to do.
We'll finish with a little bit of OO stuff at the end, and get into it
more in the next article.
<br> I believe Smalltalk is <b><u>the best</u></b> environment
to learn OO programming in because:
<ul>
<li>
Smalltalk has a very active and very helpful community; when you post a
question to the Smalltalk newsgroups you very often get an answer, unlike
many other newsgroups</li>
<li>
is very easy to learn... one of it's original design intententions was
to be a learning environment for children</li>
<li>
is a pure OO environment and encourages OO programming (as opposed to encouraging
procedural/Object mixed programming)</li>
<li>
cutting your teeth in Smalltalk makes you a better OO programmer in any
other language, because of the previous bullet</li>
<li>
is a portable environment: write once, run anywhere, so people can
learn on whatever OS they're running (as opposed to just the M$ variety)</li>
<li>
can look at and manipulate objects in real time; I haven't seen this ability
in any other environment</li>
<li>
Smalltalk is written in Smalltalk. You can view how the language
is put together to learn the language, and you can change anything that
you don't like about it.</li>
<li>
has garbage collection, no manual memory management, no explicit pointers</li>
<li>
is a literate language; by this I mean the syntax is very simple and is
geared towards programmer readability.</li>
<li>
there's lots of Cool Things that you can do in it that I haven't seen anywhere
else (will have some examples along the way)</li>
<li>
...and best of all: <b><u>it's fun</u></b>.</li>
</ul>
In particular, I'm going to use <a href="http://www.squeak.org/">Squeak</a>
as the playing vehicle. You'll notice this is a different flavour
of Smalltalk than I used in my first article. I've never used Squeak
before, so this'll be a learning experience for me too. The reasons
for this are:
<ul>
<li>
It's a completely opensource project</li>
<li>
It has some Really Cool features that I haven't seen in other flavours
of Smalltalk</li>
<li>
It has a comparitively small footprint and it's very easy to install</li>
<li>
It has a strong <a href="http://minnow.cc.gatech.edu/squeak/1">Swiki site</a>
(a <a href="#articleGlossary">Wiki</a> site hosted in Squeak, hence <b>S</b>queak
<b>Wiki</b>)</li>
</ul>
<h2>
<a NAME="quoteOfTheDay"></a>Quote of the day</h2>
In essence, Smalltalk is a programming language focused on human beings
rather than the computer.
<br> -Alan Knight
<h2>
<a NAME="installationStuff"></a>Installation stuff</h2>
<b><font color="#CC0000"> <i>Note: before you fire
up Squeak, I need to warn you to not be put off by the sparten GUI. </i></font><font color="#330000">There's
actually two types of GUIs in Squeak: MVC & Morphic, both of
which have skins to implement specific look-n-feels. For at least
the beginning of the series, I plan on sticking to Morphic without skins,
as it's the newer GUI and I want to keep things simple.</font></b>
<br> To install Squeak, you basically need to download
and unzip 4 files. RPMs are available for people who prefer them.
For instructions on downloading and installing Squeak, see these <a href="http://www-sor.inria.fr/~piumarta/squeak/">installation
instructions</a>, or these <a href="http://minnow.cc.gatech.edu/squeak.388">installation
instructions.</a><i> (Note: I'm using v2.7 of Squeak, which isn't
the latest version, but for the purposes of these articles, the latest-n-greatest
version is not required unless otherwise noted)</i>
<h2>
<a NAME="firstLooks"></a>First Looks</h2>
<i> Note: do not save anything until we get to
that point below. The initial orientation and setup of squeak is
a little painful, but by the time we're done here it'll be much more friendly.</i>
<br> Now that you have Squeak installed, let's fire it
up. Go to a command prompt, cd to the directory where squeak is,
and type <b>squeak Squeak-2.7.image</b>. You'll see a window open,
with 10 windows within it. Feel free to read the <b>Welcome To...</b>
and <b>Getting Started...</b> windows. If you want to skip this and
read them later, that's fine too. You'll notice that the look-n-feel
is "weird", don't worry about this. There are reasons for this that
I'll get to in a future article. You can also play around with the
various <b>Play With Me</b>s (there's some neat things there). Feel
free to mess around to your heart's content, try resizing things, moving
them ,etc. Don't worry about breaking anything as we haven't saved
anything yet. When you click on <b>Play With Me 3, 6, 7 or 8</b>,
you need to click on the window to get into it. To get out of it,
<b>left
click</b> on the window background, and select <b>previous project</b>.
<br> When you're done playing, and you're back in the
main view you started out in, <b>middle click</b> on the squeak background
somewhere, and select <b>quit</b>, and <b>no</b>, as we don't want to save
any changes. Now restart squeak, and move the <b>Welcome To...</b>
window somewhere. Now <b>middle click</b> on the squeak background
somwhere, and select <b>save and quit.</b> Now, restart sqeuak again...
notice that the window is in the place where you left it. In fact,
every time you save in sqeuak <b><u>the state of the IDE is saved exactly
as it was!</u></b> <sup><a href="#footnotes">2</a></sup> All the window
placements, all the code - everything is exactly where you left it.
This is great for getting back up to speed quickly on what you were doing.
<br> For the read-along folks, here's what the <b>Welcome
To...</b> & two of the <b>Play With Me</b> windows look like:
<br><img SRC="misc/steffler/picWelcomeScreen.png" height=356 width=390>
<br><img SRC="misc/steffler/picPlayWithMe2.png" height=351 width=568>
<br><img SRC="misc/steffler/picPlayWithMe5.png" height=490 width=558>
<p> Now, let's do a little customization before we move
on to examples. Open a workspace (<b>middle click</b> on the squeak
background, select <b>open...>workspace.</b>) You'll notice that
it's the same type of window as the <b>Welcome To...</b> and <b>Getting
Started...</b> windows. Enter in the following code snippits:
<p><b> Preferences setPreference: #noviceMode toValue:
true.</b>
<br><b> Preferences setPreference: #inboardScrollbars
toValue: true.</b>
<br><b> Preferences setPreference: #useGlobalFlaps toValue:
true.</b>
<p><b> </b>Then highlight both lines and execute the
code (<b>middle click>do it</b>). This is known as 'doing it' in
Smalltalk. Congratulations, you just ran your first Smalltalk code.
Don't worry about the symantics right now, just be aware that we set some
preferences. Now, remember when I mentioned that we'd be using the
morphic GUI type for these articles? To do this, <b>middle click</b>
on the squeak background, select <b>open...><a href="#articleGlossary">morphic
project</a></b>. You'll see a small window appear called <b>Unnamed1</b>.
Let's name this project something, as you've already probably experienced,
clicking on the title of the window will bring up a rename prompt.
Type in <b>Making Smalltalk. </b>If you want, you can resize the window
to see the whole title.
<br> Now, let's enter the project, do this by clicking
on the project to give it focus, then clicking on it again. You'll
notice there are four tabs arranged around the screen (<b>Menus,
Squeak, Tools, and Supplies</b>). If you mouse over the tab, a pop
up menu will appear with neat stuff on it. If you mouse over the
<b>Menu</b>
tab you'll see the <b>open...</b> menu in the top left corner, select <b>workspace</b>
to open up a workspace. You'll notice the look-n-feel is a little
different now, as we're using the Morphic type of GUI; this project will
be the basis of these articles.
<br><img SRC="misc/steffler/picMorphicWorkspace.png" height=245 width=406>
<p>One thing you'll notice from the menus, is that there's no saving option.
Since we want to save everything we've done, let's get that menu.
To do this, <b>right click</b> on the project background, you should see
a series of different coloured dots around the screen. We're not
going to get into their purpose just yet. Now <b>left click</b> on
the <b>red dot </b>in the top left hand corner of the screen, you'll see
a playfield menu, select <b>keep this menu up</b>. Now the menu is
sticky, and you can move it around. Let's move it out of the way
of the flaps to the bottow left hand corner of the screen. Finally,
let's save what we've done, on that menu you just made sticky, click on
<b>save</b>.
Your window should look something like:
<br><img SRC="misc/steffler/picSqueakStartingPoint.png" height=514 width=608>
<br>
<h2>
<a NAME="gettingToObjects"></a>Getting to objects</h2>
As I mentioned, the bulk of this article is going to
be setting the stage for future articles. Now we can finally start
addressing the topic at hand. There are many different definitions
of what an object is. One way of thinking about it is that an <a href="#articleGlossary">object</a>
is anything you can think of that is a noun. A window, a menu, an
array, a GUI, a string, an integer, a person, a tree, etc. This is
a very simple view of what an object is, and we'll refine the definition
over time.
<br> In Smalltalk, <b><u>everything is an object</u></b><sup><a href="#footnotes">3</a></sup>.
Unlike other languages where small building blocks like integers or strings
aren't objects, everything is an object. If you have procedural programming
experience, this is a good mantra to repeat for about 6 months.
<br> Let's start with the venerable Hello World example,
but with a minor update (sheesh, we're not back in the '60s here).
Instead of printing a string to the stdout (to the command line), let's
open a window with the string in it. In the workspace enter and 'do':
<p><b> (Workspace new contents: 'Hello World') openLabel:
'Hello World Workspace'</b>
<p> You'll see:
<br><img SRC="misc/steffler/picHelloWorldWorkspace.png" height=97 width=300>
<p> Remember when I said everything is an object?
Well, we asked a new Workspace object to make its contents<b> Hello World,
</b>then
asked it to open itself with the label <b>'Hello World Workspace'.</b>
Notice there's no 'main' method, no compiling and linking step, no switching
between a text editor and a compiler. The simplicity of being able
to just type Smalltalk code and run it is very refreshing.
<br><b> </b>...but this old example is pretty worn out.
Let's do something a little more up to date<sup><a href="#footnotes">4</a></sup>.
Let's make a line; in the workspace enter and do:
<p><b> World addMorph:</b>
<br><b> (PolygonMorph</b>
<br><b> vertices: {50@50.
200@200}</b>
<br><b> color: Color red</b>
<br><b> borderWidth: 20</b>
<br><b> borderColor: Color
red)</b>
<p> You'll see:
<br><img SRC="misc/steffler/picRedLine.png" height=327 width=720>
<p> Here, we asked the project (World) we're in (projects
are objects too) to add a morph that is a red line from point 50x50 to
point 200x200. Now, let's play with this object a little bit, if
you right click on the line object, you'll get the various multi-coloured
points again (these are called halos). If you mouse over the line
object, you'll see pop-up help describing what the halos do (<b>Rote, Change
size, debug, Duplicate, Move, etc)</b>. <b>Left click</b> on the
yellow halo, and resize the line a few times. Try the <b>rotate,
duplicate, move</b> buttons to play some more. Finally <b>left click</b>
on the 'X' <b>button</b> when you want to get rid of the line object(s).
<br> To make this first article digestible, I'm going
to stop off here. Before I go though, I'm going to introduce the
'Sweet Squeak' section...
<h2>
<a NAME="aSweetSqueak"></a>A Sweet Squeak</h2>
This section won't explore/explain code or example, but merely present
a neat thing to try out<sup><a href="#footnotes">5</a></sup>. This
time, lets view a shockwave file. If you have an internet connection
up, try entering this code and do it: <i>(note, might take a while
over 28.8; I did this at a friend's place with a 128K ISDN and it was pretty
snappy)</i>
<p><b> (FlashMorphReader on: (HTTPSocket</b>
<br><b> httpGet: 'http://www.audi.co.uk/flash/intro1.swf'</b>
<br><b> accept:'application/x-shockwave-flash'))</b>
<br><b> processFile startPlaying openInWorld.</b>
<br>
<h2>
<a NAME="lookingForward"></a>Looking forward</h2>
The next article will discuss Objects again as well as classes, messages
and encapsulation.
<br>Also, if any Squeakers out there know of something neat that can be
easily done, let me know and I'll add it if there's room.
<h2>
<a NAME="questionsAndAnswers"></a>Questions and Answers</h2>
As opposed to including already answered questions via email, I'm going
to start this section with a clean slate to address questions (as I have
time) that this series raises. If you want a faster response, try
posting your question to the comp.lang.smalltalk newsgroup, or the <a href="http://minnow.cc.gatech.edu/squeak/1">Swiki</a>.
<h2>
<a NAME="articleGlossary"></a>Article Glossary</h2>
This is a glossary of terms that I've used for the first time in this series,
or a term that I want to refine. If you don't see a term defined
here, try the <a href="http://www.magma.ca/~jagwar/makingSmalltalkForwardingPage.html">ongoing
glossary</a> <a href="../ongoingSeriesGlossary.html">[LL]</a>
<p><b>IDE</b>
<br> Integrated Development Environment.
An environment that programmers use to develop code in that they can program
and debug in.
<br><b>[LL]</b>
<br> relative Local Link, use
this link when browsing these articles locally
<br><b>Object</b>
<br><b> </b>(def 1-simple)
An object is anything you can think of that is a noun. A window,
a menu, an array, a GUI, a string, an integer, a person, a tree, etc.
<br><b>OO</b>
<br> Object Oriented Briefly,
this is a popular style/methodology of programming that these articles
are going to introduce.
<br><b>Project</b>
<br><b> </b>A specific view of the
code. You can have multiple simultaneous views of the code.
This is very handy if you're doing two or three projects at once, and don't
want to lose track of where you're are in them.
<br><b>Wiki site</b>
<br> A series of web sites where
there is no designated editor (for the most part, the odd page may have
a password). If you see a way to improve the site, you can do so yourself!
If you don't understand something, just edit the web page and type in your
question!
<h2>
<a NAME="footnotes"></a>Footnotes</h2>
[1] Keeping the articles concise will actually be the biggest challange.
There's such a wealth of information that it's hard to convey just what
is needed. To that end, I plan on making some simplifications
as I go along and gradually refine them to reflect the technicalities.
<br>[2] This is a feature common to all Smalltalk flavours that I
know of. It's one of the many thinks I like about Smalltalk.
<br>[3] This is the same assertion that I made in the first article,
and I had a pile of people email me about how this isn't technically accurate.
I thought from the context of the article that it would be apparent that
this was a simplified generalization, oh well. This time I'll be
explicit: this assertion is technically not accurate: not everything
in Smalltalk is an object, but the vast majority of things are. For
the beginner, it's a helpful simplifying view to have. I plan on
refining this view later on.
<br>[4] This snippet is from a <a href="http://minnow.cc.gatech.edu/squeak/1418">Swiki
entry by Dan Ingalls</a>
<br>[5] This snippet is also from the <a href="http://minnow.cc.gatech.edu/squeak/1651">Swiki</a>
<!-- *** BEGIN copyright *** -->
<P> <hr> <!-- P -->
<H5 ALIGN=center>
Copyright © 2000, Jason Steffler.
Copying license <A HREF="../copying.html">http://www.linuxgazette.com/copying.html</A><BR>
Published in Issue 59 of <i>Linux Gazette</i>, November 2000</H5>
<!-- *** END copyright *** -->
<!--startcut ==========================================================-->
<HR><P>
<CENTER>
<!-- *** BEGIN navbar *** -->
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="nielsen.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue59/steffler.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../faq/index.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="lg_backpage59.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
<!-- *** END navbar *** -->
</CENTER>
</BODY></HTML>
<!--endcut ============================================================-->
|
