Programming with Microsoft Visual Basic 2017

Chapter 2
Planning
Applications and
Designing
Interfaces

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part
 FOCUS ON THE CONCEPTS LESSON

Concepts covered in this lesson:

• F-1 Planning a Windows Forms application
• F-2 Windows standards for interfaces

• F-3 Access keys

• F-4 Tab order

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
F-1 Planning a Windows Forms Application
(1 of 2)
Planning steps
1. Identify the application’s purpose.
2. Identify the items that the user must provide (input) .
3. Identify the items that the application must provide
(output).
4. Determine how the user and the application will
provide their respective items. (Processing Steps)
5. Draw a sketch of the user interface.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
F-1 Planning a Windows Forms Application
(2 of 2)
Planning Chart for the Restaurant Tip application
Purpose: Calculate and display a server’s tip

How?
User-provided (input)
1. bill amount User will enter in txtBill
2. tip percentage User will enter in txtPercentage
Application-provided
(output)
1. tip btnCalc_Click will calculate and display in lblTip
2. button for ending the btnExit_Click will end the application
application

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-2 Windows Standards for Interfaces
(1 of 3)
• The first GUI guideline pertains to the organization of
the controls in the interface.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-2 Windows Standards for Interfaces
(2 of 3)
Guidelines for Identifying Labels and Buttons
• Sentence capitalization means you capitalize only the
first letter in the first word.
• Identifying label should consist of one to three words.
• End with a colon (:).
Guidelines for Including Graphics
• Designers include graphics to either emphasize or
clarify a portion of the screen.
• Do not “over-do” graphics.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-2 Windows Standards for Interfaces
(3 of 3)
Guidelines for Selecting Fonts
• An object’s Font property determines the type, style, and size of the
font used to display the object’s text.
• Avoid using italics and underlining in an interface.
• The use of bold text should be limited to titles, headings, and key items.
• Thus: stick to the font provided.

Guidelines for Using Color

• People with color blindness or color confusion have trouble in
distinguishing colors.
• Color is very subjective.
• A color may have a different meaning in a different culture.
• Thus: use colour sparingly…. Very seldom

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-3 Access Keys

• The underlined letter is called an access key.

• It allows the user to select an object using the Alt key in
combination with a letter or number.
• In an interface, assign access keys to each control that
can accept user input.
• Assign an access key by including an ampersand (&) in
the control’s caption or identifying label.
• The first choice for an access key is the first letter of
the caption or identifying label.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-4 Tab Order (1 of 3)

• The TabIndex values determine the tab order.

• Each control receives the focus when the user either
presses the Tab key or employs an access key.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-4 Tab Order (2 of 3)

To observe how the application’s access keys and

TabIndex values work:
• Use Windows to locate and then open the folder.
Double-click Tip.exe in the list of filenames. The
interface appears on the screen. The blinking insertion
indicates that the control has the focus.
• Verify the tab order. Press Tab to move the focus to the
txtPercentage control, and then press Shift+Tab to
move the focus back to the txtBill control.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 F-4 Tab Order (3 of 3)

• Press Tab, slowly, three times. The focus moves to the

txtPercentage control, then to the btnCalc control, and
then to the btnExit control. Notice that when a button
has the focus, a dotted rectangle appears inside its
darkened border.
• Next, you will verify that the access keys work correctly.
Press Alt+b to move the focus to the txtBill control.
Type 100, press Alt+t, and then type 20. Now press
Alt+c (the Calculate tip button’s access key) to
calculate the tip. $20.00 appears in the lblTip control.
Press Alt+x to end the application.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 APPLY THE CONCEPTS LESSON

After studying this lesson, you should be able to:

• A-1 Create a Planning Chart for a Windows Forms
application
• A-2 Design an interface using the Windows standards
• A-3 Add a label control to the form
• A-4 Add a text box to the form
• A-5 Set the tab order

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-1 Create a Planning Chart for a
Windows Forms Application
• Identify the application’s purpose.
• Identify the items that the user must provide for the application.
• Identify the items that the application must provide.
Planning Chart for the Jacobson Furniture application
Purpose: Calculate and display the sales tax and total due amounts.

