Hacking on Son of Silly Balls - 1Silly Balls was an old Mac example program that showed off some of the features of Quick Draw. It filled a box with random colored circles. Son of Silly Balls is much the same, with the addition of a slider control to vary the rate at which the circles appear.
Personally, I think it's lots more fun to think of new things to make Son of Silly Balls do than to work on a practical example such as Apple's currency converter application. A lot of the appeal of SoSB (I just started to feel silly myself writing out the program name over and over) is exactly that it's useless. You know that you're playing with it just for fun and to learn stuff. If you work on a useful (ssss boo) program you're apt to start asking yourself why you should add more features. With SoSB there's only one reason, that is, to see if you can do it. Once you realize that, there's no stopping you.
The picture above shows Son of Silly Balls after two simple changes. I'll tell you
how to do them.
I'm getting ahead of myself. I should say, once you've unstuffed the SoSB download, start up Project Builder, select "Open" from the File menu, navigate to the SoSB directory, and open SonOfSillyBalls.pbproj The .pbproj extension means the file is a Project Builder Project file, with information on what all the parts of the program are.
Look, if I'm going too fast here, you may want to try Apple's tutorial on Cocoa projects. In the version of the developer tools on my computer, it's in Developer/Documentation/Cocoa/ObjCTutorial. It's also available on the web. The instructions go step by step and if you work through that tutorial you'll be ready to jump ahead of the things I say. It's really good for the user interface part, but assumes you know something about programming in general. If you don't, you can blindly type the program code anyway.
If you do have the SoSB project open in project builder, all you have to do is to
click on the icon of the monitor with the hammer behind it (1 in
the picture above). That's "build and run." You can
get the same result from selecting "Build and Run" from the Build menu, or just typing apple-R.
When the program is running, play around with the slider and the menus for a while.
...
I don't know about you, but I like buttons in my programs. A menu item that says "Quit" is all well and good, but just for fun (and remember that's the whole point of this site!) let's add a button to the window that we can click on to make the program quit. First, exit SoSB with the menu item. Then click the disclosure triangle by "Resources" in the left column (if your left column doesn't look sort of like the one in the picture, click on the "files" tab) and double-click on MainMenu.nib (2 in the picture above). If you get a "Deprecated Properties" warning, you can click on "fix objects" to get rid of it. Up to now you were running Project Builder. Now you're running a different development tool, Interface Builder.
You'll see a window titled "Son of Silly Balls" that looks very much like the program's window, but with a light blue box labeled "SillyBallView" where the balls usually appear. If you don't see it, make sure the "Instances" tab is selected in the MainMenu.nib window, then double-click on the "MyWindow" icon in it . The "Son of Silly Balls" window is where you design the program window. There's no place in it to put buttons, so grab the resize corner (bottom right corner) of that window and drag it either to the right (if you want to put buttons on the right) or down (if you want to put buttons on the bottom). Before you go any farther, choose "save" from the file menu, click on the Project Builder window, click on the "Build and Run" monitor/hammer icon (or do apple-R, or "build and run" from the build menu). Holy smokes! The program window is bigger now, just the way you dragged the corner! That's how easy it is to change the user interface with Cocoa.
Go back to Interface Builder (you can always double-click on "MainMenu.nib" again. If you click on the MainMenu.nib window you'll get Interface Builder, but it may not show all its windows. Go to the Window menu and click Bring All to Front). Look around the screen and guess what you'll do to add a button to make the program stop. You probably have a window that says "Cocoa-Views" but maybe it says "Cocoa-Menus" or "Cocoa-Other" or "Cocoa-Data" or "Cocoa-" and something else. If it doesn't say "Cocoa-Views", find "Views" in the window toolbar and click on it. If you don't see it at all, go to the tools menu and choose "Palettes -> Show Palettes". Do you see "Button" in the main part of the window now? Drag it to the Son of Silly Balls window and drop it where you want it. You'll see dark blue guide lines as you drag. They're there to help you line up your buttons, labels, and all the other stuff in your user interface so it looks neat.
Feel free to save the file and build and run the program at every little tiny step. It's a good way to build your confidence in what you're doing and see that you're making progress. If you do build and run the program at this stage, note that the button changes to blue when you click it. It doesn't do anything else, though.
Right now the button is just a dangling button without a name or anything to do. Let's name it. We're going to need the Info window of Interface Builder. If you've clicked on the button (if so, it will have little resize dots all around it) and don't see a window titled "NSButton Info", go to the Tools menu and select Show Info. The show info window is so useful that you should always have it running, unless you really need the screen space for something else. To make it visible whenever Interface Builder is running, click its preferences checkbox (and click the Show palettes at startup preferences checkbox, too):
Make sure that "attributes" is selected in the popup menu (1 in the picture below). If it is, the window should look like the picture. In the Title box (2 in the picture) you can enter "Quit" or "Exit" or whatever else you want (I wrote "Enough silliness!" in my copy. If you choose something long, you can resize the button with the blue dots around it. Don't be shy about resizing the whole window -- it's your program, after all!).
Before you save and build the program, I want you to think for a minute about what will happen now when you run the program and click the "Quit" (I guess that's its new name) button. OK, save the user interface file, go to Project Builder, and build the program.