TweetFollow Us on Twitter

HyperCard Programming
Volume Number:3
Issue Number:10
Column Tag:Stack Programming

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
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
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
on mouseUp
  global passwd 
  --declare passwd as a global 
   --(available in all places where it is declared)
   repeat forever
    ask password “Set New Password” 
    if it is empty then exit mouseup
    put it into passwd1
    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
on mouseUp
  hide bkgnd field “secret”
  hide bkgnd button “hide”
  hide bkgnd button “Password”
end mouseUp
Listing 7
on mouseUp
  global passwd 
  --Set as a global so it can be used everywhere
   repeat forever
    -- 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
    --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
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
on mouseUp
  visual barn door open 
  --opening from the center out
   go to prev card
end mouseUp
Listing 11
on mouseUp
  visual barn door close 
  --closing from the outer edge to the center
   go to next card
end mouseUp
Listing 12
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
on mouseUp
  go home
end mouseUp

Community Search:
MacTech Search:

Software Updates via MacUpdate

The best GIF making apps
Animated GIFs have exploded in popularity recently which is likely thanks to a combination of Tumblr, our shorter attention spans, and the simple fact they’re a lot of fun. [Read more] | Read more »
The best remote desktop apps for iOS
We've been sifting through the App Store to find the best ways to do computer tasks on a tablet. That gave us a thought - what if we could just do computer tasks from our tablets? Here's a list of the best remote desktop apps to help you use your... | Read more »
Warhammer 40,000: Freeblade guide - How...
Warhammer 40,000: Freebladejust launched in the App Store and it lets you live your childhood dream of blowing up and slashing a bunch of enemies as a massive, hulking Space Marine. It's not easy being a Space Marine though - and particularly if... | Read more »
Gopogo guide - How to bounce like the be...
Nitrome just launched a new game and, as to be expected, it's a lot of addictive fun. It's called Gopogo, and it challenges you to hoparound a bunch of platforms, avoiding enemies and picking up shiny stuff. It's not easy though - just like the... | Read more »
Sago Mini Superhero (Education)
Sago Mini Superhero 1.0 Device: iOS Universal Category: Education Price: $2.99, Version: 1.0 (iTunes) Description: KAPOW! Jack the rabbit bursts into the sky as the Sago Mini Superhero! Fly with Jack as he lifts impossible weights,... | Read more »
Star Wars: Galaxy of Heroes guide - How...
Star Wars: Galaxy of Heroes is all about collecting heroes, powering them up, and using them together to defeat your foes. It's pretty straightforward stuff for the most part, but increasing your characters' stats can be a bit confusing because it... | Read more »
The best cooking apps (just in time for...
It’s that time of year again, where you’ll be gathering around the dinner table with your family and a huge feast in front of you. [Read more] | Read more »
Square Rave guide - How to grab those te...
Square Rave is an awesome little music-oriented puzzle game that smacks of games like Lumines, but with its own unique sense of gameplay. To help wrap your head around the game, keep the following tips and tricks in mind. [Read more] | Read more »
Snowboard Party 2 (Games)
Snowboard Party 2 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Crowned the best snowboarding game available on the market, Snowboard Party is back to fulfill all your adrenaline needs in... | Read more »
One Button Travel (Games)
One Button Travel 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: “To cut a long story short, If you like interactive fiction, just go buy this one.” - “Oozes the polish that... | Read more »

Price Scanner via

iMobie Releases its Ace iOS Cleaner PhoneClea...
iMobie Inc. has announced the new update of PhoneClean 4, its iOS cleaner designed to reclaim wasted space on iPhone/iPad for use and keep the device fast. Alongside, iMobie hosts a 3-day giveaway of... Read more
U.S. Cellular Offering iPad Pro
U.S. Cellular today announced that it is offering the new iPad Pro with Wi-Fi + Cellular, featuring a 12.9-inch Retina display with 5.6 million pixels — the most ever in an iOS device. U.S. Cellular... Read more
Newegg Canada Unveils Black Friday Deals for...
Newegg Canada is offering more than 1,000 deep discounts to Canadian customers this Black Friday, available now through Cyber Monday, with new deals posted throughout the week. “Black Friday is... Read more
Black Friday: Macs on sale for up to $500 off...
BLACK FRIDAY B&H Photo has all new Macs on sale for up to $500 off MSRP as part of their early Black Friday sale including free shipping plus NY sales tax only: - 15″ 2.2GHz Retina MacBook Pro: $... Read more
Black Friday: Up to $125 off iPad Air 2s at B...
BLACK FRIDAY Walmart has the 16GB iPad Air 2 WiFi on sale for $100 off MSRP on their online store. Choose free shipping or free local store pickup (if available): - 16GB iPad Air 2 WiFi: $399, save $... Read more
Black Friday: iPad mini 4s on sale for $100 o...
BLACK FRIDAY Best Buy has iPad mini 4s on sale for $100 off MSRP on their online store for Black Friday. Choose free shipping or free local store pickup (if available): - 16GB iPad mini 4 WiFi: $299.... Read more
Black Friday: Apple Watch for up to $100 off...
BLACK FRIDAY Apple resellers are offering discounts and bundles with the purchase of an Apple Watch this Black Friday. Below is a roundup of the deals being offered by authorized Watch resellers:... Read more
Black Friday: Target offers 6th Generation iP...
BLACK FRIDAY Save $40 to $60 on a 6th generation iPod touch at Target with free shipping or free local store pickup (if available). Sale prices for online orders only, in-store prices may vary: -... Read more
Black Friday: Walmart and Target offer iPod n...
BLACK FRIDAY Walmart has the 16GB iPod nano (various colors) on sale for $119.20 on their online store for a limited time. That’s $30 off MSRP. Choose free shipping or free local store pickup (if... Read more
Black Friday: Target and Walmart offer new Ap...
BLACK FRIDAY Take up to $50 off the price of a new Apple TV at Target and Walmart this Black Friday. Choose free shipping or free local store pickup (if available): 32GB Apple TV: Target: $112.49,... Read more

Jobs Board

*Apple* Site Security Manager - Apple (Unite...
# Apple Site Security Manager Job Number: 42975010 Culver City, Califo ia, United States Posted: Oct. 2, 2015 Weekly Hours: 40.00 **Job Summary** The Apple Site Read more
WiSE *Apple* Pay Quality Engineer - Apple (...
# WiSE Apple Pay Quality Engineer Job Number: 44313381 Santa Clara Valley, Califo ia, United States Posted: Nov. 13, 2015 Weekly Hours: 40.00 **Job Summary** Join our Read more
Holiday Retail Associate with *Apple* Knowl...
…and assertive.Someone who can troubleshoot iOS devices (iPhone and iPad) and Apple Mail issues.Someone who can offer solutions.Someone who can work weekends.Someone with Read more
*Apple* Systems Engineer (Mclean, VA and NYC...
Summary:Assist in providing strategic direction and technical leadership within the Apple portfolio, including desktops, laptops, and printing environment. This person Read more
Simply Mac *Apple* Specialist- Service Repa...
Simply Mac is the largest premier retailer of Apple products in the nation. In order to support our growing customer base, we are currently looking for a driven Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.