Appendix A - The Visual Inspector

Appendix A - The Visual Inspector
What is the Visual Inspector?
The Visual Inspector™ is a utility provided by Instantiations, Inc., and it comes with full source when you buy GF/ST. It is a learning tool, a productivity tool, and a better inspector, and we believe it will be a valuable addition to your Smalltalk environment. It provides a graphical presentation of any objects in Smalltalk, showing the relationships between them and allowing you to modify them directly.
Standard Smalltalk inspectors have three main disadvantages:
Because you can only inspect one object in one inspector window, you must open many windows at once, or you must open and close many windows before you locate the object you are after. You often need to be able to tell if the object you are inspecting in one place is, in fact, exactly the same object you are holding onto in another inspector. The way most people deal with this problem is by assigning a global variable to hold onto one object in one inspector:
Test := self.
and then going to the other inspector and evaluating:
self == Test
to see if they are the same object. Similarly, you may want to place one object into the instance variable of another as you are inspecting. With the standard Smalltalk inspectors, there is often no way to perform such a feat without resorting to use of globals.
The Visual Inspector cures all of these problems, and in fact, makes them incredibly easy to do, without sacrificing the things you like in a standard inspector. We expect you will still have a use for the standard inspectors, so we have made them easy to get to from the Visual Inspector.
When you purchase GF/ST, you get the Visual Inspector with full source code. It is installed by default when you install GF/ST. A separate non-source version of the Visual Inspector is available as a freeware Smalltalk tool on some platforms.
Visually Inspecting Objects
You can start the Visual Inspector from the GF/ST launcher. Alternatively, you can send the message psiVisualInspect to any object. Consult the README file for specific information about hooking the Visual Inspector into base image “inspect” menus.
Here is what the Visual Inspector looks like initially when you evaluate:
Transcript psiVisualInspect.
We’re going to use the Visual Smalltalk implementation of the Transcript for our explanation. You should try this exercise with the Transcript on your platform; the differences are enlightening.
In Visual Smalltalk, the Transcript is an instance of TranscriptWindow. The default Visual Inspector display of an object shows a chiseled box with text displaying the class of the object.
You can move objects on the screen by holding down the left mouse button while the cursor is inside of the object, and dragging the object to where you want it. You can select multiple objects on the screen by rubber-banding around them. When multiple objects are selected, you can move them as a group by moving any one of them.
Select the box by clicking inside it. It will show a red highlight around its edge, and some handles will appear on it. The handles perform the actions shown below:
When you click on the Show non-nil handle, the object display changes to show all non-nil instance variables:
Notice that the Hide all handle now shows up, too. Only the views instance variable of the Transcript is non-nil. If you want to see the others, click on the Show all handle to expand the list. The Show none handle brings it back to the original display. The Visual Inspector always shows the instance variables in sorted order. The little Inspect handle on the right of the instance variable name will open another object in the same Visual Inspector window and indicate the relationship between the objects:
In this case, the kind of object you have added is an CwMenuBar; i.e., the Transcript holds onto an instance of CwMenuBar in its menuBar instance variable. If you expand the menubar to show its instance variables and then inspect the menus instance variable, you will see:
OrderedCollections do not have named instance variables, so when you select the Show non-nil handle on it, you will see the indexes in the collection that holds onto non-nil objects. If you, in turn, inspect it, you will eventually see the following:
Now, you can instantly tell that the CwMenu’s owner is the Transcript. Expanding the display further (and using the
Display Collapsed pop-up menu), you can see the basic relationship between a Transcript, its MenuBar, and any Menus. In this case, the Transcript holds onto a menubar, an instance of CwMenuBar. The MenuBar’s owner is the Transcript. The MenuBar holds onto a collection of menus, instances of CwMenu. The CwMenu’s owner is the Transcript as well.
To see the same kind information in a standard inspector, you would be looking at this:
and you would have to evaluate expressions like:
Test := self.
in the TopPane inspector, and:
self parent == Test
in the TextPane inspector to determine if, in fact, they are the same object.
Now, this is not to say that the standard inspectors in Smalltalk are not what you want sometimes - they display a lot of information in a compact form. However, they provide no information on how objects are connected to one another, and you can only inspect one object in one window.
Specific Inspectors for Specific Objects
You will see as you use the Visual Inspector that there are different displays for the different kinds of Smalltalk objects. In the base image, the default inspector for all objects is the Inspector. OrderedCollections use an OrderedCollectionInspector, and Dictionaries use a DictionaryInspector. The Visual Inspector uses a different visual display and specific menu for these kinds of objects, too.
When you inspect a variable byte object of some kind (like a String or Symbol), you will find additional menu items in the pop-up menu for that object (see “Object-Specific Menu Options“). These options let you display the object in character format, or in binary, octal, hexadecimal, and decimal radix format. You can also specify whether the display is based on 1, 2, or 4 bytes.
Changing Object State
A common operation in an object inspector is to change one of the object’s instance variables (i.e., change its state). You can still reach the standard inspector from the Visual Inspector (see “Open Menu
“). However, when you already have several objects in the display, it is very simple to make an instance variable of one object hold onto another object. To reassign an instance variable, just hold down the left mouse button on the Inspect inst var handle on the right side of a field, and drag over to another object.
The instance variable connecting line will snap to objects as you drag over them, and the display will reflect the new assignment when you release the mouse button.
Visual Inspector Menu
There is a VisualInspector pull-down menu that is the same as the pop-up menu you will see when you click the right mouse button outside of any object in the inspector:
Scale - A submenu displaying a set of predefined scales is displayed, ranging from 25% to 200%.
Zoom In - Increase magnification by 10%.
Zoom Out - Decrease magnification by 10%.
Add Object... - A prompter will appear. Type in a Smalltalk expression to be evaluated, and the resulting object will be placed in the Visual Inspector.
Delete Selections - Delete all selected objects from the display. Select multiple objects by rubber-banding completely around them.
Update - Update the display in the Visual Inspector.
Set Font... - A standard dialog will appear, allowing you to choose the font used in the Visual Inspector.
Set Selection Color... - A standard dialog will appear, allowing you to choose the color to indicate the selected object in the Visual Inspector. The default color is red.
Print - Print the display. What-you-see-is-what-you-get (WYSIWYG) printing is disabled for the free version of the Visual Inspector, but it is available to owners of GF/ST.
Paths - The submenu allows you to change all paths showing object connectivity to use straight lines with and without arrowheads, or orthogonal lines with and without arrowheads.
Object-Specific Menu Options
When you hold your cursor over the top of an object in the display and pop-up the menu using the right mouse button, you will see the following menu:
Note that the pop-up menu will operate on the specific object your cursor was over when you popped up the menu, even if it is not the selected object (indicated with a red border, by default).
The Delete option is the same as pressing the red “x” handle in the upper left corner of the object. The submenus provide access to different display modes for objects and let you open other inspectors.
Display Menu
The Display menu lets you modify the default way an object displays in the Visual Inspector. By default, the class of the object is shown, and the full set of inspecting abilities are enabled, such as being able to show instance variables. You can also collapse the object to a tiny box, or display it as any arbitrary string in a box. Alternatively, you can keep the full range of inspecting options available, but change the title on the box.
Collapsed - Display in Collapsed mode. The object will show up as a small square box and cannot be expanded to show instance variables. Connecting objects will still be connected to the Collapsed display version.
As String - Display the “printString” result for the object. The resulting display cannot be expanded to show instance variables. Connecting objects will still be connected to the As String display version.
Full - Display in the Full mode, with a title of your choice (the class name is the default) and with access to the instance variables via handles or the pop-up menu.
The default Full, Collapsed, and As String displays.
Title - When using the “Full” display mode, the Title submenu lets you modify the title at the top of the object display. You will still have access to the object’s instance variables.
Open Menu
Visual Inspector - Open a new Visual Inspector on the object. This option would be the equivalent of sending the message psiVisualInspect to the object.
Standard Inspector - Open a standard inspector on the object. This option would be the equivalent of sending the message inspect to the object.
Basic Inspector - Open a standard inspector on the object. This option would be the equivalent of sending the message basicInspect to the object.
Class Browser - Open a class browser on the object. This option would be the equivalent of sending the message browse to the object.
Remove Field Menu
The Remove Field menu contents shows the instance or indexed instance variables which are currently showing. If no instance variables are showing for the object, the menu option will be disabled. When you select a field, the instance variable is deleted from the list. Choosing a field from the submenu is the same as clicking the red “x” at the left edge of the list.
Show Fields Menu
None - Show no fields.
Non-Nil - Only show fields that are not nil.
Connected - Show only the fields that are connected to other objects in the display.
All - Show all fields.
Specific - Show a submenu with all fields not currently being displayed. Selecting an item from the submenu will add it to the current list.
Visual Inspector Menu
When you use the pop-up menu on a specific object, this menu is the same as the pull-down Visual Inspector menu.