Microsoft Visual Basic 2010: Reloaded, Fourth Edition 2-12

Microsoft Visual Basic 2010: Reloaded, Fourth Edition 2-12

Chapter 2

Creating a User Interface

At a Glance

Instructor’s Manual Table of Contents

·  Chapter Overview

·  Chapter Objectives

·  Teaching Tips

·  Quick Quizzes

·  Class Discussion Topics

·  Additional Projects

·  Additional Resources

·  Key Terms

Lecture Notes

Chapter Overview

Chapter 2 provides an introduction to the creation of a graphical user interface using Visual Basic. Students learn how to create TOE charts and design forms and use text boxes and buttons. Students also learn about dialog boxes, access keys, tab order, container controls, and splash screens. Good design principles and Windows standards are emphasized.

Chapter Objectives

After studying this chapter, the student should be able to:

•  Plan an application using a TOE chart

•  Use a text box and table layout panel

•  Follow the Windows standards regarding the layout and labeling of controls

•  Follow the Windows standards regarding the use of graphics, fonts, and color

•  Assign access keys to controls

•  Set the tab order

•  Add a splash screen to a project

•  Use the Font and Color dialog boxes

•  Designate a default button

•  Print the interface during run time

•  Play an audio file

Teaching Tips

Planning an Application

1.  Describe the process of planning an application.

2.  Stress the importance of working with the user at the planning stage.

Teaching

Tip / The most common cause of failure of a new application is that the programmers did not understand what the users really needed. The importance of including the users in the planning stage of development cannot be overemphasized.

3.  Introduce the concept of a TOE chart.

4.  Point out that tasks, objects, and events should be identified in the early stages of planning.

Sunshine Cellular Company

1.  Introduce the sample application to be developed.

Identifying the Application’s Tasks

1.  Discuss the procedures currently in use for this application. Use Figure 2-2 as a guide.

2.  Review the design questions that should be asked to identify the required input, output, and processing.

3.  Using Figure 2-3, illustrate how the application’s tasks are incorporated into a TOE chart.

Identifying the Objects

1.  Describe the next step of assigning each task to an object.

2.  Introduce the text box and describe how it is normally used.

3.  Point out that buttons will be used to trigger actions.

4.  Point out that labels are necessary to identify what the user sees on the form.

Teaching

Tip / Stress the importance of meaningful labels that will instruct the user what to enter in each text box.

5.  Discuss how each of the controls on the form relates to the tasks that must be completed by the application.

6.  Show how this object information is incorporated into a TOE chart, using Figure 2-4.

Identifying the Events

1.  Point out that text boxes do not require any special events when the user enters data.

Teaching

Tip / Verify that the students understand that a text box has many events, but none are required for this program. Also, you may wish to point out that while none are required, there are some events that are sometimes used to perform actions that enhance the usability of text boxes, such as highlighting, changing font colors to indicate errors, etc.

2.  Point out that since labels are only used as displays to guide the user, the user does not interact with them in any way.

3.  Discuss the click event as the main event of interest for button controls.

4.  Show how event information is incorporated into the TOE chart, using Figures 2-5 and 2-6.

Designing the User Interface

1.  Discuss the importance of following Windows standards.

Teaching

Tip / It is well accepted from usability studies that users will perceive an application to be easier to use simply because Windows standards in menus, screen layouts, etc. have been used.

Arranging the Controls on a Form

1.  Describe the guidelines for arranging controls on a form.

Teaching

Tip / The human brain prefers order to disorder. The simple act of making controls the same width and aligning them vertically and horizontally produces a more pleasing appearance as well as better user acceptance.

2.  Introduce the concept of container controls, including the group box control, panel control, and table layout panel control.

3.  Compare and contrast the vertical arrangement of controls shown in Figure 2-7 and the horizontal arrangement shown in Figure 2-8.

4.  Point out the effects of using the container controls to provide a better visual experience.

Teaching

