Additional Components

The first thing we wish to concentrate on in this chapter is how to use additional components. This means you will get more experience using the application wizard, dialog applications, and the class wizard. You have already seen the use of Edit boxes and buttons. You should be at least moderately comfortable with these components. Another important component to become familiar with is the radio button. A radio button is used to allow a user to make a single choice between several mutually exclusive choices. For example if you wanted a user to tell you if his or her age was between 18 and 30, 31 and 40, 41 and 64, or over 65. These are mutually exclusive choices. Only one choice can be true. For situations like this, a radio button is a good choice. In this next example, you will see how to use the radio button, and you will also get another chance to work with the Button and Edit boxes. Table 16.1 lists some option button methods.

Table 16.1: Option Button Methods and Properties




This method is executed when the radio button is clicked.


This property makes the button appear flat rather than three-dimensional.


This property is used to associate an icon with a button.


This property is used to associate a specific bitmap with a radio button.


This property sets the caption to display. This is not the same as the ID. The ID is what your code will use to refer to the component. The caption is what your users will see.

Example 16.1

Step 1: Start a new dialog application using the application wizard and default values. This will follow the same process you followed in the previous chapter.

Step 2: Place four radio buttons, two Edit boxes, and one button on the dialog. It should look like what you see in Figure 16.1.

click to expand
Figure 16.1: Dialog layout for Example 16.1.

Step 3: On each of the components, you will right-click the mouse to get to its properties. You will then change their captions to match the captions depicted in Figure 16.2.

click to expand
Figure 16.2: Component captions.

Step 4: Now you will need to use the class wizard to associate a variable with each of the Edit boxes. You will do this by right-clicking on a component and choosing class wizard. You then select the member variables tab and add a variable. This is shown for the first Edit box in Figure 16.3.

click to expand
Figure 16.3: Providing variables for the components.


The Edit boxes should be given a float type variable as shown in Figure 16.4.

click to expand
Figure 16.4: Using a float variable with Edit box 1.

You will also use the properties dialog to change the names of the button and the four radio buttons. The button’s ID (the ID is another word for its name) will be changed to IDC_CONVERT , this is shown in Figure 16.4. The option buttons’ names will be changed to match their captions. The following names will be used.


As was mentioned in Chapter 1, proper naming of variables can make your code much more readable and, hence, maintainable. Now you can double-click on any component on the dialog and scroll to the top. We are going to create a global variable and some global constants.

int OptionSelected; const int CMTOINCH = 1; const int INCHTOCM = 2; const int LBTOKG = 3; const int KGTOLB = 4;

Step 5: Now you are going to double-click on each of the radio buttons, thus creating a function that matches that radio button. You will then add a single line of code that will set the OptionSelected variable to a constant that matches the radio button clicked. This should look like what you see here.

void CExample16_01Dlg::OnCmtoinch()  {      OptionSelected = CMTOINCH;    }

Step 6: Now you can double-click on the convert button and add the following code.

