COMPUTER

PROGRAMMING .NET
(Q3M3) INTRODUCTION TO VISUAL
BASIC ENVIRONEMT
DURATION : 2 WEEKS
INSTRUCTOR : COOLE
EMAIL : vahnkyrie@gmail.com

NOTE: Write your answers on the answer sheet provided (Check the last page). DO NOT write anything on the
module.

LESSON OBJECTIVES
 Learn the history and fundamentals of VB.Net and familiarize with its development environment.
 Understand the components and basic controls of windows applications
 Create a simple functional windows program.

LESSON DISCUSSION
A lot of application we see today in our mobile or smartphones, tablets, computers, and other devices are made from
object-oriented type of programming languages. This type of programming language is user-friendly and at the same time
may be called programmer friendly. Before its existence, programming is a very complex task one must know almost
every technicalities and details about a language; but with Object-Oriented Programming (OOP), programmers can drag
and drop controls and apply codes into it. In this lesson the OOP language that we will tackle is called VB.Net, a
programming language that it is easy to learn and use,

WHAT IS VB.NET?
VisualBasic.Net or commonly known as VB.Net is an object-oriented programming language from Microsoft that first
appeared in 2002. Its predecessor, Visual Basic was introduced in 1991. Both languages are based from BASIC
programming language and were intended for beginners because it is relatively easy to learn than the other programming
languages during that time. VB.Net is a part of the Microsoft.Net framework and its original IDE (Integrated
Development Environment) is Visual Studio

WHAT IS AN INTEGRATED DEVELOPMENT ENVIRONMENT?

Integrated Development Environment or IDE is a programming environment which supports one or a set of programming
languages that one can use in creating applications. It usually consists of a compiler, debugger, GUI maker, and code
editor. The main IDE for languages like VB.Net, ASP.Net, C#, and C++ is Visual Studio that is created by Microsoft
specifically for its .Net platform.

Visual Studio Development Environment

COMPUTER PROGRAMMING .NET | MODULE 3

Essential part of the Visual Studio Environment:

Part Description
Title Bar Located at the topmost edge containing the window name.
Menu Bar Contains the commands that can be used in constructing the application.
Toolbox Consists of controls, containers, report controls, and all the other essential objects in
creating a form’s interface.
Code View/Code Editor It is the window where you write most of your code.
Design View/Form Designer This will allow you to add text and elements and then position and size them and set
their properties using special menus or the Properties window.
Properties Window Shows the properties of a selected objector control.
Solution Explorer Lists all the files and objects associated with the current project.

Title Bar Menu Bar

Solution
Explorer

Toolbox Design
View

Properties
Window

Parts of the Visual Studio Environment

VB.NET CONTROLS
VB.Net's controls and objects are organized and grouped accordingly using toolbars.
Buttons, textboxes, listboxes, labels, radiobuttons, comboboxes, and timers are some
of the objects commonly used in building simple applications. A programmer can
customize the appearance, behavior, and characteristics of each object, as well as to
put codes into it. The codes will dictate what will be the purpose or action of a
particular object. For example, a program will show your name in a message box
whenever the purple button is clicked. With this, the programmer must do two things
to change the button's color to purple and to write a code that will do the action.

 Some of the Toolbox’s Common Controls

Below is the table featuring the most commonly used controls and their usage.

Control Type Usage

Button It is used to generate a click event
Checkbox Lets user choose one or more options by checking the approp
Combobox Used to display a drop-down list of items.

2|PageComputer Programming .Net  Module 3

 Form Used to contain all the controls that will be needed in creating applications.
Form Used to group controls in the user interface.
Groupbox Used to group controls in the user interface.
Label Used to display text, titles, and screen output.
Radiobutton Lets user choose one option from a set of two or more choices.
Textbox Control that enables users to input a text.
Timer Control that allows a programmer to put a timer into his/her application.
Picturebox Control that is used to insert an image to the form.

