HyperCard's User Friendly Programming

By Fred Stauder, Ecofin, Research & Consulting, Zurich, Switzerland

What is HyperCard?

Hypercard created by Bill Atkinson and friends will create a paradigm shift in the way we look at the Macintosh and information retrieval. What exactly is it? It isn’t exactly anything, it is a number of tools and concepts expertly moulded into a user friendly application generator and viewer. The closest way to think of it is, a cross between MacPaint, Guide and Smalltalk. It is best described as an object oriented authoring tool and information organiser. It is simple, fast and very powerful.

In our modern age with the information explosion it is hard to keep track of data. Information stored in books, is often easier to access than that on a computer. With a book we can go to the index which gives us a link to a particular page, for example a chapter heading. The way we use reference books is usually non-linear. The term Hypermedia was coined in the late 60’s to refer to computer supported non-linear information media with multiple paths between ideas. Hypercard is one of the most powerful forms of Hypermedia we have today. It’s applications vary from phone number databases to driving Laserdiscs.

HyperCard Objects

The main building blocks, or objects, of Hypercard are; Backgrounds, Cards, Fields and Buttons (Fig.2). A Hypercard application is known as a “Stack”. A Stack is made up of Hypercard objects. A Stack is made up of Hypercard objects and graphics (such as the book in Fig. 2). Each of these objects contains a Script. The Script language is called Hypertalk and is based on English and influenced by Pascal.

When you launch Hypercard you first go to the Home Stack and the first Card is Called the Home Card (Fig. 1). The Home Card is important, no matter where you are in any Stack you can select the “Home” menu item under the “Go” heading and it will take you to the Home Card. You navigate through Cards and Stacks using the Browse tool, this is a cursor that looks like a hand (top right corner of Fig. 1). The icon like pictures in Fig. 1 are called Buttons. Buttons take you from Card to Card or perform a multitude of tasks. For example playing digitised sounds or advancing to the next frame on a Laserdisc. To go to the Calendar you click on that Button. This is in contrast to the Finder where you double click an icon to go to an application.

Fig. 1 Home Card

Hypercard appears superficialy as a simple program because most of its structure and functionality is hidden from the user. There are 5 user levels within Hypercard. The top most level, and easiest to use, is Browsing. This allows the user to navigate through Stacks and look at information but not to add or modify it. The next two levels Typing and Painting allow the user to add or modify written and graphic information. The last two levels are Authoring and Scripting. Authoring allows use of the Field and Button tools and Power Keys (short Cuts). The Scripting level allows full use of the Hypercard programming language called Hypertalk, and the use of instant commands called “Blind Typing”. [Note that Hypercard offers a protection mechanism forstacks that allows programmers protection via a menu item. This prevents scripts from being read.]

Tools of the Trade

Hypercard has a number of tools to help in the development and customization of Stacks. There are Paint Tools (Fig. 3) that work much like MacPaint but with many more powerful features. One of these features is that you can use these tools directly from Hypertalk.

The Tools and Patterns are on “Tear Off” menu’s. You simply drag the cursor to the bottom or sides and the menu’s tear off, then they act as windows. As well as the paint features in the tools menu you can select a Button tool , and a Field tool , as well as the Browse tool. The Button tool (next to the Browse tool Fig. 3) lets you manipulate Buttons (cut, copy, paste, resize, etc.). By double clicking a button you can assign or change attributes (Fig. 4) and enter the Script Editor (Fig.5). Entering the Script editor directly is possible by double clicking the Button while holding down the shift key. The Field tool does basically the same thing except for Fields. One difference is that with Buttons you can add an Icon and link it automaticaly to another card, and with Fields you can change font attributes.

Fig. 2 Hypercard Elements

The Message box which is a long rectangular text entry window (Fig. 3) is a powerful tool. It is used to give Commands and get Functions (like an instant window). For example you can type in “go to next card” then press enter or return and the action will take place immediately. This is very useful to test script ideas. When the user sets preferences to “Blind Typing”, he can type into a hidden Message Box. This allows instant Hypertalk access directly from the keyboard at any time.

Fig. 3 Hypercard Tools

The Script Editor allows you to enter and modify Scripts. It automaticaly does the formattng for you. The window is scrollable vertically but of fixed size horizontally. Sometimes script lines can be longer than the window, this is allowable, you just won’t see the rest of the line. Or you can put in a “soft” return by typing in an option-return, which allows visual splitting of lines but still retaining the line integrity. This is displayed by an ¬ special character. You can cut, copy and paste from and to scripts using the editor but only with command keys (command-c, etc.). The reason for this is that the editor is really a dialog box. You can also search using command-F. Printing of scripts is possible from the editor or from Hypertalk itself.

Behind the Scenes

Let us begin by looking at a few basic concepts of Hypertalk. Hypertalk is built around a system that sends messages to objects. A message is basically a command or function. The Hypercard application sends messages about the current state of the Macintosh and Hypercard to objects, each object responds to messages depending on its script. Hypercard has an object message hierarchy as shown in Fig. 6. For example if the mouse is pressed, Hypercard sends out a message “mouseDown” . If the tool cursor is on a Button, a “mouseDown is sent to that Button, if there is no Button or textField under the tool the message is passed on to the Card. This message travels up the hierarchy until it reaches a level with a script begining with “on mouseDown”.

It then executes the instructions following “on mouseDown “until it reaches “on end mouseDown” at the end of the script. If there is no recipient of the message as it passes up the hierarchy it simply vanishes at the top. Messages are passed from Buttons and Fields etc. through the hierarchy up to the Hypercard application.

When Hypercard seems to be doing nothing it is passing messages down the hierarchy. For example if nothing is happening it sends a message “Idle” to the Home Stack which passes it to the current Stack in turn passes it to the Background which passes it to the Card which passes it to the Buttons and Fields.

Fig. 4 Button Info

Fig. 5 Script Editor

Normal programs are self contained, that is they have a “begin” and an “end”. Hypercard on the other hand has individual parts of a program within the objects it relates to. This has the advantage of being modular. For example, if you like the function of a button that puts a time and date stamp in a selected field, you can easily copy and paste that button into any stack.

Fig. 6 Message Hierarchy

Fig. 7 Secret Stack

Hypercard also has some limitations, you are limited to the size of a normal Macintosh screen, no color, and you can view only one card at a time. Some of these limitations have already been addressed, such as the introduction of scrolling fields which aid the size limitation.

The Secret Diary

I have written a short example Stack Called Secret Diary. I will use it to demonstrate the format and Ideas behind scripts. Let me fist describe what the Stack does. When you open it you are confronted with the same Card as in Fig. 7. When you press Button “Push to Start” up comes an alert box warning you to remember your password, then up comes a dialog box asking you to enter a password (Fig.8). A second dialog box pops up asking you to confirm your password, then an alert telling you your password has been confirmed. When you press “Close Help” you are presented with a card like Fig. 3. There are two fields where you can enter information. Pressing the key Button on Fig. 3 brings up a dialog box (Fig.8) asking you to enter your password. When you have entered your password correctly the Secret Diary Field is presented (Fig.2), allowing you to enter information you want to keep from prying eyes. This field can have as much information as you like, simply by scrolling. You can now press the Hide Button to hide the Secret Diary or the Password Button to change your password.

New pages can be added by pressing Button “New Page”, when they are created the current date is put into the field on the top of the page. The left and right arrow Buttons move you to the previous and the next cards respectively. The icon Button with the 3 cards shows all the cards in the Stack. The Home icon Button takes you to the Home Card, and the question mark takes you to the Help screen (Fig.7).

Fig. 8 Password

What’s in a Script?

A script that reacts to a message is called a Message Handler. A script may contain many handlers. For example the Secret Diary Stack Script has an on openStack handler containing an instruction to close the Message box, hide message box, and an end of handler end openStack. It also contains a handler closeStack, which makes sure the Secret Diary is closed on exit.