void CExample16_01Dlg::OnConvert()  {      float answer;  UpdateData(TRUE);  switch(OptionSelected)  {  case CMTOINCH:    answer = m_input * .3937007f;        break;  case INCHTOCM:    answer = m_input * 2.54f;        break;  case LBTOKG:    answer = m_input *.454545f;        break;  case KGTOLB:    answer = m_input * 2.2f;        break;  default:    AfxMessageBox("Please make a selection");   }//end switch m_output = answer; UpdateData(FALSE); }

Step 7: Now compile and execute your code. You should see something like what is shown in Figure 16.5.

click to expand
Figure 16.5: Unit conversions.

Let’s take a look at exactly what is happening in this application. Essentially we use the onClick function of the radio buttons to set a variable named OptionSelected. That variable’s value will tell us which conversion was selected. We then simply retrieve the value from the first edit box. Next there is a simple switch case statement that uses the value in OptionSelected to choose the appropriate formula to execute. Finally, we place the answer into the second Edit box. This is a relatively straightforward piece of code. The only thing new in this program is the use of the radio buttons.

Two other important components you need to be comfortable with are the list box and combo box. A list box is used to present a list, which you select from. All items are presented at a single time. A combo box is much like a list box, except only a single item is initially displayed and then the other items show as a drop-down list. These two components are commonly used in Windows programming, so it would behoove us to examine them in some detail. The next example should help you to become better acquainted with these two components. First, however, you should study Tables 16.2 and 16.3 to see the methods and properties of the list box and the combo box.

Table 16.2: List Box Methods and Properties




This method is executed when an item in the list box is double-clicked.


This method is executed when the list box receives focus.


This property causes the list box to automatically be sorted.


This property causes the list box to have a border.


This property determines what kind of selection the user can make. The options are: Single, Multiple, Extended, and None.

Table 16.3: Combo Box Methods and Properties




This property causes the items to be sorted.

Vertical Scroll

This property causes a vertical scroll bar to be placed in the combo box.


This property allows you to select what type of combo box you wish. The choices are simple, drop-down list, and drop-down combo.


This property causes all items in the combo box to be displayed in all uppercase.

Example 16.2

Step 1: Start a new dialog application, just as you did in the previous example.

Step 2: Place a list box and a combo box on the dialog.


Remember that the area you draw the combo box to fill is the area it will drop down to when you click on it. That’s why you should draw it out to a significant size, as you see in Figure 16.6.

click to expand
Figure 16.6: The combo box.

Step 3: You will also place Edit box on the screen. It should look like what you see in Figure 16.7.

click to expand
Figure 16.7: The dialog component layout.

Step 4: Next, you will need to give a variable to each of the components. Each variable will be a CString variable type, as you see in Figure 16.8.

click to expand
Figure 16.8: Component names.

Step 5: Next, we add a few items to the combo box. You do this by right-clicking on the combo box and selecting properties. You then choose the data tab. After you enter each item, press the CTRL – ENTER keys. We are going to enter the names of several popular programming languages, as you see in Figure 16.9.

click to expand
Figure 16.9: Combo box data.

When you are done, simply press the enter key to close the property window.

Step 6: Add one more variable. This one will be for the list box, but we will change its type from value to control. This means it will represent the actual component. This should look similar to Figure 16.10.

click to expand
Figure 16.10: A variable for the list box.

Now we will need to add code to the OnInitDialog function to add items to the list box. You get to that function via the class wizard, as you see in Figure 16.11.

click to expand
Figure 16.11: Editing the OnInitDialog.

Step 7: Now, after you have clicked on edit code and are ready to edit the OnInitDialog function, you will simply add a few lines of code.

m_listbox.AddString("C++ is awesome"); m_listbox.AddString("Bjarne Stroustrap is cool"); m_listbox.AddString("Object Oriented programming is   great!");

Figure 16.12: Running the dialog application.

This application, while admittedly simple, illustrates how to use the combo box and the list box. There are, however, a few items that need some further explanation. The OnInitDialog is a function that is executed as soon as the dialog is loaded into memory. It’s a good place to do any code that you want executed before the user can do anything else. You can think of this function as being similar to a class’s constructor. For those of you with a background in Visual Basic, the OnInitDialog is analogous to the form load event. You should also notice that there are different types of variables that can be associated with a given component. The value variables are standard data types that represent the data the component holds. The control variables represent the component itself, and give you access to that component’s methods.

These are just two more components you have available to you in Visual C++. Covering every component available to you is beyond the scope of this book. However, the Edit box, button, list box, combo box, and static text are perhaps the most commonly used. The Help files that ship with Visual C++ give you a nice overview of how to use other components in Visual C++.

click to expand
Figure 16.13: Resource tab.

C++ Programming Fundamentals
C++ Programming Fundamentals (Cyberrookies)
ISBN: 1584502371
EAN: 2147483647
Year: 2005
Pages: 197
Authors: Chuck Easttom © 2008-2017.
If you may any questions please contact us: