1/21/2014

1

VISUAL BASIC®

Introduction to

Visual Basic®

Copyright © 2014 Dan McElroy

Table of Contents

1. What is Visual Basic

2. Lab Project –PassFail.vb

3. Project Documentation and Lab

Report

4. Submit Using Moodle

1/21/2014

2

What is Visual Basic®

Visual Basic (VB) is a programming

language provided as part of Microsoft

Visual Studio for developing application

programs for Microsoft Windows®

Although VB is most often used for

developing Windows applications, it can

also be used for non-Windows projects.

1) What is Visual Basic

Visual Basic Uses Objects

Visual Basic (VB) is an object-based language which gives the programmer to opportunity to do Object Oriented Programming (OOP). Other object-based languages include: C++, Objective-C, Smalltalk, Java, C#, Perl, Python, Ruby and PHP.

VB provides a collection of objects in its Toolbox that can be placed on a Form. The VB Form provides the layout of what the VB program will look like when it is completed and is run by the user.

1) What is Visual Basic – Objects 1/3

1/21/2014

3

Visual Basic Objects

This sample program includes the following objects that were selected by the programmer from the Toolbox.

1) What is Visual Basic – Objects 2/3

Label (Text)

Button

TextBox (User Input)

NOTE: The Form is also an object.

Objects – Properties and Methods Each of the objects from VB’s Toolbox already have Properties (data, attributes) and Methods (code, functions, subroutines, procedures) that will do things to the object or respond to Events that happen to the object.

Most objects include:

1) What is Visual Basic – Objects 3/3

Properties Methods

Font Click

Font Color Move

Location MouseDown

Size Resize

Text TextChanged

1/21/2014

4

Visual Basic Modes

Visual Basic has two modes of operation:

a) Developer Mode – The VB program is created by designing the Form (what the program looks like when it runs in Windows) and the code to make the program work.

b) Run Mode – Debug, execute and test the program with known values to make sure it works properly. Publish the program for other users to run the program.

1) What is Visual Basic – Modes

1)

Developer Mode Two parts of the Developer Mode

1) The Design Window - The programmer places objects from the Toolbox on the Form that will be displayed when the program runs.

2) The Code Window – The programmer writes the code that will be executed when the program runs.

1) What is Visual Basic – Modes – Developer Mode

1/21/2014

5

The Design Window When developing the program, select an object from the Toolbox then use the mouse to draw a rectangular area on the Form to select its size and position.

1) What is Visual Basic – Modes – Developer Mode – The Design Window 1/4

The Design Window The most common objects used from the Toolbox include:

Label – Used to place text on the form or used to display the results to the user

TextBox – Get input from the user of the program

Button – Make something happen in the program PictureBox – put a picture on the Form

1) What is Visual Basic – Modes – Developer Mode – The Design Window 2/4

1/21/2014

6

The Design Window

1) What is Visual Basic – Modes – Developer Mode – The Design Window 3/4

Label

TextBox

Button

Label1.Text

Properties Label1.Location

Label1.Size

Objects are selected from the Toolbox and placed on the form. Each object has a list of properties that can be displayed or modified in the Properties window.

Button

Label

The Properties Window The Properties Window can display either Properties or Event Handlers

1) What is Visual Basic – Modes – Developer Mode – The Design Window 4/4

The Properties or Event Handlers can either be displayed by Category or Alphabetically. The Alphabetic display is used for all the discussions and videos.

1/21/2014

7

The Code Window The Code Window is the place where the programmer can type the program. The program can consist of:

1) Event Handlers – code that gets executed when something happens to an object, such as a button being clicked.

2) Subroutines and Procedures – extra code created by the programmer to help the program run.

1) What is Visual Basic – Modes – Developer Mode – The Code Window 1/4

The Code Window

While in the Design Window, double-clicking an object opens the Code Window with an empty Event Handler subroutine.

1) What is Visual Basic – Modes – Developer Mode – The Code Window 2/4

1/21/2014

8

The Code Window The programmer can enter the code that is to be executed during the Run Mode.

For example, the first Event Handler subroutine in the example below shows what code is to be executed when the “Compute” button is clicked.

1) What is Visual Basic – Modes – Developer Mode – The Code Window 3/4

The Code Window When entering code, BE VERY CAREFUL that you only enter the program between the Private Sub and the End Sub lines provided by Visual Basic.

If you modify or delete any of the lines provided by VB, you may need to start your project all over from the beginning.

1) What is Visual Basic – Modes – Developer Mode – The Code Window 4/4

1/21/2014

9

Switching Views

You can easily switch between the Design Window and the Code Window by clicking the tabs at the top of the window. The View menu selection can also be used.

