Chapter 3 provides students with the skills and knowledge necessary to complete phases 2,3,and 4 of the PDLC by enhancing a GUI mock-up, designing program processing objects, and coding a program. Topics include using IntelliSense when writing code and enhancing a Visual Basic 2010 form by changing the BackColor property of an object and displaying images. This chapter also explains how to enter Visual Basic 2010 code, correct errors, and run a completed program. Finally, the chapter discusses the value of creating an event planning document.

1. Microsoft Visual Basic 2010
CHAPTER THREE
Program Design and Coding

2. 3
Change the BackColor property of an object
Add images to a PictureBox object
Locate and save an image from the World Wide Web
Import an image into the Program Resources folder
Size an image
Set the Visible property in the Properties window
Chapter 3: Program Design and Coding
Objectives

3. 3
Set the Enabled property in the Properties window
Run a Visual Basic 2010 program
Enter Visual Basic 2010 code
Understand Visual Basic 2010 code statement formats
Use IntelliSense to enter Visual Basic 2010 code statements
Chapter 3: Program Design and Coding 3
Objectives

4. 3
Using code, set the Visible and Enabled property Enter
comments in Visual Basic 2010 code
Correct errors in Visual Basic 2010 code
Write code to use the Close() procedure
Print code
Prepare an Event Planning Document
Chapter 3: Program Design and Coding 4
Objectives

5. 3
Click the Windows Form object to select it
Locate the BackColor property in the Properties window and click
the right column of the BackColor property
Click the BackColor down arrow. Click the Web tab to display the
Web tabbed page
Scroll to display and select the color you wish to apply
Chapter 3: Program Design and Coding 5
Change Background (BackColor)
Property

6. 3
Chapter 3: Program Design and Coding 6
Change Background (BackColor)
Property

7. 3
Enter scsite.com/vb2010/ch3/images in the Address
box of the Internet browser and press ENTER
Locate StandardRoom.jpg and right-click the image
Click Save Picture As on the shortcut menu
Identify the location where the image will be stored.
Enter the image file name, StandardRoomClick Save to save
the image in the selected locationChapter 3: Program Design and Coding 7
Locating and Saving an Image
from the World Wide Web

8. 3
Chapter 3: Program Design and Coding 8
Locating and Saving an Image
from the World Wide Web

9. 3
Select the picStandardRoom PictureBox object, scroll to the Image
Click the Image property name in the left list in the column
Click the Ellipsis button of the Image property
Click the Import button in the Select Resource dialog box.
Then, using the features of the Open dialog box, locate the file you
downloaded and want to import into the program
Chapter 3: Program Design and Coding 9
Importing the Image
into the Program Resources Folder

10. 3
Click the Open button in the Open dialog box
With the StandardRoom file name selected in the
Project resource file list, click the OK button in the
Select Resource dialog box
Chapter 3: Program Design and Coding 10
Importing the Image
into the Program Resources Folder (Continued)

11. 3
With the StandardRoom PictureBox object selected, scroll in
the picStandardRoom Properties window until you see the
SizeMode property
Click the down arrow next to the SizeMode property in the
right column
Click StretchImage in the SizeMode list
Try clicking on a few of the other options to see different results
Chapter 3: Program Design and Coding 11
Sizing an Image

12. 3
Chapter 3: Program Design and Coding 12
Sizing an Image

13. 3
With the picStandardRoom PictureBox object selected, scroll
down until the Visible property is displayed
Click the Visible property name in the left column, and then click
the Visible down arrow in the right column
Click False on the Visible property list
Chapter 3: Program Design and Coding 13
Visible Property

14. 3
Chapter 3: Program Design and Coding 14
Visible Property

15. 3
Select the btnSelectRoom object. Scroll in the Properties window
until the Enabled property is visible
Click the Enabled property name in the left column, then click the
Enabled down arrow in the right column
Click False on the Enabled property list
Chapter 3: Program Design and Coding 15
Enabled Property for a Button Object

16. 3
Chapter 3: Program Design and Coding 16
Enabled Property

17. 3
Point to and click the Start Debugging button on the
Standard toolbar
Chapter 3: Program Design and Coding 17
Running a Program

18. 3
Chapter 3: Program Design and Coding 18
Running a Program (Continued)

19. 3
With the Hotel Room Selection program open and the
frmHotelRoomSelection.vb [Design] tabbed window visible,
point to the Standard Room Button object in the Windows
Form object
Double-click the Standard Room Button object
This will open up a Visual Basic coding window
Chapter 3: Program Design and Coding 19
Entering Visual Basic Code for Event Handling

20. 3
Chapter 3: Program Design and Coding 20
Entering Visual Basic Code for Event Handling

21. 3
Syntax specifies how each Visual Basic statement must be written
When the user clicks the Standard Room button while the program is
running, the standard room image should be displayed in the
picStandardRoom PictureBox object
The code below makes picStandardRoom.jpg visible
Chapter 3: Program Design and Coding 21
Visual Basic 2010 Coding Statements

22. 3
Chapter 3: Program Design and Coding 22
General Format of a Visual Basic Statement

23. 3
IntelliSense displays all allowable entries you can make in a
Visual Basic statement each time a dot (period), equal sign, or
other special character required for the statement is typed
Chapter 3: Program Design and Coding 23
IntelliSense

24. 3
With the code window open and the insertion point positioned
as shown in Figure 3-25 on page 131 and on next slide, type pic
followed by a period
To identify the correct entry, type the first letters of the entry
until the entry is selected. In this case, type s on your keyboard
Chapter 3: Program Design and Coding 24
Entering a Visual Basic Statement

