BACK TO THE JOKE MACHINE

Now that you have a bit of the foundation of Visual C++ out of the way, it's time to move on to programming this chapter's project, the Joke Machine. Through the development of this game, you will learn the basic steps involved in developing a Windows application. As you create your first Visual C++ application, try to develop an intuitive feel for the overall process involved. The details will become clearer as you practice and will be explained thoroughly in the chapters to come.

Designing the Game

The Joke Machine's design is straightforward, involving basic yet fundamental Windows programming techniques. The game begins by displaying its GUI. It then waits for the user to click on a button before displaying a knock-knock joke. The game continues to run, allowing the user to click either of its buttons as many times as desired. Like other Windows applications, you can minimize or maximize the game and continue to run it until you click the Close button in the upper-right corner of the window.

As you will see as you build the Joke Machine, Visual C++ applications are typically created in five steps, as outlined here:

1. Create a new Visual C++ project.

2. Create the GUI.

3. Modify form and control properties.

4. Add program code.

5. Test the application's execution.

Each of these steps is demonstrated in detail in the sections that follow.

Step 1: Creating a New Visual C++ Project

The first step to developing any application is to create a project for it. Before you can do this, you need to launch Visual C++ 2005 Express Edition if you have not already done so. Next, create the project by selecting File, New, New Project.

Visual C++ displays the New Project dialog box, as shown in Figure 1.6.

Figure 1.6: The New Project dialog box allows you to control the creation of a new project.

Hint 

A Visual C++ project stores all the code and form data, such as pictures and text, which make up your Visual C++ application.

The New Project dialog box displays several options available for configuring the type of application you want to create. You can specify the type of project, the template to use, and the file name and location.

The Project Types category allows you to choose whether you will be creating a .NET project, a Win32 application (a Windows program that does not use the .NET Framework), or an empty project that you will build from scratch later. For the purposes of the examples in this book, you will be building .NET projects. Make sure CLR is highlighted in the Project Types section on the left side of the New Project dialog box.

Next to Project Types is a category called Templates. This lists all Visual Studio installed templates that are designed to work with Visual C++. Templates are generic projects that include the settings you need to get your own project up to speed quickly. Because the Joke Machine is a Windows application, you must select the Windows Forms Application.

Hint 

A template is a collection of files, property, and Visual C++ compiler settings that Microsoft provides as a starting point for rapidly creating a particular type of Windows application.

IN THE REAL WORLD

Visual C++ 2005 Express Edition provides many different project templates. They are all designed to assist developers in getting the settings for Visual C++ and their application configured quickly. The following types of projects are available from the New Project dialog box:

• Windows Forms Application. Creates an application with a Graphical User Interface that is designed to run on the Windows desktop. The application is built using forms and controls that the Visual C++ development environment provides.

• Windows Forms Control Library. Creates a module intended to provide custom-designed controls to a Windows application. The behavior and appearance of the control are contained within the module.

• CLR Console Application. Creates a text-based .NET application that is typically run from the Windows command prompt. This is useful for developing tools or other programs that have little need for user interaction or mouse control.

• Windows Service. Creates an application that provides additional services to the Windows operating system.

• ASP.NET Service. Creates an application that provides support for XML-based Web services.

• CLR Empty Project. Creates a minimal .NET project to which files can be added later. This is for experienced developers.

• Class Library. Creates a module that is intended to provide functionality to other applications.

• Win32 Console Application. Creates a native Windows application that does not take advantage of the .NET Framework.

• Empty Project. Creates a minimal native Windows project to which files can be added later. This is for experienced Win32 developers.

• Makefile Project. Creates a project that is designed to be built outside the Visual C++ IDE. This is for experienced developers.

These templates save developers time because they reflect the most common settings that developers need. Without templates, simply configuring the compiler might take as long as building a program!

The last step of creating a new project involves giving it a name. In the Name field of the New Project dialog box, enter The Joke Machine. When you type this text, Visual C++ mirrors the name in the Solutions field. Whenever you create a new project, you create a new solution by default. Solutions contain projects, just as projects contain the material that makes up your application. Click OK.

Hint 

A Visual C++ solution is a container that stores all the projects that make up your Visual C++ applications. In the case of the Joke Machine, the entire application consisted of a single project. More complex applications might be made up of more than one project. You will learn more about projects and solutions in later chapters.

