Program and Graphical User Interface Design

1
CHAPTER 2

• Program and GraphicalUser Interface Design

2
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

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

4
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

5
Open Visual Studio 2005

• Figure 2-3

6
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

7
Create a New Visual Basic 2005 Windows
Application Project

• Figure 2-8

8
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

9
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

10
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

11
Name the Windows Form Object

• Figure 2-14

12
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

13
Set the Title Bar Text in a Windows Form Object

• Figure 2-16

14
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

15
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

16
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

17
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

18
Change the Text in a Label Object

• Figure 2-25

19
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

20
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

21
Change Label Font, Font Style, and Font Size

• Figure 2-30

22
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

23
Delete GUI Objects

• Select the object to be deleted by clicking it
• Press the DELETE key on the keyboard
• Figure 2-34

24
Use the Undo Button on the Standard Toolbar

• Click the Undo button on the Standard toolbar
• Figure 2-35

25
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

26
Add a PictureBox Object

• Figure 2-37

27
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

28
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

29
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

30
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

31
Make Objects the Same Size

• Figure 2-42

32
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

33
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

34
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

35
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

36
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

37
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

38
Add and Align a Second Button

• Figure 2-53

39
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

40
Aligning Objects Vertically

• Figure 2-55

41
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

42
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

43
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

44
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

45
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

46
Phase I Gather and Analyze the Program
Requirements

• Figure 2-58

47
Phase I Gather and Analyze the Program
Requirements

• Figure 2-59

48
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

49
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

50
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

51
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

52
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

53
CHAPTER 2 COMPLETE

• Program and GraphicalUser Interface Design