Project 1 – Colour change
To get an idea of how to use Visual Basic (VB) Express 2010 we will make a very simple program that
changes the background colour of a window when a button is pressed. From this we will then explore the
VB interface.
1. Start VB Express.
If the start-up screen appears choose New Project.
If there is no start-up screen (it can be disabled) click on the New Project button on the standard
toolbar. In the dialogue that appears select Windows Forms Application and then click OK.
The VB integrated development interface (IDE) will appear. This is where we create VB projects.
At first this interface will appear crowded and confusing, but shortly we will learn to use the relevant
sections of it.
The important parts to identify for now are Form1 that appears in the main window, the Properties
window at lower right and the Toolbox.
Form1 is the window that will appear on screen when your program runs – this is what users of your
program will see. At the moment the form is blank. The properties window is used to control how the
different objects in the program appear and act.
1
© Kevin Savage 2011 – Licensed to Ballarat Secondary College for 24 users.
At upper left are two windows, Toolbox and Data Sources. (These may be hidden.) For our projects we
will mostly be using just the toolbox.
If it is hidden, move your mouse over, or click on the toolbox, to view its contents. Alternatively you
can click the Toolbox button on the standard toolbar.
The toolbox lists different items, called controls, that we can put on a form.
If you scroll down the toolbox you will see there are many controls, arranged into groups.
Since we are going to use the toolbox often, it will help to have
it visible all the time. If the toolbox disappears when you move
or click away from it, click on its Auto Hide button.
This will “pin” the toolbox to the IDE so it stays available.
2.
We are now going to add a button to the form. When the program is run the user can click on the
button and the form will change colour.
a Click once on the form to make sure it is selected, then from the toolbox double click on the
Button control.
b
c
A control called Button1 will be added to the form.
The small circles around the button are re-sizing handles. By clicking on a handle and dragging it
the size of the button can be altered. When the re-sizing handles are visible they indicate the
button is selected, i.e. changes can be made to it.
Move your mouse over the button. When the mouse pointer changes to a four
headed arrow, click and drag the button into the middle of the form.
While the button is still selected (re-sizing handles visible), in the properties window at lower right
change the Text of the button to Red.
All this does is change the word on the button, it does not change the colour of anything.
2
© Kevin Savage 2011 – Licensed to Ballarat Secondary College for 24 users.
d
e
The next step is to give the computer an instruction to carry out when this button is pressed.
On the form double click on the button.
This will now get VB to jump to the code editor
window.
The code editor is where the VB program is
written. VB creates the necessary outline to which
we add what we want to happen, and puts the
cursor in the correct place to start typing.
Note: when using the code editor be careful not to alter any of the code VB has written.
Type the following exactly (note the spellings of color):
Me.BackColor = Color.Red
As you type VB will offer to complete the words for you. You can use this option if you wish. To
accept the word or words offered press the Tab key on your keyboard.
f
g
h
3.
The command you have given VB means put the colour red into the background colour property
of the form, where Me is Form1. This will happen when the user clicks on the button.
From the menu use File > Save Form1.vb As… to save the form, so far, to a suitable folder.
On the standard toolbar at top click on the green Run button (or press the F5 function key). This
will compile and run the program.
The form will appear as a small window. If you click your mouse on the button the form will
change colour. (If there is a problem then you may have not typed the above instruction correctly
– for example there should be no spaces within words.)
When ready click on the blue Stop button on the standard toolbar to return to VB.
Experiment with other colours, or add a second button that changes the background to a different
colour.
It is now time to have a closer look at the VB interface, also called the VB integrated development
environment (IDE).
a Firstly close all visible windows on screen by clicking on the
at the top right of each until you
have a blank VB screen. (Leave the main VB window open).
3
© Kevin Savage 2011 – Licensed to Ballarat Secondary College for 24 users.
b
At the top is a typical main menu. Spend a minute exploring the options available.
c
Under the main menu is the standard toolbar. As you move your mouse over each button a popup hint or tool tip will tell you what it does.
d
Next use the mouse tool tips to identify each of the first three
and the fifth buttons to the right hand end of the standard
toolbar.
Click on the first button and the Solution Explorer will appear. This is used to manage and keep
track of the different items of any projects you are working on.
e
f
The second button will make the Properties window appear. This is used to set values such as size,
colour, font, etc., when we are developing the user interface for the application we are making.
g
The third button will show the Toolbox. (This will be empty at the moment because the form is
hidden.)
The fifth button will display an Error List on the lower part of the interface. This will detail errors,
warnings or messages as you build programs.
To get the form back on screen, from the menu choose View > Designer (or press Shift+F7).
Finally we can recall the code editor with View > Code (or just F7).
h
i
j
k
4.
We can jump between the code editor and the form designer using the page tabs at the top of
this window.
The form designer is used to make the user interface to the application we are writing; the code
editor is where we create the program that the interface will run.
Any of these windows or the toolbox can be hidden or can be moved to float on the desktop.
For our projects we will leave them in their default positions.
To finish, from the menu choose File > Close Project.
You will be prompted to save changes. Choose Save, and place the project in a suitable folder.
4
© Kevin Savage 2011 – Licensed to Ballarat Secondary College for 24 users.
Follow up
Visual Basic
Visual Basic Express 2010 (VB) is an authoring program that can be used to make applications (programs)
that can be run on computer, on web sites, and on other devices such as mobile phones. In these projects
we will be concentrating only on Windows applications.
In this first project we have investigated the VB interface. To help with this we have made a simple
Windows Forms Application, or a program with an interface that appears in a window on screen. By clicking
on a button the background colour of the window on screen changed colour. This is an example of an
event-driven program. We have told the program what to do to respond to the event of the user clicking on
the button. You can see this in the code editor (Private Sub Button1_Click …).
The VB project
Each VB application you build is called a project.
A project is simply the container for all of the bits and pieces that you use as you make the application. This
will include the form, or forms, and computer code you write, as well as anything associated with these
such as database scripts, shared procedures, or links to associated files.
Just as a project is a container for your application, in turn a project can be part of a solution, or a group of
related projects. The Solution Explorer we saw in step 3e above is where these different projects can be
coordinated.
For our purposes all that is important is to keep in mind that a project is a container for all that you do
while building an application.
Saving a project
When you save a form you save the form’s layout and its properties, any objects you have added to the
form, plus their properties, and any computer code you have added to the form or objects.
Saving a project involves a little more.
When you exit VB, or you close a project, you will be prompted to save or discard changes to the project.
The first time you choose to save the project, a dialogue asking for a project name and location, as well as a
solution name, will appear.
(This dialogue will also appear if you choose File > Save All or the first time you choose the Save All
button on the toolbar.)
From your response to this dialogue VB will create a series of folders that will
contain everything associated with the project.
A folder, similar to the one at right, would be created for this first project.
The outer folder (Project 1) is the location selected. The next folder (Colour) is
the solution folder to hold the project and any related projects. (In this case
we only have the one project.) The remainder of the folders and sub-folders
hold the project just created.
It is not necessary to be too concerned by all of this. VB will control how a project is stored and you can
access a project you have been working on by simply choosing File > Open Project from the main menu.
This will return you to the point at which you last worked on the project.
If you cannot recall where you saved the project File > Recent Projects or Solutions will list the last ten
projects you have worked on.
5
© Kevin Savage 2011 – Licensed to Ballarat Secondary College for 24 users.