Sample Problem 1:
Create a program that will display the phrase "Hello VB.Net" after a user clicks a button. This sample problem will teach
you the step-by-step procedure of creating an application, from opening visual studio, to coding and finally running your
program.

Procedure:
1. Open the Microsoft Visual Studio. For this book, Microsoft Visual Studio 2013 will be the version of the environment
that we will use.

2. Once opened, click the "New Project" link that you will see in the Main Window or from the menu bar, choose FILE,
then "New" and choose "Project" or you could just simply use the shortcut key, CTRL + SHIFT + N.

3. A dialog box will appear, just like the one shown below.

Make sure that on the left window pane, the Visual Basic is selected as the template for the project. Choose Windows
Forms App, on the middle window pane. You can edit the name of your new
project. By default, Visual Studio is naming new projects "Windows Application
1" WindowsApplication2" and so on. You can also specify the location of your
new project. For this tutorial, let's replace the default name as
"MyFirstApplication". Click OK once you are done.

4. It may take a while to load, but once done, you will see a small dialog box called
"Form" and all the parts of the environment we already discussed. From the
toolbox, you can see the tab Common Controls. From there, try to drag a button
anywhere into the form. In the properties window, change the button text to OK.
Refer to the one on the right.

Change the backcolor and the forecolor to any color you want.

3|PageComputer Programming .Net  Module 3

5. Now, it’s time for the coding. Start by double-clicking on the button you created. From the design view, your
environment now should look like this.

Now le us try to use a simple method to achieve the program’s output. Methods will be discussed in the next lesson, but
for the sake of this application, we will use the method Messagebox.show(). Let us put this set of code in between the
Private Sub and End Sub. Notice that every string must be enclosed with “ “.

6. Press the start button from the Menu bar, and make sure that “Debug” is selected in the combobox or you
could press F5 in order for the application to run. The first diaogbox with the OK button on it would appear. This
dialogbox can also be acalled a user graphic interface (GUI) because it provides or allows user intercation with your
program or application. Press that button and the ouput should look like the one on the next page.
 Sample Problem 1 Result

Now that you know how to create a simple GUI and incorporate a message box into
its code, you can create any GIRl you like. Say for example, a text box that will let a
user enter his first name and will let him see it in the message box that you coded.
With the drag and drop feature of this programming language creating interfaces
will be easy, but applying codes into it will still be challenging and enjoying at the
same time.

Sample Problem 2:
Create a program that will add 2 integers and will display the answer to a label.
Save the program as "Second Application Below is the sample GUI but you
can create your own design or interface.

4|PageComputer Programming .Net  Module 3

This sample problem will show you how to code mathematically. Since you already know how to specify the name and
the location of the program to be made, as well as to drag and drop and edit the characteristics of an object using the
properties window the following set of instructions will guide you in coding,

There are 7 controls in this form: 2 textboxes, 1 button, and 4 labels. Only 3 labels are visible before the user hits the
button, but the last label, which we cannot see here, will be the container for the answer. If you want the label to be
invisible, just erase the default text Label1 in the Properties Window.

Procedure:
1. Double-click on the button that will give us the desired output. For this particular program, it will be the "add" button.

2. We have to declare two variables that symbolizes input for textbox1 Say for example x for textbox1 and y for textbox2.
Declaring variables simplifies the process of coding because aside from serving as a shorter alias, it also helps in
organizing and remembering details about your program.

Insert the code Dim x, y As Integer right after Public Class. Notice that we use
Integer, because the program specified that integer type of numbers must be
entered.

3. Next thing we would do is to assign the variables into their designated object and pass on the desired output to the label.

Transferring the desired output to a control.

Assigning variables into their designated object.

Here we use the data type Cint, instead of the usual Int data type. Their difference is
that the Cint data type checks if the inputted is really an integer and if not, it will try to
round off any decimal. The image on the right is the sample run of our program.

5|PageComputer Programming .Net  Module 3