1. Program and Graphical User Interface Design
CHAPTER TWO
Program and Graphical User Interface Design

2. Objectives Open and close Visual Studio 2008
Create a Visual Basic 2008 Windows Application project
Name and set the Title Bar text in a Windows Form object; resize a Windows Form object
Add a Label object to a Windows Form object; name the Label object; set the text in the Label object; change the Font properties of the text in the Label object
Add a PictureBox object to the Windows Form object; name the PictureBox object; resize the PictureBox object
Chapter 2: Program and Graphical User Interface Design

3. Objectives
Add a Button object to the Windows Form object; name the Button object; set the text in the Button object; change the Button object size
Align Objects on the Windows Form object
Save and open Visual Basic projects
Understand and implement graphical user interface design principles
Understand and implement the first two phases of the program development life cycle
Chapter 2: Program and Graphical User Interface Design

4. Preview the Chapter Project
Chapter 2: Program and Graphical User Interface Design

5. Open Visual Studio 2008
Click the Start button on the Windows taskbar, point to All Programs on the Start menu, and then point to Microsoft Visual Studio 2008 on the All Programs submenu
Click Microsoft Visual Studio 2008 on the submenu
Chapter 2: Program and Graphical User Interface Design

6. Open Visual Studio 2008
Chapter 2: Program and Graphical User Interface Design

7. Open Visual Studio 2008
Chapter 2: Program and Graphical User Interface Design

8. Create a New Visual Basic 2008 Windows Application Project
Click the New Project button on the Standard toolbar
If necessary, in the Project types pane (left pane), click Visual Basic so it is selected
If necessary, click Windows Forms Application in the Templates pane
Double-click the text,WindowsApplication1, in the Name text box to select the text. Type the project name. For this example, you could type HotelRoomSelection as the name
Click the OK button in the New Project window
Chapter 2: Program and Graphical User Interface Design

9. Create a New Visual Basic 2008 Windows Application Project
Chapter 2: Program and Graphical User Interface Design

10. Create a New Visual Basic 2008 Windows Application Project
Chapter 2: Program and Graphical User Interface Design

11. Display the Toolbox
If the window does not already display the Toolbox, point to the Toolbox button in the left margin of the window
Chapter 2: Program and Graphical User Interface Design

12. Display the Toolbox
Chapter 2: Program and Graphical User Interface Design

13. Permanently Display the Toolbox
If necessary, point to the Toolbox button in the left margin of the window to display the Toolbox. Then, click the Auto Hide button on the Toolbox title bar
Chapter 2: Program and Graphical User Interface Design

14. Permanently Display the Toolbox
Chapter 2: Program and Graphical User Interface Design

15. Name the Windows Form Object
Click anywhere in the Windows Form object to select it
Scroll in the Properties window until you find the (Name) property in the Properties window (it is near the top of the list). Then, double-click in the right column for the (Name) property. Type the new name, frmHotelRoomSelection on your keyboard, and then press the ENTER key
In the Solution Explorer window, right-click the Form1.vb form file and then click Rename. Type frmHotelRoomSelection.vb and press the ENTER key
Chapter 2: Program and Graphical User Interface Design

16. Name the Windows Form Object
Chapter 2: Program and Graphical User Interface Design

17. Name the Windows Form Object
Chapter 2: Program and Graphical User Interface Design

18. Set the Title Bar Text in a Windows Form Object
With the Windows Form object selected, scroll in the Properties window until you find the Text property. Then, double-click in the right column for the Text property
Type Hotel Room Selection and then press the ENTER key
Chapter 2: Program and Graphical User Interface Design

19. Set the Title Bar Text in a Windows Form Object
Chapter 2: Program and Graphical User Interface Design

20. Set the Title Bar Text in a Windows Form Object
Chapter 2: Program and Graphical User Interface Design

21. Resize a Form
Place the mouse pointer over the sizing handle in the lower-right corner of the Windows Form object
Drag the sizing handle to the right and down until the window is the size you want. Then, release the left mouse button
Chapter 2: Program and Graphical User Interface Design

22. Resize a Form
Chapter 2: Program and Graphical User Interface Design

23. Add a Label Object
Drag the Label .NET component button from the Common Controls category in the Toolbox over the Windows Form object to the approximate location where you want to place the Label object
When the mouse pointer is in the correct location, release the left mouse button
Chapter 2: Program and Graphical User Interface Design

24. Add a Label Object
Chapter 2: Program and Graphical User Interface Design

25. Name the Label Object
With the Label object selected, scroll in the Properties window until you find the (Name) property. Then double-click in the right column for the (Name) property
Type the new name, lblHeading and then press the ENTER key
Chapter 2: Program and Graphical User Interface Design

26. Name the Label Object
Chapter 2: Program and Graphical User Interface Design

27. Change the Text in a Label Object
With the Label object selected, scroll in the Properties dialog box until you find the Text property. Then, double-click the Text value in the right column
Type Hotel Room Selection for the Text property
To enter the Text property, press the ENTER key
Chapter 2: Program and Graphical User Interface Design

