Controls for Gathering Input | Microsoft Visual Basic 2005 Step by Step (Step by Step (Microsoft))

Controls for Gathering Input

Visual Basic provides several mechanisms for gathering input in a program. Text boxes accept typed input, menus present commands that can be clicked or chosen with the keyboard, and dialog boxes offer a variety of elements that can be chosen individually or selected in a group. In this exercise, you'll learn how to use four important controls that help you gather input in several different situations. You'll learn about the RadioButton, CheckBox, ListBox, and Combo-Box controls. You'll explore each of these objects as you use a Visual Basic program called Input Controls, which is the user interface for a simple, graphics-based ordering system. As you run the program, you'll get some hands-on experience with the input objects. In the next chapter, I'll discuss how these objects can be used along with menus in a full-fledged program.

As a simple experiment, try using the CheckBox control now to see how user input is processed on a form and in program code.

Experiment with the CheckBox control

On the File menu, click Close Project to close the Birthday project.
On the File menu, click New Project.

The New Project dialog box appears.
Create a new Visual Basic Windows Application project named MyCheckBox.

The new project is created, and a blank form appears in the Designer.
Click the CheckBox control in the Toolbox.
Draw two check box objects on the form, one above the other.

Check boxes appear as objects on your form just as other objects do. You'll have to click the Checkbox in the Toolbox a second time for the second check box.
Using the PictureBox control, draw two square picture box objects beneath the two check boxes.

Set the following properties for the check box and picture box objects:

Object	Property	Setting
CheckBox1	Checked Text	True “Calculator”
CheckBox2	Text	“Copy machine”
PictureBox1	Image SizeMode	c:\vb05sbs\chap03\calcultr.bmp StretchImage
PictureBox2	SizeMode	StretchImage

In this walkthrough, you'll use the check boxes to display and hide images of a calculator and a copy machine. The Text property of the check box object determines the contents of the check box label in the user interface. With the Checked property, you can set a default value for the check box. Setting Checked to True places a check mark in the box, and setting Checked to False (the default setting) removes the check mark. I use the SizeMode properties in the picture boxes to size the images so that they stretch to fit in the picture box.

Your form looks something like this:

Double-click the first check box object to open the CheckBox1_CheckedChanged event procedure in the Code Editor, and then enter the following program code:
```
If CheckBox1.CheckState = 1 Then      PictureBox1.Image = System.Drawing.Image.FromFile _        ("c:\vb05sbs\chap03\calcultr.bmp")      PictureBox1.Visible = True  Else      PictureBox1.Visible = False  End If
```
The CheckBox1_CheckedChanged event procedure runs only if the user clicks in the first check box object. The event procedure uses an If…Then decision structure (described in Chapter 6, “Using Decision Structures”) to confirm the current status, or state, of the first check box, and it displays a calculator picture from the c:\vb05sbs\chap03 folder if a check mark is in the box. The CheckState property holds a value of 1 if there's a check mark present and 0 if there's no check mark present. I use the Visible property to display the picture if a check mark is present or to hide the picture if a check mark isn't present. Notice that I wrapped the long line that loads the image into the picture box object by using the line continuation (_) character.
Click the View Designer button in Solution Explorer to display the form again, double-click the second check box, and then add the following code to the CheckBox2_Checked-Changed event procedure:
```
If CheckBox2.CheckState = 1 Then      PictureBox2.Image = System.Drawing.Image.FromFile _        ("c:\vb05sbs\chap03\copymach.bmp")      PictureBox2.Visible = True  Else      PictureBox2.Visible = False  End If
```
This event procedure is almost identical to the one that you just entered; only the names of the image (copymach.bmp), the check box object (CheckBox2), and the picture box object (PictureBox2) are different.
Click the Save All button on the Standard toolbar to save your changes, specifying the c:\vb05sbs\chap03 folder as the location.

Run the CheckBox program

TIP
The complete CheckBox program is located in the c:\vb05sbs\chap03\checkbox folder.

Click the Start Debugging button on the Standard toolbar.

Visual Basic runs the program in the IDE. The calculator image appears in a picture box on the form, and the first check box contains a check mark.
Select the Copy Machine check box.

