Study major elements of the Visual Studio Integrated Development Environment (IDE) while designing a GUI mock-up. Topics include opening up Visual Studio, creating a Windows Form application project, addin objects to Windows form, assigning property values to objects, aligning objects on the Windows form, and saving a VB project. Discussion of how to apply GUI design principles and examine the first two phases of the program development life cycle (PDLC).
2. 2 Objectives
►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 2
3. 2 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 3
4. 2 Open Visual Studio 2010
►Click the Start button on the Windows
taskbar, point to All Programs on the Start
menu, and then point to Microsoft Visual Studio
2010 on the All Programs submenu
►Click Microsoft Visual Studio 2010 on the
submenu
Chapter 2: Program and Graphical User Interface Design 4
5. 2 Open Visual Studio 2010
Chapter 2: Program and Graphical User Interface Design 5
6. Create a New Visual Basic 2010
2 Windows Application Project
►Click the New Project button on the Standard
toolbar
►If necessary, in the left pane, click Visual Basic so
it is selected
►If necessary, click Windows Forms Application in
the middle pane
►Double-click the text,WindowsApplication1, in the
Name text box to select the text. Type the project
name
►Click the OK button in the New Project window
Chapter 2: Program and Graphical User Interface Design 6
7. Create a New Visual Basic 2010
2 Windows Application Project
Chapter 2: Program and Graphical User Interface Design 7
8. 2 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 8
9. 2 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 9
10. 2 Name the Windows Form Object
► 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, point to Rename
► Click Rename. Type the name of the form, and press the
ENTER key
Chapter 2: Program and Graphical User Interface Design 10
11. 2 Name the Windows Form Object
Chapter 2: Program and Graphical User Interface Design 11
12. Set the Title Bar Text
2 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 the title bar text, and then press the ENTER
key
Chapter 2: Program and Graphical User Interface Design 12
13. Set the Title Bar Text
2 in a Windows Form Object
Chapter 2: Program and Graphical User Interface Design 13
14. 2 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 14
15. 2 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 15
16. 2 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, and then press the ENTER
key
Chapter 2: Program and Graphical User Interface Design 16
17. 2 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 the new text for the Text property
►To enter the Text property, press the ENTER key
Chapter 2: Program and Graphical User Interface Design 17
18. 2 Change the Text in a Label Object
Chapter 2: Program and Graphical User Interface Design 18
19. Enter Multiple Lines of Text
2 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 19
20. Change Label Font, Font Style,
2 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 the font you want
to use in the Font list and then click the font in the
Font list. Click a desired font style in the Font
style list. Click the size you want to use in the
Size list
►Click the OK button
Chapter 2: Program and Graphical User Interface Design 20
21. Change Label Font, Font Style,
2 and Font Size
Chapter 2: Program and Graphical User Interface Design 21
22. Center a Label Object
2 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 22
23. 2 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 23
24. Use the Undo Button
2 on the Standard Toolbar
►Click the Undo button on the Standard toolbar
Chapter 2: Program and Graphical User Interface Design 24
25. 2 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 25
26. 2 Add a PictureBox Object
Chapter 2: Program and Graphical User Interface Design 26
27. 2 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 the name, and then press
the ENTER key
Chapter 2: Program and Graphical User Interface Design 27
28. 2 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 28
29. 2 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 29
30. 2 Make Objects the Same Size
►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 30
31. 2 Make Objects the Same Size
Chapter 2: Program and Graphical User Interface Design 31
32. 2 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 32
33. Center Multiple Objects Horizontally
2 in the Window
►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 33
34. 2 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 34
35. 2 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 the text you want to display, and
then press the ENTER key
Chapter 2: Program and Graphical User Interface Design 35
36. 2 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, and then release the left mouse button
Chapter 2: Program and Graphical User Interface Design 36
37. 2 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 37
38. 2 Add and Align a Second Button
Chapter 2: Program and Graphical User Interface Design 38
39. 2 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 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 39
40. 2 Aligning Objects Vertically
Chapter 2: Program and Graphical User Interface Design 40
41. 2 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 41
42. 2 Close Visual Studio 2010
►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 42
43. 2 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
and Solutions on the File menu. Click the name of
the project you want to open
Chapter 2: Program and Graphical User Interface Design 43
44. 2 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 44
45. Phase I: Gather and Analyze the
2 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 45
46. Phase I: Gather and Analyze the
2 Program Requirements
Chapter 2: Program and Graphical User Interface Design 46
47. Phase I: Gather and Analyze the
2 Program Requirements
Chapter 2: Program and Graphical User Interface Design 47
48. 2 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 48
49. 2 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 49
50. 2 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 50
51. 2 Summary
►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 51
52. 2 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 52
53. Microsoft Visual Basic 2010
CHAPTER TWO
COMPLETE
Program and Graphical
User Interface Design