Chapter 2
A first application

In this chapter, we will develop a simple game: Lights Out.1 Along the way we will demonstrate most of the tools that Pharo programmers use to construct and debug their programs, and show how programs are exchanged with other developers. We will see the browser, the object inspector, the debugger and the Monticello package browser. Development in Smalltalk is efficient: you will find that you spend far more time actually writing code and far less managing the development process. This is partly because the Smalltalk language is very simple, and partly because the tools that make up the programming environment are very well integrated with the language.

2.1 The Lights Out game


PIC

Figure 2.1: The Lights Out game board. The user has just clicked the mouse as shown by the cursor.


To show you how to use Pharo’s programming tools, we will build a simple game called Lights Out. The game board is shown in Figure 2.1; it consists of a rectangular array of light yellow cells. When you click on one of the cells with the mouse, the four surrounding cells turn blue. Click again, and they toggle back to light yellow. The object of the game is to turn blue as many cells as possible.

The Lights Out game shown in Figure 2.1 is made up of two kinds of objects: the game board itself, and 100 individual cell objects. The Pharo code to implement the game will contain two classes: one for the game and one for the cells. We will now show you how to define these classes using the Pharo programming tools.

2.2 Creating a new Package

We have already seen the browser in Chapter 1, where we learned how to navigate to classes and methods, and saw how to define new methods. Now we will see how to create packages, categories and classes.

PIC Open a browser and action-click in the package pane. Select create package .2


PIC

Figure 2.2: Adding a package.
PIC

Figure 2.3: The class template.


Type the name of the new package (we will use PBE-LightsOut) in the dialog box and click accept (or just press the return key); the new package is created, and positioned alphabetically in the list of packages.

2.3 Defining the class LOCell

As yet there are of course no classes in the new package. However, the main editing pane displays a template to make it easy to create a new class (see Figure 2.3).

This template shows us a Smalltalk expression that sends a message to a class called Object, asking it to create a subclass called NameOfSubClass. The new class has no variables, and should belong to the category PBE-LightsOut.

On Categories and Packages

Historically, Smalltalk only knows about categories, not packages. You may well ask, what is the difference? A category is simply a collection of related classes in a Smalltalk image. A package is a collection of related classes and extension methods that may be versioned using the Monticello versioning tool. By convention, package names and category names are the same. For most purposes we do not care about the difference, but we will be careful to use the correct terminology in this book since there are points where the difference is crucial. We will learn more when we start working with Monticello.

Creating a new class

We simply modify the template to create the class that we really want.

PIC Modify the class creation template as follows:

The result should look like class 2.1.

Class 2.1: Defining the class LOCell
 
SimpleSwitchMorph subclass: #LOCell 
   instanceVariableNames: mouseAction 
   classVariableNames:  
   poolDictionaries:  
   category: PBE-LightsOut  

This new definition consists of a Smalltalk expression that sends a message to the existing class SimpleSwitchMorph, asking it to create a subclass called LOCell. (Actually, since LOCell does not exist yet, we passed as an argument the symbol #LOCell which stands for the name of the class to create.) We also tell it that instances of the new class should have a mouseAction instance variable, which we will use to define what action the cell should take if the mouse should click over it.

At this point you still have not created anything. Note that the border of the class template pane has changed to red (Figure 2.4). This means that there are unsaved changes. To actually send this message, you must accept it.


PIC

Figure 2.4: The class-creation Template.


PIC Accept the new class definition.

Either action-click and select accept , or use the shortcut CMD–s (for “save”). The message will be sent to SimpleSwitchMorph, which will cause the new class to be compiled.

Once the class definition is accepted, the class will be created and appear in the classes pane of the browser (Figure 2.5). The editing pane now shows the class definition, and a small pane below it will remind you to write a few words describing the purpose of the class. This is called a class comment, and it is quite important to write one that will give other programmers a high-level overview of the purpose of this class. Smalltalkers put a very high value on the readability of their code, and detailed comments in methods are unusual: the philosophy is that the code should speak for itself. (If it doesn’t, you should refactor it until it does!) A class comment need not contain a detailed description of the class, but a few words describing its overall purpose are vital if programmers who come after you are to know whether to spend time looking at this class.

PIC Type a class comment for LOCell and accept it; you can always improve it later.


PIC

Figure 2.5: The newly-created class LOCell


2.4 Adding methods to a class

Now let’s add some methods to our class.

PIC Select the protocol --all-- in the protocol pane.

You will see a template for method creation in the editing pane. Select it, and replace it by the text of method 2.2.

Method 2.2: Initializing instances of LOCell
 
1initialize 
2   super initialize. 
3   self label: . 
4   self borderWidth: 2. 
5   bounds := 0@0 corner: 16@16. 
6   offColor := Color paleYellow. 
7   onColor := Color paleBlue darker. 
8   self useSquareCorners. 
9   self turnOff  
10

Note that the characters on line 3 are two separate single quotes with nothing between them, not a double quote! denotes the empty string.

PIC Accept this method definition.

What does the above code do? We won’t go into all of the details here (that’s what the rest of the book is for!), but we will give you a quick preview. Let’s take it line by line.

Notice that the method is called initialize. The name is very significant! By convention, if a class defines a method named initialize, it will be called right after the object is created. So, when we evaluate LOCell new, the message initialize will be sent automatically to this newly created object. Initialize methods are used to set up the state of objects, typically to set their instance variables; this is exactly what we are doing here.

The first thing that this method does (line 2) is to execute the initialize method of its superclass, SimpleSwitchMorph. The idea here is that any inherited state will be properly initialized by the initialize method of the superclass. It is always a good idea to initialize inherited state by sending super initialize before doing anything else; we don’t know exactly what SimpleSwitchMorph’s initialize method will do, and we don’t care, but it’s a fair bet that it will set up some instance variables to hold reasonable default values, so we had better call it, or we risk starting in an unclean state.

The rest of the method sets up the state of this object. Sending self label: , for example, sets the label of this object to the empty string.

The expression 0@0 corner: 16@16 probably needs some explanation. 0@0 represents a Point object with x and y coordinates both set to 0. In fact, 0@0 sends the message @ to the number 0 with argument 0. The effect will be that the number 0 will ask the Point class to create a new instance with coordinates (0,0). Now we send this newly created point the message corner: 16@16, which causes it to create a Rectangle with corners 0@0 and 16@16. This newly created rectangle will be assigned to the bounds variable, inherited from the superclass.

Note that the origin of the Pharo screen is the top left, and the y coordinate increases downwards.

The rest of the method should be self-explanatory. Part of the art of writing good Smalltalk code is to pick good method names so that Smalltalk code can be read like a kind of pidgin English. You should be able to imagine the object talking to itself and saying “Self use square corners!”, “Self turn off!”.

2.5 Inspecting an object

You can test the effect of the code you have written by creating a new LOCell object and inspecting it.

PIC Open a workspace. Type the expression LOCell new and inspect it .


PIC

Figure 2.6: The inspector used to examine a LOCell object.


The left-hand pane of the inspector shows a list of instance variables; if you select one (try

bounds ), the value of the instance variable is shown in the right pane.

The bottom pane of the inspector is a mini-workspace. It’s useful because in this workspace the pseudo-variable self is bound to the object selected.

PIC Select the LOCell at the root of the inspector window. Type the text self bounds"phvr8c-x-x-85">’ denotes the empty string.

e class8t-x-x-42">5 LOCell&donew

<5">16 Select the LOCell at the root of the inspector ophvInWorlde the expression LOCell&donew r8t-deed, x-x-85">suss="ptx-85">@16, which causes it to create a 16bounds ss="phvhalo. Mrboxthe new c2.1


3 to ello3class="figure" > an>


Figure 2.6: The inspector used to examine a LOCell object.

 o3 to0lass="fositioned alphabeticaGamthe Pharo prog30 a mini-workspace. It𔁥r53">

turnOff Modify the class creation caGamthethe expressi.aro prog30li>
  • We simplyhe aass="phvr8t-x-x-85">She protocvisi npiled. object san> . . 3
    Modify the class creation caGamthethe expressiclass="caption" >Class&tor.png" alt="PIC" >
    3ting paclass="pplri8t-">of LOCell
     
    SimpleSwitchMorph LOCell #LOCell 
     >  poolDictionaries: mouseAction 
         
         
       . The e/span> PBE-LightsOutturnOffModify the class creation B;turnOff Modify the class creation
    . 011r6>Accept  var(surprise!)ine">#LOCell B;  Modify the class creation 
    is bound tlass="lstinline"class="lstithe charhrethe se   dve co-x-x-8n arnow,r53">
    
    

    turnOff  

    LOCell). This means that there are


    gamthethe expressi" alt="PIC" >
    325ng paclass="pplri8t-">of LOCell
     
    1initialize 
    2 
    Open a workspace. wn> Open a workspace. helassrc="figures/pharo.png" alt="PIC" > Open a workspace. an>”, “Se|class="listings">ાl">initialize. 
    3   super 3 tl8ass="phvr8c-x-x-85">’
    . 
    4”, “Se/span> onColor Select the LOCell at the root of the inspector new sPerSidspan class="phvr8t-x-x-85"> super 3 tl9n class="phvr8t-x-x-85"> 2. 
    5 Open a workspace. /span> onColor Open a workspace. Type the exss="phvr8t-x-x-85"> super 3 t20n>@16. 
    6 Open a workspace. /span> onColor Open a workspace. wn>/span>super 3 t21 class="phvr8t-x-x-85">paleYellow. 
    7 Open a workspace. /span> onColor Open a workspace. helassrc="figures/pharo.png" alt="PIC" >/span>super 3 t22span class="phvr8t-x-x-85">darker. 
    8  selfself<@5">selfself selfOpen a workspace. wn>4”, “ self<@">selfOpen a workspace. helassrc="figures/pharo.png" alts="phvr8c-*an class="phvr8t-x-x-42">4”, “ self<+ Type the text self 48 ”, “ super 3 t23s="phvr8t-x-x-85">useSquareCorners. 
    9 Open a workspace. /span> onColoronColorself”, “Setaburoto. Type the text self<[rc="figures/pharo.png" alt="PIC" > Open a workspace. /irc="figures/pharo.png" alt="PIC" > Open a workspace. /jrc="figures/pharo.png" alt="PIC" > Open a workspace. |class="listings"> 
      self Open a workspace. a-. Type the text self Open a workspace. ]san>super 3 t24ss="phvr8t-x-x-85">  34 "lstinpan>Pointew sPerSidspan claan cln> varsuggesand inspect it .


    3 t25rect. Initialize re">3 t26s="phvr8"> inspect it
    .


    349uble quote! Y > v unvr8tn of the pan claaalt="PIC" >

    Y >a 11; d tlass="lstinlin pan claaalt="PIC" >
    inspect it .


    36 a 3the effect of t Bue >ew sPerSidspan claan cl),hat argwo.aro prog36ouble quote!

    ew sPerSidspan claan cl17; ew span claan clis thoffers >

    LOCell&dex" rend tlass="pan claan clWespanl bject and inspecting it.

    <>ew span claan clclass="phvr8t-x-x-85">bound-explnnd tlass="lstinlinsan> Pointhrethe t-xove co wispan ne"> Soss="ago np(ate.) y8-28023do by identonedhrethe b"lstinline">fx-x->�lass=aan clclan clcbutton), y8-2pan>igned to th. ew span claan cli8c-x-x-8375reen is the before doing anything else; we don’t know exactly what before doing anything else; we don’|class="listings"> 
    Open a workspace. wn> Open a workspace. helassrc="figures/pharo.png" alt="PIC" > Open a workspace. an>”, “Se|class="lt -x-85 scop tinllifetimomaticlim-85">>atichelpdx18 npmatonedctionm ha>uis) ="dtlas varitinlin 6>Acfousn>. Thesehvr8t-x-lstinlinespan c>aticress="p="dtlas varbigsenough">at Thehem.pHow m-x-8cew s),ds latheurSlizePointew sPerSidspan claan cln> varate.) Wespan> an ce sppan>),hat argwo.f the
    Wesaticthe and uss="pvr8t-x-="dly m, corrss=od wicass=lspan c> class dere aredtop left dps="l hereo an ce spptermsinlin few classnuma>

    before doing anything else; we don’t know exactly what

    varask th,>We 8023216--i16 iaionedx18namtre varmrboxthe "l1 before doing anything else; we don’t="PIC" > Select the LOCell at the root of the inspector new sPerSidspan claan clc-85dpan an class="lstinline">Pointew sPerSidspan claan clean ss="figupan 3 t2="phvr8t-x-x-span> before doing anything else; we don’t="PIC" > an cln>i.e.,>>PointPoint

    vara/span"ptx-wn> varhelass e bottoapan> tindx18e porary"lstinlinep8c-x-x-839 class="pplri8t-">and label:Point16j7016believe>uss=ed to thn> ospppatinTheseser .


    .


    boui.e. an cln>iabelop-/spa enotes)i varits - enotesnfarsenough"awa"ean a Outlabel:Pointew span claan clean a> will 5">turnOffModify the class creation Matrix00A0;PointPointaticne">0turnOff Modify the class creation Typ.taburoto. Type than cleaakr8tpwoe message i-29003">i16haModify the class creation . Type than cl)osppiabespan. T SimpleSwonpansyntax!s th/spaSwoux-x-5expl ass="t-">dsyntax>-29003">-x-p-->top leftis bounspessage . F art-x-x-85"rtcih3PointSelect the LOCell at the root of the inspector r . Type the text self<5">selfself

    PIC Select the LOCell at the root of the inspector Typg sA-. Type the text self Open a workspace. a-. Type the text selfo3 t33r64ext of m> o31 to7ext ofOrg ciooned classnu&#e bprotoenlshe Pharo prog41dfigure"> ir ass="ls!ds8t-xly to p . &#e bpasses sializeoasswhelmsup="tl ass="elng!--l. 26s="phvent ts>irethe se d p ,nn>. < c> ir llabeub span>.


    31 3ss="phvr8tss="figure">31 8hvr8c-x-xss="figure">31 16n>31 30 class="> inspect it .



    Figure 2.6: The inspector used to examine a LOCell object.

    We simplAs="noindent" protoenl;p tinls="phvr">LOCell&lstioussr">selfbound-fix00A0;’oindent" > wi--tds veryprotoenlpan ll,ern generw "lsti 802class="phvr8t-x-x-8 is caspetuss=" wispan laspan> before doing anything else; we don’t know exactly what . re va "lstinassumss/span>ousnpan> before doing anything else; we don’t know exactly what irethe s->ers>frequectpan03">-x-p-ota="noivr8t-x-pan> bobey this-h-x-x-85">ªssbng anything else;8t-x-x-8 3E; 3E;pan claan clsan clspan c>x-51jectifypan cl the8eo ate.) Mn class= />lngs,nn>, n art-x-x-85" < c="lstinline">Pointew sPerSidspan claan cl classu&#nl the8="lstinline">PointPoint Pointew sPerSidspan claan cl"lT-51-dic"dx18-perspan> wi class="phvr8tpan clasne">">dsyntax, Wespan><03">-x-psplcow symbol>

    . Point Pointew sPerSidspan claan class="phvr8d5">o31 t class="> top left tindx1="phve f the iu&#nan cl the e as1r53">

    Point Pointtop mpss="go>irethe r8c-x-x-85">’ox-85">selfo31 t="phvr8"m -->. ize -->.
    45ing paclass="pplri8t-">of LOCell
    <"nGamthethe exe text
    Pointew sPerSidspan claspan> LOCell #LOCell 
    n> 45>  ox-85">self<"8t-x-x-85"> self                self<"8t-x-x-8an claspan> LOCellmouseAction 
     
    super 31lo3class="f8t-x-x-8a-x-85"s="phvr8d5">o31 o4ext of ms="phvr8d5">o31 o5 8c-x-x-845 Trd="pd thi-x-8r:ertcanswers>="sectdtlas< 10. One advas 031lo7"phvr8"m -->
    . ize -->.
    of LOCell
    <"nGamthethe exe text Point self Open a workspace. a-. Type the text self LOCell #LOCell 
    n> 46-x-x-85"> self<"8t-x-x-85"> self        Open a ox-85">selfself<,">self self<) Type the text           

    We simplAddtop left

    <"nGamthethe exe text Pointew sPerSidspan claan cllass="noindent" >We simpl varbject and inspecting it.

    <"nGamthethe exe text PointWe simplsan> PointPoint. <"s="href="#re">31 16n> a>PointOpen a workspace. irc="figures/pharo.png" alt="PIC" >,">selfselfself<)pan claan cl>irethe5"s="phvr8d5">o31 2="phvr8t-x-x-span> before doing anything else; we don’Matrix00A0; Pointpan clas-lock00A0;su[t="P toggleNelasbourtOfg sA-. i a-.lj ]00A0;pan that spt is ndentesp corrssp"ddoned classispan neesnumn be that d ca8t-x-x-85">o31 31="phvr8c -->. ize -->.

    <"nGamthethe exe text Point self Open a workspace. a-. Type the text LOCell #LOCell 
    ="phvr8t-x-x-85">PointOpen a workspace. irc="figures/pharo.png" alt="PIC" >ss="phvr8t-x-x-85"> 

    Pointself<1) Type the text self<[rc=pe the text selfOpen a workspace. new src="figures/pharo.png" alt="PIC" > Open a workspace. a-. Type the text Open8t-x-x-85"> 
    . <"s="href="#re">31 30 cl2.7"PIC" > uth,nwest vareal. 26dcew n(lass="an class="pplri8t-">Modify the class creation irc="figuc="fig,3="lstinline">Point osss=ed to thboarf-is nt kn ,nn> weh">
  • We simplPlue selfWe simpls (As="noindent" protoenlspan> will protoenl;( "s="href="#re">31 39r11cl2.11"PIC" > inspect it .


    31 39r11clpan ss="figure">31 40rect. Iniss="figure">31 51s="phvr8"> inspect it
    .



    Figure 2.6: The inspector used to examine a LOCell object.
    mn h val leo03">evage .lass="figure">31 41="phvr8c -->. ize -->.
    of LOCell
    <"ng src="figures/pharo.png" alt="PIC" >»pan cla="phvr8t-x-x-85">Point self LOCell #LOCell 
    ="phvr8t-x-x-lmsythe s <2191x-85">’
     
     
     onColorsuper 31l44t-x-x-85">mouseAa-x-85"s="phvr8d5">o31 45="phvr8c-x-x-851creen is the
    . <"s="href="#re">31 40recta 8"PIC" > to thcew > Point="se o31 4>o31 47="phvr8c-x-x-851 I> PointPointd/odvect"noc s differecti Abgettin wayseha bPointPointPointo31 4ect. Ini"lsti/a> o31 49ct. Ini"lsti/a> ,lass="noindent" >We simpl ll bject ad tlanceelstiable own. < cnnpanway/n arani few objphvrTo>resd or an ce closeelstiable &#nan cl. 253-->d cgulasosss=eroug classnulik footni e-pan>scrip-283x-85">mouseAss="figure">31 50f-x-x-85 i8c-x-x-852li>
  • We simplGosp botto>

    Point . ize -->. Figure 2.6: The inspector used to examine a LOCell object.. 18-28001">

    <"ng src="figures/pharo.png" alt="PIC" >»pan cla="phvr8t-x-x-85">PointonColor LOCell #LOCell 
    ="phvr8t-x-x-span>
     
    super
     31l55t-x-x-85">mouseAa-x-85"s="phvr8d5">o31 56="phvr8c-x-x-853 the state of lass="itemi>Creating a new class
  • We simplAddtop leftPoint mn ottoobjphvrstor iu&#nan d tlanceelstiablec="lstinline">Point Point Point self Open a workspace. a-. Type the text wt mn ="lstinline">PointPoint Select the LOCell at the root of the inspector toggleNelasbourtOfg sA-. Type the text self Open a workspace. a-. Type the text Pointefsslasocauses is ctde fragsage>mn b">ev"phill re va ctdtequectpant 31 58r6="phvr8"mh3inline">ses="noHeaclass="phct of t!itlepan>. 18-280 ass="figure">32000ect. InL3"> ousnctdenofnj70162ect ofe < 7> classni8c-x-x-8554the state of lass="itemi>Creating a new class

    e class8t Type than cleha varne">2 r < 5 enlumns.5">turnOffPointSelect the LOCell at the root of the inspector Typ. Type the text self”, “Setaburoto. Type the text self<[rc=pe the text self Open a workspace. /jrc="figures/pharo.png" alt="PIC" > Open a workspace. |class="listings"> 
    Select the LOCell at the root of the inspector Typg sA-. Type the text self Open a workspace. a-. Type the text self Open a workspace. ]00A0;PointPointknow s="phvr8t-ea.) elesagespan>0PointOpen a workspace. irc="figures/pharo.png" alt="PIC" >,">self)pan claan cls=ufect of t!--lspan>scrip-28002">
    elesagespan>know s supmo18-26resuln>is e="phemark>

    We simplI#na workss=c85" ecte=lorPoint  selfWe simpl varbject and insr8t-x-x-vr8t-x-x-85">LOCell&do-its> wind cause s82.1 csslas! A tpihe iu&# "s="href="#re">32003r12cl2.12"PIC" > ate fal,-itssaysei"lstinline">Point Point inspect it .


    32003r12clhvr8"> inspect it .





    Figure 2.6: The inspector used to examine a LOCell object.
    >

    o3200lass="fdebuggeri8c-x-x-8573the state of lass="itemi>Creating a new class

    We simplCdent/oppt LOCell&debugnpan claan clslass="phvr8t-x-x-85">bou-x-tnoc nbottonotifer>wind .rc= cl8c-x-x-857 class="pplri8t-">and classn;sof theinedany>onx cepthem wan>dctde beinedexecut iu&#nanper classr 2.1hlasllass d ca-x-x-8578the state of lass="itemi>Creating a new class

    We simplCdent/oppt me r">Point PointWe simpl(nse thspan clanan class="phv>We simpltop).rc= cl8c-x-x-8579 T o32005="phvrexecut"nocss="nx-82.1< is eftoccurtid;( "s="href="#re">32006r13cl2.13"PIC" > inspect it .


    32006r13cl. Iniss="figure">32009ss="phvr8tss="figure">32027ss1clhvr8"> inspect it .




    Point ev"philldctde j7016asyy8-28023d na workss=c85"< , mo016surprisonepanto closeemessce bi few debugger ,>l has pt in programc nbottodebugger<and Pointmn avod tlanceeofn clasnline">PointPoint lashs=mpper<02">PointPointm trt! By thaulere class=returns ="lstinline">Point ethe e, which nbottocaspaofn<02">Pointe ravod tlanceeofn clasnline">Pointo3200ect. In8c-x-x-8603the state of lass="itemi>Creating a new class
  • We simplCdoseet ovr8t-x-p> 
    We simplspan c>mn ottoendtofnt Point PointWe simpln>. PointWe simpl. (SeWe simplsp="phvr8t-x-x-8s="href="#re">32009ss="phss="noindent" >We simpl 108t-x-x-8PIC" > We simpl.)span>320s="phvr88c -->. ize -->.

    of LOCell
    <"nGamthethe exe text Point self Open a workspace. a-. Type the text LOCell #LOCell 
    n> 608the vr8t-x-x-85">i8t-">o-nestedf       disei"lstinline">͵">&#, which obey cls-hlass="phct of tverbf ͵">͵">&#.dxs="phvr8d5">o32025ct. In8c-x-x-8625class="pplri8t-">and LOCell&Procee r"> .lstiousncase, becausebottobug wasu&#nan d know s "dn> oofna23objphv, ra few ned23 nbottomclass=mpperfail i,/ottoeasieserspanedlo do-isce bndoseet o3202> willna

    We simplDo:e=lorPoint  selfWe simplagain.rc= cl8ntent">The inspector used to examine a LOCell object.The inspector used to examine a LOCell object.and weh">ausnptoamrboxthe eo03">-etwee23ndentinedand releaeine, ttlast is oass wan>toggledi T isceurnsroue>mn b">behavi art perw t fewitrfromanan cnline">Point͵">&#.dWe28023fixdlaisc"i-x-y bydoassridieg b"lstinline">Point3202ect. In8c -->. ize -->.

    of LOCell
    <"nGamthethe exe text PointSelect the LOCell at the root of the inspector anEvage">super 32030ass="phvr8t-x-x-c-x-85"n> 641e effect of t Finss=">wt cladonx!anss="figure">32031r77="phvr8ch3inline">ses="noHeaclass="phct of t!itlepan>33000="phvr8Savinedand ssdctdemn s>. owns tde nbottir>imag8n,r< don> mn give t d tup>mn 03">yousnimag8. W-pery8-2nees= s a way/ofngettonedsousce tde outnofnyousnPs. mn ="lsti LOCell&lstious /bject and insr8t-x-x-lmmithe s <22B3;c lor&#.dThe resultonedfilesih3 orig ar-ess hum>no hum>ownsPso33001ct. Inis="phvr8d5">o3300ss="phv xs="phvr8d5">o33003cl. Iniss="figud5">o33004="phvr8css="figud5">o33005ct. In8c-x-x-866he effect of tspan class="lstinline" new class

    We simplAs="noindent"oppt &PBE-LlasssOut/bject and insr8t-x-x-h>We simplp ckag8 varbject and insr8t-x-x-vr8t-x-x-85">LOCell&lstious /bject and insr8t-x-x-lmmithe s <22B3;c lor nbottos->yousnimag8sih3">

    We simplOplasadf clhnPsOpevr8t-x-x-85">LOCell&Toolsc lorWe simpl) to">Opevr8t-x-x-85">LOCell&filesinnx18-280han clcnd insr8t-x-x-h>We simplo thPBE-LlasssOut.stofileout. Vewifycted to thgamtcnsh worksc nbottonype the eanan class="phv>We simplimag8.rc= cl8ntent">The inspector used to examine a LOCell object.The inspector used to examine a LOCell object.o33006="phvr8css="figud5">o33007="phvr8css="figud5">o33008="phvr8css="figud5">o33009ct. In8c-x-x-867creen is the inspect it .


    33010r14="phvr8> inspect it
    .





    Figure 2.6: The inspector used to examine a LOCell object.

    We simplOplaslassMonpacew o br serrfrom t LOCell&Worlsnpan claan clslass="phvr8t-x-x-85">bouownu.">34008r15pl 15"PIC" > inspect it .


    34008r15plphvr8> inspect it
    .





    Figure 2.6: The inspector used to examine a LOCell object.

    We simplAddtop l=lorPoint 

    We simplOplasa webrbr ser>mn =>mouseAss=href="http://www.squeaksousce.com"ect of turlss="0;

    We simplW.1Point  LOCell #LOCell 
    5"> 
    5"> 
    i8t-">o-nestedf &#ae text of ofi8t-">o-nestedf LOCellmouseAction 
    5"> 
    5"> 
    5"> 
    i8t-">o-nestedf of ofi8t-">o-nestedf LOCell #LOCell 
    5"> 
     

    i8t-">o-nestedf of ofi8t-">o-nestedf super 36006r5s="phvr8t-x-x-c-x-85"n> 741i>

  • orey8-28023"tan>of LOCell LOCell #LOCell 
    5"> 
    5"> 
    i8t-">o-nestedf &#ae text of ofi8t-">o-nestedf LOCellmouseAction 
    5"> 
    5"> 
    5"> 
    i8t-">o-nestedf
    < Type than cl/span> LOCell #LOCell 
    5"> 
     
    i8t-">o-nestedf < Type than clanan class="phvr8t-x-x-85">super 36011r5s="phvr8t-x-x-c-x-85"n> 75creen is the and inspect it .


    360s2a16="phvr8> inspect it
    .





    Figure 2.6: The inspector used to examine a LOCell object.

    We simplCdent"oppt &Sav8aan clsl the eslass="phvr8t-x-x-85">bou-x-tnocmn s>s"no ofnyousnLlasss Out/gamtcno>

    We simplOplas xlorPoint