Teach Yourself Visual C++ 6 in 21 Days

Previous chapterNext chapterContents

- 1 -
The Visual C++ Development Environment--Building Your First Visual C++ Application


Welcome to Sams Teach Yourself Visual C++ 6 in 21 Days. Over the next three weeks, you will learn how to build a wide variety of applications with Microsoft's Visual C++. What's even better is that you will learn how to create these types of applications by actually building them yourself. As you read this book, you will be gaining actual programming experience using Visual C++. So let's get started!

Today, your focus will be on learning about the Visual C++ development environment and some of the tools that it provides for building applications. Although Visual C++ provides more tools than you would probably use in any one application development effort--even more than you could possibly learn to use in a single day--I limit the focus to the primary tools that you will use throughout this book, as well as in just about every application you build with Visual C++. Today, you'll learn about the following:

The Visual C++ Development Environment

Before you begin your quick tour around the Visual C++ development environment, you should start Visual C++ on your computer so that you can see firsthand how each of the areas are arranged and how you can change and alter that arrangement yourself.

After Developer Studio (the Microsoft Visual development environment) starts, you see a window that looks like Figure 1.1. Each of the areas has a specific purpose in the Developer Studio environment. You can rearrange these areas to customize the Developer Studio environment so that it suits your particular development needs.

The Workspace

When you start Visual C++ for the first time, an area on the left side of Developer Studio looks like it is taking up a lot of real estate and providing little to show for it. This area is known as the workspace, and it is your key to navigating the various pieces and parts of your development projects. The workspace allows you to view the parts of your application in three different ways:

FIGURE 1.1. The Visual C++ opening screen.

The Output Pane

The Output pane might not be visible when you start Visual C++ for the first time. After you compile your first application, it appears at the bottom of the Developer Studio environment and remains open until you choose to close it. The Output pane is where Developer Studio provides any information that it needs to give you; where you see all the compiler progress statements, warnings, and error messages; and where the Visual C++ debugger displays all the variables with their current values as you step through your code. After you close the Output pane, it reopens itself when Visual C++ has any message that it needs to display for you.

The Editor Area

The area on the right side of the Developer Studio environment is the editor area. This is the area where you perform all your editing when using Visual C++, where the code editor windows display when you edit C++ source code, and where the window painter displays when you design a dialog box. The editor area is even where the icon painter displays when you design the icons for use in your applications. The editor area is basically the entire Developer Studio area that is not otherwise occupied by panes, menus, or toolbars.

Menu Bars

The first time you run Visual C++, three toolbars display just below the menu bar. Many other toolbars are available in Visual C++, and you can customize and create your own toolbars to accommodate how you best work. The three toolbars that are initially open are the following:

The WizardBar toolbar enables you to perform a number of Class Wizard actions without opening the Class Wizard.

Rearranging the Developer Studio Environment

The Developer Studio provides two easy ways to rearrange your development environment. The first is by right-clicking your mouse over the toolbar area. This action opens the pop-up menu shown in Figure 1.2, allowing you to turn on and off various toolbars and panes.

FIGURE 1.2. Toolbar on and off menu.

Another way that you can easily rearrange your development environment is to grab the double bars at the left end of any of the toolbars or panes with the mouse. You can drag the toolbars away from where they are currently docked, making them floating toolbars, as in Figure 1.3. You can drag these toolbars (and panes) to any other edge of the Developer Studio to dock them in a new spot. Even when the toolbars are docked, you can use the double bars to drag the toolbar left and right to place the toolbar where you want it to be located.

FIGURE 1.3. Example of a floating minibar.

NOTE: On the workspace and Output panes, the double bars that you can use to drag the pane around the Developer Studio environment might appear on the top of the pane or on the left side, depending on how and where the pane is docked.

Starting Your First Project

For your first Visual C++ application, you are going to create a simple application that presents the user with two buttons, as in Figure 1.4. The first button will present the user with a simple greeting message, shown in Figure 1.5, and the second button will close the application. In building this application, you will need to do the following things:

1. Create a new project workspace.

2. Use the Application Wizard to create the application framework.

3. Rearrange the dialog that is automatically created by the Application Wizard to resemble how you want the application to look.

4. Add the C++ code to show the greeting to the user.

5. Create a new icon for the application.

FIGURE 1.4. Your first Visual C++ application.

FIGURE 1.5. If the user clicks the first button, a simple greeting is shown.

Creating the Project Workspace

Every application development project needs its own project workspace in Visual C++. The workspace includes the directories where the application source code is kept, as well as the directories where the various build configuration files are located. You can create a new project workspace by following these steps:

1. Select File | New. This opens the New Wizard shown in Figure 1.6.

FIGURE 1.6. The New Wizard.

2. On the Projects tab, select MFC AppWizard (exe).

3. Type a name for your project, such as Hello, in the Project Name field.