25. 3
Chapter 3: Program Design and Coding 25
Entering a Visual Basic Statement
(Continued)
Insertion point to
enter VB code
When IntelliSense highlights the correct object name, press the key
on the keyboard corresponding to the entry that is to follow the
object name. In this case, press the PERIOD key

26. 3
As with the object name in the second step, the next
step is to enter one or more characters until
IntelliSense highlights the desired property in the list.
Type the letter, v on your keyboard
Press the key for the character that is to follow the property
name. In this case, press the SPACEBAR
Chapter 3: Program Design and Coding 26
Entering a Visual Basic Statement
(Continued)

27. 3
Press the EQUAL SIGN key on the keyboard and then
press the SPACEBAR. On the IntelliSense list, click
the Common tab to display the most common results
Type t on the keyboard
Press the key for the character that is to follow the
True entry. In this case, press the ENTER keyChapter 3: Program Design and Coding 27
Entering a Visual Basic Statement
(Continued)

28. 3
Chapter 3: Program Design and Coding 28
Entering a Visual Basic Statement

29. 3
With the insertion point on the second line of the code editing window for
the Click event of the Standard Room button, type pic on your keyboard
Type d and the picDeluxeRoom entry is highlighted
Press the PERIOD
Press the SPACEBAR, and then press the EQUAL SIGN key, and then press
the SPACEBAR again
Type f and then press the ENTER key
Chapter 3: Program Design and Coding 29
Setting the Visible Property to False

30. 3
Chapter 3: Program Design and Coding 30
Setting the Visible Property to False

31. 3
Type btn to display the IntelliSense list
Type se btnSelectRoom is highlighted in the entry list
Type a period, type e, press the SPACEBAR, press the EQUAL SIGN
key, press the SPACEBAR again, and then type t to select True in the
IntelliSense list
Press the ENTER key to enter the completed statement and place the
insertion point on the next line
Chapter 3: Program Design and Coding 31
Enabled Property

32. 3
Chapter 3: Program Design and Coding 32
Enabled Property

33. 3
To insert a blank line following the event code generated by
Visual Studio that begins with the word, Private, click
anywhere in that line and then press the END and press the
ENTER key
Type the first line of the comments, beginning with an
apostrophe, as shown in Figure 3-46 on page 143, and then
press the ENTER key
Chapter 3: Program Design and Coding 33
Comments in Program Statements

34. 3
Chapter 3: Program Design and Coding 34
Comments in Program Statements

35. 3
Chapter 3: Program Design and Coding 35
Same Line Comments
Introductory
Comments

36. 3
Click to the left of the word, Public, on line 1 in the program to
place the insertion point on that line
Press the ENTER key one time, and then press the UP ARROW key
Type an apostrophe, a space, the text, Program Name: and
then press the TAB key one time
Type Hotel Room Selection as the name of the program.
Then, press the ENTER key
Chapter 3: Program Design and Coding 36
Introductory Comments

37. 3
Chapter 3: Program Design and Coding 37
Introductory Comments

38. 3
Using IntelliSense reduces the likelihood of coding errors
considerably, although it is still possible to code an error
One possible error may be forgetting an apostrophe in a
comment statement
A build errors message means the Visual Basic compiler
detected a coding error in the program
Chapter 3: Program Design and Coding 38
Correcting Errors in Code

39. 3
Chapter 3: Program Design and Coding 39
Correcting Errors in Code

40. 3
Click the No button in the Microsoft Visual Studio dialog
box that informs you of a build error
Double-click anywhere on the error line
Click in the leftmost column on line 7 to place the insertion
point at that location
Type an apostrophe
Click anywhere in the code editing window
Chapter 3: Program Design and Coding 40
Correcting Errors in Code

41. 3
Chapter 3: Program Design and Coding 41
Correcting Errors in Code

42. 3
On the frmHotelRoomSelection.vb [Design] tabbed
page, double-click the Exit Window Button object
Chapter 3: Program Design and Coding 42
Additional Click Events

43. 3
With the insertion point positioned as shown in Figure 3-64 on
page 154, type clo to highlight Close in the IntelliSense list
Press the ENTER key
Chapter 3: Program Design and Coding 43
Close Procedure

44. 3
Click File on the menu bar to display the File menu
Click Print on the File menu to display the Print dialog box
Ensure that a check mark appears in the Include line numbers
check box if you want line numbers on your printout. Most
developers prefer line numbers on printouts
Make any other selections you find necessary in the Print
dialog box and Click
Chapter 3: Program Design and Coding 44
Printing Code

45. 3
Chapter 3: Program Design and Coding 45
Event Planning Document

46. 3
After the events and tasks within the vents have been
identified, the developer is ready to code the program
Entering Visual Basic statements to accomplish the tasks
specified on the event planning document
Developer enters the code and implements the logic
Chapter 3: Program Design and Coding 46
Phase 4 – Code the Program

47. 3
Change the BackColor property of an object
Add images to a PictureBox object
Locate and save an image from the World Wide Web
Import an image into the Program Resources folder
Size an image
Set the Visible property in the Properties window
Chapter 3: Program Design and Coding 47
Summary

48. 3
Set the Enabled property in the Properties window
Run a Visual Basic 2010 program
Enter Visual Basic 2010 code
Understand Visual Basic 2010 code statement formats
Use IntelliSense to enter Visual Basic 2010 code statements
Using code, set the Visible property of an object
Chapter 3: Program Design and Coding 48
Summary

49. 3
Using code, set the Enabled property of an object
Enter comments in Visual Basic 2010 code
Correct errors in Visual Basic 2010 code
Write code to use the Close() procedure
Print code
Prepare an Event Planning Document
Chapter 3: Program Design and Coding 49
Summary

50. Microsoft Visual Basic 2010
CHAPTER THREE COMPLETE
Program Design and Coding