How?
User-provided (input)
1. Sales amount User will enter in txtSales
Application-provided (output)
1. 5% sales tax btnCalc_Click will calculate and display in lblTax
2. Total due btnCalc_Click will calculate and display in lblTotal
3. Button for ending the application btnCalc_Click will end the application

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-2 Design an Interface Using the
Windows Standards (1 of 2)
• The final step in planning an application is to draw a
sketch of the user interface.
• The text contained in the identifying labels and button
captions is entered using sentence capitalization.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-2 Design an Interface Using the
Windows Standards (2 of 2)
To open the partially completed Jacobson Furniture
application:
• Open the Jacobson Solution.sln file contained in the
Jacobson Solution folder.
• If the designer window is not open, double-click Main
Form.vb in the Solution Explorer window.
Missing from the interface are three labels and a text box.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-3 Add a Label Control to the Form
(1 of 6)
• The purpose of a label control is to display text that the
user is not allowed to edit while the application is
running (this displays a description to the user).
Name Purpose
AutoSize enable/disable automatic sizing; labels that display program output typically have their
AutoSize property set to False; identifying labels should have the default property setting
(True)
BackColor specify the label's background color
BorderStyle specify the appearance of the labels border; labels that display program output typically
have their BorderStyle property set to FixedSingle; identifying labels should have the
default property setting (None)
Font specify the font to use for text
ForeColor specify the color of the text inside the label
Name give the label a meaningful name (use Ibl as the ID)
Text specify the text that appears inside the label; if the label identifies another control that
can accept user input, the text should include an access key
TextAlign specify the position of the text inside the label

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-3 Add a Label Control to the Form
(2 of 6)
To add the missing label controls to the form:
• Drag a label control to the form. Position it to the left of
the Total due: label and then release the mouse button.
Change its Text property to Sales tax: and press
Enter. The label control’s name can stay at its default
value (Label2) because none of its events will be
coded and it will not be referred to in code.
• Place your mouse pointer on the Sales tax: label and
reposition the control. When positioning controls, you
should align their text using the pink snap line. Release
the mouse button.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-3 Add a Label Control to the Form
(3 of 6)
• Drag another label control to the form. Position it to the
left of the Sales tax: label and then release the mouse
button. This label control will need an access key
because it will identify a text box, which can accept
user input. Change the label control’s Text property to
&Sales amount: and press Enter. The label control’s
name can stay at its default value (Label3) because
none of its events will be coded and it will not be
referred to in code.
• Now place your mouse pointer on the label and
reposition it and then release the mouse button.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-3 Add a Label Control to the Form
(4 of 6)
• Drag another label control to the form. Position it below
the Sales tax: label and then release the mouse button.
Change its name to lblTax. We give it a name,
because we will save
• The lblTax control will display the sales tax amount
calculated by the btnCalc control. Label controls that
display program output typically have their AutoSize
and BorderStyle properties changed from the default
values. Set the lblTax control’s AutoSize and
BorderStyle properties to False and FixedSingle,
respectively.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-3 Add a Label Control to the Form
(5 of 6)
• Click Text in the Properties list, highlight Label4 in the
Settings box, press Delete, and press Enter to remove the
contents of the Text property. Click TextAlign, and down
arrow in the Settings box, and click the center button to
change the property to MiddleCenter.
• The lblTax control should be the same size as the lblTotal
control. Click the lblTotal control and then Ctrl+click the
lblTax control. Use Format menu to make the controls the
same size, and click the form to deselect the controls.
• Reposition the lblTax control and then save the solution.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
A-3 Add a Label Control to the Form
(6 of 6)

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-4 Add a Text Box to the Form (1 of 3)
• The purpose of a text box is to provide an area in the
form where the user can enter data.
Name Purpose
BackColor specify the text box's background color
CharacterCasing while the text is being entered into the text box, specify whether the text should
remain as typed or be converted to either uppercase or lowercase
Font specify the font to use for text
ForeColor specify the color of the text inside the text box
Name give the text box a meaningful name (use txt as the ID)
MaxLength specify the maximum number of characters the text box will accept
Multiline specify whether the text box can span more than one line
PasswordChar specify the character to display when entering a password
ReadOnly specify whether the text can be edited
ScrollBars indicate whether scroll bars appear on the text box (used with a multiline text box)
TabStop indicate whether the text box can receive the focus when the user presses the Tab
key
Text get or set the text that appears inside the text box

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-4 Add a Text Box to the Form (2 of 3)

To add the missing text box to the form:

• Drag a text box to the form. Position it below the Sales
amount: label and then release the mouse button.
Change its name to txtSales.
• Reposition the txtSales control and then release the
mouse button.
• Use the Format menu to make the text box the same
size as the lblTax control, and then click the form to
deselect the controls.
• Lock the controls on the form and then save the
solution.
Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
A-4 Add a Text Box to the Form (3 of 3)

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-5 Set the Tab Order (1 of 6)

Controls that accept user input, along with their

TabIndex value
identifying labels
Label3 (Sales amount:) 0
txtSales 1
btnCalc 2
btnExit 3
Other controls
Label2 (Sales tax:) 4
Label1 (Total due:) 5
IblTax 6
IbITotal 7
PictureBox1 N/A

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-5 Set the Tab Order (2 of 6)

To set the tab order:

• Click View on the menu bar and then click Tab Order.
The current TabIndex values appear in blue boxes on
the form. Click the blue box on the Sales amount: label.
The number in the box changes to 0 and the box’s
color changes to white.
• Click the blue box on the txtSales control. The number
in the box changes to 1.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-5 Set the Tab Order (3 of 6)

• Use the information shown in Figure 2-19 to set the

TabIndex values for the remaining controls. Be sure to
set the values in numerical order. If you make a
mistake, press the Esc key to remove the TabIndex
boxes from the form, and then repeat Steps 1 through
3. When you have finished setting all of the TabIndex
values, the color of the boxes will automatically change
from white to blue.
• Press Esc (or click View and then click Tab Order) to
remove the TabIndex boxes from the form.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-5 Set the Tab Order (4 of 6)

• Save the solution and then start the application. If the

access keys do not appear in the interface, press the
Alt key. When you start an application, the computer
sends the focus to the control whose TabIndex is 0. In
the current interface, that control is the Label3 (Sales
amount:) control. However, because label controls
cannot receive the focus, the computer sends the focus
to the next control in the tab order sequence: txtSales.
The blinking insertion point indicates that the text box
has the focus and is ready to receive input from you.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-5 Set the Tab Order (5 of 6)

• Press Tab to move the focus to the Calculate button,

and then press Shift+Tab to move the focus back to
the Sales amount text box.
• Now press Tab, slowly, two times. The focus moves to
the Calculate button and then to the Exit button. Notice
that when a button has the focus, a dotted rectangle
appears inside its darkened border.
• You can also move the focus using a text box’s access
key. Press Alt+s to move the focus to the text box.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 A-5 Set the Tab Order (6 of 6)

• Unlike pressing a text box’s access key, which moves

the focus, pressing a button’s access key invokes the
button’s Click event. Press Alt+x to invoke the Exit
button’s Click event, which ends the application. (The
btnExit_Click procedure has already been coded).
• Close the solution.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 Summary (1 of 4)

• To plan a Windows Forms application, perform the

following five steps in the order shown:
1. Identify the application’s purpose.
2. Identify the items that the user must provide.
3. Identify the items that the application must provide.
4. Determine how the user and the application will provide
their respective items.
5. Draw a sketch of the user interface.
• Use a label control to display text that a user is not
allowed to edit during run time.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 Summary (2 of 4)

• Use a text box control to provide an area in the form in

which a user can enter data.
• To assign an access key to a control, type an
ampersand (&) in the Text property of the control or
identifying label. The ampersand should appear to the
immediate left of the character that you want to
designate as the access key.
• Users cannot access label controls while an application
is running, so it is inappropriate to include an access
key in their identifying labels.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 Summary (3 of 4)

• To provide keyboard access to a text box, assign an access

key to the text box’s identifying label. Set the identifying
label’s TabIndex value so that it is one number less than the
text box’s TabIndex value.
• To employ an access key, press and hold down the Alt key
as you tap the access key.
• To set the tab order, use the Tab Order option on the View
menu to display the TabIndex boxes. Set each control’s
TabIndex box to a number (starting with 0) that represents
the order in which the control should receive the focus.
• When a control has the focus, it can accept user input.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part
 Summary (4 of 4)

• Use a label control’s BorderStyle property to put a

border around the control.
• Use a label control’s AutoSize property to specify
whether the control should automatically size to fit its
current contents.
• Use a label control’s TextAlign property to specify the
alignment of the text inside the control.

Copyright © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a
publicly accessible website, in whole or in part