1. T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 4 Designing the Inventory Application Introducing TextBox es and Button s

2.  2009 Pearson Education, Inc. All rights reserved. 2 Outline 4.1 Test-Driving the Inventory Application 4.2 Constructing the Inventory Application 4.3 Adding Label s to the Inventory Application 4.4 Adding TextBox es and a Button to the Form

3.  2009 Pearson Education, Inc. All rights reserved. 3 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 TextBox es and a Button to the Form. ■Use the BorderStyle property for Label s. Objectives

4. Application Requirements  2009 Pearson Education, Inc. All rights reserved. 4 4.1 Test-Driving the Inventory Application 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.

5.  2009 Pearson Education, Inc. All rights reserved. 5 ■Navigate to the directory C:\Examples\ Tutorial04\CompletedApp- lication\Inventory and open the Inventory application. ■Select Debug > Start Debugging to run the application (Fig. 4.1). ■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. Test-Driving the Inventory Application Label Figure 4.1 | Inventory application Form with default data displayed by the application. Button Label TextBoxes Label

6.  2009 Pearson Education, Inc. All rights reserved. 6 Figure 4.2 | Inventory application with new quantities entered. Test-Driving the Inventory Application (Cont.) ■When controls do not display self-descriptive text, we use Label s to identify them. ■Enter the values shown in Figure 4.2.

7.  2009 Pearson Education, Inc. All rights reserved. 7 Figure 4.3 | Result of clicking the Calculate Total Button in the Inventory application. 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

8.  2009 Pearson Education, Inc. All rights reserved. 8 ■To create a Windows application, select File > New Project.... ■From the list of templates (Fig. 4.4), select Windows Forms Application. Creating a New Application Figure 4.4 | New Project dialog for creating new applications. Templates: pane with Windows Forms Application selected Name: TextBox

9.  2009 Pearson Education, Inc. All rights reserved. 9 Figure 4.5 | Save Project dialog for saving the newly created application. Creating a New Application (Cont.) ■Select File > Save All (Fig. 4.5).

10.  2009 Pearson Education, Inc. All rights reserved. 10 ■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. Creating a New Application (Cont.) Figure 4.6 | Project Location dialog used to specify the directory in which the project files reside. Working directory

11.  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.

12.  2009 Pearson Education, Inc. All rights reserved. 12 Figure 4.7 | New Windows application in Visual Studio. Creating a New Application (Cont.) Form title bar (for Form1) Form Form title bar (Form1.vb) Properties window (for Form1)

13.  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.

14.  2009 Pearson Education, Inc. All rights reserved. 14 Good Programming Practice Change the Form name to a unique and meaningful name for easy identification.

15.  2009 Pearson Education, Inc. All rights reserved. 15 Good Programming Practice Use standard suffixes for names of objects (controls and Form s) 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.

16.  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 to the left of the Font property (Fig. 4.9). –Change the font’s Name and Size properties as shown in the next slide. Click plus box to display Font properties

17.  2009 Pearson Education, Inc. All rights reserved. 17 Click down arrow to display drop-down list Name property Customizing the Form (Cont.) Figure 4.9 | Setting a Form ’s font to 9pt Segoe UI. Select Segoe UI from drop-down list Size property

18.  2009 Pearson Education, Inc. All rights reserved. 18 Change the Form ’s font to 9pt Segoe UI to be consistent with Microsoft’s recommended font for Windows Vista. GUI Design Tip

19.  2009 Pearson Education, Inc. All rights reserved. 19 ■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). Customizing the Form (Cont.) Figure 4.10 | Resized Form displaying new title-bar text. Title-bar text set to Inventory

20.  2009 Pearson Education, Inc. All rights reserved. 20 Changing the Form ’s title allows users to identify the Form ’s purpose. GUI Design Tip

21.  2009 Pearson Education, Inc. All rights reserved. 21 Form titles should use book-title capitalization. GUI Design Tip

22.  2009 Pearson Education, Inc. All rights reserved. 22 4.3 Adding Labels to the Inventory Application ■There are four Label s in this application. ■You can easily recognize three of the Label s. 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, Label s are often used to identify other controls on the Form. –Descriptive Label s help the user understand each control’s purpose. –Output Label s display program output.

23.  2009 Pearson Education, Inc. All rights reserved. 23 Figure 4.11 | Label s used in the Inventory application. Descriptive Labels Descriptive Label Output Label (recessed appearance) 4.3 Adding Label s to the Inventory Application (Cont.)