Trick 

By default, Visual C++ places new projects in the folder of the current user, under C:\Documents and Settings\Username\My Documents\Visual Studio\Projects. You can change this location if you want. To do so, select Options from the Tools menu. In the Options dialog box that appears, locate the Projects and Solutions section. Under Visual Studio Projects Location, you can type a new file location or choose one by selecting the ellipsis icon next to the directory name.

As you can see, Visual C++ creates a new project for you. This project contains a blank window, as shown in Figure 1.7. The window is referred to as a form and serves as the basis for all the Graphical User Interfaces you create in this book. By default, the form is named Form1. You don't have to change the name in this chapter, but you will learn how to do so in the next.

Figure 1.7: Visual C++ presents a blank form when you begin a new project based on a Windows Forms Application template.

The project that Visual C++ 2005 Express Edition has created is a fully functional application. You could run it if you wanted to, but it wouldn't be an interesting experience. Although all the code necessary to manage and display the window is written for you, you get only the bare minimum functionality needed to drive all Windows applications. You can move the window around, maximize or minimize it, or close the application. To make the Joke Machine more exciting, you need to build in a user interface.

Trick 

To run the application, press the F5 key. A dialog box appears, asking you if you want to build the project. Select Yes. Visual C++ performs a few steps, and then your application appears.

Step 2: Creating the User Interface

To create the interface for the Joke Machine, you need to add controls to the form. Controls are the user interface elements that the player interacts with as he plays the game. Visual C++ provides an extensive list of controls, located in the Toolbox window, which is displayed on the left side of the IDE.

Hint 

A control is an element of your program's GUI, such as a menu, text box, or button.

You can add controls in one of two ways. You can select the control you want and double-click it using the left mouse button. The control then appears on your form. By default, though, Visual C++ begins layering each control you add on top of the last, beginning in the upper-left corner.

An easier way of adding controls involves simply clicking and dragging. If you left-click on any form element, you can drag it over your form and drop it. This allows you to position the control exactly where you want it.

After the form is on your control, you can adjust its position and size. Just click once on the control you want to move. A border appears around it, and you can drag it anywhere you like on the form. You can also resize the control using the mouse or by clicking on the small white squares that intersect the border (shown in Figure 1.8) and dragging.

Figure 1.8: You can resize many form controls by dragging their borders.

The first control you will add is a label. Begin by bringing your mouse over the Toolbox tab on the right side of the IDE. The Toolbox window expands, showing you a range of controls to choose from. Find the Label control and drag it to the upper middle of your form. Don't worry about precise placement. Just try to position it somewhere near the top and middle of the form.

Next, locate the Button control in the Toolbox window. Select the button and drag it to the form. Try to position it in the middle of the form. When you are finished, add a second button below it. Notice that the buttons have a default name of Button1 and Button2. By default, Visual C++ adds placeholder text to many of the controls that you add. You can change this text, which is described in the next section.

The final control to add is a text box. Drag the text box to the form and resize it, as shown in Figure 1.8, by clicking it once and dragging the white squares that border the control. Position it below the label and two buttons you've added. You should have an interface that looks like the one shown in Figure 1.9.

Figure 1.9: Visual C++ adds descriptive text to controls as you add them to a form.

Step 3: Customizing Control Properties

Now that you've added the necessary controls that make up the interface for the Joke Machine, it's time to customize its appearance. Each control has settings that determine the look of the control, including its size, color, and description. You need to select each control in turn and edit the properties associated with it. This gives the Joke Machine a more easily understood, professional interface.

First, select the label. Its description currently reads label1. It needs to display Joke Machine. To change the text linked to this control, click on the label. After you do this, a new window appears on the right side of the IDE. This is the Properties window. The name of each of label1's properties is listed in this window.

Scroll down and locate the Text property under the Appearance category. As you can see, by default, the label's text description is simply 1abel1. However, if you click on the description, Visual C++ allows you to change it. To replace the string you see, click on the text label1 and replace it with Joke Machine. Now click anywhere on the form or on another property, and you will see the label change.

