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
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
 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Latest Forum Discussions

See All

Can PokeMatch help you find love with Po...
The unofficial Pokemon GO companion app space has exploded almost as fast as the game itself over the last few weeks. Aspiring app developers, many of them working solo, have given us apps that locate Pokemon, keep track of the server status, and... | Read more »
How to get started with Prisma
If there's one thing people like to do more than taking pictures with their smartphones, it's tinkering with those photos in some way. Numerous apps have sprung up over the last several years that allow you to use filters and special effects to... | Read more »
6 Pokemon GO updates you can expect, acc...
Pokemon GO had a scheduled appearance at this year's San Diego Comic-Con for a while, but it was only relatively close to the show that it was upgraded to a spot in Hall H. That's the biggest venue at SDCC, one usually reserved for the largest... | Read more »
How to evolve Eevee in Pokemon GO
By now, almost everyone should be hip to how to evolve Pokemon in Pokemon GO (and if not, there's a guide for that). Just gather enough candy of the appropriate type, feed them all to the Pokemon, and evolution happens. It's a miracle that would... | Read more »
CSR Racing 2: Guide to all game modes
It might not seem like there are all that many ways to go fast in a straight line, but CSR Racing 2 begs to differ. [Read more] | Read more »
Bulb Boy (Games)
Bulb Boy 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: Multi-award winning 2D point & click horror adventure about a boy with a glowing head. | Read more »
5 top free emoji keyboard apps
If we're not at peak emoji yet as a society, it feels like we definitely should be. The emoji concept has gone far beyond what anyone in Japan could have envisioned when the people there unleashed it on an unsuspecting world, but the West has... | Read more »
How to unlock more characters in Disney...
One of the big charms of Disney Emoji Blitz is seeing a wide variety of beloved Disney and Pixar characters transformed into smiling emojis. Even someone like the sneaky Randall from Monsters Inc., who probably never cracked a smile on film, is... | Read more »
Cubway (Games)
Cubway 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Cubway is a journey with an abstract story of lifecycle of rebirth, called Samsara. Guide the cube through the long way full of dangers... | Read more »
Colorcube (Games)
Colorcube 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Turn pieces and blend colours in this minimal yet visually stunning puzzler.Over 200 handcrafted and challenging levels. Features... | Read more »

Price Scanner via MacPrices.net

Apple’s 2016 Back to School promotion: Free B...
Purchase a new Mac or iPad using Apple’s Education Store and take up to $300 off MSRP. All teachers, students, and staff of any educational institution qualify for the discount. Shipping is free, and... Read more
Apple refurbished iPad Air 2s available start...
Apple has Certified Refurbished iPad Air 2 available starting at $339. Apple’s one-year warranty is included with each model, and shipping is free: - 128GB Wi-Fi iPad Air 2: $499 - 64GB Wi-Fi iPad... Read more
13-inch 2.5GHz MacBook Pro available for $964...
Overstock has the 13″ 2.5GHz MacBook Pro available for $964.21 including free shipping. Their price is $135 off MSRP. Read more
External Keyboard Innovations For iPad Pro (1...
I’m an input device aficionado. With non-touchscreen computers, which includes all Macs, the keyboard and mouse or trackpad are the tactile points of interface between user and machine, and the... Read more
GSK Rheumatoid Arthritis Study Leverages iPho...
Global healthcare products company GlaxoSmithKline (GSK) says that since 2014 they have begun transforming the way they conduct research, by leveraging state-of-the-art digital technologies — a... Read more
Clearance 12-inch Retina MacBooks, Apple refu...
Apple has Certified Refurbished 2015 12″ Retina MacBooks available starting at $929. Apple will include a standard one-year warranty with each MacBook, and shipping is free. The following... Read more
13-inch Retina MacBook Pros on sale for up to...
B&H Photo has 13″ Retina MacBook Pros on sale for up to $150 off MSRP. Shipping is free, and B&H charges NY tax only: - 13″ 2.7GHz/128GB Retina MacBook Pro: $1199 $100 off MSRP - 13″ 2.7GHz/... Read more
13-inch 1.6GHz/128GB MacBook Air on sale for...
Amazon has the 13″ 1.6GHz/128GB MacBook Air on sale for $200 off MSRP for a limited time. Shipping is free: - 13″ 1.6GHz/128GB MacBook Air (sku MMGF2LL/A): $799.99 $200 off MSRP Their price is the... Read more
13-inch 1.6GHz/256GB MacBook Air on sale for...
Amazon has the 13″ 1.6GHz/256GB MacBook Air on sale for $200 off MSRP for a limited time. Shipping is free: - 13″ 1.6GHz/256GB MacBook Air (sku MMGG2LL/A): $999.99 $200 off MSRP Their price is the... Read more
Free iOS Business App notably* Helps Service...
PayStudio Inc. has introduced their new business app notably* 1.0, developed for iPhone and iPod touch. notably* was specifically developed to help service and trade professionals go digital and... Read more

Jobs Board

*Apple* Retail - Multiple Positions, Willow...
Job Description:SalesSpecialist - Retail Customer Service and SalesTransform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
*Apple* Evangelist - JAMF Software (United S...
The Apple Evangelist is responsible for building and cultivating strategic relationships with Apple 's small and mid-market business development field teams. This Read more
*Apple* Solutions Consultant - APPLE (United...
Job Summary As an Apple Solutions Consultant, you'll be the link between our future customers and our products. You'll showcase your entrepreneurial spirit as you Read more
*Apple* Professional Learning Specialist - A...
Job Summary The Apple Professional Learning Specialist is a full-time position for one year with Apple in the Phoenix, AZ area. This position requires a high Read more
*Apple* Picker - Apple Hill Orchard (United...
Apple Hill Orchard, Co. Rte. 21,Whitehall, NY 9/7/16-10/228/16. Pick fresh market or processing apples Productivity of 60 boxes and 80 boxes processing fruit per Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.