Scripts can be very simple such as in Fig. 7, where all the the Buttons have mouseUp handlers. These Buttons (except “Push to Start” and “Close Help” ) are background Buttons because I wanted them to appear on all cards. The Buttons “Push to Start” and “Close Help” are Card Buttons and I designed them to appear on the first card only. The Home button simply has a handler and “go home”. Menu objects can be “Called” by using the command doMenu with the name of the menu item as a parameter like in Button “New page”. This is typical of the simplicity of Hypercard. The right angled arrow is a return arrow it allows you to go back to the card from which you came into the stack from. If you look at Listing 1 of the Stack script you will notice an instruction that says “push recent card” this stores the address of the recent card on the “real stack”. The return Arrow Button tells Hypercard to pop card (from the “real stack”) so Hypercard jumps to that address. This is a good example of the modularity and flexibility of Hypertalk. The entry point to the Stack is the Stack itself. We only want to go back to the card we came from sometimes, so it wouldn’t make much sense to put “pop card” under the handler closeStack, because we may want to go to the Home Card or somewhere else.

How was it done? First I created a new Stack, then copied the graphic of the book into the Background (type command-B to get in and out of background mode). Then I created the Fields (Fig. 3), with attributes show lines and opaque. The left field is called “Notes” the right is called “Blank” and the Date field “Date”. The help screen is a picture that I created with the paint tools. If you look at the Script for the Help Button it first locks the screen so the user is not aware that the changes don’t occur simultaneously. Then it toggles the visable attribute of the fields Note, Blank, and Date. It also puts up the Button “Close Help” (Fig. 7). This is a very useful feature because you can have as many hidden fields as you like that pop up.

Variables are declared by simply refering to them. For example in Listing 4 the line put it into passwd1. Hypertalk uses it as a temporary variable. The script puts up a text entry dialog with ask password “Set New Password”. The parameter password after ask translates the enterd text into an encoded numeric form (what this is for will become apparent later). A suffix after the ask “name” statement is with “name of button” or “name of another button”. Up to 3 buttons can be added. The text entry is put into the temp variable it. An alert is of the same type except insted of ask it is answer. Now back to the instruction put it into passwd1, Hypertalk checks to see if the word passwd is a reserved word if not then it becomes a variable. To make a variable global, the statement global is put in front of the variable name, it has to be declared global in each handler it is used in. Variables are lost after quitting Hypercard. To store my password I put it into a hidden Background field called “pass”, on openStack I put background field “pass” into the variable Passwd. Look at listing 1 and compare how similar to the last sentence it is. It is almost English. Since the Password has to be stored it is useful to encrypt it using the parameter password after the ask statement.

Each Button or Field on a card is suspended in it’s own layer. This means that I can create a large invisible Button (“Big Button”) such as I have done in the opening of the stack, that covers the whole card. It is placed on top of all the buttons and fields. It doesn’t contain any handlers so it doesn’t do anything. I have put the button “Push to start” on top of it. This means that the user can only press the Button “Push to Start” all the other buttons are obscured by “Big Button”. This helps you control the sequence a user can choose. If you look at Listing 3, the Button “Big Button” is hidden after the user enters his password. Now the other buttons work normally. You can control where a button is in a layer by using the menu commands “Send Farther” or “Bring closer”. The same principles also apply for fields. The Hypertalk control structures such as “If”, “Then”, “Else” are quite standard such as “if the mouse is down then Beep”. With repeat loops such as in Listing 4 you exit either the repeat by the statement “exit repeat” or exit the handler eg. “exit mouseUp”.

To finish off this section on scripting I want to once again re-inforce the concept and power of Messages. Look the Handler closeStack in Listing 1, the entire script can be replaced with a one line Message; send mouseUp to bkgnd button hide.

External procedures can be added to stacks very simply. They are in the form of command (XCMD) and function (XFCN) code resources. They can be added to stacks using ResEdit or any other resource moving tool. When a command in a script cannot be found, Hypercard looks for the resources of type XCMD and XFCN with the same name as the unknown command, therefore you can call external code by using handlers to the named resource.

Hypertalk is a powerful user friendly language that will generate many new vistas in the Mac environment. There will be a big influx of Stackware on the market. Soon the Hypercard installed base will be very large because Apple is bundling it with every new Mac and offering it as an upgrade at nominal cost. Happy Hypercarding.

Where to get more information?

• “The Complete Hypercard Handbook”

by Danny Goodman (Bantam Books)

• “Hypercard Power: Techniques and Scripts”

by Carol Kaehler

• “Hypercard Script Language Guide” by Apple, available from APDA.