4. Click OK. This causes the New Wizard to do two things: create a project directory (specified in the Location field) and then start the AppWizard.

Using the Application Wizard to Create the Application Shell

The AppWizard asks you a series of questions about what type of application you are building and what features and functionality you need. It uses this information to create a shell of an application that you can immediately compile and run. This shell provides you with the basic infrastructure that you need to build your application around. You will see how this works as you follow these steps:

1. In Step 1 of the AppWizard, specify that you want to create a Dialog-based application. Click Next at the bottom of the wizard.

2. In Step 2 of the AppWizard, the wizard asks you about a number of features that you can include in your application. You can uncheck the option for including support for ActiveX controls if you will not be using any ActiveX controls in your application. Because you won't be using any ActiveX controls in today's application, go ahead and uncheck this box.

3. In the field near the bottom of the wizard, delete the project name (Hello) and type in the title that you want to appear in the title bar of the main application window, such as My First Visual C++ Application. Click Next at the bottom of the wizard.

4. In Step 3 of the AppWizard, leave the defaults for including source file comments and using the MFC library as a DLL. Click Next at the bottom of the wizard to proceed to the final AppWizard step.

5. The final step of the AppWizard shows you the C++ classes that the AppWizard will create for your application. Click Finish to let AppWizard generate your application shell.

6. Before AppWizard creates your application shell, it presents you with a list of what it is going to put into the application shell, as shown in Figure 1.7, based on the options you selected when going through the AppWizard. Click OK and AppWizard generates your application.

FIGURE 1.7. The New Project Information screen.

8. Select Build | Build Hello.exe to compile your application.

9. As the Visual C++ compiler builds your application, you see progress and other compiler messages scroll by in the Output pane. After your application is built, the Output pane should display a message telling you that there were no errors or warnings, as in Figure 1.9.

FIGURE 1.8. Your workspace with a tree view of the project's classes.

FIGURE 1.9. The Output pane displays any compiler errors.

10. Select Build | Execute Hello.exe to run your application.

11. Your application presents a dialog with a TODO message and OK and Cancel buttons, as shown in Figure 1.10. You can click either button to close the application.

FIGURE 1.10. The unmodified application shell.

Designing Your Application Window

Now that you have a running application shell, you need to turn your focus to the window layout of your application. Even though the main dialog window may already be available for painting in the editor area, you should still navigate to find the dialog window in the workspace so that you can easily find the window in subsequent develop-ment efforts. To redesign the layout of your application dialog, follow these steps:

1. Select the Resource View tab in the workspace pane, as in Figure 1.11.

FIGURE 1.11. The Resource View tab in the workspace pane.

2. Expand the resources tree to display the available dialogs. At this point, you can double-click the IDD_DAY1_DIALOG dialog to open the window in the Developer Studio editor area.

3. Select the text displayed in the dialog and delete it using the Delete key.

4. Select the Cancel button, drag it down to the bottom of the dialog, and resize it so that it is the full width of the layout area of the window, as in Figure 1.12.

FIGURE 1.12. Positioning the Cancel button.

5. Right-click the mouse over the Cancel button, opening the pop-up menu in Figure 1.13. Select Properties from the menu, and the properties dialog in Figure 1.14 opens.

FIGURE 1.13. Right-clicking the mouse to open a pop-up menu.

FIGURE 1.14. The Cancel button properties dialog.

6. Change the value in the Caption field to &Close. Close the properties dialog by clicking the Close icon in the upper-right corner of the dialog.

7. Move and resize the OK button to around the middle of the window, as in Figure 1.15.

FIGURE 1.15. Positioning the OK button.

8. On the OK button properties dialog, change the ID value to IDHELLO and the caption to &Hello.

9. Now when you compile and run your application, it will look like what you've just designed, as shown in Figure 1.16.

FIGURE 1.16. Running your redesigned application.

NOTE: If you play with your application, you will notice that the Close button still closes the application. However, the Hello button no longer does anything because you changed the ID of the button. MFC applications contain a series of macros in the source code that determine which functions to call based on the ID and event message of each control in the application. Because you changed the ID of the Hello button, these macros no longer know which function to call when the button is clicked.

Adding Code to Your Application

You can attach code to your dialog through the Visual C++ Class Wizard. You can use the Class Wizard to build the table of Windows messages that the application might receive, including the functions they should be passed to for processing, that the MFC macros use for attaching functionality to window controls. You can attach the functionality for this first application by following these steps:
1. To attach some functionality to the Hello button, right-click over the button and select Class Wizard from the pop-up menu.

2. If you had the Hello button selected when you opened the Class Wizard, it is already selected in the list of available Object IDs, as in Figure 1.17.

FIGURE 1.17. The Class Wizard.

3. With IDHELLO selected in the Object ID list, select BN_CLICKED in the list of messages and click Add Function. This opens the Add Member Function dialog shown in Figure 1.18. This dialog contains a suggestion for the function name. Click OK to create the function and add it to the message map.

