Chapter 2 — Program and Graphical User Interface Design

2,922 views

Published on

Chapter 2 introduces students to the major elements of the Visual Studio 2010 integrated development environment (IDE) while designing a graphical user interface mock-up. Topics include opening Visual Studio 2010, creating a Windows Forms Application project,adding objects to a Windows form, assigning properties to objects,aligning objects on the Windows form,and saving Visual Basic projects. The chapter also discusses how to apply GUI design principles and examines the first two phases of the program development life cycle (PDLC).

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,922
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
363
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Chapter 2 — Program and Graphical User Interface Design

  1. 1. Microsoft Visual Basic 2010 CHAPTER TWO Program and Graphical User Interface Design
  2. 2. 2 Open and close Visual Studio 2010 Create a VB 2010 Windows Application project Change the properties of a Windows Form object Change properties on Label object (control), i.e., name, text, and the Font properties Add a PictureBox object change two properties; name and size Chapter 2: Program and Graphical User Interface Design 2 Objectives
  3. 3. 2 Add a Button object and change the name, text, and size Properties Align Objects on the Windows Form object Save and open an existing 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 3 Objectives
  4. 4. Opening Visual Studio 2010 • Click Start on the Windows taskbar, point to All Programs, and then point to Microsoft Visual Studio 2010. • Click Microsoft Visual Studio 2010 Chapter 2: Program and Graphical User Interface Design 4
  5. 5. 2 1. Click New Project on the Standard toolbar 2. If necessary, in the left pane, click Visual Basic 3. If necessary, click Windows Forms Application 4. Double-click the text,WindowsApplication1, in the Name box and type the project name (see next slide) 5. Click the OK button in the New Project window Chapter 2: Program and Graphical User Interface Design 5 Create a New Visual Basic 2010 Windows Application Project
  6. 6. Chapter 2: Program and Graphical User Interface Design 6 Create a New Visual Basic 2010 Windows Application Project (continued)  Select Visual Basic  Make sure Windows Form Application is selected  Double-click WindowsApplication1 in Name box and replace it with your project name  Click OK to create project
  7. 7. 2 Chapter 2: Program and Graphical User Interface Design 7 Create a New Visual Basic 2010 Windows Application Project (continued)
  8. 8. 2 Display the Toolbox Chapter 2: Program and Graphical User Interface Design 8 If the Toolbox is not displayed, point to the Toolbox button in the left margin of the window
  9. 9. 2 To Permanently Display the Toolbox Chapter 2: Program and Graphical User Interface Design 9 If necessary, point to the Toolbox button in the left margin of the window to display the Toolbox. Then, click the Auto Hide button (the icon that looks like a push pin) on the Toolbox title bar to anchor the toolbox to the Visual Studio desktop workspare.
  10. 10. 2 Click anywhere in the Windows Form object to select it In the Solution Explorer window, right-click the Form1.vb filename. On the shortcut menu, select Rename Type the name of the form, “frmHotelRoomSelection.vb” and press the ENTER key Chapter 2: Program and Graphical User Interface Design 10 Name the Windows Form Object
  11. 11. 2 There are only two rules, but three conventions. The two rules are: The first character of a control name must be a letter or an underscore character (_) After the first character, the remaining characters may be letters, digits, or underscore characters(_) Chapter 2: Program and Graphical User Interface Design 11 Naming Conventions (see Chap 2 handout)
  12. 12. 2 The three conventions are: The first three letters of a control name should be a lower case prefix indicating the control type The first letter after the prefix should be in uppercase. In addition, if the name consists of multiple words, the first letter of each word should be capitalized for readability. The part of the control name that appears after the prefix should describe the control’s purpose (also for readability purposes). Chapter 2: Program and Graphical User Interface Design 12
  13. 13. 2 While the last three rules are not mandatory, they are standard conventions that many Visual Basic programmers follow. You should use these three guidelines when naming controls in your applications or develop your own naming convention scheme and use it regularly. Here are some control naming examples: Chapter 2: Program and Graphical User Interface Design 13 Naming Conventions (Continued) Control Description Suggested Name A text box in which the user enters his or her age txtAge A button that, when clicked, calculates the total of an order btnCalculateTotal A label that is used to display the distance from one city to another lblDistance A text box in which the user enters his or her last name lblLastName A button that, when clicked, adds a series of numbers btnAddNumbers A radio button, that when selected, indicated the users gender rdoGenderFemale
  14. 14. 2 There are other naming conventions for naming VB objects. The latest standard is where you begin each object’s name with the object’s purpose, followed by its class, using the Camel (Pascal) case. Examples of this naming convention are shown below: “MainForm” to the main form application, or perhaps “EmployeeDataForm” or “PersonnelForm”, or use “CalculateButton”, “NameLabel” for other types of controls. Chapter 2: Program and Graphical User Interface Design 14 Naming Conventions (continued)
  15. 15. 2 With the Windows Form object selected, scroll down the Properties window until you find the Text property. Then, double-click in the value (right) column of the Text property Type the Windows application name, “Hotel Room Selection”, and press the ENTER key This is the title will appear on the title bar of the application when it is running or executing. (see next slide) Chapter 2: Program and Graphical User Interface Design 15 Set the Title Bar Text in a Windows Form Object
  16. 16. 2 Chapter 2: Program and Graphical User Interface Design 16 Set the Title Bar Text in a Windows Form Object
  17. 17. 2 How to Resize a Form Chapter 2: Program and Graphical User Interface Design 17 Place the mouse pointer over the sizing handle in the lower-right corner of the Windows Form object Holding down the left mouse button, drag the sizing handle to the right and down until the window is the size you want. Then, release the left mouse button You could also change the Size properties values from the default size of 300,300 pixels
  18. 18. 2 There are many ways to create a control object on a Windows Form. Here are a few examples: 1. Click and drag the control from the toolbox to the location you want the control placed 2. Double-click on the control in the toolbox and it will be created on the Windows Form a. Using this method causes the control to be created either in the upper left corner of the form or overlays the last control created, regardless of type Chapter 2: Program and Graphical User Interface Design 18 Adding a control to a Windows Form object
  19. 19. 2 3. Click once on the control and then click on the Windows Form object where you want the control placed 4. You can copy an existing control by using the copy and paste method after it is selected. Chapter 2: Program and Graphical User Interface Design 19 Adding a control to a Windows Form object (Continued)
  20. 20. 2 Using the first technique, drag the Label 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 20 Add a Label Object
  21. 21. 2 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 value Type “lblHeading” Chapter 2: Program and Graphical User Interface Design 21 Name the Label Object
  22. 22. 2 With the Label object selected, scroll in the Properties dialog box until you find the Text property. Then, double-click the Text property value in the right column (see next slide) Type the new text, “Hotel Room Selection” for the Text property press the ENTER key Chapter 2: Program and Graphical User Interface Design 22 Change the Text in a Label Object
  23. 23. 2 Chapter 2: Program and Graphical User Interface Design 23 Change the Text in a Label Object
  24. 24. 2 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 24 Enter Multiple Lines of Text in a Label Object ►When you click on the down arrow next to Text property value, This opens up a box where you can type the content of the Text property with multiple lines
  25. 25. 2 Select the Label object, locate 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 the font you want Click the size you want to use in the Size list Click the OK button Chapter 2: Program and Graphical User Interface Design 25 Change Label Font, Font Style, and Font Size
  26. 26. 2 Chapter 2: Program and Graphical User Interface Design 26 Change Label Font, Font Style, and Font Size Click on ellipsis (…) to open Font dialog box
  27. 27. 2 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 27 Center a Label Object in the Windows Form Object
  28. 28. 2 Select the object to be deleted by clicking it Press the DELETE key on the keyboard Chapter 2: Program and Graphical User Interface Design 28 Delete GUI Objects
  29. 29. 2 Click the Undo button on the Standard toolbar Chapter 2: Program and Graphical User Interface Design 29 Use the Undo Button on the Standard Toolbar
  30. 30. 2 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 30 Add a PictureBox Object
  31. 31. 2 Chapter 2: Program and Graphical User Interface Design 31 Add a PictureBox Object
  32. 32. 2 Select the PictureBox object Locate the (Name) Double-click the value in the right column for the (Name) property, type “picStandardRoom” and then press the ENTER key Chapter 2: Program and Graphical User Interface Design 32 Name a PictureBox Object
  33. 33. 2 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 33 Resize a PictureBox Object
  34. 34. 2 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 34 Add a Second PictureBox Object
  35. 35. 2 Select the object whose size you want to duplicate, and then hold down the CTRL key and click the object you want to resize 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 35 Make Objects the Same Size
  36. 36. 2 Chapter 2: Program and Graphical User Interface Design 36 Make Objects the Same Size (Continued)
  37. 37. 2 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 37 Align the PictureBox Objects
  38. 38. 2 With both 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 38 Center Multiple Objects Horizontally in the Window
  39. 39. 2 Add a Button Object Chapter 2: Program and Graphical User Interface Design 39 A Button object is a commonly used object in a graphical user interface, i.e., the OK button. Generally, when a program is executing, buttons are used to cause an event to occur. Buttons
  40. 40. 2 Add a Button Object Chapter 2: Program and Graphical User Interface Design 40 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
  41. 41. 2 Name and Set Text for a Button Object Chapter 2: Program and Graphical User Interface Design 41 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 the text you want to display, and then press the ENTER key
  42. 42. 2 Change Button Object Size Chapter 2: Program and Graphical User Interface Design 42 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, and then release the left mouse button
  43. 43. 2 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 43 Add and Align a Second Button
  44. 44. 2 Chapter 2: Program and Graphical User Interface Design 44 Add and Align a Second Button
  45. 45. 2 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 Deluxe 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 45 Aligning Objects Vertically
  46. 46. 2 Chapter 2: Program and Graphical User Interface Design 46 Aligning Objects Vertically
  47. 47. 2 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 47 Save a Visual Basic Project
  48. 48. 2 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 48 Close Visual Studio 2010
  49. 49. 2 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 and Solutions on the File menu. Click the name of the project you want to open Chapter 2: Program and Graphical User Interface Design 49 Open a Visual Studio Project
  50. 50. 2 Set of phases and steps that are followed by developers to design, create, and maintain a computer program. We will discuss the first two: 1. Gather and Analyze Program Requirements 2. Design the User Interface 3. Design the Program Processing Objects 4. Code the Program 5. Test the Program 6. Document the Program/System 7. Maintain the Program/System Chapter 2: Program and Graphical User Interface Design 50 Program Development Life Cycle
  51. 51. 2 It is mandatory before you begin designing the user interface, the programmer or developer must understand the problem(s) to be solved. When the requirements have been determined, they must be documented. The exact form of the requirements document may vary significantly and might be dictated by the application itself or by documentation standards within an organization.. Chapter 2: Program and Graphical User Interface Design 51 Phase I: Gather and Analyze the Program Requirements
  52. 52. 2 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 52 Phase I: Gather and Analyze the Program Requirements
  53. 53. 2 Phase I: Gather and Analyze the Program Requirements Chapter 2: Program and Graphical User Interface Design 53 The Requirments Document: The requirements document contains all the information that should be needed by a developer to design the program.
  54. 54. 2 Chapter 2: Program and Graphical User Interface Design 54 Phase I: Gather and Analyze the Program Requirements The Use Case Definition: In event-driven programs one other document is developed in order to clarify for the developer exactly what should occur in the program. This document is the Use Case, a sequence of actions for program users. The Use Case Definition specifies each of these sequences of action by describing what the user will do and how the program will respond.
  55. 55. 2 The user interface provides the framework, or foundation for the processing that occurs in the program. Developers sometimes spend 25% to 40% of the program design time on the user interface, sometimes called the Presentation layer Use Visual Basic to create the user interface Interface designs are often called mock-ups Chapter 2: Program and Graphical User Interface Design 55 Phase 2: Design the User Interface
  56. 56. 2 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 56 Phase 2: Design the User Interface
  57. 57. 2 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 57 Phase 2: Design the User Interface
  58. 58. 2 Open and close Visual Studio 2010 Create a Visual Basic 2010 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 58 Summary
  59. 59. 2 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 59 Summary
  60. 60. Microsoft Visual Basic 2010 CHAPTER TWO COMPLETE Program and Graphical User Interface Design

×