24.  2009 Pearson Education, Inc. All rights reserved. 24 Figure 4.12 | Adding a Label to the Form. Adding Label s 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 ■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.

25.  2009 Pearson Education, Inc. All rights reserved. 25 Leave space between the edges of the Form and its controls. GUI Design Tip

26.  2009 Pearson Education, Inc. All rights reserved. 26 ■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. Adding Label s to the Form (Cont.)

27.  2009 Pearson Education, Inc. All rights reserved. 27 The Location property can be used to specify a control’s precise position on the Form. GUI Design Tip

28.  2009 Pearson Education, Inc. All rights reserved. 28 Good Programming Practice Append the Label suffix to all Label control names.

29.  2009 Pearson Education, Inc. All rights reserved. 29 ■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. Adding Label s to the Form (Cont.) Figure 4.13 | Changing the TextAlign property of a Label. TextAlign property Value of TextAlign property (MiddleLeft) MiddleLeft TextAlign property value Down arrow Window displayed when down arrow is clicked

30.  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 Label s align.

31.  2009 Pearson Education, Inc. All rights reserved. 31 Figure 4.14 | GUI after the Label has been customized. Adding Label s to the Form (Cont.) Location 9, 15 ■Figure 4.14 displays the Label after you set its properties.

32.  2009 Pearson Education, Inc. All rights reserved. 32 ■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. Placing Additional Label s on the Form

33.  2009 Pearson Education, Inc. All rights reserved. 33 GUI Design Tip Align the left or right sides of a group of descriptive Label s if the Label s are arranged vertically.

34.  2009 Pearson Education, Inc. All rights reserved. 34 ■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). Placing Additional Label s on the Form (Cont.) MiddleCenter TextAlign property value Figure 4.15 | Setting the TextAlign property to MiddleCenter.

35.  2009 Pearson Education, Inc. All rights reserved. 35 GUI Design Tip If several output Label s are arranged vertically to display numbers used in a mathematical calculation (such as in an invoice), use the MiddleRight value for the Text­Align property.

36.  2009 Pearson Education, Inc. All rights reserved. 36 ■Make the totalResultLabel appear different from the other Label s 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. Placing Additional Label s on the Form (Cont.)

37.  2009 Pearson Education, Inc. All rights reserved. 37 GUI Design Tip Output Label s should be distinguishable from descriptive Label s. This can be done by setting the BorderStyle property of an output Label to Fixed3D.

38.  2009 Pearson Education, Inc. All rights reserved. 38 ■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 Label s added. Label with Fixed3D BorderStyle property Placing Additional Label s on the Form (Cont.) Figure 4.17 | GUI with all Label s added.

39.  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.

40.  2009 Pearson Education, Inc. All rights reserved. 40 ■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. Adding TextBox es to the Form

41.  2009 Pearson Education, Inc. All rights reserved. 41 Name property set to cartonsTextBox Adding TextBox es to the Form (Cont.) Figure 4.18 | Properties window for the cartonsTextBox TextBox. Location property set to 136, 12 Width property set to 40

42.  2009 Pearson Education, Inc. All rights reserved. 42 GUI Design Tip Use TextBox es to input data from the keyboard.

43.  2009 Pearson Education, Inc. All rights reserved. 43 ■Change cartonsTextBox ’s Text­Align property to Right. ■ TextBox es 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. Adding TextBox es to the Form (Cont.) Figure 4.19 | Selecting value Right of the TextAlign property of a TextBox control.

44.  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.

45.  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.

46.  2009 Pearson Education, Inc. All rights reserved. 46 ■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 TextBox es have been added and modified. Adding TextBox es to the Form (Cont.)

47.  2009 Pearson Education, Inc. All rights reserved. 47 GUI Design Tip Make TextBox es wide enough for their expected inputs.

48.  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.

49.  2009 Pearson Education, Inc. All rights reserved. 49 ■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. Adding a Button to the Form

50.  2009 Pearson Education, Inc. All rights reserved. 50 Good Programming Practice Append the Button suffix to Button control names.

51.  2009 Pearson Education, Inc. All rights reserved. 51 ■Run the completed application (Fig. 4.21). Figure 4.21 | Running the application after completing its design. Adding a Button to the Form (Cont.) Close box