FIGURE 1.18. The Class Wizard Add Member Function dialog.

4. After the function is added for the click message on the Hello button, select the OnHello function in the list of available functions, as in Figure 1.19. Click the Edit Code button so that your cursor is positioned in the source code for the function, right at the position where you should add your functionality.

FIGURE 1.19. The list of available functions in the Class Wizard.

5. Add the code in Listing 1.1 just below the TODO comment line, as shown in Figure 1.20.

FIGURE 1.20. Source code view where you insert Listing 1.1.

LISTING 1.1.HELLODLG.CPP--THE OnHello FUNCTION.

 1: Void CHelloDlg::OnHello()
 2: {
 3:     // TODO: Add your control notification handler code here
 4: 
 5:     ///////////////////////
 6:     // MY CODE STARTS HERE
 7:     ///////////////////////
 8: 
 9:     // Say hello to the user
10:     MessageBox("Hello. This is my first Visual C++ Application!");
11: 
12:     ///////////////////////
13:     // MY CODE ENDS HERE
14:     ///////////////////////

15: }
6. When you compile and run your application, the Hello button should display the message shown in Figure 1.21.

FIGURE 1.21. Now your application will say hello to you.

Finishing Touches

Now that your application is functionally complete, you can still add a few details to finish off the project. Those finishing touches include

Creating the Dialog Box Icon

If you noticed the icon in the top-left corner of your application window, you saw three blocks with the letters M, F, and C. What does MFC have to do with your application? MFC stands for Microsoft Foundation Classes. Technically, it's the C++ class library that your application is built with, but do you want to broadcast that to every user who sees your application? Most likely not. You need to edit the application icon to display an image that you do want to represent your application. Let's get busy!

1. In the tree view of your application resources in the workspace pane, expand the icon branch and select the IDR_MAINFRAME icon, as in Figure 1.22. This brings the application icon into the editor area of the Developer Studio.

FIGURE 1.22. The standard MFC icon.

2. Using the painting tools provided, repaint the icon to display an image that you want to use to represent your application, as in Figure 1.23.

FIGURE 1.23. Your own custom icon for your application.

3. When you compile and run your application, you will notice your custom icon in the top-left corner of your application window. Click the icon and select About Hello from the drop-down menu.

4. On the About dialog that Visual C++ created for you, you can see a large version of your custom icon in all its glory, as shown in Figure 1.24.

FIGURE 1.24. Your application's About window.

NOTE: When you open an application icon in the icon designer, the icon is sized by default at 32x32. You can also select a 16x16 size icon from the drop-down list box just above where you are drawing the icon. You should draw both of these icons because there are some instances in which the large icon will be displayed and some instance in which the small icon will be shown. You will want both icons to show the same image to represent your application.

Adding Maximize and Minimize Buttons

In the dialog editor, where you design your application window, you can add the minimize and maximize buttons to the title bar of your application window by following these steps:

1. Select the dialog window itself as if you were going to resize the window.

2. Using the pop-up menu (from right-clicking the mouse), select the dialog properties.

3. Select the Styles tab, as shown in Figure 1.25.

FIGURE 1.25. Turning the minimize and maximize buttons on and off.


4. After you turn on the minimize and maximize boxes, you can compile and run your application. The minimize and maximize buttons appear on the title bar, as in Figure 1.26.

FIGURE 1.26. The application window with the minimize and maximize buttons.

Summary

Today you got your first taste of building applications using Visual C++. You learned about the different areas of the Visual C++ Developer Studio and what function each of these areas serves. You also learned how you can rearrange the Developer Studio environment to suit the way you work. You also learned how you can use the Visual C++ wizards to create an application shell and then attach functionality to the visual components that you place on your application windows.

Q&A

Q How can I change the title on the message box, instead of using the application name?

A By default, the message box window uses the application name as the window title. You can change this by adding a second text string to the MessageBox function call. The first string is always the message to be displayed, and the second string is used as the window title. For example, the OnHello function would look like 

// Say hello to the user
MessageBox("Hello. This is my first Visual C++ Application!", 

           "My First Application");
Q Can I change the text on the About window to give my company name and more detailed copyright information?

A Yes, the About window is in the Dialogs folder in the Resources View tab of the workspace pane. If you double-click the IDD_ABOUTBOX dialog, the About box will be opened in the dialog designer, where you can redesign it however you want.

Workshop

The Workshop provides quiz questions to help solidify your understanding of the material covered and exercises to provide you with experience in using what you've learned. The answers to the quiz questions and exercises are provided in Appendix B, "Answers."

Quiz

1. How do you change the caption on a button?

2. What can you do with the Visual C++ AppWizard?

3. How do you attach functionality to the click of a button?

Exercise

Add a second button to the About window in your application. Have the button display a different message from the one on the first window.

Previous chapterNext chapterContents

© Copyright, Macmillan Computer Publishing. All rights reserved.