Chapter 2 — Program and Graphical User Interface Design

Microsoft Visual Basic 2010

CHAPTER TWOProgram and Graphical User Interface Design

2

Chapter 2: Program and Graphical User Interface Design 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

Objectives

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

Objectives


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

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

Create a New Visual Basic 2010 Windows Application Project


Create a New Visual Basic 2010Windows 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

2


Create a New Visual Basic 2010Windows Application Project (continued)

2


Display the Toolbox

If the Toolbox is not

displayed, point to the

Toolbox button in the left

margin of the window

2


To 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 (the icon that looks like a push pin) on the Toolbox title bar to anchor the toolbox to the Visual Studio desktop workspare.

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

Name the Windows Form Object

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(_)

Naming Conventions (see Chap 2 handout)

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).

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:

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

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.

Naming Conventions (continued)

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)

Set the Title Bar Text in a Windows Form Object

2


Set the Title Bar Text in a Windows Form Object

2


How to Resize a Form

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

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 Forma. 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

Adding a control to a Windows Form object

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.

Adding a control to a Windows Form object (Continued)

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

Add a Label Object

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”

Name the Label Object

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

Change the Text in a Label Object

2


Change the Text in a Label Object

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.

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

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

Change Label Font, Font Style, and Font Size

2


Change Label Font, Font Style, and Font Size

Click on ellipsis (…) to open Font dialog box

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

Center a Label Object in the Windows Form Object

2


Select the object to be deleted by clicking it Press the DELETE key on the keyboard

Delete GUI Objects

2


Click the Undo button on the Standard toolbar

Use the Undo Button on the Standard Toolbar

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

Add a PictureBox Object

2


Add a PictureBox Object

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

Name a PictureBox Object

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

Resize a PictureBox Object

2


Drag the PictureBox .NET component in the Toolbox to any location in the Windows Form object, and then release the left mouse button

Add a Second PictureBox Object

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

Make Objects the Same Size

2


Make Objects the Same Size (Continued)

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

Align the PictureBox Objects

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

Center Multiple Objects Horizontally in the Window

2


Add a Button Object 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

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

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

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

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

Add and Align a Second Button

2


Add and Align a Second Button

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

Aligning Objects Vertically

2


Aligning Objects Vertically

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

Save a Visual Basic Project

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

Close Visual Studio 2010

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

Open a Visual Studio Project

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 Requirements2. Design the User Interface3. Design the Program Processing Objects4. Code the Program5. Test the Program6. Document the Program/System7. Maintain the Program/System

Program Development Life Cycle

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..

Phase I: Gather and Analyze the Program Requirements

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


2



The Requirments Document:

The requirements document contains all the information that should be needed by a developer to design the program.

2



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.

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

Phase 2: Design the User Interface

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


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


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

Summary

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

Summary

Microsoft Visual Basic 2010

CHAPTER TWO COMPLETEProgram and GraphicalUser Interface Design

Chapter 2 — Program and Graphical User Interface Design

Technology

toolbox chapter

windows application

new project window chapter

size chapter

microsoft visual basic

naming conventions

button object

toolbox button