Fred Stauder is a developer with Ecofin Research and Consulting Ltd. who specialise in consulting to the Swiss Banks and Financial Institutions. They are Registered Apple Developers and a Dynamic International company.

Listing 1
stack
on openStack
  --set global variable passwd
   --for storage of encrypted Password
   global passwd
  put bkgnd field “pass” into passwd
  push recent card
  hide message box
end openStack

on closestack
  --make sure that the Secret Diary is Closed on Exit
   set lockscreen to true 
  --to make the events appear simultaneous
   show bkgnd button “hide”
  click at the loc of bkgnd button “hide” 
  --instead of re-writing the script we can click it
   hide bkgnd button “hide”
  set lockscreen to false
end closestack
Listing 2
background
on newcard
  --The current date is added to a new card
   put the date into bkgnd field “date”
end newcard
Listing 3
Push to start
on mouseUp
  answer “Do not forget your Password” --Alert
   set lockscreen to true --hide events from user
   show bkgnd button “Password”
  show bkgnd button “Hide”
  --Big button covers all the other buttons 
   --except Push to start.
   --There is no script in Big Button so it prevents 
   --all the other buttons from being pressed. 
   --This helps control the sequence a user can choose
   hide button “big button”
  click at the loc of bkgnd button “Password” 
  --Do the script in button Password
   put the date into bkgnd field “date”
  hide button “Push to start”
  --used to toggle the buttons off
   hide bkgnd button “Password”
  hide bkgnd button “Hide”
  set lockscreen to false
end mouseUp
Listing 4
password
on mouseUp
  global passwd 
  --declare passwd as a global 
   --(available in all places where it is declared)
   repeat forever
    beep
    ask password “Set New Password” 
    if it is empty then exit mouseup
    put it into passwd1
    beep
    ask password “Please Confirm Your Password”
    if it is empty then exit mouseup
    put it into passwd2
    if passwd1 = passwd2 then exit repeat
  end repeat
  put passwd2 into passwd
  put passwd into bkgnd field “pass”
answer “Your Password has been Confirmed”
end mouseUp
Listing 6
hide
on mouseUp
  hide bkgnd field “secret”
  hide bkgnd button “hide”
  hide bkgnd button “Password”
end mouseUp
Listing 7
Key
on mouseUp
  global passwd 
  --Set as a global so it can be used everywhere
   repeat forever
    beep
    -- Ask puts up text enty Dialog Box.
    -- the word Password is used to encrypt the entered
     --text into a number format
     ask password “Please enter your Password”
    --Puts up text enty Dialog Box
     --it compares the global passwd 
    --to the result of the enterd text
     if passwd = it then exit repeat
    beep
    --Answer puts up a dialog  box with up to 3 buttons
     answer “Your Password is Incorrect”¬
   with “Bye” or “Try Again”
    if it is “Bye” then exit mouseup
  end repeat
  --Shows the Secret diary and enables
   -- the Password and Hide buttons
  set visible of bkgnd field “secret” to true
  show bkgnd button “hide”
  show bkgnd button “Password”
end mouseUp
Listing 8
help
on mouseUp
  set lockscreen to true
  set visible of bkgnd field “Notes”¬
  to not the visible of bkgnd field “Notes”
  set visible of bkgnd field “blank”¬
  to not the visible of bkgnd field “blank”
  set visible of bkgnd field “Date”¬
  to not the visible of bkgnd field “date”
  set visible of bkgnd button “close help”¬
  to not the visible of bkgnd button “close help”
  set lockscreen to false
end mouseUp
Listing 9
close help
on mouseUp
  click at the loc of bkgnd button “Help” 
  --a simple way of “doing” a button
 end mouseUp
Listing 10
Prev
on mouseUp
  visual barn door open 
  --opening from the center out
   go to prev card
end mouseUp
Listing 11
Next
on mouseUp
  visual barn door close 
  --closing from the outer edge to the center
   go to next card
end mouseUp
Listing 12
return
on mouseUp
  visual effect iris close --a closing iris effect
   pop card -- go to the card where you came in from
 end mouseUp
Listing 13
New Page
on mouseUp
  doMenu “New Card”
end mouseUp
Listing 14
Show all
on mouseUp
  show all cards
end mous
Listing 15
Home
on mouseUp
  go home
end mouseUp