Visual Basic 2005 CHAPTER 2 Program and Graphical User Interface Design

2 Agenda ►VideoVideo ►Last Class: Chapter 5 in Computers and Technology in a Changing Society: Computers and Technology ►Visual Basic 2: Program and Graphical User Interface Design ►Agenda for Next Class 2Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 Last Class ►Chapter 5 in Computers and Technology in a Changing Society: Computers and Privacy Sending is like sending a postcard unless it is encrypted. Spyware consumes a systems resources such as hard-drive space and bandwidth. Presence technology allows a device on a network to determine the status of other devices on the network such as location and whether or not they are available to communicate. Cookies are small text files that when used properly can be used to personalize a web site. 3Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD) 4 Objectives ►Open and close Visual Studio 2005 ►Create a Visual Basic 2005 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

2 5 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 6 Open Visual Studio 2005 ►Click the Start button on the Windows taskbar, point to All Programs on the Start menu, and then point to Microsoft Visual Studio 2005 on the All Programs submenu ►Click Microsoft Visual Studio 2005 on the submenu Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 7 Open Visual Studio 2005 ►Figure 2-3 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 8 Create a New Visual Basic 2005 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 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 9 Create a New Visual Basic 2005 Windows Application Project ►Figure 2-8 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 10 Display the Toolbox ►If the window does not already display the Toolbox, point to the Toolbox button in the left margin of the window ►Figure 2-9 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 11 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 ►Figure 2-10 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 12 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 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 13 Name the Windows Form Object ►Figure 2-14 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 14 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 15 Set the Title Bar Text in a Windows Form Object ►Figure 2-16 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 16 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 ►Figure 2-18 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 17 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 ►Figure 2-20 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 18 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 ►Figure 2-22 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 19 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 20 Change the Text in a Label Object ►Figure 2-25 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 21 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 ►Figure 2-26 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 22 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 23 Change Label Font, Font Style, and Font Size ►Figure 2-30 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 24 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 ►Figure 2-32 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 25 Delete GUI Objects ►Select the object to be deleted by clicking it ►Press the DELETE key on the keyboard ►Figure 2-34 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 26 Use the Undo Button on the Standard Toolbar ►Click the Undo button on the Standard toolbar ►Figure 2-35 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 27 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 28 Add a PictureBox Object ►Figure 2-37 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 29 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 30 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 ►Figure 2-38 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 31 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 ►Figure 2-39 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 32 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 33 Make Objects the Same Size ►Figure 2-42 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 34 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 ►Figure 2-44 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 35 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 ►Figure 2-46 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 36 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 ►Figure 2-48 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 37 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 ►Figure 2-49 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 38 Change the 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 ►Figure 2-51 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 39 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 40 Add and Align a Second Button ►Figure 2-53 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 41 Aligning Objects Vertically ►If necessary, click anywhere in the Windows Form object to deselect any other objects. Then, slowly drag the Standard Room button above the Deluxe 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 42 Aligning Objects Vertically ►Figure 2-55 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 43 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 ►Figure 2-56 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 44 Close Visual Studio 2005 ►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 ►Figure 2-57 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 45 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 46 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 47 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 48 Phase I: Gather and Analyze the Program Requirements ►Figure 2-58 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 49 Phase I: Gather and Analyze the Program Requirements ►Figure 2-59 Chapter 2: Program and Graphical User Interface Design Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 50 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 51 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 52 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 53 Summary ►Open and close Visual Studio 2005 ►Create a Visual Basic 2005 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 54 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 Presentation by: Joseph H. Schuessler, B.B.A., M.B.A., M.S., Ph.D. (ABD)

2 Next Class ►Visual Basic 3: Program Design and Coding Chapter 2: Program and Graphical User Interface Design55

2 Questions?