Those already familiar with other Smalltalks will find Worksheet 1A rather boring. It is primarily for those people that I am including this Tutorial. It is about a new and still rather experimental technique for building applications by direct manipulation and scripting.
There is one part of Worksheet 1A that will be useful for those who are new to Squeak even if they are very familiar with other Smalltalks. It is the final subsection entitled Executing Code: Sending Messages to Objects. I suggest that you take a few minutes to do this now. If you have difficulty, it will probably pay you to go back to the beginning of Worksheet 1A
This Tutorial was written by John Hinsley and tested under Squeak 3.0.
From Squeak's opening page, red click to bring up the world menu, select open... and from the open... menu select morphic project. An orange window will appear. Click on its menu and change the title. (Alternatively, you can just highlight and delete the text at the bottom and type in your title directly.)
Click in the main pane to enter the project. You'll find yourself inside a blank project.
From the supplies tab at the bottom, drag out a blank BookMorph (labelled simply Book). Next, drag out a TextMorph (labelled Text) from the supplies flap. Blue click until the halo appears around the TextMorph (you'll see a little label Text at the bottom), highlight the "abc" and delete it. Type in what you want as your field (for example, "Name").
Now, you could keep dragging TextMorphs out of the supplies flap until all your fields were complete, but it's easier to use the duplicate handle in the halo to do it. All you do is click on the green duplicate handle and drag the new copy to where you want it. You can also use the black pincers handle to relocate the copy. Very occasionally it's possible for something strange to happen during this process, as though you've got one TextMorph on top of another. Just delete it using the pink "x" handle.
Change the text to whatever you want to call the field. If the field wraps onto a second line and you don't want it to, use the yellow "change size" handle to drag the string out onto one line by moving it to the right. You may need to use the blue button again to bring up the halo so that you can move something into a better position using the black "pincers" handle.
Now try moving the BookMorph about with its pincers. If any of the fields "fall out" (I'm unsure why this seems to happen to some and not others!) you'll need to embed them. Pick them up and drag them back into place and choose embed from each one's red handle menu. You'll be given a choice of where to embed them. aPasteUpMorph is the white background, so that's no use, while book will embed them as the title of the book. The remaining choice is page. But since we've discovered how to create a nice title for the book, we may as well use it. Duplicate one more TextMorph, place it anywhere on the book, and change the text to Rolodex. Use the embed menu to embed it in the book, and voilà! there it is, nicely centred, too. The BookMorph even makes room for it. At this point, red click to bring up the world menu and choose save, or save as...
So far, we have the labels for the text fields, but no way of entering the text. Guess what we'll use? That's right, blank TextMorphs! So, duplicate one that's already there, delete the entry ("Name", or whatever) entirely, and place it alongside a field label. Use the duplicate handle to make copies, so that every text field has its own blank TextMorph. Here you will need to drag them out to the right with the change size handle. (This time I'm taking no risks and embedding everything, remember, we want to embed it in page, OK?) You should end up with something like this:
Thus far we've done no coding, and we don't need to do any coding at this stage. (In fact, here we're going to use the "direct manipulation" style throughout.) But we still have a working Rolodex! Now, before you do anything else, click the central dot in the grey bar in the book and choose save as new-page prototype: this is really important! Save again, and then red click in the pink bars to enter the details for the text fields for one page:
Now, at the right of the grey bar on the book is a little diamond icon (a bubble help more controls pops up). Click on that and then on the + icon (add another page) and fill in the name of a friend or two. You'll not only discover that the pages are all there, but that you can use the find dialogue in the book's main menu to find an item.
Our next task is to try and use a button to pop up that dialogue.
Blue click until the book's halo comes up and click on the "eye" handle 
.
|
|
Once you have a copy of the the miscellaneous script menu, drag the script Book do menu item ... out onto a convenient place on the desktop and click on the up and down arrows on the third element until search for text appears.
We can test that this script does, indeed, launch the search dialogue by clicking on the yellow exclamation mark at extreme left. Wow! Now we need to associate that script with a button, and to make sure that the script responds to mouse up (that is to say, it will be fired by the release of the mouse button after the button has been clicked on).
All we need to do to set the mouse up behaviour is to click on the normal tab of this script to bring up a menu from which we select mouse up.
Now, take a look back at the viewer and you'll see that a new item corresponding to our Book script 1 has appeared. We get our button simply by clicking on the dot to the left of this item and selecting button to fire this script from the menu that pops up.
A green button will appear.
We just need to change the label on this script (Search or Find seem the obvious candidates) and, since I like yellow buttons, change the colour, and embed it in the page. Now, test it by pressing on the button.
Now we need to undo all the text that we have entered to test our searches. From the central dot menu of the book, select the page with the Search button in it as the save as new-page prototype. Now, enter some names, and try it out!
That's it. You've just programmed a fully functional Rolodex with a search function in less than an hour (considerably less if this wasn't your first or second Morph) without entering a line of code.
Now, I'm not going to tell you that it's a particularly difficult project, or that this is all there is to Morphic (and it's only my fourth Morphic project), but I believe that in any other language this would take at least twice, and probably three times, as long.
Eventually you may become fed up with the strange way that "Rolodex", although embedded in the book, comes back as a sort of page heading. So let's remove that. Before we once more save as new-page prototype we should really get rid of all the little bits of text we've put in.
Don't forget to save your image now, and each time you put a new entry in your Rolodex.
One of the people who responded to the first version of this tutorial was having problems entering text in the empty TextMorphs (the pink bar). I (John Hinsley) wasn't sure whether this was due to my description of the process (since revised) or an inherent fault in the interface. Now, on the course I'm doing at the Open University we are taught to assess interfaces in terms of visibility, affordance and feedback. I won't go into the details of that (because I tend to get confused between one and the other!), but if we look at the pink bar, it's not at all clear that it will accept focus or that it will take text. The only feedback we get is that if we do get focus on a TextMorph which is blank and start typing, text appears. I messed about (as one must) with some of the other text morphs from the Add a new Morph menu and finally found ShowEmptyTextMorph (under S in the from alphabetical list sub menu). This both allows focus and shows you have it by a flashing cursor. (If you like, the cursor "affords" that we can enter text.)
If you like the sound of this, all you have to do is to delete the blank TextMorphs and replace them with ShowEmptyTextMorphs. It's easier to manipulate a ShowEmptyTextMorph if you actually fill it in with some text. The illustration shows one field completed, some just full of text for the purpose of manipulation/justification, and another with focus (you should just be able to see the green cursor next to "Address") waiting for input.
You'll note that on this SuperRolodex version, I've yet to put the "Search" button.
Again, don't forget to save the page as a new-page prototype, and then to save your image.
Squeak already has a nice little e-mailer called Celeste. It's somewhat minimal (folk are working on enhancements such as a mail sorter as I write), but is extremely elegant and just what we need to add a little functionality to our Rolodex.
I have to admit that how to get Rolodex to call Celeste's "compose" page (wonderfully named Mister Postman), puzzled me for a good few days. In the end, I decided to try the simplest solution I could think of. All you need to do is to call Celeste from the world menu >> open... >> email reader.
You'll see that Celeste has a "New" button. Try it out and you'll find that this button calls Mister Postman. (While you're in Celeste you might like to fill in your e-mail address and the SMTP and POP3 servers) We can simply get a halo around this "New" button, duplicate it, drag it down to the Rolodex and embed it (in Page, remember). Close down Celeste and try your new "New" button. There you go, an e-mail function!
What we need to do now is to sort out how to get Mister Postman's To: field to contain the text in the ShowEmptyTextMorph for the email field in that page. Bear with me, I may be gone for some time...
So, what remains to be done? I'm still not sure how to change the colour or the font of the buttons on the search dialogue (and have them stay changed, that is). It would be nice if clicking on a 'phone number brought up an autodial option. I'd like to be able to do stand alone versions (but these would presumably need a save dialogue too, so that new entries were not lost). Also I think that a finished, stand alone version shouldn't have any superfluous menus. Removing them without wrecking everything may be a little tricky!
In effect, the idea would be to create a program that has all the functionality of the Card Index program that came with Windows 3.1 (surely one of the best Windows programs ever!) and more, but to do it entirely by direct manipulation.
Finally, you may note that the final few figures show the Rolodex in a system window. When this tutorial was first written, there was a menu option to embed any Morph in a system window. The method that does this still exists (embedInWindow) and can be called from, say, an Inspector, but doing that breaks the direct manipulation paradigm.
Any comments, criticisms or ideas on how to improve the functionality of this little project will be gratefully received, please e mail me.
In the meantime, may the Morph be with you!