28. Change the Text in a Label Object
Chapter 2: Program and Graphical User Interface Design

29. Change the Text in a Label Object
Chapter 2: Program and Graphical User Interface Design

30. Enter Multiple Lines of Text in a Label Object
With the Label object selected, click the Text property name in the left column of the Properties window. Then, click the down arrow in the right column of the Text property
Chapter 2: Program and Graphical User Interface Design

31. Enter Multiple Lines of Text in a Label Object
Chapter 2: Program and Graphical User Interface Design

32. Change Label Font, Font Style, and Font Size
Click the Label object to select it. Scroll until you find the Font property in the Properties window. Click the Font property in the left column of the Label property window
Click the ellipsis button for the Font property
In the Font dialog box, scroll to find Tahoma in the Font list and then click Tahoma in the Font list. Click Bold in the Font style list. Click 16 in the Size list
Click the OK button
Chapter 2: Program and Graphical User Interface Design

33. Change Label Font, Font Style, and Font Size
Chapter 2: Program and Graphical User Interface Design

34. Change Label Font, Font Style, and Font Size
Chapter 2: Program and Graphical User Interface Design

35. Center a Label Object in the Windows Form Object
With the Label object selected, click Format on the Menu bar and then point to Center in Form on the Format menu
Click Horizontally on the Center in Form submenu
Chapter 2: Program and Graphical User Interface Design

36. Center a Label Object in the Windows Form Object
Chapter 2: Program and Graphical User Interface Design

37. Delete GUI Objects Select the object to be deleted by clicking it
Press the DELETE key on the keyboard
Chapter 2: Program and Graphical User Interface Design

38. Delete GUI Objects
Chapter 2: Program and Graphical User Interface Design

39. Use the Undo Button on the Standard Toolbar
Click the Undo button on the Standard toolbar
Chapter 2: Program and Graphical User Interface Design

40. Use the Undo Button on the Standard Toolbar
Chapter 2: Program and Graphical User Interface Design

41. Add a PictureBox Object
With the Toolbox visible, drag the PictureBox .NET component on the Toolbox over the Windows Form object to the approximate location where you want the PictureBox object to be displayed
When the mouse pointer is in the correct location, release the left mouse button
Chapter 2: Program and Graphical User Interface Design

42. Add a PictureBox Object
Chapter 2: Program and Graphical User Interface Design

43. Add a PictureBox Object
Chapter 2: Program and Graphical User Interface Design

44. Name a PictureBox Object
Select the PictureBox object
Locate the (Name) property in the Properties window for the PictureBox object
Double-click the value in the right column for the (Name) property, type picStandardRoom as the name, and then press the ENTER key
Chapter 2: Program and Graphical User Interface Design

45. Resize a PictureBox Object
Place the mouse pointer over the sizing handle at the lower-right corner of the PictureBox object, and then drag the handle to the size required
Chapter 2: Program and Graphical User Interface Design

46. Resize a PictureBox Object
Chapter 2: Program and Graphical User Interface Design

47. Add a Second PictureBox Object
Drag the PictureBox .NET component in the Toolbox to any location in the Windows Form object, and then release the left mouse button
Chapter 2: Program and Graphical User Interface Design

48. Add a Second PictureBox Object
Chapter 2: Program and Graphical User Interface Design

49. Make Objects the Same Size
Select the object whose size you want to duplicate (in this example, the left PictureBox object in the window), and then hold down the CTRL key and click the object you want to resize (the right PictureBox object in the window)
Click Format on the menu bar and then point to the Make Same Size command on the Format menu
Click Both on the Make Same Size submenu
Chapter 2: Program and Graphical User Interface Design

50. Make Objects the Same Size
Chapter 2: Program and Graphical User Interface Design

51. Make Objects the Same Size
Chapter 2: Program and Graphical User Interface Design

52. Align the PictureBox Objects
With the left and right PictureBox objects selected, click Format on the menu bar and then point to Align on the Format menu
Click Bottoms on the Align submenu
Chapter 2: Program and Graphical User Interface Design

53. Align the PictureBox Objects
Chapter 2: Program and Graphical User Interface Design

54. Center Multiple Objects Horizontally in the Window
With both PictureBox objects selected, click Format on the menu bar and then point to the Center in Form command
Click Horizontally on the Center in Form submenu
Chapter 2: Program and Graphical User Interface Design

55. Center Multiple Objects Horizontally in the Window
Chapter 2: Program and Graphical User Interface Design

56. Add a Button Object
With the Toolbox displayed in the Visual Studio window, drag the Button .NET component in the Toolbox over the Windows Form object to the position where you want to place the button
When the mouse pointer is positioned properly, release the left mouse button
Chapter 2: Program and Graphical User Interface Design

57. Add a Button Object
Chapter 2: Program and Graphical User Interface Design

58. Name and Set Text for a Button Object
With the Button object selected, scroll in the Properties dialog box until you find the Text property. Double-click the Text value in the right column, type Standard Room and then press the ENTER key
Chapter 2: Program and Graphical User Interface Design

59. Name and Set Text for a Button Object
Chapter 2: Program and Graphical User Interface Design

60. Change Button Object Size
Place the mouse pointer over the right edge of the Button object until the pointer changes to a double-headed arrow
Drag the mouse pointer to the right until the Button object is just big enough to display the text, Standard Room, and then release the left mouse button
Chapter 2: Program and Graphical User Interface Design

61. Change Button Object Size
Chapter 2: Program and Graphical User Interface Design

62. Add and Align a Second Button
Drag the Button .NET component from the Toolbox to the right of the Standard Room button on the Windows Form object. Align the top of the rectangle in the mouse pointer to the top of the Standard Room button until a blue line displays along the tops of the buttons
When the buttons are aligned and spaced as you like, release the left mouse button
Chapter 2: Program and Graphical User Interface Design

63. Add and Align a Second Button
Chapter 2: Program and Graphical User Interface Design

64. Add and Align a Second Button
Chapter 2: Program and Graphical User Interface Design

65. Aligning Objects Vertically
If necessary, click anywhere in the Windows Form object to deselect any other objects. Then, slowly drag the Deluxe Room button below the Standard Room button until vertical blue snap lines are displayed
When the blue lines appear, indicating the buttons are aligned vertically, drag the Standard Room button up or down to create the proper spacing between the buttons, and then release the left mouse button
Chapter 2: Program and Graphical User Interface Design

66. Aligning Objects Vertically
Chapter 2: Program and Graphical User Interface Design

67. Aligning Objects Vertically
Chapter 2: Program and Graphical User Interface Design

68. Save a Visual Basic Project
To save the work you have completed, you can click the Save All button on the Standard toolbar
The first time you save a project, the Save Project dialog box is displayed
Chapter 2: Program and Graphical User Interface Design

69. Close Visual Studio 2008
To close Visual Studio, you can click the Close button on the right of the Visual Studio window title bar
If, when you close Visual Studio, you have never saved your program, Visual Studio will display the Close Project dialog box
Chapter 2: Program and Graphical User Interface Design

70. Open a Visual Studio Project
Method 1: Double-click the solution file in the folder in which it is stored
Method 2: With Visual Studio open, click the Open File button on the Standard toolbar, locate the solution file, and open it
Method 3: With Visual Studio open, click File on the menu bar and then point to Recent Projects on the File menu. Click the name of the project you want to open
Chapter 2: Program and Graphical User Interface Design

71. Program Development Life Cycle
Set of phases and steps that are followed by developers to design, create, and maintain a computer program
Gather and Analyze the Program Requirements
Design the User Interface
Design the Program Processing Objects
Code the Program
Test the Program
Document the Program/System
Maintain the Program/System
Chapter 2: Program and Graphical User Interface Design

72. Phase I: Gather and Analyze the Program Requirements
Gather project requirements by interviewing users, reviewing current procedures, and completing other fact-gathering tasks
Two types of requirements documentation
Requirements document
Use Case Definition
Chapter 2: Program and Graphical User Interface Design

73. Phase I: Gather and Analyze the Program Requirements
Chapter 2: Program and Graphical User Interface Design

74. Phase I: Gather and Analyze the Program Requirements
Chapter 2: Program and Graphical User Interface Design

75. Phase 2: Design the User Interface
Developers sometimes spend 25% to 40% of the program design time on the user interface
Presentation layer
Use Visual Studio to create the user interface
Interface designs are often called mock-ups
Chapter 2: Program and Graphical User Interface Design

76. Phase 2: Design the User Interface
Principles of User Interface Design
The GUI should be easy to use and follow
Users will not be satisfied with the application if the user interface is not easy to use
Three primary means of interacting in a user interface are the keyboard, a pointing device, and voice input
Use of the interface should feel natural and normal
Provide the most appropriate object for each requirement
Chapter 2: Program and Graphical User Interface Design

77. Phase 2: Design the User Interface
Once an object is used for a particular purpose, then that object should be used for the same purpose throughout the program interface
Arrange objects in the sequence in which they are used
The interface should be kept as simple as possible, while maintaining functionality
The user interface should be intuitive
Chapter 2: Program and Graphical User Interface Design

78. Summary Open and close Visual Studio 2008
Create a Visual Basic 2008 Windows Application project
Name and set the Title Bar text in a Windows Form object; resize a Windows Form object
Add a Label object to a Windows Form object; name the Label object; set the text in the Label object; change the Font properties of the text in the Label object
Add a PictureBox object to the Windows Form object; name the PictureBox object; resize the PictureBox object
Chapter 2: Program and Graphical User Interface Design

79. Summary
Add a Button object to the Windows Form object; name the Button object; set the text in the Button object; change the Button object size
Align Objects on the Windows Form object
Save and open Visual Basic projects
Understand and implement graphical user interface design principles
Understand and implement the first two phases of the program development life cycle
Chapter 2: Program and Graphical User Interface Design

80. Program and Graphical User Interface Design
CHAPTER TWO COMPLETE
Program and Graphical User Interface Design