Microsoft Visual Basic Tutorials
Online Tutorials - Microsoft Visual Basic by Forum member "Hainesey"
©Technology Vault.

Introduction to Visual Basic

Lesson 1

The purpose of this tutorial is to help beginners to design a simple program using Microsoft's Visual Basic. For this tutorial I will be using Visual Basic 6.  But as it is a simple tutorial it should work fine with lower versions. I've tried to explain all the steps that we will go through but if you get stuck at any time feel free to PM me via the forum,  ICQ me at 104135013 or click here to email me.

Creating A Simple Form

A 'Form' in Visual Basic is what we would call a 'window', an empty form is shown below.

The dots you can see on the form are only visible during 'design mode'. This is to help with positioning objects on the form (which we will look at later). As soon as you decide to run your program the dots will disappear.

Firstly create a directory somewhere on your hard drive called 'VB Tutorials' and within this directory create another called 'Lesson 1'. This will just help you keep the tutorials organised :)

Next, load up Visual Basic. You should then be presented with the 'New Project' window, if the window isn't displayed click File > New. Double click the 'Standard EXE' option. This will create a Project and an empty Form. A Project is the file that holds all your visual basic files together, and the file that you load if you ever want to view this lesson again.

Now you should see on the screen a form within a window, like the one above.

The Properties Window

This is a very useful feature which allows us to set different properties such as font, colour, size, etc in seconds. This window should look similar to the one pictured below. If you cannot see it on your screen click View > Properties Window.

The property window lists the properties of the currently selected object, in this case the blank form. The properties are listed in the left column and the values of the properties are listed in the right column. As you can see from the properties box the Name of the blank form is Form1. The Name field is used to identify the objects from each other, much easier to find. As this form is our main form for our lesson highlight the 'Form1' value and change it to read 'frmMain'. The 'frm' part is an unofficial standard used by many Visual Basic programmers, as this object is a Form we can indicate this by putting the prefix 'frm'. When you click off this value you should notice that the name in the Project Explorer window updates too, this is pictured below. If you can't see the Project Explorer click View > Project Explorer.

Now let's change some more properties on the form!

Scroll down the list of properties until you find one called 'Caption', change it's value to 'Lesson 1'. You may notice as you type the caption (or title) of the window in the design area changes too.

Now find the property 'BackColor', this property changes the background colour of the form. When you select the value of this property you will notice an arrow appears to the right of the value indicating a drop down box, click the arrow to display the box. When the box appears you should have a list of colours and two tabs at the top of the box 'Palette' and 'System'. The System tab displays colours which are currently being used by your Window's setup, probably lots of grey colours. The Palette tab displays the palette of all available colours and this is the one we will use, so click the 'Palette' tab. Now select a colour from this window, it doesn't matter which it's just to show how easy it is - preferably not black, pick a light colour. The background of your form should now have changed to this colour.

Save Your Work

Even though all you have done so far is create a project and a form it's a good idea to save your work as you go through this lesson. Click File > Save Project As... You'll now see the save dialog box, but it will ask you to save your form before your project. Find the 'Lesson 1' directory that you created, the filename for your form should read 'frmMain', this is another reason why you should give your forms meaningful names, so now click Save. Now you will be given another save dialog box to save your project file. This filename cannot have spaces in it, call it 'Lesson1' and click save.

Depending which version you are using some users may get another question saying 'Add this project to SourceSafe?', click No. This is only needed if you are doing a very complex program - which we won't be doing yet :) You won't be asked this question again for this project.

The Toolbox

The Toolbox should be displayed on the left side of your screen and will look similar to the picture below. If you can't see the Toolbox click View > Toolbox.

Each of the icons in the Toolbox represents an object that can be used with your program. The two that we will use for this lesson is Label (1) and Button (2), but remember where TextBox (3) is as this will be used for the next lesson.

Adding A Label

The Label (1) is mostly used to display helpful information. To add one to your form click the icon for Label in the Toolbox. The button is now pressed in and if you move your mouse over your form (without clicking anything yet) you will notice the mouse cursor has changed to a crosshair. Now put your cursor at the top left of your form (like the picture below on the left), click and hold your left mouse button and drag the box till it looks similar to the second picture below, now let go of the mouse and a Label is created on your form. As you can probably see the background is grey, which probably doesn't match your form's background colour. To change this click on the label, squares should appear around the label to indicate it's selected. The properties for the label will now be shown in the Property Box. Now change the value of the BackStyle property from '1 - Opaque' to '0 - Transparent' using the drop down box which will appear when you click the value. The Label will no longer have a background colour.

