Transcript T U T O R I A L Designing the Inventory Application Introducing TextBoxes and Buttons  2009 Pearson Education, Inc.

1
T U T O R I A L
4
Designing the
Inventory
Application
Introducing TextBoxes
and Buttons
 2009 Pearson Education, Inc. All rights reserved.
2
Outline
4.1
4.2
4.3
4.4
Test-Driving the Inventory Application
Constructing the Inventory Application
Adding Labels to the Inventory Application
Adding TextBoxes and a Button to the Form
 2009 Pearson Education, Inc. All rights reserved.
3
Objectives
In this tutorial you will learn:
■ Set the text in the Form’s title bar.
■ Visually program, using GUI design guidelines.
■ Rename the Form.
■ Add TextBoxes and a Button to the Form.
■ Use the BorderStyle property for Labels.
 2009 Pearson Education, Inc. All rights reserved.
4
4.1 Test-Driving the Inventory Application
Application Requirements
A college bookstore receives cartons of textbooks.
In each shipment, all cartons contain the same number
of textbooks. The inventory manager wants to use a
computer to calculate the total number of textbooks
arriving at the bookstore for each shipment. The
inventory manager will enter the number of cartons
received and the fixed number of textbooks in each
carton for each shipment; then the application will
calculate the total number of textbooks in the shipment.
 2009 Pearson Education, Inc. All rights reserved.
5
Test-Driving the Inventory Application
■ Navigate to the directory
C:\Examples\ Tutorial04\CompletedApplication\Inventory and open the Inventory application.
■ Select Debug > Start Debugging to run the application (Fig. 4.1).
Label
Label
TextBoxes
Button
Label
Figure 4.1 | Inventory application Form with default data displayed by the application.
■ A TextBox is a control that the user can enter data into from the
keyboard.
■ A Button is a control that causes the application to perform an action
when clicked.
 2009 Pearson Education, Inc. All rights reserved.
6
Test-Driving the Inventory Application (Cont.)
■ When controls do not display self-descriptive text, we
use Labels to identify them.
■ Enter the values shown in Figure 4.2.
Figure 4.2 | Inventory application with new quantities entered.
 2009 Pearson Education, Inc. All rights reserved.
7
Test-Driving the Inventory Application (Cont.)
■ Clicking the Calculate Total Button causes the
application to multiply the two numbers you entered
and to display the result (Fig. 4.3).
Result of calculation
Figure 4.3 | Result of clicking the Calculate Total Button in
the Inventory application.
 2009 Pearson Education, Inc. All rights reserved.
8
Creating a New Application
■ To create a Windows application, select
File > New Project....
■ From the list of templates (Fig. 4.4), select Windows
Forms Application.
Templates: pane
with Windows
Forms Application
selected
Name: TextBox
Figure 4.4 | New Project dialog for creating new applications.
 2009 Pearson Education, Inc. All rights reserved.
9
Creating a New Application (Cont.)
■ Select File > Save All (Fig. 4.5).
Figure 4.5 | Save Project dialog for saving the newly created application.
 2009 Pearson Education, Inc. All rights reserved.
10
Creating a New Application (Cont.)
■ Click the Browse... Button, and the Project Location dialog
appears (Fig. 4.6).
■ Navigate to C:\SimplyVB2008. Click Select Folder to select the
directory and dismiss the dialog.
Working directory
Figure 4.6 | Project Location dialog used to specify the directory in which the project files
reside.
 2009 Pearson Education, Inc. All rights reserved.
11
Creating a New Application (Cont.)
■ Change the Form’s file name to a name more
meaningful for your application.
– To do so, click the Form’s file name in the Solution
Explorer (Fig. 4.7).
– Then select File Name in the Properties window, and
type Inventory.vb in the field to the right.
 2009 Pearson Education, Inc. All rights reserved.
12
Creating a New Application (Cont.)
Form title bar (for Form1)
Form title bar (Form1.vb)
Properties window (for Form1)
Form
Figure 4.7 | New Windows application in Visual Studio.
 2009 Pearson Education, Inc. All rights reserved.
13
Creating a New Application (Cont.)
■ Each Form object needs a unique and meaningful name for
easy identification.
■ Set the Form’s name by using the Name property.
–
In the Properties window (Fig. 4.8), change the Form’s name to
InventoryForm.
–
Then press Enter to update the name.
Name property
Type new Form’s name here
Figure 4.8 | Renaming a Form in the Properties windows.
 2009 Pearson Education, Inc. All rights reserved.
14
Good Programming Practice
Change the Form name to a unique and meaningful
name for easy identification.
 2009 Pearson Education, Inc. All rights reserved.
15
Good Programming Practice
Use standard suffixes for names of objects (controls
and Forms) so that you can easily tell them apart.
Append the suffix Form to Form names. Capitalize the
first letter of the Form name because Form is a class.
Objects (such as controls) should begin with
lowercase letters.
 2009 Pearson Education, Inc. All rights reserved.
16
Customizing the Form
■ To change the Form’s font to 9pt Segoe UI:
– click the plus box
(Fig. 4.9).
to the left of the Font property
Click plus box to display
Font properties
– Change the font’s Name and Size properties as shown in
the next slide.
 2009 Pearson Education, Inc. All rights reserved.
