Hour 4

Examining Labels, Buttons, and Text Boxes

It's time to get serious about controls! This lesson dives deeply into the three most common controls and explains how you can use them and manage them in your applications. By the time you complete this lesson, you will have mastered labels, command buttons, and text boxes. In addition, you will learn more about how to properly set up a form.

You'll place labels on forms to display information. Command buttons give the user pushbutton control within applications. Text boxes get information from the user and process that information inside the program.

The highlights of this hour include

Control Focus

New Term: The currently active control at runtime has the focus.

Before looking at this lesson's three controls, you need to master the concept of focus. Focus is a runtime concept. At runtime, only one window, form (which appears as a window), or control can have the focus. The window or form currently in focus is the form whose title bar is highlighted (typically colored blue). The control with the current focus has an outlined border or caption.


WARNING: Don't confuse focus with a selected control. At design time you select controls by clicking them to display their sizing handles. At runtime, one control always has the focus, and users can change the focus by pressing Tab or Shift+Tab.

Focus is important because the focus determines what the next keystroke or Enter keypress will activate. For example, consider the screen shown in Figure 4.1. The figure shows a VB session with several windows, including two windows from the executing program. The center window is the window with the focus, and you know so because of the highlighted title bar. Therefore, the center window is the window that receives keystrokes if and when the user presses a key.

Only one control on the active window can have the focus. The check box labeled AutoSize has the current focus. Notice the outline around the control. In other words, despite the other windows on the screen at the time, if the user presses Enter under Figure 4.1's circumstances, the check box receives that Enter keystroke. If you understand the way check boxes work, you know that a check box is either checked or unchecked, meaning that the control determines one of two states. If the user presses Enter, the AutoSize check box will turn to unchecked.


NOTE: Of course the user can click the AutoSize check box to uncheck the control. In addition, the user can click any control in any window on the screen and that control would receive the click. Focus refers to a window's and control's capability to receive keystrokes.

Figure 4.1. Learning to spot windows and controls with the focus.

Different controls display the focus in different ways. Only one of Figure 4.2's seven command buttons can have the focus at any one time. Can you spot the command button that has the focus? The extra dotted outline around the Images command button lets you know that the Images command button has the focus and that command button will receive an Enter keypress if the user presses Enter.

Figure 4.2. One of these seven command buttons has the focus.

The Mouse and Hotkeys Need No Focus

As stated earlier, a mouse click does not have to worry about focus. Wherever the user clicks, the mouse gets the mouse click no matter which window and control had the focus before the click. In addition, within the active window, the user can select any control by pressing that control's hotkey. For example, with Figure 4.2 showing, the user could press Alt+X to select the command button labeled Text Box even though the command button labeled Images has the focus.

An Enter keypress has no inherent location. Without focus, Windows would have no way to determine where or what the Enter keypress is to activate. With a hotkey, Windows keeps the hotkey possibility within the window with the focus. In other words, if two windows appear on your screen and both contain controls with Alt+S keystrokes, only the active window with the current focus would receive and respond to Alt+S.

The mouse is inherently directional as well as functional. When you click the mouse button over any window's control on the screen, Windows knows for certain that you wanted to click over that control. No ambiguity can exist as could happen with the Enter key. Therefore, focus does not apply to the mouse.

Related Properties

A command button's Cancel property relates somewhat to focus. Whereas the focus determines which control gets the Enter keypress, a command button's Cancel property determines which command button gets a simulated Click event when the user presses the Esc key.


TIP: Often, a command button used to exit an application or close a dialog box has its Cancel property set to True. Therefore, you can close such applications or dialog boxes by clicking the command button or by pressing Esc.

A command button's Default property also relates somewhat to focus. When a form first appears, the command button with the Default property of True receives the Click event when the user presses Enter. Another control might have the focus at that time, but if a command button has a Default property value of True, that button receives a Click event if the user presses Enter unless the user moves the focus to another command button before pressing Enter. Only one command button can have a Default value of True at any one time. As soon as you assign a command button's Default value True, either at design time or at runtime, any other command button on the form with a True Default value immediately changes to False. Therefore, Visual Basic protects a form's integrity by ensuring that only one command button can have a True Default value at any one time.