You need to make the same change for both Button controls. First click the button displaying the text button1. Under Appearances, again scroll down and find the Text property. Change the text for button1 to Joke 1. Repeat for the second button, replacing the text button2 with Joke 2.

As you change the text for the controls, you might need to realign them. Again, don't worry about getting the controls into perfect position. The application still functions no matter where you put the controls.

Step 4: Adding a Little Programming Logic

At this point, you have a Graphical User Interface for your application, but it doesn't do much. If you build the application, you see that the buttons animate when you press them, and the text box shows a blinking cursor. But it does nothing else.

If you want to give the Joke Machine life, you need to add code. You add code by associating C++ programming statements with the controls you want to use to drive the application. In the case of this chapter's application, you link code to the two buttons, which in turn display text in the text box.

To add code to any application, you need to activate the Code Editor and enter the necessary statements at the correct location. You start the Code Editor by double-clicking the form or any one of its controls. When you do so, Visual C++ automatically generates program statements associated with the element that you've clicked and positions your cursor at the right point within the code.

To make the Joke Machine tell jokes when the user clicks a button, just add a few lines of code. Double-click on the button you've labeled Joke1. You're automatically switched to the Code Editor, as shown in Figure 1.10.

Figure 1.10: You can give controls functionality by adding code to them in the Code Editor.

Trick 

You can switch to either the Code Editor or your program's interface with a single click. Look near the top of the IDE shown in Figure 1.10. You see two tabs: Form1.h and Form1.h [Design]. Form1h is associated with the view of the computer code, whereas Form1.h [Design] links to the interface for your application.

The tabs that Visual C++ displays exist to help manage detail. Because the IDE has so many features, you can't show them all at once. Microsoft's solution to this problem is to overlap or overlay windows on top of one another.

Trick 

You might notice that the Code Editor window you see in Figure 1.10 is a lot larger than your own. It has been expanded to make viewing and editing the code easier. You can create this effect several ways. One is by closing the windows in the IDE as you finish using them. However, because a lot of application building involves finding different windows, it can be annoying to constantly have to close and reopen them.

Another, more convenient, way to manage space is to activate the thumbtack option for the windows. Each window has a small thumbtack icon in the upper-right corner that you can click. When you click this icon, the window automatically shrinks to a tab that displays on the borders of the IDE's current window. In Figure 1.10, you can see several tabs on the bottom, left, and right sides of the IDE. Each represents a window that you can access. Moving your mouse over the tab causes the window to expand temporarily. To keep any window open permanently, click on the thumbtack icon again.

As you can see, Visual C++ has already generated some code for you. In later chapters, I cover what this code does in greater detail. For now, you only need to enter the statements shown in bold to get your application up and running. (Note that the code Visual C++ generates for you does not contain the \ character, which I have added here to make the program more readable.)

 private: System::Void button1_Click(System::Object^ sender, \         System::EventArgs^  e)         {           textBox1->Text = \           "What kind of ties can't you wear? Railroad ties!";         } 

Without covering all the technical details in depth at this point, the two lines you've entered basically compose a statement that changes the contents of the TextBox control's Text property. The code you've added is to the button's module, which handles all instances of the button being clicked. When you click the button, this module of code is activated, and the statements within it are executed.

Now add code for the second button. Return to the form designer view for Form1 by clicking on the tab labeled Form1.h [Design]. Then double-click on the Button2 control. Again, you should be returned to the Code Editor window. You see the module that handles instances of Button2 being clicked. Add the line of code shown next, in bold, inside the two new statements.

 private: System::Void button2_Click(System::Object^ sender, \         System::EventArgs^  e)         {           textBox1->Text = \           "Where is the ocean deepest? On the bottom!";         } 

As with the previous C++ statements, the code that you've added displays the joke in quotation marks when you run the application and click the Button2 control.

Step 5: Testing the Execution of the Joke Machine

The design and development of the Joke Machine is complete. It is now ready to run. But before you can do this, you need to build the project. Building the project instructs Visual C++ to bring together all your changes and create a program from them.

To build the project, select Build from the Build Solution menu. In the Output window of the IDE are several messages that confirm that Visual C++ is creating your application. The final message should read like this:

 ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ========== 

If you don't get this result, make sure that you didn't make typos in the code that you added. When the program is finished building, you can run it by selecting the Start Debugging option from the Debug menu.