17
Customizing the Form (Cont.)
Click down arrow to
display drop-down list
Name property
Select Segoe UI from
drop-down list
Size property
Figure 4.9 | Setting a Form’s font to 9pt Segoe UI.
 2009 Pearson Education, Inc. All rights reserved.
18
GUI Design Tip
Change the Form’s font to 9pt Segoe UI to be
consistent with Microsoft’s recommended font for
Windows Vista.
 2009 Pearson Education, Inc. All rights reserved.
19
Customizing the Form (Cont.)
■ The text in the Form’s title bar is determined by the Form’s
Text property.
■ Double click the field to the right of the Text property in
the Properties window, and change it to Inventory.
■ Double click the field to the right of the Size property in
the Properties window, then enter 320, 112 and press
Enter (Fig. 4.10).
Title-bar text set
to Inventory
Figure 4.10 | Resized Form displaying new title-bar text.
 2009 Pearson Education, Inc. All rights reserved.
20
GUI Design Tip
Changing the Form’s title allows users to identify the
Form’s purpose.
 2009 Pearson Education, Inc. All rights reserved.
21
GUI Design Tip
Form titles should use book-title capitalization.
 2009 Pearson Education, Inc. All rights reserved.
22
4.3 Adding Labels to the Inventory Application
■ There are four Labels in this application.
■ You can easily recognize three of the Labels. The
fourth Label, however, has a border and contains no
text until the user clicks the Calculate Total
Button (Fig. 4.11).
■ As the control’s name indicates, Labels are often
used to identify other controls on the Form.
– Descriptive Labels help the user understand each
control’s purpose.
– Output Labels display program output.
 2009 Pearson Education, Inc. All rights reserved.
4.3 Adding Labels to the Inventory
Application (Cont.)
23
Descriptive Label
Output Label (recessed appearance)
Descriptive Labels
Figure 4.11 | Labels used in the Inventory application.
 2009 Pearson Education, Inc. All rights reserved.
24
Adding Labels to the Form
■ Click the All Windows Forms group in the
Toolbox and place a Label on the Form (Fig. 4.12).
Location value 0, 0
Label control
Figure 4.12 | Adding a Label to the Form.
■ Set the Label’s Location property to 9, 15.
■ You can also change a control’s position by selecting
it and using the arrow keys to move it.
 2009 Pearson Education, Inc. All rights reserved.
25
GUI Design Tip
Leave space between the edges of the Form and its
controls.
 2009 Pearson Education, Inc. All rights reserved.
26
Adding Labels to the Form (Cont.)
■ The Label’s Location property specifies the
position of the upper-left corner of the control on the
Form.
■ A control’s Location property is set according to its
distance from that point on the Form.
■ In this case, the value 9, 15 indicates that the Label
is placed 9 pixels to the right and 15 pixels down from
the top-left corner.
■ Enter Cartons per shipment: in the Text property.
Set the Name property to cartonsLabel.
 2009 Pearson Education, Inc. All rights reserved.
27
GUI Design Tip
The Location property can be used to specify a
control’s precise position on the Form.
 2009 Pearson Education, Inc. All rights reserved.
28
Good Programming Practice
Append the Label suffix to all Label control names.
 2009 Pearson Education, Inc. All rights reserved.
29
Adding Labels to the Form (Cont.)
■ When entering values for a Label’s Text property, you should
use sentence-style capitalization.
■ Select the TextAlign property and click its down arrow
(Fig. 4.13).
■ Select the middle-left rectangle, which indicates the value
MiddleLeft.
Value of TextAlign property
(MiddleLeft)
TextAlign property
MiddleLeft TextAlign
property value
Down arrow
Window displayed when down
arrow is clicked
Figure 4.13 | Changing the TextAlign property of a Label.
 2009 Pearson Education, Inc. All rights reserved.
30
GUI Design Tip
The TextAlign property of a descriptive Label should
be set to MiddleLeft. This ensures that text within
groups of Labels align.
 2009 Pearson Education, Inc. All rights reserved.
31
Adding Labels to the Form (Cont.)
■ Figure 4.14 displays the Label after you set its
properties.
Location 9, 15
Figure 4.14 | GUI after the Label has been customized.
 2009 Pearson Education, Inc. All rights reserved.
32
Placing Additional Labels on the Form
■ Add a second Label named itemsLabel.
– Set its Location property to 9, 46.
– Set the Label’s Text property to Items per carton:
– Set the Label’s TextAlign property to MiddleLeft.
■ Add a third Label named totalLabel.
– Set its Location property to 190, 15.
– Set the Label’s Text property to Total:
– Then set the Label’s TextAlign property to
MiddleLeft.
 2009 Pearson Education, Inc. All rights reserved.
33
GUI Design Tip
Align the left or right sides of a group of descriptive
Labels if the Labels are arranged vertically.
 2009 Pearson Education, Inc. All rights reserved.