Tab Order

The user can move the focus from control to control by pressing Tab (or Shift+Tab to move the focus backward). If you place eight controls on an application's form, what focus order will result? In other words, as the user presses Tab, will the controls get the focus from a left-to-right or from a top-to-bottom order?

VB sets the default focus order in the order you place controls on the form. Therefore, if you place the top control first and the bottom control second, and then insert a third control in the middle of the form, the focus order will not move down the form in the order the user probably expects.

You do not always place controls on a form in the same order in which you want to set the focus. Therefore, controls that can receive the focus support a property called the TabIndex property. The first control in the focus order has a TabIndex property of 0, the second control in the focus order has a TabIndex of 1, and so on. If you place controls on the form and then later want to modify the focus order, you need to change the controls' TabIndex property values.


TIP: Not all controls can actually accept the focus. For example, a label cannot receive keystrokes, so a label never gets the focus. The Label control does include the TabIndex property, however. By setting the label's TabIndex value to one more than a text box next to the label, you can add a hotkey to the label's Caption property, and the user then has a way to hotkey to the text box. Text boxes do not support hotkey keystrokes by themselves.

Command Buttons

Command buttons appear in almost every window of every Windows application. Command buttons determine when the user wants to do something, such as exit the application or begin printing. In almost every case, you will perform these tasks to add a command button to an application:

1. Locate and size the command button on the form.

2.
Change the command button's Name and Caption properties. (The Caption property holds the text that appears on the command button.)

3.
Add code to the command button's Click event procedure.

Although the command button control supports 36 properties, you'll only set the Name and Caption properties in most cases. In addition, although command button controls support 15 events, you'll only write code for the Click event in most cases. After all, a command button resides on most forms just so the user can click the button to trigger some event that the user is ready to start.


NOTE: By the way, you can set some properties only at design time (such as a control's Name property), you can set some properties both at design time and at runtime inside event procedures and other module code (such as a caption), and you can set some properties only at runtime from within the program (such as a list box's entries). All of a control's properties that appear in the Properties window are settable at design time, and some of those you can set at runtime as well. As you learn more about Visual Basic, you will become familiar with the properties you can set only at runtime.

Although you'll set the command button's Name and Caption properties most of the time, setting the Caption property often requires that you change the font to increase or decrease the text size and style on the caption. Of course, you might want to center the caption text or, perhaps, left-justify or right-justify the text, so you also might need to change the Alignment property. In reality, you'll also set the Left, Height, Top, and Width properties when you size and locate the command button because, as you learned in Hour 3, "Controls and Properties," these properties update automatically when you place and size controls.

As you can see, although you only seem to set a couple properties for most controls, the other properties really do play important roles, and you'll almost always end up setting several properties to finalize your application. Table 4.1 lists some of the most common command button properties that you'll set.

New Term: An icon is a small graphical image, stored in a file with the .ICO filename extension, that often appears on toolbar buttons.

Table 4.1. Common command button properties.
Property Description
BackColor Specifies the command button's background color. Click the BackColor's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors. Before the command button displays the background color, you must change the Style property from 0-Standard to 1-Graphical.
Cancel Determines whether the command button gets a Click event if the user presses Esc.
Caption Holds the text that appears on the command button.
Default Determines if the command button responds to an Enter keypress even if another control has the focus.
Enabled Determines whether the command button is active. Often, you'll change the Enabled property at runtime with code when a command button is no longer needed and you want to gray out the command button.
Font Produces a Font dialog box in which you can set the caption's font name, style, and size.
Height Holds the height of the command button in twips.
Left Holds the number of twips from the command button's left edge to the Form window's left edge.
MousePointer Determines the shape of the mouse cursor when the user moves the mouse over the command button.
Picture Holds the name of an icon graphic image that appears on the command button as long as the Style property is set to 1-Graphical.
Style Determines whether the command button appears as a standard Windows command button (if set to 0-Standard) or a command button with a color and possible picture (if set to 1-Graphical).
TabIndex Specifies the order of the command button in the focus order.
TabStop Determines whether the command button can receive the focus.
ToolTipText Holds the text that appears as a tooltip at runtime.
Top Holds the number of twips from the command button's top edge to the Form window's top edge.
Visible Determines whether the command button appears or is hidden from the user. (Invisible controls cannot receive the focus until the running code changes the Visible property to True.)
Width Holds the width of the command button in twips.

