Hello World Example

Visual Basic is a graphical programming environment that allows for rapid prototyping of designs.  Visual Basic is an event driven environment, meaning all controls, objects, or widgets that you place in a window or form come with their own events that can be fired either automatically or by some user action, such as a mouse click or key press.

These instructions will build an example program that looks like this:

Download the code by clicking on the Zip file.

Instructions for Creating the Example:

1. Start Visual Studio from the Start menu.
2. Click on the New Project button in the bottom of the screen.
3. Select Visual Basic Projects, and Windows Application.  In the Name box give your project a name like Hello World.  Your files will be stored in a folder with the same name as your project by default.  

Important Files to Note:   HelloWorld.sln is the project file and running it will open up your project in Visual Studio.  Form1.vb contains code for a form or window.  Form1.resx contains information about the design of a form, e.g., which widgets a form uses and where they're placed.  The bin folder contains an executable for your project after compiling.

4. Click OK to continue.
5. VB should now show a window with: the Toolbox, a Form, the Solution Explorer, and the Properties Toolbar.

The Toolbox lets you select widgets or objects to place on a form.  You can see all the widgets and expand the toolbox by clicking on the Toolbox icon.  The Solution Explorer is a listing of all forms or code modules that belong to your project.  The Properties toolbar allows you to customize various properties for each widget.

6. Place the following widgets on your form: one button, three labels, one trackbar, and two textboxes.  Select each one from the toolbar and then draw them on the form.  You can move them around and resize them as you like.
7. Set the properties of the form by clicking on it to select it and then going to the properties toolbar.  Change the name property to frmMain and the text property to "My First VB Program".

8. Set the following properties of each widget by clicking on the object in the form and going to the properties toolbar.

Your user interface should look like this so far:

9. We are ready to add some code now.  Code will run when an event happens to an object, such as clicking it or typing into it.  First let's add code to the button; just double click on the button to add code to it.  The first time you add  code to an object, a window will appear.  You can flip back to the Design window by clicking on the tab labelled "Form1.vb [Design]"

10. A subroutine has been created where we will add our code for the button.  Notice that the subroutine is for the object btnCheck and code placed here will run when the object is Clicked. 

11. You can change the event with the drop down boxes.  Select the object in the left drop down box and the event in the right drop down box.  You'll see there are lots of possible events in the drop down box on the right.  This will cause your code to run when a different event occurs.  For our purposes we will use the Click event.

12. Add the following code to the btnCheck_Click(...) subroutine:

Private Sub btnCheck_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnCheck.Click
    ' check the text property of txtName
    If txtName.Text = "Carman" Then
        MsgBox("You rock!", vbOKOnly, "Name Validation")
    Else
        MsgBox("Error", vbCritical, "Name Validation")
    End If

    ' check the value property of trkAge
    If trkAge.Value < 5 Then
        MsgBox("Youngin'", vbOKOnly, "Age Validation")
    ElseIf trkAge.Value >= 5 And trkAge.Value < 18 Then
        MsgBox("How's school going?", vbOKOnly, "Age Validation")
    Else
        MsgBox("Start planning your life...", vbOKOnly, "Age Validation")       
    End If

    ' reset our controls' properties
    txtName.Text = ""
    txtAddress.Text = ""
    trkAge.Value = 0
End Sub

13. Double click on the form to add code to a special subroutine called Form Load.  Here is a good place to initialize variables or control properties.  Add the following code to Form Load:

 Private Sub frmMain_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    ' this subroutine runs when your form first appears

    ' we will change some properties of our controls at startup

    ' to access a control's property, type the name of the control, then a period, and
    ' finally the property's name
    txtName.Text = ""
    txtAddress.Text = ""
    trkAge.Value = 15
End Sub

14. Try compiling and running your program.  Go to the Build menu and choose Build Solution to compile your project.

To run your code, go to the Debug menu and choose Start.

If you get a compile error that says "Sub Main" not found.  Right click on your project name and select Properties from the context menu.

In the dialog window that appears, choose frmMain as the startup object.

15. To debug your code at runtime, you can use some built in features of Visual Studio .Net. 

Clicking in the left margin of your code will place a Breakpoint.  This means your code will stop when it gets to this line.  The highlighted line in the picture below contains a breakpoint.

When your code stops, you can check out what values are contained in objects and variables to debug the current state of your program.

Pressing the F11 key or choosing Step Into from the Debug menu will move to the next executing line of code.  Step Into will allow you to go into functions and subroutines should a line of code call a different function or subroutine.

Pressing the F10 key or choosing Step Over from the Debug menu will move to the next executing line of code.  The difference between Step Over and Step Into is that Step Over will not go into functions or subroutines if they are called.

16. If you hover over a variable you can see its contents in a tooltip.  For example, below you can see in the tooltip that txtName.Text currently contains an empty string.  My mouse is hovering over "txtName.Text" but doesn't appear in the screen capture shown below.

17. If you highlight a variable, you can drag and drop it into the Watch window at the bottom of your screen.  This will allow you to easily keep watch of the values contained in this variable.

18. You can clear or remove a breakpoint simply by clicking on the red square in the margin that represents the breakpoint.