Tip / In addition to simply making the screen appear more organized, the groupings also suggest that the items within each group are related to each other. This provides some logical information to the user though a simple visual effect.

5.  Discuss the additional guidelines about label and button captions.

6.  Introduce sentence capitalization and book title capitalization.

7.  Discuss the guidelines on margins and on sizing and aligning controls.

Teaching

Tip / Students often resist taking the time to incorporate all of these guidelines in their programs. Remind them that commercial software is well designed and has a polished professional look.

Including Graphics in the User Interface

1.  Point out that graphics tend to draw the user’s attention away from the work area of the form.

2.  Discuss why graphics should be used sparingly.

Including Different Fonts in the User Interface

1.  Introduce the Font property and describe its use.

2.  Introduce the concept of a font and a point as a measurement of font size.

3.  Explain the difference between serif and sans serif fonts.

Teaching

Tip / You can demonstrate the difference between serif and sans serif fonts by opening a Word document and comparing Times New Roman and Arial fonts.

4.  Discuss the guidelines for using fonts on a form and the recommendation to use Segoe UI for Windows Vista and Windows 7.

Teaching

Tip / Point out that because a control inherits the form setting used on the form, you should configure the desired font on the form before adding controls.

Including Color in the User Interface

1.  Like graphics, bright colors tend to draw the user’s attention away from the work area of the form.

2.  Discuss the guidelines for using color in applications.

Teaching

Tip / A brief discussion of accessibility features in Windows for visually impaired users can help students understand the importance of these guidelines.

Borders and Sizing of Controls

1.  Introduce the BorderStyle property for setting the style of a control's border.

2.  Describe the appropriate settings for BorderStyle for identifying labels and for output labels.

Quick Quiz 1

1.  What control is used to provide prompts to the user about what data should be entered into a form?

Answer: label control

1. What control is used to allow users to type text into a form?

Answer: text box control

1. What three elements appear in a TOE chart?

Answer: tasks, objects, and events

Assigning Access Keys

1.  Introduce the concept of an access key, using Figure 2-9.

Teaching

Tip / Opening the File menu on any Windows application allows you to show the use of access keys in menus with which the students are already familiar.

2.  Discuss the guidelines for using access keys.

Teaching

Tip / Remind students of the importance of using Windows standards for the choice of which key to designate as the access key for a particular action.

3.  Describe the advantages of using access keys.

Teaching

Tip / While it is common practice to use access keys on buttons, it is not as common to assign access keys to every label on a form. Use of the Tab key to navigate from one text box to the next is usually sufficient if the form will be completed in sequential fashion.

4.  Describe the use of the ampersand character to indicate which character in the caption of a button or label will be the access key.

Controlling the Tab Order

1.  Introduce the TabIndex property, and describe how it affects cursor movement.

2.  Introduce the concept of focus.

3.  Discuss the desired order for focus in controls on the application, using Figure 2-10.

4.  Describe how to set a value for TabIndex in the sample application, using Figures 2-11 and 2-12.

Teaching

Tip / Point out that setting TabIndex is important for the usability of the application because it allows the form to be efficiently used without having to employ the mouse.

Quick Quiz 2

1. What character is used to designate an access key?

Answer: ampersand (&)

1. Which property controls the cursor movement on a form when the user presses the Tab key?

Answer: TabIndex

1. When a control is ready to accept input from a user, we say that the control has the ____.

Answer: focus

Splash Screens

1.  Discuss the purpose of including a splash screen in a project, using Figure 2-13.

2.  Describe the process of creating a splash screen, using Figures 2-14 through 2-16.

Teaching

Tip / The purpose of a splash screen is to entertain the user while initialization of the application is occurring. Point out that if the application must open files or databases or do any additional processing before displaying the first screen, it is best to display a splash screen until all processing is complete rather than to display the first screen before it is usable.

3.  Describe how to specify the splash screen, using Figures 2-17 and 2-18.

