OBJECTIVES: Chapter 2 User Interface Design Upon completion of this chapter, your students will be able to 1. Use text boxes, masked text boxes, rich text boxes, group boxes, check boxes, radio buttons, and picture boxes effectively. 2. Set the BorderStyle property to make controls appear flat or three-dimensional. 3. Select multiple controls and move them, align them, and set common properties. 4. Make your projects easy for the user to understand and operate by defining access keys, setting an Accept and a Cancel button, controlling the tab sequence, resetting the focus during program execution, and causing ToolTips to appear. 5. Clear the contents of text boxes and labels. 6. Make a control visible or invisible at run time by setting its Visible property. 7. Disable and enable controls at design time and run time. 8. Change text color during program execution. 9. Code multiple statements for one control using the With and End With statements. 10. Concatenate (join) strings of text. 11. Download the line and shape controls, add them to the toolbox, and use the controls on your forms. Chapter Highlights: CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip component CHAPTER OUTLINE: I. Introducing More Controls A. Text Boxes Review Question 1 Text boxes are used primarily for user input. The Text property holds the value input by the user. You also can assign a literal to the text property during design time or run time. Text Boxes have a Multiline and WordWrap property that can allow a long Text property to 2-1
wrap to multiple lines. The text will wrap to the width of the control, which must be tall B. enough to display multiple lines. Masked Text Boxes Review Question 2 A MaskedTextBox has a Mask property that allows you to specify the data type and format C. of the input data. Rich Text Boxes Review Question 3, 4 A RichTextBox is a specialized text box that allows additional formatting of the text. RichText Boxes have a Multiline and WordWrap property that can allow a long Text property to wrap to multiple lines. The text will wrap to the width of the control, which must be tall enough to display multiple lines. D. Displaying Text on Multiple Lines E. Group Boxes Group boxes are used as containers for other controls and to group like items on a form. F. Check Boxes G. Radio Buttons Review Question 5, 6 Check boxes and radio buttons allow the user to make choices. In a group of radio buttons, only one can be selected; but in a group of check boxes, any number of the boxes may be selected. The current state of check boxes and radio buttons is stored in the Checked property; the H. CheckChanged event occurs when the user clicks on one of the controls. Picture Boxes Review Question 7 Picture box controls hold a graphic, which is assigned to the Image property. Set the SizeMode property to StretchImage to make the image resize to fit the control. I. Using Smart Tags J. Using Images for Forms and Controls The Resources tab of the Project Designer can be used to add, remove, and rename images in the project Resources folder. Forms and controls can display images from the project s resources. Use the form s BackgroundImage property and a control s Image property. K. Setting a Border and Style The BorderStyle property of many controls can be set to None, Fixed Single, or Fixed3D, to determine whether the control appears flat or three-dimensional. L. Drawing a Line Use a Label control to create a line on a form. II. Working with Multiple Controls Review Question 8 A. Selecting Multiple Controls You can select multiple controls and treat them as a group, including setting common properties at once, moving them, or aligning them. B. Deselecting a Group of Controls C. Moving Controls as a Group D. Setting Properties for Multiple Controls E. Aligning Controls III. Designing Your Applications for User Convenience A. Designing the User Interface Make your programs easier to use by following Windows standard guidelines for colors, control size and placement, access keys, default and Cancel buttons, and tab order. B. Defining Keyboard Access Keys Review Question 9 Define keyboard access keys by including an ampersand in the Text property of buttons, 2-2
IV. radio buttons, check boxes, and labels. C. Setting the Accept and Cancel Buttons Review Question 10 Set the AcceptButton property of the form to the desired button so that the user can press Enter to select the button. If you set the form's CancelButton property to a button, that button will be selected when the user presses the Esc key. D. Setting the Tab Order for Controls Review Question 12, 13 The focus moves from control to control as the user presses the Tab key. The sequence for tabbing is determined by the TabIndex properties of the controls. The Tab key stops only on controls that have their property set to True. E. Setting the Form s Location on the Screen F. Creating ToolTips Review Question 11 Add a ToolTip control to a form and then set the ToolTip on ToolTip1 property of a control to make a ToolTip appear when the user pauses the mouse pointer over the control. You can set the properties of the ToolTip component to modify the background, the foreground, shape, and an icon for the ToolTips. Coding for the Controls A. Clearing Text Boxes and Labels Review Question 15 Clear the Text property of a text box or a label by setting it to an empty string. Text boxes B. also can be cleared using the Clear method. Resetting the Focus Review Question 14 To make a control have the focus, which makes it the active control, use the Focus method. Using the Focus method of a text box makes the insertion point appear in the text box. You cannot set the focus to a disabled control. C. Setting the Checked Property of Radio Buttons and Check Boxes You can set the Checked property of a radio button or check box at run time and also set the Visible property of controls in code. D. Setting Visibility at Run Time E. Disabling Controls Controls can be disabled by setting the Enabled property to False. F. Setting Properties Based on User Actions G. Changing the Color of Text Change the color of text in a control by changing its ForeColor property. You can use the color constants to change colors during run time. H. Using Radio Buttons for Selecting Colors I. Changing Multiple Properties of a Control Review Question 16 The With and End With statements provide an easy way to refer to an object multiple times J. without repeating the object s name. Concatenating Text Review Question 17 Joining two strings of text is called concatenation and is accomplished by placing an ampersand between the two elements. (A space must precede and follow the K. ampersand.) Continuing Long Program Lines Review Question 18 Visual Basic 2010 offers implicit line continuation as well as the traditional:use a space and an underscore to continue a long statement on another line. Be sure to demonstrate implicit continuation! L. Downloading and Using the Line and Shape Controls V. Your Hands-On Programming Example A. Planning the Project 2-3
B. The Project Coding Solution VI. Good Programming Habits VII. Summary VIII. Key Terms IX. Review Questions X. Programming Exercises XI. Case Studies TEACHING SUGGESTIONS: You can use any graphic file (with the proper format) that you have available. Demonstration Idea: The hands-on example in the back of chapter 2 can be used as your demonstration model. The example uses many of the new controls and topics introduced in this chapter. The Basic code used in the example is brief, and will keep your student's attention. Begin by explaining the purpose of the project and talk through, or write on the board, each of the three planning steps: (1) sketch the form, (2) list the objects and properties that are needed, and (3) plan the code that will be used for each of the procedures that will execute when your project runs. Chapter 2 introduces many new objects and properties. Beginners are often confused about the difference between labels and text boxes. Give examples of situations where text boxes are used, such as a form that will be filled in for an employment application. Remember, a user can change what is displayed in a text box. There are many options available for customizing the user interface. The BorderStyle property is used for displaying controls as flat or 3D. The TextAlign property is used to change the alignment of the text in text boxes. The ForeColor (color of text) property can be used to enhance the appearance of the user interface. Recommend that your students read "Designing the User Interface" from Chapter 2. This section of the text suggests colors and fonts that are "comfortable" for the user. The MaskedTextBox and the RichTextBox controls are specialized forms of the TextBox control. With the MaskedTextBox you can specify the format of the data required of the user by selecting from the options in the Mask property. The RichTextBox allows formatting within the box. Deciding whether to use a radio button or a check box can be confusing. Quiz your students on what would be used in each of these situations on a credit application: Your income range below $25,000, $25,000 to $59,999, above $60,000 (radio buttons) The ages of your children under 3, 4-6, 7-10, 11-13, over 13 (check boxes) Number of years with current employer less than 1, 2-4, 5 or more (radio buttons) Types of current credit Department Store, Gasoline, Home Loan, Other (check boxes) Pictures can be placed on a form with a PictureBox control. Images are added to a project using the Resources dialog box. This dialog box appears when the programmer clicks on the Image property and clicks on the properties button. 2-4
Demonstrate how controls can be selected individually or as a group. Show how controls can be moved as a group and properties can be set as a group. Demonstrate how multiple controls can be aligned by selecting the group and then using the buttons on the Layout toolbar or the corresponding items on the Format menu. HELPFUL HINT! To change the picture in the form s Title bar, change the form s Icon property. Explain that user convenience is important. Changing the Text property to include the "&" will allow keyboard access with the ALT key. Emphasize that programmers should be careful not to assign duplicate access keys on the same form. Demonstrate how you can make one of your buttons the default button by setting the AcceptButton property of the form to the button name. When the user presses ENTER, that button is automatically selected and the code in the button executes. Also, demonstrate how you can select a cancel button. The cancel button is the button that is selected when the user presses the ESC key. You can make a button the cancel button by setting the form's CancelButton property. Note that these are properties of the form. Demonstrate and discuss the importance of having the tab key work properly by setting the TabIndex and properties. You can also view the tab indexes of all controls in the design view by selecting the View menu and then choosing Tab Order (the form must be displayed). Show how you can set the StartPosition property of a form to specify its location when the form is displayed. This is useful for all forms that are not maximized. Add a Tooltip to a control and then run the program and let the mouse pointer pause over the object. Note that a ToolTip component must be added to the component tray in order for the controls on the form to have the Tooltip on ToolTip1 property. COMMON ERROR: When students write code to clear a text box or label, many times they will not use an empty string. The empty string is "" (no space between the two quotation marks). Often, students will type a blank space in between the quotes. This will cause them frustration in later chapters when they are validating text boxes for input and the test finds a blank space and identifies the object as not being empty. Explain the use of the Focus method to make the insertion point appear in the correct object. Note that the Checked property of radio buttons and check boxes can be tested for True or False to determine if they are selected. Discuss the real advantage of using the With statement. Using With/EndWith is more efficient than spelling out the object in each statement. Your Visual Basic projects will run a little faster if you use With/EndWith. On a large, complicated project, the savings can be significant. Practice concatenation with these examples: MessageLabel.Text = "One, " & "Two, " & "Three" NameLabel.Text = "John " & "Doe" WeatherLabel.Text = "Hello, " & NameTextBox.Text & "! Today the weather is warm." Don t forget punctuation in your concatenation: MessageLabel.Text = "Hello, my name is " & NameTextBox.Text & "." Don t forget to demonstrate implicit line continuation, new in Visual Basic 2010! 2-5
Chapter 2 User Interface Design ANSWERS TO REVIEW QUESTIONS 1. You can display program output in a text box or a label. When should you use a text box? When is a label appropriate? Use a text box control when you want the user to type some input. Use a label control when you want to display information that the user cannot change. Labels can be used to display a message or the result of a calculation. 2. What would be the advantage of using a masked text box rather than a text box? The masked text box control is a specialized form of the TextBox control. You can specify the format (the Mask property) of the data required of the user, for example, a zip code, a date, a phone number, or a social security number. At run time, the user cannot enter characters that do not conform to the mask. 3. When would it be appropriate to use a rich text box instead of a text box? The rich text box offers a variety of formatting features that are not available in text boxes. In a rich text box, the user can apply character formatting, much like using a word processor. It would be appropriate to use a rich text box whenever text should be formatted, or if the text will flow over multiple lines. 4. What properties of a TextBox and RichTextBox must be set to allow a long Text property to wrap to multiple lines? In order for text boxes and rich text boxes to wrap to a second line, the WordWrap and Multiline properties must be set to True. The WordWrap property determines whether the contents should wrap to a second line if they do not fit on a single line. The property is set to True by default on both the text box and the rich text box. The TextBox and the RichTextBox controls have a Multiline property, which is set to False by default on a text box, and to True on a rich text box. 5. How does the behavior of radio buttons differ from the behavior of check boxes? Radio buttons allow the user to select only one button of a group. In any group of check boxes, any number of boxes may be selected. 6. If you want two groups of radio buttons on a form, how can you make the groups operate independently? In order to create two groups of radio buttons that operate independently, you should place each group inside of its own group box. A group of radio buttons inside a group box function together as a group. The best method is to first create a group box and then draw each radio button inside the group box. Don t place the radio button on the form and drag it inside the group box if you do, it will still belong to the form s group, not to the group in the group box. Repeat the process to create another group box with radio buttons. 7. Explain how to make a graphic appear in a picture box control. A PictureBox control can hold an image. You can set a picture box s Image property to a graphic file with an extension of.bmp,.gif,.jpg,.jpeg,.png,.ico,.emf or.wmf. Add your images to the project's resources, then assign the resource to the Image property of the PictureBox control. Place a PictureBox control on a form and then select its Image property in the Properties window. Click on the Properties button to display a Select Resource dialog box where you can select images that you 2-6
have already added, or add new images. Click on the Import button of the Select Resource dialog box to add images. An Open dialog box appears where you can navigate to your image files. PictureBox controls have several useful properties that you can set at design time or run time. For example, set the SizeMode property to StretchImage to make the picture enlarge to fill the control. You can set the Visible property to False to make the picture box disappear. 8. Describe how to select several labels and set them all to 12-point font size at once. There are several methods of selecting multiple controls. If the controls are near each other, the easiest method is to use the mouse to drag a selection box around the controls. Point to one corner of a box surrounding the controls, press the mouse button, and drag to the opposite corner. When you release the mouse button, each control will have selection handles. You can also select multiple controls, one at a time. Click on one control to select it, hold down the Ctrl key or the Shift key, and click on the next control. You can keep the Ctrl or Shift key down and continue clicking on controls you wish to select. Ctrl click (or Shift click) on a control a second time to deselect it without changing the rest of the group. With the labels selected, scroll to the Font property and click on the plus sign to the left (of the Font property) to open the font options. Change the Size property to 12 and press Enter. 9. What is the purpose of keyboard access keys? How can you define them in your project? How do they operate at run time? Many people prefer to use the keyboard, rather than a mouse, for most operations. Windows is set up so that most everything can be done with either the keyboard or a mouse. You can make your projects respond to the keyboard by defining access keys, also called hot keys. You can set access keys for buttons, radio buttons, and check boxes when you define their Text properties. Type an ampersand (&) in front of the character you want for the access key; Visual Basic underlines the character. During run time you can operate the keyboard access keys by pressing and holding Alt + the key that corresponds to the underlined character. For example, use the Exit button with Alt + x. 10. Explain the purpose of the AcceptButton and CancelButton properties of the form. Give an example of a good use for each. Once a person s fingers are on the keyboard to type, most people prefer to press common keys rather than pick up the mouse. If one of the buttons on the form is the default button, pressing Enter is the same as clicking the button. You can make one of your buttons the default button by setting the AcceptButton property of the form to the button name. When the user presses Enter, that button is automatically selected. You can also select a cancel button. The cancel button is the button that is selected when the user presses the Esc key. You can make a button the cancel button by setting the form's CancelButton property. A good example of when to use these properties is on a form with OK and Cancel buttons. You may want to set the form's AcceptButton property to OkButton and the CancelButton property to CancelButton. 11. What is a ToolTip? How can you make a ToolTip appear? ToolTips are those small labels that pop up when you pause (rest) your pointer over a toolbar button or control. To define ToolTips, select the ToolTip control from the toolbox and click anywhere on the form. The new control appears in the component tray that opens at the bottom of the Form Designer. After you add the ToolTip control, examine the properties list for other controls on the form, such as buttons, text boxes, labels, radio buttons, check boxes, and even the form itself. Each has a new ToolTip on ToolTip1 property (assuming that you keep the default name, ToolTip1, for the control). Now you can change the ToolTip on ToolTip1 property to the text that you want displayed when the pointer pauses on the object. 2-7
12. What is the focus? How can you control which object has the focus? In Windows programs, one control on the form always has the focus. You can see the focus change as you Tab from control to control. For controls such as buttons, the focus appears as a thick blue border. For text boxes, the insertion point (also called the cursor) appears inside the box. Some controls can receive the focus, others cannot. For example, text boxes and buttons can receive the focus, but labels and picture boxes cannot. When a program begins running, the focus is on the control with the lowest TabIndex. Using code, the Focus method allows the programmer to control which object has the focus. For example, NameTextBox.Focus() will make the insertion point (focus) appear in a textbox named NameTextBox. 13. Assume you are testing your project and don t like the initial position of the insertion point. Explain how to make the insertion point appear in a different text box when the program begins. When your program begins running, the focus is on the control with the lowest TabIndex (usually 0). Set the TabIndex to 0 for the control where you want the insertion point to appear when the program begins. 14. During program execution you want to return the insertion point to a text box called AddressTextBox. What Basic statement will you use to make that happen? AddressTextBox.Focus() 15. What Basic statements will clear the current contents of a text box and a label? You can clear out the contents of a text box or label by setting the property to an empty string. Use "" (no space between the two quotation marks) or String.Empty. For example: AddressTextBox.Text = "" or NameLabel.Text = "" or AddressTextBox.Text = String.Empty You can also clear out a text box using the Clear method: AddressTextBox.Clear() 16. How are the With and End With statements used? Give an example. The With and End with statements are used to change several properties of a single control. You specify an object name in the With statement. All subsequent statements until the End With relate to that object. The statements beginning with With and ending with End With are called a With block. The statements inside the block are indented for readability. The real advantage of using the With statement, rather than spelling out the object for each statement, is that With is more efficient. Your Visual Basic projects will run a little faster if you use With. On a large, complicated project, the savings can be significant. Example: With TitleTextBox.Visible = True.ForeColor = Color.Blue.Focus() End With 17. What is concatenation and when would it be useful? Concatenation is a process whereby you can "tack" one string of characters to the end of another. Use an ampersand (&), preceded and followed by a space, between the two strings. Concatenating is very useful when you want to join a string literal and a property. For example: MessageLabel.Text = "Your name is: " & NameTextBox.Text & "." 18. Explain how to continue a very long Basic statement onto another line. When a Basic statement becomes too long for one line, use a line-continuation character. You can type a space and an underscore at the end of the line, press Enter, and continue the statement on the 2-8
next line. It is OK to indent the continued lines. The only restriction is that the line-continuation character must appear between elements; you cannot place a continuation in the middle of a literal, or split the name of an object or property. CHAPTER TOPICS COVERED IN THE PROGRAMMING EXERCISES Solutions for each of the Programming Exercises are available on the Web site for this textbook. Checkmarks appear in the following tables to outline the chapter topics used in the solution of each exercise. A brief description for each Programming Exercise is given. Please refer to the textbook for complete instructions. 2.1 Switch a light bulb on and off. Use concatenation. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible OvalShape ForeColor WordWrap PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip 2.2 Display the flag of 4 different countries. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip 2.3 Display a weather report. Use concatenation. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex 2-9
ToolTip 2.4 Input the user name and display a message of the day. Use concatenation. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip 2.5 Input information and display the lines of output for a mailing label. Use concatenation. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip VERY BUSY (VB) MAIL ORDER Design and code a project that has shipping information. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip VALLEY BOULEVARD (VB) AUTO CENTER Modify the VB Auto project from chapter 1, replacing the buttons with images in picture boxes. 2-10
CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip VIDEO BONANZA Display the location of videos using radio buttons. A check box allows the user to display or hide a message for members. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip VERY VERY BOARDS Create a project that will display an advertising screen for Very Very Boards. CheckBox AcceptButton Text Enable With GroupBox BorderStyle TextAlign Focus End With LineShape CancelButton ToolTip on ToolTip1 MaskedTextBox Checked Visible PictureBox Image RadioButton Multiline RectangleShape SizeMode RichTextBox StartPosition Text box TabIndex ToolTip 2-11