Labels

Labels hold the primary text that appears on a form. Often, programmers use labels to place titles around the form and to label text boxes so users know what to type into the text box. Visual Basic supports several other ways to put text on forms, but when you use the Label control, your code can subsequently, at runtime, change the label's text so that different messages can appear when needed. Figure 4.3 shows a Form window that contains a label used for the application's title.

Figure 4.3. A label forms the title on this form.

When you place labels on a form, you'll almost always set the Label control's Name property and type a new Caption value. In addition, you'll want to change the Font property and possibly the label's color and style. You will rarely write event procedure code for labels, so a label's overhead is fairly small and the programming effort required to manipulate labels is minimal.

Table 4.2 lists the most common Label control properties that you'll set as you work with the Label control.

Table 4.2. Common label properties.
Property Description
Alignment Determines whether the label's caption appears left-justified, centered, or right-justified within the label's boundaries.
AutoSize Enlarges the label's size properties, when True, if you assign a caption that is too large to fit in the current label's boundaries at runtime.
BackColor Specifies the label's background color. Click the BackColor's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors.
BackStyle Determines whether the background shows through the label or if the label covers up its background text, graphics, and color.
BorderStyle Determines whether a single-line border appears around the label.
Caption Holds the text that appears on the label.
Enabled Determines whether the label is active. Often, you'll change the Enabled property at runtime with code when a label is no longer needed.
Font Produces a Font dialog box in which you can set the caption's font name, style, and size.
ForeColor Holds the color of the label's text.
Height Holds the height of the label's outline in twips.
Left Holds the number of twips from the label's left edge to the Form window's left edge.
MousePointer Determines the shape of the mouse cursor when the user moves the mouse over the label.
TabIndex Specifies the order of the label in the focus order. Although the label cannot receive the direct focus, the label can be part of the focus order.
ToolTipText Holds the text that appears as a tooltip at runtime.
Top Holds the number of twips from the label's top edge to the Form window's top edge.
Visible Determines whether the label appears or is hidden from the user.
Width Holds the width of the label in twips.
WordWrap Determines whether the label expands to fit whatever text appears in the caption.

Labels can present problems if they receive text that is too large for the label boundaries. Putting captions in labels seems easy until you think about the effects that can occur if the label is too large or too small to hold the text. By using certain property combinations, you can add automatically adjusting labels for whatever text the labels need to hold.

Suppose that you design a label that contains this long caption:

This label's caption is extremely long-winded, just like the author.

A label is rarely wide enough or tall enough to hold a caption this long. If you attempt to type text into a label's Caption property that is longer than what fits within the label's size properties (Left, Height, Top, and Width), one of the following things can take place, depending on how you have set up the label:

Figure 4.4. The label cannot display the entire caption.

Figure 4.5. The label resizes downward to hold the entire Caption property.


NOTE: Obviously, if you don't plan to change a label during a program's execution, you can size the label to fit the Caption property value at design time, and you don't have to worry about the AutoSize and WordWrap properties. You only need to concern yourself with these properties if event procedures or other code might possibly change the label's caption.


WARNING: Set WordWrap to True before you set the AutoSize property to True. If you set AutoSize first, the label expands horizontally before you have a chance to set the WordWrap property.

Figure 4.6. A horizontally resizing label could bump off other controls.

A long label like this is not necessarily a bad label. Depending on the length of the text that you assign to the label during the program's execution, there might be plenty of screen space to display long labels. To automatically expand the label horizontally, set the AutoSize property to True but leave WordWrap set to False.