4.  Describe the use of the Assembly Information to provide data for the Splash Screen at run time, using Figures 2-19 and 2-20.

Dialog Boxes

1.  Introduce the concept of the primary window, using Figure 2-21.

2.  Introduce the concept of the dialog box and compare it to the primary window, using Figure 2-21.

3.  Compare and contrast the primary window’s capabilities to that of the dialog box.

Teaching

Tip / You might briefly demonstrate the Open File dialog as an example of a dialog box supporting an application.

4.  Describe the use of the Dialog template in the Add New Item dialog box for creating a dialog box.

5.  Introduce the MinimizeBox and MaximizeBox form properties and describe their effects.

Teaching

Tip / Ask the students if they can think of a situation in which a form should not have a Close button or Control menu box. An answer might be any dialog box that must be completed by the user and that will initiate specific required actions when the form’s own buttons are used.

6.  Explain that Visual Basic provides tools for commonly used dialog boxes such as Color, Font, and Save As.

7.  Explain the purpose of the component tray in the IDE, using Figure 2-22.

8.  Introduce the concept of a modal form.

9.  Use Figures 2-23 and 2-24 to describe the code used to show the Font dialog box and to retrieve the user’s selections.

10.  Use Figures 2-25 and 2-26 to describe the code used to show the Color dialog box and to retrieve the user’s selections.

11.  Introduce the concept of the default button and the cancel button on a form.

Designating Default Button on a Form

1.  Introduce the AcceptButton property, and point out that this is a form property, not a button property.

2.  Describe the visual cue provided when a default button has been designated, using Figure 2-27.

Teaching

Tip / Point out that a button that causes a destructive and irreversible action should not be designated as the default button.

Printing an Interface during Run Time

1.  Introduce the PrintForm tool in the Visual Basic PowerPacks section of the toolbox.

2.  Describe the purpose of the Print Preview and Print buttons, using Figure 2-28.

3.  Discuss the code used with the Print Preview and Print buttons, shown in Figure 2-29.

Playing Audio Files

1.  Introduce the My feature in Visual Basic and describe its purpose.

2.  Describe the use of the Computer object and the Audio object.

3.  Introduce the concept of arguments and describe how to specify them.

4.  Discuss the steps involved in playing an audio file at run time, using Figure 2-30.

Programming Tutorial 1

1.  Describe the Color Game Application that is developed in the tutorial, using Figure 2-40.

2.  Encourage students to create the program in this tutorial by following all of the steps.

Teaching

Tip / Remind students that programming is learned through practice. The more hands-on experience they get, the easier it will be to write programs. The tutorial will guide them through every step.

Programming Tutorial 2

1.  Describe the Music Sampler Application that is developed in the tutorial, using Figure 2-47.

2.  Encourage students to create the program in this tutorial by following all of the steps.

Programming Example

1.  Describe the Moonbucks Coffee programming example application to be developed, using Figure 2-57.

2.  Encourage students to create the program described in the example.

Teaching

Tip / Point out that this is an opportunity for the students to employ the concepts they have learned and practiced.

Quick Quiz 3

1. A special form showing information about the application that is shown first when the application starts is called a(n) ____.

Answer: splash screen

1. Which keyword in Visual Basic allows you to access the Computer object?

Answer: My

1. True/False: A splash screen allows the user to interact with it.

Answer: False

Class Discussion Topics

1.  Discuss the benefits of following Windows standards for menus, positioning of buttons, colors, etc. Answers might include user familiarity and comfort, efficiency, and ease of use.

2.  How important are these standards for users with disabilities? Ask students to attempt to use an application without using a mouse. How difficult is it to even launch a program without a mouse?

Additional Projects

1. Do some research on accessibility issues and the options that are available in Windows to support users with disabilities. Then write a short report describing some of the ways that a program can be written to assist users with specific disabilities such as visual disabilities or motor disabilities.

1. Do some research on the history of the graphical user interface (GUI) and write a short report listing the key developments.

Additional Resources