Let's change a few more properties for the Label. Firstly change it's Name property to 'lblTitle' - this is the same method of naming as we used to name our form, as this will be a title for our form we will call it 'Title' and because this object is a Label we prefix it with 'lbl' (it's 2 small L's not 1's). Next, change the Caption property for the Label to 'Lesson 1'. The text in the label is still a bit small for the big box we've made for it so let's change the label's font properties. Click on the 'Font' property in the property list, it should currently say the name of the font being used by the label (probably MS Sans Serif). When you click on this value a small button with '...' on it appears, click this button. You are now shown the font window. Select 'Arial' from the list of fonts in the left of the window and change the Size to 28, then click OK. If the font size is too big just go back to the font window and change it until it looks ok.

The label's alignment is currently to the left side, as this is our title it should be centered. Go to the label's properties and find the property 'Alignment' and using the drop down box select '2 - Center', your text should now be centered.

Adding A Button

A button is used to perform an action. For this lesson we will make 2 buttons, one to change the text in the label and one to quit the program. Adding a button is done in the same way as you added the label. Click the icon in the toolbox for the Button, click and hold the left mouse button, drag to create a rectangle and let go. Then add another one, try to make your layout of your buttons look like the picture below. If you have made the buttons too big or small click on the button you want to change and squares will appear around the button, drag these squares until your button looks right. If the button is positioned wrong on the screen simply click and hold the left mouse button on the object and drag it to where you want it, then let the mouse button go.

Click on the button on the left in your design view to bring up it's properties in the property window. Change the 'Name' property to 'cmdChange' and change 'Caption' to 'Change Text'. The prefix 'cmd' in the Name is short for Command, as in Command Button.

Click on the button on the right in your design view to display it's properties. Change the 'Name' property to 'cmdQuit' and change the 'Caption' property to 'Quit'.

Now Lets Add Some Code!

Now we will add some code that will change the text in the label and quit the Lesson 1 program when we run it.

Double-click on your 'Change Text' button, this will bring up the code for the button, it should say -

Private Sub cmdChange_Click()

End Sub

As you can see cmdChange is the name of our button, the _Click part means this code will be run when the button is clicked, this is known as aan action. The 'Private' part means this code can only be run by this form, not important yet. 'Sub' means that it is the start of the action and also that no data is returned, this isn't important yet either. The 'End Sub' means it is the end of the code for this action.

Now we will add the line of code in that will change the text in the label, change your code to read like the following -

Private Sub cmdChange_Click()
    lblTitle.Caption = "Hello World!"
End Sub

lblTitle is the name of the label we want to change, the property we want to change is 'Caption' the full stop in between means the property belongs to lblTitle. Hello World! is text in programming this is known as a String and because it is a String we put "'s around the text. The = means that the data on the left will be set to the data on the right, in this case the Caption property of lblTitle will be set to 'Hello World!'

Now go back to the design view of the form, you can do this by double-clicking the form frmMain in the Project Explorer window. Next, double-click on your Quit button, this will take you back to the code view. Change the code so that it looks like the following.

Private Sub cmdQuit_Click()
    Unload Me
End Sub

Again, cmdQuit shows that we're doing something with the Quit button and _Click means we are adding code for it's click action. The Unload command is used to unload a form. The Me part refers to the form that the code is in, so in this case Me = frmMain. So, if you wanted to, you could put 'Unload Me' or 'Unload frmMain', either would work.

Now Time To Test Our Program!

To run your program simply click on the icon on the toolbar that looks like a play button, or click Run > Start.

Your form will now be loaded, note that the black dots that were on the form in design mode are no longer there. Click the 'Change Text' button and your label text should change to read 'Hello World!', note that the text in the label cannot be edited manually. Now try clicking your 'Quit' button, the form should close and you will be taken back to design mode.

Congratulations! You made a simple program and made use of labels and command buttons! Save your work so that you can use it as reference (Click the disk on the toolbar or click File > Save Project).