1) What is Visual Basic – Modes – Developer Mode – Switching Views

2. Lab Project – PassFail.vb System Development Life Cycle

a) Define the project

b) Develop the algorithm

c) Convert the algorithm into code

c1) Start Visual Basic and create a project

c2) Create the form, name each object

c3) Write the code

d) Debug and test the program

e) Document and submit the lab assignment

f) Maintain the project (not for this lab)

g) Project obsolescence (not for this lab)

2) Lab Project – PassFail.vb

1/21/2014

10

a) Define the Project

You have been asked by the DMV to create a program that inputs the applicant’s score, (0-100) and displays “PASS” if the score is equal to or greater than 70, and displays “FAIL” if the score is below 70.

You also need to provide a way to clear the input and the “PASS/FAIL” message.

2) Lab Project – a) Define the Project

b) Develop the Algorithm

Input Process Output

Score COMPUTE BUTTON Input the Score, convert to numeric value If Score >= 70 Display “PASS” Else Display “FAIL” CLEAR BUTTON Clear Score and “PASS/FAIL” message

PASS or FAIL message

2) Lab Project – b) Develop the Algorithm

Define the layout of the program when it runs.

Define the Inputs and Outputs and figure out how to get from the input to the output.

1/21/2014

11

c) Convert the Algorithm into Code

To Implement the program in Visual Basic:

1. Start Visual Basic and Create a Project

2. Add objects to the Form

- Set the properties for each object

- Name each object

- Set the AcceptButton and CancelButton

3. Enter the program into the code window

4. Fix any typing errors

2) Lab Project – c) Convert the Algorithm into Code

2) Lab Project – c1) Convert the Algorithm into Code – Start Visual Basic

If you don’t have Visual Studio or Visual Basic already installed, do it now.

A disc with a copy of Visual Studio Express Edition should be located in the back of new copies of the textbook.

You can also download a copy of Visual Basic Express Edition from the Microsoft website.

Visual Basic is also available in the CIS department computer labs.

Start Visual Basic

1/21/2014

12

2) Lab Project – c1) Convert the Algorithm into Code – Create the PassFail project 1/2

Start Visual Studio and select New Project

Select Visual Basic, and Windows Forms Application

Set the Name to PassFail

Create the PassFail Project

2) Lab Project – c1) Convert the Algorithm into Code – Create the PassFail project 2/2

View Toolbox and Properties

Make the Toolbox and Properties windows visible and set the push-pins to the down positon to stop the Auto Hide feature.

1/21/2014

13

2) Lab Project – c2) Convert the Algorithm into Code – Add the Objects to the Form 1/5

Create the Score Label

Select the Label tool. Draw a rectangular area on the Form where you want the Score label positioned.

Set the Text property to Score.

2) Lab Project – c2) Convert the Algorithm into Code – Add the Objects to the Form 2/5

Create the Score TextBox

Select the TextBox tool. Draw a rectangular area on the Form where you want the TextBox positioned.

The Text property should be empty.

1/21/2014

14

2) Lab Project – c2) Convert the Algorithm into Code – Add the Objects to the Form 3/5

Create the Compute Button

Select the Button tool. Draw a rectangular area on the Form where you want the Compute Button positioned.

Set the Text property to Compute.

2) Lab Project – c2) Convert the Algorithm into Code – Add the Objects to the Form 4/5

Create the Clear Button

Select the Button tool. Draw a rectangular area on the Form where you want the Clear Button positioned.

Set the Text property to Clear.

1/21/2014

15

2) Lab Project – c2) Convert the Algorithm into Code – 3. Add the Objects to the Form 5/5

Create the Result Label

Select the Label tool. Draw a rectangular area on the Form for the Result Label.

Set the Properties Property Value

AutoSize False

BackColor Green

ForeColor White

Text PASS

TextAlign MiddleCenter

Visible False

2) Lab Project – c2) Convert the Algorithm into Code – Name Each Object 1/5 Name the Form

Select the Form by clicking an area on the form that does not have any other object.

Set the Name property to frmPassFail

Do not put spaces in any of the Name properties.

1/21/2014

16

2) Lab Project – c2) Convert the Algorithm into Code – Name Each Object 2/5

Name the Each Object

Select the each object by clicking on the object and set its Name property. These names can be used in the code section of the program.

2) Lab Project – c2) Convert the Algorithm into Code – Name Each Object 3/5

Verify That Each Object Is Named

Display the list of objects by name by clicking the small down arrow to the left of the word Properties.

You can also select an object by clicking one of the names from this list.

1/21/2014

17

2) Lab Project – c2) Convert the Algorithm into Code – Name Each Object 4/5