Visual Basic displays the copy machine image, as shown here:
Experiment with different combinations of check boxes, selecting or clearing the boxes several times to test the program. The program logic you added with a few short lines of Visual Basic code manages the boxes perfectly. (You'll learn much more about program code in upcoming chapters.)
Click the Close button on the form to end the program.

The Input Controls Demo

Now that you've had a little experience with check boxes, run and examine the Input Controls demonstration program that I created to simulate a graphical ordering environment that makes more extensive use of check boxes, radio buttons, a list box, and a combo box. If you work in a business that does a lot of order entry, you might want to expand this program into a full-featured graphical order entry program. After you experiment with Input Controls, spend some time learning how the four input controls work in the program. They were created in a few short steps by using Visual Basic and the techniques you just learned.

Run the Input Controls program

On the File menu, click Open Project.

The Open Project dialog box appears.
Open the c:\vb05sbs\chap03\input controls folder, and then double-click the Input Controls project file (Input Controls.vbproj).

As I mentioned earlier, you may open either the project file (Input Controls.vbproj) or the solutions file (Input Controls.sln) to open solutions with only one project. In either case, the Input Controls project opens in the IDE.
If the project's form isn't visible, click the Form1.vb form in Solution Explorer, and then click the View Designer button.
Move or close the windows that block your view of the form so that you can see how the objects are laid out.

You see a form similar to this:

The Input Controls form contains radio button, check box, list box, combo box, picture box, button, and label objects. These objects work together to create a simple order entry program that demonstrates how the Visual Basic input objects work. When the Input Controls program is run, it loads images from the c:\vb05sbs\chap03\input controls folder and displays them in the six picture boxes on the form.

NOTE
If you installed the practice files in a location other than the default c:\vb05sbs folder, the statements in the program that load the artwork from the disk contain an incorrect path. (Each statement begins with c:\vb05sbs\chap03\input controls, as you'll see soon.) If this is the case, you can make the program work by renaming your practice files folder \vb05sbs or by changing the paths in the Code Editor by using the editing keys or the Quick Replace command on the Edit menu.
Click the Start Debugging button on the Standard toolbar.

The program runs in the IDE.
Click the Laptop radio button in the Computer box.

The image of a laptop computer appears in the Products Ordered area on the right side of the form. The user can click various options, and the current choice is depicted in the order area on the right. In the Computer box, a group of radio buttons is used to gather input from the user.

Radio buttons force the user to choose one (and only one) item from a list of possibilities. (Radio buttons are called option buttons in Visual Basic 6.) When radio buttons are placed inside a group box object on a form, the radio buttons are considered to be part of a group, and only one option can be chosen. To create a group box, click the GroupBox control on the Containers tab of the Toolbox, and then draw the control on your form. (The GroupBox control replaces the Frame control in Visual Basic 6.) You can give the group of radio buttons a title (as I have) by setting the Text property of the group box object. When you move a group box object on the form, the controls within it also move.
Click to select the Answering Machine, Calculator, and Copy Machine check boxes in the Office Equipment box.

Check boxes are used in a program so that the user can select more than one option at a time from a list. Click to clear the Calculator check box again, and notice that the picture of the calculator disappears from the order area. Because each user interface element responds to click events as they occur, order choices are reflected immediately. The code that completes these tasks is nearly identical to the code you entered earlier in the CheckBox program.
Click Satellite Dish in the Peripherals list box.

A picture of a satellite dish is added to the order area.

List boxes are used to get a single response from a list of choices. They are created with the ListBox control, and might contain many items to choose from. (Scroll bars appear if the list of items is longer than the list box.) Unlike radio buttons, a list box doesn't require that the user be presented with a default selection. And from a programmatic standpoint, items in a list box can be added to, removed from, or sorted while the program is running. If you would like to see check marks next to the items in your list box, use the CheckedListBox control in the Toolbox instead of the ListBox control.
Now choose U.S. Dollars (sorry, no credit) from the payment list in the Payment Method combo box.

Combo boxes, or drop-down list boxes, are similar to regular list boxes, but they take up less space. (The “combo” in a combo box basically comes from a “combination” of an editable text box and a drop-down list.) Visual Basic automatically handles the opening, closing, and scrolling of the list box. All you do as a programmer is create the combo box by using the ComboBox control in the Toolbox, set the Text property to provide directions or a default value, and then write code to add items to the combo box and to process the user's combo box selection. You'll see examples of each task in the program code for the Input Controls demonstration in the next section.

After you make your order selections, your screen looks something like this:
Practice making a few more changes to the order list in the program (try different computers, peripherals, and payment methods), and then click the Quit button in the program to exit.

When you click Quit, the program closes, and the IDE appears.

Looking at the Input Controls Program Code

Although you haven't had much formal experience with program code yet, it's worth taking a quick look at a few event procedures in Input Controls to see how the program processes input from the user interface elements. In these procedures, you'll see the If…Then and Select Case statements at work. You'll learn about these and other decision structures in Chapter 6. For now, concentrate on the CheckState property, which changes when a check box is selected, and the SelectedIndex property, which changes when a list box is selected.

Examine check box and list box code

Be sure the program has stopped running, and then double-click the Answering Machine check box in the Office Equipment group box to display the CheckBox1_CheckedChanged event procedure in the Code Editor.

You see the following program code:
```
'If the CheckState property for a check box is 1, it has a mark in it  If CheckBox1.CheckState = 1 Then      PictureBox2.Image = System.Drawing.Image.FromFile _        ("c:\vb05sbs\chap03\input controls\answmach.bmp")      PictureBox2.Visible = True  Else      'If there is no mark, hide the image      PictureBox2.Visible = False  End If
```
As you learned in Chapter 2, the first line of this event procedure is a comment. Comments are displayed in green type and are simply notes written by the programmer to describe what's important or interesting about this particular piece of program code. (Comments are also occasionally generated by automated programming tools that compile programs or insert code snippets.) I wrote this comment to remind myself that the CheckState property contains a crucial value in this routine—a value of 1 if the first check box was checked.

The rest of the event procedure is nearly identical to the one you just wrote in the CheckBox program. If you scroll down in the Code Editor, you see a similar event procedure for the CheckBox2 and CheckBox3 objects.
At the top edge of the Code Editor, click the Form1.vb [Design] tab to display the form again, and then double-click the Peripherals list box on the form.

The ListBox1_SelectedIndexChanged event procedure appears in the Code Editor. You see the following program statements:
```
'The item you picked (0-2) is held in the SelectedIndex property  Select Case ListBox1.SelectedIndex      Case 0          PictureBox3.Image = System.Drawing.Image.FromFile _            ("c:\vb05sbs\chap03\input controls\harddisk.bmp")      Case 1          PictureBox3.Image = System.Drawing.Image.FromFile _            ("c:\vb05sbs\chap03\input controls\printer.bmp")      Case 2          PictureBox3.Image = System.Drawing.Image.FromFile _            ("c:\vb05sbs\chap03\input controls\satedish.bmp")  End Select
```
Here you see code that executes when the user clicks an item in the Peripherals list box in the program. In this case, the important keyword is ListBox1.SelectedIndex, which is read “the SelectedIndex property of the first list box object.” After the user clicks an item in the list box, the SelectedIndex property returns a number that corresponds to the location of the item in the list box. (The first item is numbered 0, the second item is numbered 1, and so on.)

In the previous code, SelectedIndex is evaluated by the Select Case decision structure, and a different image is loaded depending on the value of the SelectedIndex property. If the value is 0, a picture of a hard disk is loaded; if the value is 1, a picture of a printer is loaded; and if the value is 2, a picture of a satellite dish is loaded. You'll learn more about how the Select Case decision structure works in Chapter 6.
At the top edge of the Code Editor, click the Form1.vb [Design] tab to display the form again, and then double-click the form (not any of the objects) to display the code associated with the form itself.

The Form1_Load event procedure appears in the Code Editor. This is the procedure that's executed each time the Input Controls program is loaded into memory. Programmers put program statements in this special procedure when they want them executed every time a form loads. (Your program can display more than one form, or none at all, but the default behavior is that Visual Basic loads and runs the Form1_Load event procedure each time the user runs the program.) Often, as in the Input Controls program, these statements define an aspect of the user interface that couldn't be created by using the controls in the Toolbox or the Properties window.

Here's what the Form1_Load event procedure looks like for this program:
```
'These program statements run when the form loads  PictureBox1.Image = System.Drawing.Image.FromFile _    ("c:\vb05sbs\chap03\input controls\pcomputr.bmp")  'Add items to a list box like this:  ListBox1.Items.Add("Extra hard disk")  ListBox1.Items.Add("Printer")  ListBox1.Items.Add("Satellite dish")  'Combo boxes are also filled with the Add method:  ComboBox1.Items.Add("U.S. Dollars")  ComboBox1.Items.Add("Check")  ComboBox1.Items.Add("English Pounds")
```
Three lines in this event procedure are comments displayed in green type. The second line in the event procedure loads the personal computer image into the first picture box. (This line is broken in two using a space and the line continuation character, but the compiler still thinks of it as one line.) Loading an image establishes the default setting reflected in the Computer radio button group box. Note also that text between double quotes is displayed in red type.

The next three lines add items to the Peripherals list box (ListBox1) in the program. The words in quotes will appear in the list box when it appears on the form. Below the list box program statements, the items in the Payment Method combo box (ComboBox1) are specified. The important keyword in both these groups is Add, which is a special function, or method, that adds items to list box and combo box objects.

You're finished using the Input Controls program. Take a few minutes to examine any other parts of the program you're interested in, and then move on to the next exercise.