6.4 A brief introduction to Inspectors ¶

To get the construction halo for an interior morph, just Middle-Click multiple times to “drill down” through the submorph hierarchy.

Figure 6.6: Middle-Click for construction handles

Figure 6.7: Middle-Click again to descend into submorphs

There is an orange handle on the right, just under the green Duplicate handle. Left-Click this to get the Debug menu. Use this menu to get an Inspector for the rect.

Observe Figure 6.8, on the left we have a pane for self, all inst vars, and the individual instance variables. Clicking to select “all inst vars” and the values pane on the right shows that the owner of the rect is the ellipse and rect currently has no submorphs.

The lower pane is a Smalltalk code editor, basically a workspace, where self is bound to the object we are inspecting.

Inspectors work for every object by the way, not just morphs.

Figure 6.8: Add instance specific behavior

To add a behavior to all instances of a class, we create an instance method. Here we are going to create a behavior for “just this one BoxedMorph instance”.

In addition to instance variables, a morph can have any number of named properties which can be different for each morph.

We add two properties here:

self setProperty: #handlesMouseDown: toValue: true.
self setProperty: #mouseButton1Up:localPosition:
   toValue: [:ignoredEvent :ignoredPosition| self color: Color random]

These properties are special to the user interface. You can find methods with these names in the Morph class to see what they do.

After selecting the text and Do-it, each time you Left-Click on the rect it changes color!

Note that you can no longer move the ellipse by mouse-down on the rect, because the rect now takes the mouse event. You have to mouse-down on the ellipse. More on this below.

One quick note on Move versus Pick up. Move moves a submorph “within” its parent. Pick up grabs a morph “out” of its parent.

Figure 6.9: Move submorph within its parent

Figure 6.10: Pick a submorph out of its parent

Before we go on, let’s use an inspector on the ellipse to change values of a couple of its instance variables.

Figure 6.11: Inspect instance variables of the ellipse

Observe Figure 6.12 and Example 6.2. In the lower pane of the inspector, code can be executed in the context of the inspected object. self refers to the instance. Here the pane contains code to set the borderWidth and the borderColor.

self borderWidth: 10.
self borderColor: Color blue

Figure 6.12: Use Inspector to set border color and border width

In the typical case one wants to refine or change behaviors for all instances of a class.