Introducing the Visual Critter
As the final exercise for this chapter, you will build a critter program that has a graphical interface. This program will look and feel more like the programs you encounter on the Windows operating system. As usual, an image or two of the program is more helpful than just a description. Figure 6.1 demonstrates the Visual Critter in its default state.
Figure 6.1. This critter has a picture and some Windows-style controls.
You can see from Figure 6.1 that the newest version of the critter has much more visual appeal than the older versions. Modern users have become used to the convenience of a graphical interface, with all the various components such as text boxes, scroll bars, and command buttons. This version of the Visual Critter features several standard graphical controls.
Before diving into how all these controls work, you should play around with the program and see what it does. This is a highly interactive program, so you should open it from the CD-ROM and look at it live. I’ll show you a few of the highlights now in case you aren’t near a computer.
Figure 6.2 demonstrates what happens when you click the critter image.
Figure 6.2. When the user clicks the image, the critter speaks.
I have attached code to the image so that when it is clicked, a message appears. The critter asks the user to change the critter’s name. Take a look at Figures 6.3 and 6.4 to see how the user can edit the name in the rectangle on the left side of the form.
Figure 6.3. The user can rename the critter by typing in the little box.
Figure 6.4. After the user clicks the Change My Name button, the critter reports its new name. Any subsequent clicks on the critter will return the newname.
You can do other interesting things with the critter. You can change its mood by clicking the drop-down list of various temperaments. Figure 6.5 illustrates the critter after the user chooses a different mood.
Figure 6.5. When the user chooses a new mood from the drop-down list, the image changes accordingly.
The user can also change the critter’s size, by manipulating the scroll bar. Changing the location of the rectangle inside the elevator shaft changes the size of the critter image. Figures 6.6 and 6.7 illustrate this phenomenon.
Figure 6.6. The elevator shaft is near the left, and the critter image is very small.
Figure 6.7. When the user moves the scroll bar , the critter grows.
You can also change the color of the background on which the critter resides. Illustrating these color changes on a black-and-white page is impossible, so you need to experiment with the program to see this phenomenon.