Set the AcceptButton and Cancel Button

Make the program easier to use by activating the Enter and Esc keys.

Set the Form’s AcceptButton property so that the Enter key will do the same thing as the Compute button when the program is running.

Set the Form’s CancelButton property so that the ESC key will do the same thing as the Clear button when the program is running.

2) Lab Project – c2) Convert the Algorithm into Code – Name Each Object 5/5

Set the AcceptButton and Cancel Button

Select the Form by clicking on an unused area.

Click the small down arrow at the right side of the AcceptButton property and select btnCompute.

Click the down arrow on the CancelButton and select btnClear.

1/21/2014

18

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 1/7

Object Properties vs. Code

The Design Window is used to create the objects (these are equivalent to Nouns in the English language).

Now it is time to create the code that will do something. (This is equivalent to Verbs in English).

We need to define the code to be executed when the user clicks each of the buttons. These are events that occur for the button. The code to be executed as a result of these events is called an Event Handler.

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 2/7

Event Handlers

Event Handler for the Compute button

Event Handler for the Clear button

1/21/2014

19

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 3/7

Open the Code Window

Double-click the Compute button. This will cause the Code Window

to open with an empty space for Private Sub btnCompute_Click

Enter the code for this Event Handler.

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 4/7

Type the Code for the Compute Button Make sure that you only type between the Private Sub and the End Sub lines. If you mess up any other part of the code that was generated by Visual Basic, you may need to start the project from the beginning again.

1/21/2014

20

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 5/7

Open the Code Window Again

Go back to the Design Window by clicking the Design Tab.

Double-click the Clear button to open the Code Window at the place to enter the code for the Clear button.

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 6/7

Type the Code for the Clear Button Make sure that you only type between the Private Sub and the End Sub lines. If you mess up any other part of the code that was generated by Visual Basic, you may need to start the project from the beginning again.

1/21/2014

21

2) Lab Project – c3) Convert the Algorithm into Code – Enter the Code 6/7

Fix Any Typing Errors The most common error at this point is not using the exact same name as when the Name property was entered, and when the object name is used in the code.

Look for a wavy blue underline

2) Lab Project – d) Debug and Test the Program

Debug and Test the Program

Start the program by either clicking the Debug tab and selecting Start Debugging or press the F5 key. You need to test four things:

Score below 70 Score equal to 70 Score above 70 The Clear button

Fix any problems before you submit the lab report.

1/21/2014

22

Project Documentation and Lab Report

A text document for the lab report is provided.

Most of the lab report for this first project is

already filled in.

The lab report is a two page document.

You need to complete the rest of the report

that is shown in red text.

3) Project Documentation and Lab Report

Lab Report Document

On Moodle, click the link: PassFail – Lab Project

and Report

The lab report document is named VB-PassFail-LabReport.doc Complete the lab report by replacing the red text with your report. Save the file with a new name. Submit your own lab report, not a copy of someone else’s report.

1/21/2014

23

Submit Your Work on Moodle

All of your lab assignments should be submitted

using Moodle. Make sure you click the correct

link on the class Moodle page for your

assignment, select the file you want to upload,

click the Upload button and verify that the file

was sent.

Detailed instructions follow.

1. Find the Correct Submit Link In this example, submit the Visual Basic PassFail lab report. Click the link, Submit the VB-PassFail-LabReport.doc

1/21/2014

24

2. Submit Your Assignment

Moodle will load a new screen with instructions, a due date and the “Add submission” button. Verify that you will be submitting your report to the correct location then click the “Add submission” button.

3. Choose to File to Be Submitted Moodle then displays the “File submissions” screen. You can either: 1) Use the mouse to drag your completed lab report on top of the big blue arrow (works with most browsers), or 2) Click the “Files” link and find the file on your computer. After you have selected the file, click the “Save changes” button

1/21/2014

25

4. Verify That the File Was Uploaded If your file name shows up here, then the instructor can see the file.

If you want to view the status of your submission, go back to the “Submit your Report” link on the Moodle class web page.

If you want to update and resubmit your lab report before it has been graded, click the “Edit submissions” button. Your old submission will be deleted an be replaced with the updated version.

Congratulations !

Congratulations on completing your Visual Basic

assignment.

Refer back to this lab assignment when working

on future labs for instructions on creating a Visual

Basic program, and instructions on how to upload

a file to Moodle.

1/21/2014

26

ACKNOWLEDGEMENTS

IMAGE

DMV image – UCSF

VISUAL BASIC and MICROSOFT WINDOWS

are registered trademarks of Microsoft Corp.

VIDEO EDITING SOFTWARE

Roxio® CreatorTM NXT Pro 2