Programming with Microsoft Visual Basic 2017 Chapter 2

Programming with Microsoft Visual Basic 2017 Chapter 2 Planning Applications and Designing Interfaces

FOCUS ON THE CONCEPTS LESSON Concepts covered in this lesson: u Planning a Windows Forms application u Windows standards for interfaces u Access keys (快速鍵) u Tab order (定位順序) 2

Planning a Windows Forms Application (1 of 2) Planning steps 1. Identify the application’s purpose. 2. Identify the data items that the user must provide. 3. Identify the data items that the application must provide. 4. Determine how the user and the application will provide their respective data items. 5. Draw a sketch of the user interface. 3

Planning a Windows Forms Application (2 of 2) Planning Chart for the Restaurant Tip application Purpose: Calculate and display a server’s tip (小費) What ? How ? User-provided 1. bill amount User will enter in txt. Bill 2. tip percentage User will enter in txt. Percentage Application-provided 4 1. tip (小費) btn. Calc_Click will calculate and display in lbl. Tip 2. button for ending the application btn. Exit_Click will end the application

Windows Standards for Interfaces (1 of 3) • Sketch (草圖) of the GUI and the organization (組織、 結構) of the controls in the GUI. • 5 Two options

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 of a sentence. • 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. 6

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

Access Keys • • • 8 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.

Tab Order (1 of 4) • • 9 The Tab. Index (定位索引) value of a GUI control determines its tab order (定位順序). Each control may receive the focus when the user either presses the Tab key or employs its access key.

Tab Order (2 of 4) To observe how the application’s access keys and Tab. Index 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 txt. Percentage control, and then press Shift+Tab to move the focus back to the txt. Bill control. 10

Tab Order (3 of 4) • Press Tab, slowly, three times. • The focus moves to the txt. Percentage control, then to the btn. Calc control, and then to the btn. Exit control. • Notice that when a button has the focus, a dotted rectangle appears inside its darkened border. 11

Tab Order (4 of 4) Next, you will verify that the access keys work correctly. 1. Press Alt+b to move the focus to the txt. Bill control. Type 100. 2. Press Alt+t, and then type 20. 3. Now press Alt+c (the Calculate tip button’s access key) to calculate the tip. $20. 00 appears in the lbl. Tip control. 4. Press Alt+x to end the application. 練習 p. 56~57 12

APPLY THE CONCEPTS LESSON After studying this lesson, you should be able to: • Create a Planning Chart for a Windows Forms application • Design an interface using the Windows standards • Add a label control to the form • Add a text box to the form • Set the tab order 13

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. What ? How ? User-provided 1. Sales amount User will enter in txt. Sales Application-provided 14 1. 5% sales tax btn. Calc_Click will calculate and display in lbl. Tax 2. Total due btn. Calc_Click will calculate and display in lbl. Total 3. Button for ending the application btn. Calc_Click will end the application

Design an Interface Using the Windows Standards (1 of 2) • The final step in planning an application : draw a sketch of the user interface. • The text contained in the identifying labels and button captions is entered using sentence capitalization. 15

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. 16

Add a Label Control to the Form (1 of 6) • The purpose of label control is to display text that the user is not allowed to edit while the application is running. Name Auto. Size Back. Color Border. Style Purpose enable/disable automatic sizing; labels that display program output typically have their Auto. Size property set to False; identifying labels should have the default property setting (True) specify the label's background color specify the appearance of the labels border; labels that display program output typically have their Border. Style property set to Fixed. Single; identifying labels should have the default property setting (None) Font specify the font to use for text Fore. Color specify the color of the text inside the label Name give the label a meaningful name (use Ibl as the ID) Text. Align 17 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 specify the position of the text inside the label

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. • • • 18 The label control’s name can stay at its default value (Label 2) 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. 練習 p. 61 -1~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 (Label 3) because none of its events will be coded and it will not be referred to in code. • 19 Now place your mouse pointer on the label and reposition it and then release the mouse button. 練習 p. 61 -4

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 lbl. Tax. – The lbl. Tax control will display the sales tax amount calculated by the btn. Calc control. • Label controls that display program output typically have their Auto. Size and Border. Style properties changed from the default values. – Set the lbl. Tax control’s Auto. Size and Border. Style properties to False and Fixed. Single, respectively. 20 練習 p. 61 -5~7

Add a Label Control to the Form (5 of 6) • • • Click Text in the Properties list, highlight Label 4 in the Settings box, press Delete, and press Enter to remove the contents of the Text property. Click Text. Align, and down arrow in the Settings box, and click the center button to change the property to Middle. Center. The lbl. Tax control should be the same size as the lbl. Total control. – – • 21 Click the lbl. Total control and then Ctrl+click the lbl. Tax control. Use Format menu to make the controls the same size, and click the form to deselect the controls. Reposition the lbl. Tax control and then save the solution. 練習 p. 62 -8~9

Add a Label Control to the Form (6 of 6) 22

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 23 Purpose Back. Color specify the text box's background color Character. Casing Font Fore. Color Name 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 specify the font to use for text specify the color of the text inside the text box give the text box a meaningful name (use txt as the ID) Max. Length specify the maximum number of characters the text box will accept Multiline Password. Char Read. Only specify whether the text box can span more than one line specify the character to display when entering a password specify whether the text can be edited Scroll. Bars indicate whether scroll bars appear on the text box (used with a multiline text box) Tab. Stop 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

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 txt. Sales. • Reposition the txt. Sales control and then release the mouse button. • Use the Format menu to make the text box the same size as the lbl. Tax control, and then click the form to deselect the controls. • Lock the controls on the form and then save the solution. 24 練習 p. 62 -63

Add a Text Box to the Form (3 of 3) 25

Set the Tab Order (1 of 6) Controls that accept user input, along with their identifying labels Label 3 (Sales amount: ) 0 txt. Sales 1 btn. Calc 2 btn. Exit 3 Other controls Label 2 (Sales tax: ) 4 Label 1 (Total due: ) 5 Ibl. Tax 6 Ib. I Total 7 Picture. Box 1 26 Tab. Index value N/A

Set the Tab Order (2 of 6) To set the tab order: 1. Click View on the menu bar and then click Tab Order. 2. The current Tab. Index values appear in blue boxes on the form. 3. 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. 4. Click the blue box on the txt. Sales control. • 27 The number in the box changes to 1.

Set the Tab Order (3 of 6) • • • 28 Use the information shown in Figure 2 -19 to set the Tab. Index 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 Tab. Index boxes from the form, and then repeat Steps 1 through 3 (of the last slide). When you have finished setting all of the Tab. Index 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 Tab. Index boxes from the form.

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 Tab. Index is 0. – In the current interface, that control is the Label 3 ( 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: txt. Sales. § 29 The blinking insertion point indicates that the text box has the focus and is ready to receive input from you.

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. 30

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 btn. Exit_Click procedure has already been coded). • Close the solution. 31 練習 p. 64

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

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. • 33 Users cannot access label controls while an application is running, so it is inappropriate to include an access key in their identifying labels.

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 Tab. Index value so that it is one less than the text box’s Tab. Index 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 Tab. Index boxes. • Set each control’s Tab. Index box to a number (starting with 0) that represents the order in which the control should receive the focus. 34

Summary (4 of 4) • When a control has the focus, it can accept user input. • Use a label control’s Border. Style property to put a border around the control. Use a label control’s Auto. Size property to specify whether the control should automatically size to fit its current contents. Use a label control’s Text. Align property to specify the alignment of the text inside the control. • • 35