34
Placing Additional Labels on the Form (Cont.)
■ Add a fourth Label named totalResultLabel.
– Set its AutoSize property to False.
– Set the Label’s Size property to 50, 23 and the Location
property to 243, 11.
– Set the Label’s TextAlign property to MiddleCenter
(Fig. 4.15).
MiddleCenter
TextAlign
property value
Figure 4.15 | Setting the TextAlign property to MiddleCenter.
 2009 Pearson Education, Inc. All rights reserved.
35
GUI Design Tip
If several output Labels are arranged vertically to
display numbers used in a mathematical calculation
(such as in an invoice), use the MiddleRight value for
the TextAlign property.
 2009 Pearson Education, Inc. All rights reserved.
36
Placing Additional Labels on the Form (Cont.)
■ Make the totalResultLabel appear different from the
other Labels by changing the BorderStyle property.
Assign the value Fixed3D (Fig. 4.16) to make the Label
seem three-dimensional (Fig. 4.17).
Fixed3D BorderStyle
property value highlighted
Figure 4.16 | Changing a Label’s BorderStyle property to Fixed3D.
 2009 Pearson Education, Inc. All rights reserved.
37
GUI Design Tip
Output Labels should be distinguishable from
descriptive Labels. This can be done by setting the
BorderStyle property of an output Label to Fixed3D.
 2009 Pearson Education, Inc. All rights reserved.
38
Placing Additional Labels on the Form (Cont.)
■ Clear the text of the Label, because you will not
be adding meaningful text to totalResultLabel
until later.
■ Figure 4.17 displays the GUI with all Labels added.
Label with Fixed3D
BorderStyle property
Figure 4.17 | GUI with all Labels added.
 2009 Pearson Education, Inc. All rights reserved.
39
Good Programming Practice
Clear the an output Label’s value initially or provide a
default value. When the application performs the
calculation for that value, the Label’s Text property
should be updated to the new value. You’ll learn how to
do this in the next tutorial.
 2009 Pearson Education, Inc. All rights reserved.
40
Adding TextBoxes to the Form
■ Double click the TextBox control in the Toolbox to
add a TextBox to the Form.
■ Select its Name property and enter cartonsTextBox
(Fig. 4.18). Set the Width property to 40 and
Location property to 136, 12. Set the TextBox’s
Text property to 0.
 2009 Pearson Education, Inc. All rights reserved.
41
Adding TextBoxes to the Form (Cont.)
Name property set to
cartonsTextBox
Location property
set to 136, 12
Width property set to 40
Figure 4.18 | Properties window for the cartonsTextBox TextBox.
 2009 Pearson Education, Inc. All rights reserved.
42
GUI Design Tip
Use TextBoxes to input data from the keyboard.
 2009 Pearson Education, Inc. All rights reserved.
43
Adding TextBoxes to the Form (Cont.)
■ Change cartonsTextBox’s TextAlign property to Right.
■ TextBoxes have fewer TextAlign options, which are
displayed simply as a list. Select Right from this list (Fig. 4.19).
■ Add a TextBox named itemsTextBox. Set the Width
property to 40 and the Location property to 136, 43. Set the
Text property to 0 and the TextAlign property to Right.
Figure 4.19 | Selecting value Right of the TextAlign property of a TextBox control.
 2009 Pearson Education, Inc. All rights reserved.
44
GUI Design Tip
Each TextBox should have a descriptive Label
indicating the input expected from the user.
 2009 Pearson Education, Inc. All rights reserved.
45
GUI Design Tip
Place each descriptive Label either above or to the left
of the control (for instance, a TextBox) that it identifies.
 2009 Pearson Education, Inc. All rights reserved.
46
Adding TextBoxes to the Form (Cont.)
■ Many of the second TextBox’s properties match
those of the first TextBox, so it may be easier to
copy the original control.
– To do this, select the control you wish to copy and press
Ctrl + C.
– Then press Ctrl + V to paste it onto the Form.
■ Figure 4.20 shows the resulting GUI.
Figure 4.20 | GUI after TextBoxes have been added and modified.
 2009 Pearson Education, Inc. All rights reserved.
47
GUI Design Tip
Make TextBoxes wide enough for their expected
inputs.
 2009 Pearson Education, Inc. All rights reserved.
48
GUI Design Tip
A descriptive Label and the control it identifies should
be aligned on the left if they are arranged vertically.
 2009 Pearson Education, Inc. All rights reserved.
49
Adding a Button to the Form
■ Add a Button to the Form by double clicking the
Button control, and enter calculateButton for its
Name property.
■ Set the Button’s Size to 100, 24 and Location
to 193, 42. Then drag the sizing handle on the right
side of the Button until the Button is aligned with
the right side of the Label above it.
■ Enter Calculate Total in the Button’s Text
property. You should use book-title capitalization
in a Button’s Text property.
 2009 Pearson Education, Inc. All rights reserved.
50
Good Programming Practice
Append the Button suffix to Button control names.
 2009 Pearson Education, Inc. All rights reserved.
51
Adding a Button to the Form (Cont.)
■ Run the completed application (Fig. 4.21).
Close box
Figure 4.21 | Running the application after completing its design.
 2009 Pearson Education, Inc. All rights reserved.