Text Boxes

Text boxes accept user input. Although several other controls accept user input, text boxes are perhaps the easiest to set up and respond to. In addition, a text box is simple for your users to use, and they see text boxes on Windows forms all the time.


TIP: You can set a default value at design time or at runtime so that the user initially sees text in the text box. The user can either change the default text or accept the text by pressing Enter when the text box comes into focus.

Figure 4.7 shows a running application with two text boxes that accept user input.

Table 4.3 lists the common properties associated with text boxes. By familiarizing yourself with the properties now, you will be able to more quickly produce applications as you learn more about Visual Basic.

Figure 4.7. Two text boxes request user information.


NOTE: As you are beginning to see, many properties for many controls overlap. Most controls contain Left, Height, Top, and Width properties as well as the Visible property. Therefore, when you learn the properties for one control, you are learning properties for many other controls. When you first began learning Visual Basic just a few hours ago, you may have wondered how you could learn all the properties that go with all the possible Windows controls. You can now see that many controls support the same properties, so learning about the control properties is not as difficult of a task as it may first seem.


WARNING: The Caption property is the most common property that displays text on a control such as a command button and a label. Text Box controls do not support the Caption property. The Text property holds text for Text Box controls.

Table 4.3. Common text box properties.
Property Description
Alignment Determines whether the text box's text appears left-justified, centered, or right-justified within the text box's boundaries.
BackColor Specifies the text box's background color. Click the BackColor property's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors.
BorderStyle Determines whether a single-line border appears around the text box.
Enabled Determines whether the text box is active. Often, you'll change the Enabled property at runtime with code when a text box is no longer needed.
Font Produces a Font dialog box in which you can set the Text property's font name, style, and size.
ForeColor Holds the color of the text box's text.
Height Holds the height of the text box's outline in twips.
Left Holds the number of twips from the text box's left edge to the Form window's left edge.
Locked Determines whether the user can edit the text inside the text box that appears.
MaxLength Specifies the number of characters the user can type into the text box.
MousePointer Determines the shape of the mouse cursor when the user moves the mouse over the text box.
MultiLine Lets the text box hold multiple lines of text or sets the text box to hold only a single line of text. Add scrollbars if you wish to put text in a multiline text box so your users can scroll through the text.
PasswordChar Determines the character that appears in the text box when the user enters a password (keeps prying eyes from knowing what the user enters into a text box).
ScrollBars Determines whether scrollbars appear on the edges of a multiline text box.
TabIndex Specifies the order of the text box in the focus order.
TabStop Determines whether the text box can receive the focus.
Text Holds the value of the text inside the text box. The Text property changes at runtime as the user types text into the text box. If you set an initial Text property value, that value becomes the default value that appears in the text box when the user first sees the text box.
ToolTipText Holds the text that appears as a tooltip at runtime.
Top Holds the number of twips from the text box's top edge to the Form window's top edge.
Visible Determines whether the text box appears or is hidden from the user.
Width Holds the width of the text box in twips.


TIP: If you are unsure how to use a particular control's property, click the property in the Properties window and press F1 to read the online help. In addition to a detailed help screen that describes the property, such as the one shown in Figure 4.8, many of the help screens also contain an Example hypertext jump that shows an example of the property in action.

Figure 4.8. You can press F1 to request help for any selected property.

Form Properties

Forms have properties that you can and should set when you create an application. Being the background of your application, the form's properties help set the stage for the rest of the project. The form supports more property values than the other controls described in this lesson, but Table 4.4 lists only the most common properties that you'll need.

New Term: Pixel stands for picture element and represents the smallest addressable graphic dot on your monitor.

