PictButton
Volume Number: 9
Issue Number: 1
Column Tag: Visual Programming
A Pictorial Button Class in Prograph 
A dynamic and fluid development environment
By Terry Kilshaw, Kelowna, British Columbia
In an article in the now justly famous Smalltalk edition of Byte Magazine for
August 1981, Larry Tessler refers to the notion of an Integrated Environment, a
concept he ascribes to Alan Kay. He says “In an Integrated Environment, a person can
interweave activities without losing accumulated information and without giving up
capabilities”. Smalltalk led the way into forms of programming which dissolved the
barriers between process and product. HyperCard, with its powerful emphasis on the
direct manipulation of visual elements, introduced a new sort of programming which
could not have existed but for the Xerox work. Apple built on that work, and Bill
Atkinson's special talents and vision took the “oriented” out of “object-oriented” and
let users get their hands on their programs for the first time.
The Prograph programming environment presents another approach to the goal of
an Integrated Environment. In this article I will attempt, through the somewhat static
and linear medium of print with illustrations, to convey some aspects of this dynamic
and fluid development environment.
About Prograph
Prograph is certainly worthy of note for a number of reasons: as a clean
implementation of a single inheritance object-oriented language, because textual code
with all of its syntactic problems is eliminated in favour of the use of data-flow
diagrams, because its list processing capabilities give it much of the power of Lisp and
Prolog, because its System Classes and their associated editors provide the sort of ease
of interface construction that HyperCard and SuperCard users have come to expect, and
for almost complete access to the Mac Toolbox. But what is really significant about this
development environment is the synergy between these elements and the dissolution of
the usual boundary between “editing mode” and “execution mode” normally found in
most other programming environments. It is the main goal of this article to try to
convey a little of what it is like to program in Prograph.
The Prograph System Classes
The Prograph programming environment provides a set of System Classes which
define the most commonly used elements of the Macintosh User Interface. Here are the
System Classes as they appear in Prograph. The lines which connect the class icons
show inheritance.
We will make a simple button class which acts just like a normal Macintosh
button but which displays a Macintosh Picture. A Picture is a Macintosh data type
which is simple to make. Whenever you cut or copy part of an image in a paint
program it goes into the Macintosh clipboard as a PICT resource. Inits such as Capture
also allow you to copy any area of the screen directly into the clipboard as a PICT.
From the clipboard you can paste a PICT into the Scrapbook for safekeeping, or paste it
directly into a Prograph Pict item in the Prograph Window Editor. A PICT can be of any
size and, if you have color capability, your Pictures can also be in color.
To help readers who don't have Prograph to get a feel for this sort of
programming I'll explain some of the actual process, what is clicked, where clicks
occur, and so on. But for the sake of brevity some of the steps will be just briefly
described.
We start by loading the System Classes file and saving it under the name PButton
Class.pgs. The .pgs suffix is for later use by the Prograph compiler. It stands for
Prograph Source File. Of course you don't need to start from the System Classes if you
want to create a new class, but we will be inheriting behavior from a System Class and
will be using the Application, Window and Menu classes in the development process.
Creating a Class
Classes are defined and manipulated in the Classes window. We create our new
class as a sub-class of Pict (see above). To make it easier to follow, all of the classes
which are not direct predecessors of the new class can be hidden. With the icon of class
Pict selected, hold down the option key and click in space. A new class icon appears
with an inheritance arc connecting it to the icon of class Pict and you can type in its
name, PButton.
Inherited Attributes
The new PButton class inherits both the data structures (or attributes), and the
behaviors (or methods) of its ancestor classes. What inheritance really means is that a
PButton is a sort of Pict which is a sort of Graphic, which is a sort of Window Item.
Double clicking on the left side of a class icon opens a window onto its attributes.
If you do this for the new PButton you will see some small triangular icons, in a single
column, which look like this.
This attribute icon has a downward pointing arrow in it to show that it has been
inherited, from class Pict above, and it has an extra outline around it, which means
that it is a system attribute. Prograph uses many subtle visual indicators like this.
A system attribute is one that can't be deleted and whose value, when set, can
create certain side-effects. For example, location is a point that determines the
top-left corner position of the PButton within its window. When your program is
running, changing this value will cause the PButton to change position within its
window.
Although there are various intrinsic behaviors associated with System Classes,
you will not find any method icons in the Methods window of this class or in any of its
ancestors. All of the System Class behaviors are accomplished behind the scenes and
are made available to the programmer by the act of getting and setting the value of a
System Class attribute. This is similar to the way properties work in HyperCard.
Scroll the attributes window until the attribute called click method is in view and
then double click on it. A window will open to allow you to change the attribute's value.
Type in “PButton/mouseDown” and press the return key.
What we have just done is to set the default value of the attribute click method for
every instance which will be produced. When the mouse is clicked in a PButton,
Prograph will call the method whose name is found in the click method attribute, that
is, method mouseDown of class PButton. Later we will create this method.
Creating a new Attribute
Scroll the attributes window to the bottom and click in space beneath the last
attribute. A plain triangular attribute icon will appear. Visually this indicates an
attribute that is neither inherited nor a system attribute. Name it mouseUp method.
Double click on this attribute and give it the default value of the empty string.
When we create a new PButton we will set the value of its mouseUp method
attribute to the name of the method to be called whenever the mouse is released over
the PButton. This will be probably be different for every PButton.
Making a Method
Double clicking on the right side of a class icon opens a window onto its methods.
The PButton class has no methods, so we will create one which will be used later as the
method called when the mouse is released over our PButton.
Clicking once in space creates a method icon which we will call do PB1. Later we
will name the PButton that we create PB1. There is no programmatic reason for this
name, only mnemonic value. You may have a dozen PButtons and keeping straight which
one does what can be a problem.
Double clicking on the method's icon opens a window showing the first case of the
method do PB1. A Prograph Method consists of one or more cases. Each case appears in
its own window and is its own self-contained data-flow diagram. Case 1 looks like this.
The long thin rectangle near the top of the window is the input bar operation. The
long thin rectangle at the bottom of the window is the output bar operation. Every case
has an input bar and an output bar. Nothing need be attached to either of them if the
method has no inputs or outputs, as is true in this case.
Creating a Method
Clicking once in space in the case window will create a rectangular simple
operation icon with an active text editor on it. Typing in SysBeep and pressing the
return key will cause the name SysBeep to be looked up in the internal list of Prograph
primitive names and the list of Macintosh method names. Prograph provides more than
180 primitives which deal with such things as list and string manipulation, file
access, comparison and so on. More than 1000 Macintosh toolbox routines are
available as Mac Methods. SysBeep is the name of a toolbox routine familiar to most
Mac programmers. When Prograph finds the SysBeep reference it knows to annotate
the operation to look like a Mac method call. This is indicated by the extra lines along