Computer

Programming
Skill Area 502 : Apply Programming
Fundamentals
Part 1:
Demonstrate an understanding of basic
terminologies

Skill Area Overview

Define

the basic terminologies of a

programming languages

List

program development cycle of

the language

Program Development
Cycle
1.
2.
3.
4.
5.
6.
7.

Define the problem

Design a solution using a
programming tool if desired
Create the interface (GUI)
Set the properties
Write the code
Run, test and debug
Add any documentation

Integrated Development
Environment (IDE)
The

Integrated Development
Environment (IDE) when you launch VB
2008 Express consists of a few panes,
namely:

The Recent Projects Pane - it shows the list of

projects that have been created by you recently.
The Getting Started Pane - It provides some
helpful tips to quickly develop your applications.
The VB Express Headlines pane - It provides latest
online news about Visual Basic 2008 Express. It
will announce new releases and updates

Basic Terminologies of
Visual Programming

Language Components
The language you write and speak has
structure.
Programs written in Visual Basic also have a
structure:modulesare
like
chapters,proceduresare
like
paragraphs,
andlines of codeare like sentences.
Visual
Basic has rules that define how
categories of words, known asprogramming
elements,are used to write programs.
Programming elements in Visual Basic
includestatements,declarations,methods,
operators, andkeywords.

Modules

A complete Visual Basic application is typically

contained in a singleproject.

Within aproject, code is placed in separate code

files calledmodules, and within eachmodule, the
Visual Basic code is further separated into self
contained and re-usableprocedures.

Procedures

Visual Basic procedures provide a way to break

up code into logical and re-usable sections that
can be called from other sections of Visual Basic
code.

It is also possible that you need to perform this

calculation from a number of different places in
your application code. Rather than duplicating
the code to perform this task at each code
location where it is needed, it is more efficient to
place the calculation code in a procedure, and
thencallthat procedure each time it is needed

Creating Application
with Visual Basic
Express 2008

Starting

To start creating your first application, you need

to click on file and select new project. The
following VB 2008 New Project dialog box will
appear.

Starting

Remove the default project name

(WindowsApplication1) from the Name
text box and then type MyFirstApp.

Click OK to create your new project.

The Integrated Development

Environment (IDE)
Menu and
Toolbars

Blank
Form

Solution
Explorer

Toolbox

Properties
Windows

Toolbox
Things

like buttons, textboxes, and

labels are all things that you can add
to your Forms. They are know as
Controls, and are kept in the Toolbox
for ease of use.

The

Toolbox can be found on the left

of the screen. In the picture below,
you can see the toolbox icon next to
Form1 (VB Net 2008):

Visual Basic Controls

They can be added to the

form by double clicking
the control or drag and
drop the control from the
toolbox to the form.
You can also single click
the control, point where
you want the control and
stretch to the size you
want. We will look at four
controls.

Toolbox (cont)
To

display all the tools, move your

mouse over the toolbox icon. You'll
see the following automatically
appear:

Toolbox (cont)
As

you can see, there are an awful

lot of tools to choose from!
For this first section, we'll only be
using the Button, the TextBox and
the Label. If you want to keep the
toolbox displayed, click the Pin icon
next to the X. To close the toolbox,
simply move your mouse away.

Properties

You've probably noticed the

area to the right of the design
environment, the area with all
the textboxes in a grid, the one
that has those daunting names
like "AccessibleDescription",
"AccessibleName",
"AccessibleRole".
That's the Properties box.
On the right of the design
environment there should be
the following Properties box:

Properties

Click away from the textbox

or label until the Properties
box reads "Form1 Form.

What you are looking at is a

list of the properties that a
form has: Name , BackColor,
Font, Image, Text, etc. Just to
the right of these properties
are the values for them.

These values are the default

values, and can be changed.

List Properties

Display the list properties

alphabetically by clicking the
Alphabetic icon at the top of the
Properties Box.

Before we change any in the

Properties box, let's clear up
what we mean by "Property".

What is a Property?

Those controls you added to the form

(textboxes and labels), and the form itself, are
called control objects. You can think of controls
as things, something solid that you can pick up
and move about. Controls (things) have
properties.

In VB, you can change a property of a control

from the Properties Box.

VB Properties

We will now change the

values to our Form object
by doing the following:
Locate the word "Text" in the

Property box.
Click inside the area next to
"Text", and delete the word
"Form1" by hitting the
backspace key on your
keyboard
When "Form1" has been
deleted, type the words "My
First Form

Properties
Click anywhere on the form that is not a label
or a textbox, somewhere on the form's grey
areas. The form should have the little sizing
handles now, indicating that the form is
selected.
On the right of the design environment there
should be the following Properties box:

Adding a Tool (Control) to your Form

Let's start by adding a textbox to

our form. With the tools displayed,
do the following:
Locate the TextBox
Double click the icon