Table 4.4. Common form properties.
Property Description
BackColor Specifies the form's background color. Click the BackColor's palette down arrow to see a list of colors and click Categorized to see a list of common Windows control colors.
BorderStyle Determines how the Form window appears. The BorderStyle property specifies whether the user can resize the form and also determines the kind of form you wish to display.
Caption Displays text on the form's title bar at runtime.
ControlBox Determines whether the form appears with the Control menu icon. The Control menu appears when your application's user clicks the Control menu icon.
Enabled Determines whether the form is active. Often, you'll change the Enabled property at runtime with code when a form is no longer needed. Generally, only multiform applications, such as MDI applications, need to modify a form's Enabled property.
Font Produces a Font dialog box in which you can set the text's font name, style, and size.
ForeColor Holds the color of the form's text.
Height Holds the height of the form's outline in twips.
Icon Describes the icon graphic image displayed on the taskbar when the user minimizes the form.
Left Holds the number of twips from the form's left edge to the screen's left edge.
MaxButton Specifies whether a maximize window button appears on the form.
MinButton Specifies whether a minimize window button appears on the form.
MousePointer Determines the shape of the mouse cursor when the user moves the mouse over the form.
Moveable Specifies whether the user can move the form at runtime.
Picture Determines a graphic image that appears on the form's background at runtime.
ScaleMode Determines whether the form's measurements appear in twips, pixels (the smallest graphic dot image possible), inches, centimeters, or other measurements.
ShowInTaskbar Determines whether the form appears on the Windows taskbar.
StartUpPosition Determines the state (centered or default) of the form at application startup.
Top Holds the number of twips from the form's top edge to the Form window's top edge.
Visible Determines whether the form appears or is hidden from the user.
Width Holds the width of the form in twips.
WindowState Determines the initial state (minimized, maximized, or normal) in which the window appears at runtime.

Summary

Today you have learned the concept of focus. You must know about focus before working more with Visual Basic controls because focus determines the order of controls and which controls are active at any one time.

Most of this lesson describes the three fundamental controls that appear on almost every application's Form window: command buttons, labels, and text boxes. Many of the control properties overlap between these and other controls so you can easily master the properties that are important.

The next hour dives head first into the Visual Basic programming language so you can begin to build applications internally now that you've learned how to design application windows using the fundamental controls.

Q&A

Q How do I know which control has the focus?

A
Generally, you'll quickly learn to recognize focus once you've worked with focus a short time. The focus appears different depending on the collection of controls that appear on the form. Most of the time, the focus appears as a dotted outline around a caption or an option. You'll know which window has the focus because the focus window's title bar will be colored and the others' will be grayed out. If you really cannot determine which control has the focus, press the Tab key a few times. You will see the focus jump from control to control.

Q How can I learn all the properties?

A
People who have written Visual Basic programs for years don't know every property for every control. The Properties window is always at most one menu away, and it always displays a control's properties. Therefore, don't worry about learning all the properties. Generally, if you need to adjust the location, size, look, or behavior of a control, a property probably exists to handle that operation.

Workshop

The quiz questions and exercises are provided for your further understanding. See Appendix C, "Answers," for answers.

Quiz

1. True or false: A selected control (the control with its sizing handles showing) is the control with the focus.

2.
True or false: When the user clicks the mouse over a control in a window that does not have the focus, the clicked control still gets the focus.

3.
Which control works best for titles: labels or text boxes?

4.
What can you do to close a Form window when the user presses Esc?

5.
Which property disables a text box from triggering events when the user types or clicks the text box?

6.
Why do you think labels fail to support a GetFocus event?

7.
What happens if you set a label's AutoSize property to True before setting the WordWrap property to True if the label holds a long caption value?

8.
Why should you avoid adding too many autosizing labels to the form at one time?

Exercises

1. Write a Visual Basic application that displays an appropriate form title and asks the user for his first and last names in two separate text boxes. Add a command button that terminates the program when the user clicks the command button, presses the command button's hotkey, or presses Esc.

2.
Create an application with five command buttons. Reverse the focus order so that when you run the application and press the Tab key several times, the focus order flows upward through the command buttons.

3.
Write an application that displays three labels with the same long label Caption property in each. Don't display the entire caption in the first label. Display the caption horizontally in the second label. Display the caption vertically down the window in the third label. You may have to expand the Form window to its full size (perhaps by setting the Form window's WindowState property to 2-Maximized).