Submitted by: Miguel Mendoza

Chapter 5
Visual Basic: A Quick Walkabout
Chapter Overview

 A brief description of Visual BASIC

 Getting to know the Visual BASIC environment
 Creating simple Visual BASIC Applications
 Getting to know the steps in building a Visual BASIC application

Chapter 5. Introduction to Visual

BASIC
 A Brief Description of
Visual Basic

Chapter 5. Introduction to Visual

BASIC
 It is a high level programming language evolved from the earlier DOS
version called BASIC.
 Stands for Beginner’s All-Purpose Symbolic Instruction Code
 The codes resemble the English Language
 Different Software companies produce different versions of BASIC:
Microsoft QBASIC, GWBASIC, and IBM BASICA.

Chapter 5. Introduction to Visual

BASIC
 Most considers Visual BASIC as a fairly easy programming language and
is for anyone who is interested in programming but lacks professional
training in software engineering.
 You can choose to program in Visual BASIC purely for fun and enjoyment
or create more advanced applications such as educational courseware
and commercial software.

Chapter 5. Introduction to Visual

BASIC
 Visual BASIC is a visual and events driven programming language.
 Programming is done in a graphical environment.
 VB enables you to design the user interface of your program by dragging
and resizing objects as well as changing their colors, just like any
windows-based programs.

Chapter 5. Introduction to Visual

BASIC
In-Focus: VB is event-driven

 Because users may click on a certain object randomly, so each object has
to be programmed independently to be able to respond to those actions
(the events).
 Example of events:
- Clicking a command button
- Entering text into a text box
- Selecting an item in a list box.
 Hence, a VB program is made up of many subprograms, each with its
own program code which can be executed independently and at the same
time can be linked together in one way or another.

Chapter 5. Introduction to Visual

BASIC
 The Visual BASIC
Environment

Chapter 5. Introduction to Visual

BASIC
 Upon start-up, Visual BASIC 6.0 will display this dialog box:

Chapter 5. Introduction to Visual

BASIC
 You can choose to start a new project, open an existing project or select a
list of recently opened programs.
 We will be focusing our discussions and exercises on creating Standard
EXE programs (EXE means executable program).
 Click on the Standard EXE icon to go into the Visual BASIC programming
environment.

Chapter 5. Introduction to Visual

BASIC
The Visual BASIC Environment

Project
Window

Blank form Properties

Window

Toolbox

Chapter 5. Introduction to Visual

BASIC
The Visual BASIC Environment

 Blank form: interface for designing your application’s UI

 Project Window: displays the files that are created in your application
 Properties Window: displays the properties of various controls and objects
that are created in your application.
 Toolbox: consists of all controls essential for developing a Visual BASIC
application

Chapter 5. Introduction to Visual

BASIC
Controls Available for a Standard EXE project

Chapter 5. Introduction to Visual

BASIC
 Creating Simple Visual
BASIC Applications

Chapter 5. Introduction to Visual

BASIC
Relax!

 We are not yet going into the nitty-gritty of VB programming

 Our aim for this session is for you to acquaint yourself with VB.

Chapter 5. Introduction to Visual

BASIC
Let’s Start

1. First, launch Visual BASIC 6.0

- Normally, a default form FORM 1 will be available when you start a new
project.
2. Double click on the Form 1 window or click right-click View Code to
open the source code window
3. Notice the top of the source code window. You can see two drop-down
lists: the left consisting of objects and the right consisting of the
events/procedures associated to the given object.
4. No need to worry about the start and end statements. Just make sure to
write your codes in-between these statements.

Chapter 5. Introduction to Visual

BASIC
5. Type the following codes between the start and end statements in your
source code window
[Link]
Print “Welcome to Visual Basic 6.0”
5. After typing, press F5 or click on the run button to run the program.

Chapter 5. Introduction to Visual

BASIC
Your output should be:

Chapter 5. Introduction to Visual

BASIC
Sample VB Program 2

 Before changing your codes, make sure to STOP the program currently
running. Note that the Play button can’t be clicked, signifying that the
current program is still running.
 Also, from the drop-down list of procedures, change it from Load to
Activate
 Replace the previous code with the following:
Print 20+10
Print 20-10
Print 20*10
Print 20/10

Chapter 5. Introduction to Visual

BASIC
Sample VB Program 2

 You can also write it this way:

Print 20+10, 20-10, 20*10, 20/10
 Notice that the results are print horizontally

Chapter 5. Introduction to Visual

