Visual Basic Programming_ The Hello World Program

Ross Sheppard High School
Computer Programming 20
Student Learning Guide
The Hello World Program

	When you have finished this project, you will be able to:
	describe the Visual Basic desktop
	plan a Visual Basic project
	create a new Visual Basic project
	save, open, and edit an existing Visual Basic project
	describe and use Visual Basic programming conventions
	use Visual Basic programming procedures
	describe the following terms: form command sub-routine procedure event-driven rapid application development

Before starting this program, watch the video clips "Using Visual Basic Chapter 1" and "Using Visual Basic Chapter 2". This video can be found in the Video folder on the Handouts drive, and can only be viewed from within the school.
Create a new folder called Hello World on your personal drive.
Find the Visual Basic icon on your desktop and double click it to start the programming environment.
The VB project window will appear:
Because you are creating a new project, click on the Standard.exe icon:
The Visual Basic project work area will appear:
The illustration below shows what the user interface for the Hello World program should look like.
Look again at the VB Project Desktop. On the right hand side, notice the Properties Window. It is in this window that you will specify the properties of each object in your VB program. You'll recall that everything you place on the form is called an object, including the Form itself.
Each time you create an object on the form, a new item will be added to the properties window.
You can select an object by single clicking on it. Single click on the anywhere on the form for now.
In the properties window, notice that the Properties - Form 1 has Form1 in the Name Name.
To change the text in any of the property boxes, select the text and type the new information. In the Name properties area, type frmHelloWorld.

Remember, a good programmer uses proper naming conventions. The three letter prefix to indicate a form is frm, followed by the name of the form.
Find the caption property for the form. Change it to The Hello World Program.
Notice the Title bar of the form has now changed. Your form and properties should now look like this:
The next object you will create is the Exit button. Look closely at the tool box:

Notice that if you hold the mouse over an object, the definition of that object will appear. Find the definitions for all of the objects.
Select the CommandButton object by clicking on it once. Draw a CommandButton on your form - just as you would if you were using a draw program - in the location indicated on your Visual Implementation plan.
Now set the properties of the CommandButton as shown in the table below:

Object

Property

Setting

CommandButton

Name

btnExit

Caption

E&xit
Your properties window for the btnExit object should now look like:

Note: the programming convention for a CommandButton is btn
Notice the caption for the CommandButton has now been changed. The use of the & tells Visual Basic to underline the character that follows. In this case the letter "X" is underlined. Do you know what this indicates? Click here to find the answer.
As is always the case when you are working on projects on a computer, you should save your work often. Create a new folder called HelloWorld. Note that each Visual Basic project should have a different folder. Name the folder with the project name, then always save the project to that folder.
To save your Visual Basic project, you can either click the save icon on the tool bar or click File on the menu bar then Save. The Save dialog box will appear:

Name the file frmHelloWorld.
A second save dialog box will open. Change the Project.vbp to prjHelloWorld.
You have now saved both the form and the project as HelloWorld. Be sure to save often.
Create a second button (see your visual implementation plan) for the Display Hello button using the following properties:

Object

Property

Setting

CommandButton

Name

btnHello

Caption

&Display Hello
Create a third button (see your visual implementation plan) for the Clear button using the following properties:

Object

Property

Setting

CommandButton

Name

btnClear

Caption

&Clear
Your form should now look like the one shown below:

Next, create the TextBox that will display the message "Hello World" when the Display Hello button is pressed. Use the following properties:

Object	Property	Setting
TextBox	Name	txtDisplay
	Text	Make it blank (Delete the contents; i.e. Text1)

To make the caption of a TextBox empty, look for the Text property. Delete the contents. This is done because the contents of this box should be blank when the program starts. If you did not do this, then the original contents of the TextBox would be "text1".

Note the naming convention for a text box is txt.

Your form should now look like the one shown below:

Save the project again.
You have completed the visual implementation - the user interface - of your first program. However, at this point it can not do anything because you have not entered any code to instruct the computer.
Take a look at the Project Explorer window:
The first code that you will write is for the Exit button. There are two ways to view your code:
- double click the object you wish to write the code for
- click the view code button in the Project Explorer window
In either case, you will see the View Code window:
Place the cursor in between the Private Sub and the End Sub lines for the btnExit sub-routine. Press the [Tab] key once. Type the following code:

Unload Me
The "Unload Me" code instructs the computer to end the program, unload the form, and clean up any temporary files that may have been opened.
Did you notice that when you typed "Unload Me", a syntax helper opened to let you know what the required syntax and contents of this code were?
At this point, you need to learn two more programming conventions:
- all code in a sub-routine is tabbed in for clarity
- good programmers always add comments to their programs to help them troubleshoot the program later on
To add a comment to a program use the apostrophe key '. This tells the computer to ignore the rest of the text on that line.
Just above the "Unload Me" code, add the following comment:

'The following code unloads this form

You will be required to extensively comment all of your Visual Basic programs.
Now it is time to try running your program. Of course, the only button that will work at this point is the Exit button because that is the only one that has code written for it.
Always save your program before running it.
In the Tool Bar, find the run button:
Click the run button, and Visual Basic will run the program.
Click the Exit button and your program should stop running and return you to the project window.
If the program does not stop running properly, first try the Close button on your form, and if that does not work, then try the Stop button in the Tool Bar.
Now, it is time to enter the code for the other buttons on the Hello World program. Open the Code View window.
In the Code View window, notice there are two menu boxes. Click the left hand box. A listing of all of your objects appears. Choose the bntClear object. The right hand box is used to select various events. It is defaulted to the click event - that is, when the user clicks the mouse button. You will learn about other events later on.
The cursor will be placed in the proper sub-routine. Choose btnClear.

A note about the Visual Basic development environment: much of the coding is pre-done for you simply by clicking on the object name. In many program development environments, you need to type all of this code. This is not necessary in Visual Basic. For this reason, Visual Basic in known as a Rapid Application Development environment.
The purpose of the Clear Button is to remove the text from the TextBox. Type the following comments and code:

'The following code clears the
'text in the TextBox txtDisplay

txtDisplay.Text = ""
From now on, a procedure and event such as the btnClear will be written as: btnClear_Click().
Type the following code for the btnHello_Click() procedure:

'The following code displays the
'message Hello World in the
'TextBox txtDisplay

txtDisplay.Text = "Hello World!"
Save your program then run it. Try each of the buttons to ensure proper operation.
Anatomy of a procedure:
Every program you write needs to include basic information. In the General_Declarations area of your Form, enter the following comments - don't forget to use the apostrophe character:
In this project, you have learned how to:
- design the visual implementation of a program
- create objects such as text boxes and buttons
- set the properties of the objects
- write code for events
- save a project
Click here to see the marking guide for this program.
When you have finished, send an email to your teacher asking that the Hello World program be marked..

Object	Property	Setting
CommandButton	Name	btnExit
	Caption	E&xit

Object	Property	Setting
CommandButton	Name	btnClear
	Caption	&Clear