tool

A textbox is added to your form

The textbox gets added to the top

left position of your form. To move
it down, hold your mouse over the
textbox and drag to a new
position:

Adding a Label

Let's add some labels

near the textboxes so that
your users will know what they
are for.
Locate the label control in the

toolbox
Double click the label icon
A new label is added to your form

Click on the label to select it.

Now hold your left mouse
button down on the label. Keep
it held down and drag it to the

Naming a Label

Name the Label1 "Name". To do

that right click on Label1, click on
Properties.

The Properties window will appear

on the right.

Change the property of Text to

Name:

Add more Label and Textbox

Add a new Textbox and a new Label and a button

as the picture below, and name the second
change the new label's text properties to Last and
the button's text to Get Name.

VB Properties

Click back on the form itself

(the one with the labels
and textboxes), or hit the
return key on your
keyboard.

The words "My First Form"

will appear as white text on
a blue background at the
top of the form.

Adding a Splash of Colour

Changing the colour of the Form

means we have to change one of its
properties - the BackColor property.

To change the colour of the Form,

click the word "BackColor" in the
Property Box.

Next, click the black down-pointing

arrow to the right.

A drop-down box will appear.

Changing Color of the Labels

To change the colour of the labels, click on a

label to select it. Look in the Property box to see
if it reads Label. Change the BackColor property
of the Label in exactly the same way that we
changed the BackColor property for our Form.

To change the colour of more than one Label at a

time, click on one Label to select it. Hold down
the "Ctrl" key on your keyboard and click another
Label.

Changing the Font Size

To change the Font size of the

Labels and Textboxes, select a
control. Let's start with Label1.
Click on Label 1
Scroll down the Property Box until

you see Font

Click on the word "Font" to highlight
it MS Sans Serif is the default Font

Changing the Font Size

Notice that the Font property has a
cross next to it. This indicates that
the property is expandable. Click
the cross to see the following:
As you can see, you can change a
lot of Font properties from here: the
Name of the font, its Size, whether
is should be Bold or not, etc.
Make the following changes to the
three labels:

Font: Arial
Font Style: Bold
Font Size: 10

Writing the Code

Here comes the fun part: WRITING THE CODE

Double click on the new button that says "Get

Name" to go to the codes page.
You will see a code like this:

Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs)_
Handles Button1.Click
End Sub
End Class

Writing the Code

Now we will tell the form to produce a message

box and show the name and the last name
when we click on "Get Name.
You will enter this code between the second
line and the third line:
MsgBox("My Name is " & TextBox1.Text & " " & TextBox2.Text)

After adding this code go to Build, Publish

MyFirstApp.

Writing the Code

Now enter a name inside the first textbox, and

a last name inside the second textbox, and
then click on "Get Name" and you should get
something like this:

MsgBox:
We told the program to display a message box that

tells us whatever we entered in the form.

Explanation of the Code

Private
Private means that no other part of the programme can

see this code except for our button

Sub
Short for Subroutine. The "Sub" word tells VB that some

code follows, and that it needs to be executed

Button1
This is the name of our button. You might think that

we've just erased the word "Button1" when we changed

the Text property. The Name property of the control is the
important one. If you change the Name property, VB will
change this button name for you.

Explanation of the Code

_Click ( )
This is something called an Event. In other words, when

the button is clicked, the Click Event will fire, and the
code we're going to write will be executed

End Sub
The subroutine ends right here. This signifies the end of

our code

Using the ListBox

This program will add one item at a time as the
user enter an item into the TextBox and click the
Add button.
Class Frm1

Private Sub Button1_Click(ByVal sender As

System.Object, ByVal e As System.EventArgs) _
Handles Button1.Click
Dim item As String
item = TextBox1.Text
'To add items to a listbox
ListBox1.Items.Add(item)
End Sub
End Class

Using the PictureBox

In this program, we insert a PictureBox and a

Button into the form.

Make sure to set the SizeMode property of the

PictureBox to StretchImage so that the whole
picture can be viewed in the picture box.

Key in the code as shown below and you can

load an image from a certain image file into the
PictureBox.

Using the PictureBox

Code:

Public Class Form1

Private Sub Button1_Click(ByVal sender
As System.Object, ByVal e As
System.EventArgs)_ Handles
Button1.Click
'To load an image into the PictureBox
from an image file
PictureBox1.Image =
Image.FromFile("c:\Users\Public\Pictures\S
ample Pictures\Frangipani Flowers.jpg")
End Sub

Run and Debug the Program

To see what your Form looks

like as a programme, click
Debug > Start from the menu
bar. Or press F5 on your
keyboard:

Running the program

To

run the form, try this:

From the menu bar, click Debug
From the drop down menu, click
Start
Alternatively, press the F5 key on
your keyboard
Your programme is launched