BASIC
Sample VB Program 3

 This is just an “improved version” of the previous program

 Instead of painstakingly inputting 10 and 20 for each arithmetic operation,
we employ two variables and x and y. (Why is this better?)

Chapter 5. Introduction to Visual

BASIC
Sample VB Program 4: Working with Texts

 Type the following codes:

A=“Bitin ”
B=“ang ”
C=“bakasyon ”
D=“ko. ”
E=“ Hay!”
 Instead of using “+”, you can use “&” since this is more logically sound
(remember, your variables are texts/strings

Chapter 5. Introduction to Visual

BASIC
 Steps in Building a VB
Application

Chapter 5. Introduction to Visual

BASIC
Steps…

1. Design the interface

2. Set the properties of the controls (objects)
3. Write the events’ procedures

Chapter 5. Introduction to Visual

BASIC
A Simple VB Application: Cylinder Volume
Calculator

 Let’s create an application with this interface:

Chapter 5. Introduction to Visual

BASIC
Putting the codes to make the application work

 Double click the O.K. command button

 Type the following codes:
‘create a variable vol that will hold the computed volume
vol=3.1416*[Link]^2*[Link]
‘output the value stored in the variable vol to the third text box
[Link]=vol

Chapter 5. Introduction to Visual

BASIC
Some Reminders

 An elaborately written program is worthless if the end-user is not

aesthetical satisfied with the interface AND if it is not user friendly.
 Hence, before we go to the technical details, practice first and explore
how to design the interface of your applications.

Chapter 5. Introduction to Visual

BASIC
One question for you to ponder

 What is the difference between a program and an application?

Chapter 5. Introduction to Visual

BASIC
Exercises

1. Write a program to display the sentence “I like Stat 124!”

2. Write a program to compute the value of 125+25x15/2-78
3. Define two variables x and y as 21 and 29, respectively. Write a
program to compute the values of 2x+y, (x-y)/5, x2/y2

Chapter 5. Introduction to Visual

BASIC
Homework

 Due date: 11:29am, January 14, 2013

 Create a calculator interface. Use the figure below as your guide. Note:
You are free to explore and change the format, e.g. background color, font
size, etc., but not the arrangement of the buttons.

Chapter 5. Introduction to Visual

BASIC
 Visual BASIC: The Details

Chapter 5. Introduction to Visual

BASIC
Recap

 Last meeting, I learned that Visual BASIC…

Chapter 5. Introduction to Visual

BASIC
Basic Concepts

 Control: a tool you use to create objects on a VB Form. You select

controls from the toolbox. Basically, most controls are used to create the
user interface elements, such as command buttons, images, and list
boxes
 Object: the name of the user interface element you create on a VB form
by using a toolbox control. Note: The form itself is also an object.
 Property: a value or characteristic held by a VB object, such as Caption or
Forecolor.
- Properties can be set at design time by using the Properties window or at
runtime by using the statements in the program code.
- In code, the format for setting a property is [Link] = Value, where the
Object part is the name of the object you’re customizing, and Property is the
characteristic you want to change, and Value is the new property setting.

Chapter 5. Introduction to Visual

BASIC
Basic Concepts

 Event Procedure: A block of code that is executed when an object is

manipulated in a program
- Example: When the first command button in a program is clicked, the
command1_Click event procedure is executed.
 Program Statement: a line of code in a VB program. It can be any
combination of VB keywords, properties, functions, operators, and
symbols that forms a valid instruction that VB compiler recognizes.
- End: halts the execution of a program
- [Link] = “Yes”
- Writing program statements is governed by its syntax.

Chapter 5. Introduction to Visual

BASIC
Basic Concepts

 Variable: a special container used to hold data temporarily in a program

- Store the results of a calculation (recall vol)
- Create filenames
- Process input, etc
- Numbers, names, and property values can be stored in variables
 Method: a special statement that performs an action or service for a
particular object in a program
- [Link] Value
- Method part is the command you want to use to change the object, Value is
optional
- Example: [Link] “Check” will put the word Check in the list box named
List1

Chapter 5. Introduction to Visual

BASIC
 Working with Controls

Chapter 5. Introduction to Visual

BASIC
Section Content

 Setting the properties of the controls

 Learning how to work with the controls

Chapter 5. Introduction to Visual

BASIC
The Properties of the Controls

 Before writing an event procedure for the control (note that I may be using
the word control and object interchangeably during the course of our
discussion) to respond to a user’s input, you first have to set specific
properties of the controls to determine its appearance and how it will work
with the event procedure.
 As mentioned previously, you can set the properties of the controls during
design time (properties window) or during run time.

Chapter 5. Introduction to Visual

BASIC
The Properties of the Controls

 The Properties window

- Left column contains the names of various properties associated with the
selected object
- Items listed in the right column represent the states of the properties.
 Some things you can change/modify are:
- Name vs Caption
- Appearance:3d or flat
- Change the foreground and background color
- Change font type and font size
- Enable minimize/maximize buttons, etc

Chapter 5. Introduction to Visual

BASIC
The Properties of the Controls

 Changing Properties at runtime:

- Produce special effects such as changing of colors, shape, animation effects,
etc
- Example 1: This code will change the form color to red every time the form is
loaded. Note that VB uses the hexadecimal system to represent colors.
Private Sub Form_Load()
[Link]=&H000000FF&
End Sub

Chapter 5. Introduction to Visual

BASIC
The Properties of the Controls

 Example 2: This code will change the shape to a circle at runtime

Private Sub Form_Load()
[Link] = 3
End Sub
Note: Please insert a shape first in your form before running the program

Chapter 5. Introduction to Visual

BASIC
The Properties of the Controls

 Note: Recall your question last meeting: Why can’t you print a statement if
you use load event compared to the activate event?
- Simple: You can’t print onto something that haven’t materialized yet. You need
the form to load first before you can print.

Chapter 5. Introduction to Visual

BASIC
The Properties of the Controls

 Few Important Points:

- Set the caption property of a control properly so that users know what to do with
it. Don’t come with captions just for the sake of naming the controls.
- Similar to the first point, please name your controls/objects properly. You don’t
want to get lost if your objects start to pile up. (Why?)
- Explore and play around with the control properties. (You have the VB6 portable
version, right?)

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 The Text Box

- Standard control that is used to receive input from the user as well as to display
the output.
- Can handle string (text) and numeric data
- Using your knowledge from the volume of a cylinder example, create a simple
VB program that will compute the sum of two user-provided number and output
the sum.

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 The Label
- Commonly used to provide instructions and guides to the users
- Can also be used to display output using <labelname>.caption
- Can display text and numeric data
- Caption can be changed in properties window or during runtime
- Activity: Go back to the sum application you created earlier. Instead of
displaying the sum in a text box, output it using a label

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 The Command Button

- Very important since it is used to execute commands
- Displays an illusion that the button is pressed when the user clicks on it.
- Commonly associated with the Click event
Private Sub Command1_Click()
<Statements>
End Sub

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 The Picture Box

- one of the controls which handle graphics
- Used to load a picture in the GUI during the design phase and also during run
time
- Hence, you are not allowed to copy-paste images onto your form!
- Images are not resizeable
 The Image Box
- Similar to picture box but images can be resized.

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 The List Box

- Main function is to present a list of items
- The user can then select items from this list
- To add items to the list box, use the AddItem method:
[Link] “Male”
[Link] “Female”
 The Combo Box
- Similar to the list box, but users need to click on the small arrowhead on the
right of the combo box to see the items which are presented in a drop-down
list.
- Use AddItem method to add items to the list
 The two controls are so similar that people don’t bother distinguishing
one from the other
Chapter 5. Introduction to Visual
BASIC
Learning how to work with the controls

 The Check Box

- Lets the user select or unselect an option
- When the check box is checked, its value is set to 1. Otherwise, its value is set
to 0
- Useful in initiating actions depending on the response of the user to the content
of the check box
- Example:
Private Sub Check1_Click ()
If [Link] = 0 Then
[Link] = vbRed
ElseIf [Link] = 1 Then
[Link] = vbBlue
End If
End Sub
Chapter 5. Introduction to Visual
BASIC
Learning how to work with the controls

 The Option Button

- Lets users select one of the given choices
- Two or more Option Buttons must work together because if one of the Option
Buttons is selected, the others will be unselected
- Only one option can be selected at any given time
- Selection of option button: value is set to “True”

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 The Option Button Private Sub Option4_Click()

- Example: [Link] = 3
Private Sub Option1_Click ( ) End Sub
[Link] = 0 Private Sub Option5_Click()
End Sub [Link] = 4
Private Sub Option2_Click() End Sub
[Link] = 1 Private Sub Option6_Click()
End Sub [Link] = 5
Private Sub Option3_Click() End Sub
[Link] = 2
End Sub

Chapter 5. Introduction to Visual

BASIC
Learning how to work with the controls

 Reading Assignment:
- The Drive List Box
- The Directory List Box
- The File List Box

Chapter 5. Introduction to Visual

BASIC