Creating the "Hello World" Sample Program

To create a basic "Hello World" program, perform the following steps:

 

·         Remove the "Button3" button, if it is present on your form as a result of following along in the previous section.

·         Add a Label control to your form.

·         Arrange the Button1, Button2, and Label1 controls on your form as shown below:

 

 

·         Set the following properties of the controls:

 

Control     Property    Value

Button2     (Name)      btnSayHello

            Text        Say Hello

 

Label1      (Name)      lblHello

 

Button1     (Name)      btnExit

            Text        Exit

 

Your form should now look like this:

·         Click the label control once to select it, then go to the Properties and select the Font property (if necessary, scroll to get to the Font property). A button with an ellipsis (…) should appear, as shown below:

 

·         Click the ellipsis button, and a Font dialog box appears.  Select the Comic Sans MS font (if available, otherwise, choose something else), Bold Italic style, size 12.

When you are done making selections, click OK to dismiss the Font dialog box.

Note that the font for the label has changed according to our selections. However, we do not want the user to see the text “Label1” when the program first starts up. We could take care of this now by clearing the Text property of lblHello, but if we do so, it will look like the label has disappeared from the form and would make it hard for us to locate the label control if we wanted to work with it some more. So we will leave it alone for now – when we start writing code below, we will see how to clear the “Label1” text when the program starts up, so that the user will never see this unwanted text.

·         Double-click the btnExit button. This will cause the code window to open, with a stub for the event procedure related to the Click event of the btnExit button pre-coded.

An event procedure header consists of:

Ø  the keywords Private Sub

Ø  the name of the procedure, which VB formulates by taking the name of the control (in this case btnExit), followed by an underscore,  followed by the name of the event (in this case Click)

Ø  zero or more arguments enclosed in parentheses like: (ByVal sender As System.Object, ByVal e As System.EventArgs)

Ø  at last the event handler i.e. when the procedure is called like: Handles btnExit.Click in this case.

The end of a procedure is signified by a line containing the keywords End Sub.

It is between the procedure header the End Sub line that you place the code that you want to be executed when the event occurs. In other words, you are saying, "When the user clicks this button with the mouse, do this …".

·         In the code window, type the word Me.Close between the procedure header and the End Sub line. (Style-wise, I prefer a blank line after the procedure header and before the End Sub line.) Don’t worry about indentation, as the IDE manages it for you.  Your code window should look like this:

 

Note that the top of the code window contains two drop-down boxes. The drop-down box on the left (the object box) contains entries for all of the controls on your form, as well as an entry for the Form itself and an entry called "(General)".

The drop-down box on the right (the procedure box) will show all of the possible events that the control selected in the object box can respond to.

There are many events associated with a control depending on the type of control. Here though the command button is associated over 60 different events, we are only interested in its Click event.

Recall that when you opened the code window by double-clicking on the command button, the Click event was selected by default.  For each control, VB 2010  takes a guess as to which event you most likely want to write code for. If VB 2010 guesses wrong, simply go to the procedure box and select the event that you want. (You can also delete the "Private Sub" and "End Sub" lines for the event procedure stub that you don't want.)

·         Back on the frmHello Design tab, double-click the btnSayHello button on the form, which will cause the code window to open with the stub for the btnSayHello_Click event procedure. In this event, we want to code lblHello.Text = "Hello World", so that when the user clicks the "Say Hello" button, the text "Hello World" will display in the label. Start typing the line of code with lblhello.t. Notice that as soon as you typed the dot, a listbox appears which contains all of the properties and methods that can be used with a label. This is "Intellisense" feature at work, ready to assist you with your coding.

When this box appears, you have the following options:

Ø  Ignore it and keep typing

Ø  If the item you want is selected, press the Tab key, which will cause that word to appear on your coding line and dismiss the box

Ø  If the item you want is not selected, type a few more letters of the word until it is selected, then press Tab to complete it

Ø  If the item you want is not selected, scroll down to find the item in the box, click it, and then press Tab to complete it

The completed procedure looks like this:

 

·         Back on the frmHello Design tab, double-click on form’s title bar, which will cause the code window to open with the stub for the frmHello_Load event procedure:

In a form’s Load event, we can place initializing code that will run before the form is displayed to the user. Here, we want to clear the text of the lblHello label control (we don’t want the user to see “Label1” when the program starts). So in the frmHello_Load event procedure, we will type lblHello.Text = “”, as shown below:

That is all the code we need for the program. Now, we are ready to run.

To run the program, click the Start icon (green right-pointing triangle, shown circled below) on the standard toolbar. (There are other ways to start a program from the IDE as well: you could click Debug à Start Debugging from the menu bar, or you could press the F5 key.)

 

Upon starting the program, the form is displayed and waiting for the user to do something:

Upon clicking the “Say Hello” button, our “Hello World!” message is displayed:

Upon clicking the “Exit” button, the program will end (the form will close), and you will be returned to the design environment.

We can now save our program (actually you can save your program at any point in the development process, and it is a good idea to save frequently). To save the program, click the “Save All” icon (shown circled below) on the toolbar:

The first time you save, the Save Project dialog will be displayed to confirm the project name and save location, which will default to the project directory we specified initially. If the names are correct, click the Save button:

You can then exit VB 2010 Express by clicking the “X” button, or using File à Exit.

 

The VB project code for this sample program can be downloaded here.