Hello
World!
Historically most programming languages start off by
creating a simple application that displays a “Hello World!” message when run.
We will get there, but I want to show some other things along the way.
The first thing I typically do when creating an application
is to drag the bottom right corner of the form out to make the area I am
working with larger. The size you make it in the designer will be the size it
appears when you execute your program, so keep that in mind.
The Form
There are many properties to a form, but only a few of them
will make any sense at this point.
At the top left of your form you will two items that are
changed frequently, the icon and the form name, which is likely Form1. When
your application is run, this will be the icon and name that your user will
see. Select your form by clicking on it, and go to your properties window.
·
Icon: Your application will default to this
standard icon, by clicking the ellipsis button […] you can choose your own
icon. Most images will work, but you may have to convert/resize them.
·
Text: This is the text that will be displayed on
your form when the application is run; you will typically want to change this
to something more meaningful to the end user.
·
WindowState: This sets the beginning window size
when the user launches your program. The default is Normal, which is the size
you dragged it to in your IDE but you can also change it to maximized (most
common) or minimized.
For our example change the icon if you desire, change the
text to “Hello World!”, and leave the windowstate as normal.
Your form should look something like the image below. Just
under the menu you will see a green arrow, or “play” button and the word
“Start”, click the button to execute your application.
Click the red ‘X’ on the form or the red stop square that is
now available where you clicked the start button before.
Working
With Controls
Controls are pieces of prebuilt code and design that can be
used over and over again. Before modern IDEs and interfaces if you wanted a
button for example you would basically have to draw a square to the screen at
the specified location, color it and add text, add properties and events to
handle what happens when someone clicks it, program a sound if you want it to
have an audible click etc. etc. A control allows you to create usability that
covers most situations, and package it all together to be changed and edited as
needed.
Open your toolbox and find the button control, you may have
to first click on “All Windows Forms” or “Common Controls”, the controls should
be displayed in alphabetical order. Click on the button and drag it onto the
form. Your form should now look something like this.
Note that when the button is selected, you will see little
white boxes called handles that allow you to resize the button. With the button
selected open your properties window.
At
the top of the properties box just under the blue line you will see the name of
the button in a drop down list, in our case “Button1”. You can also use this
dropdown to select controls, this comes in handy when you have controls that
overlap or hidden. The first thing you generally want to do when adding a new
control is change the name, because once you start writing code you might not
remember what Button1 is. While there are not any universal naming conventions,
it is usually helpful to develop your own and be consistent, the reason will
become apparent soon. For buttons I preface my name with btn all lower case,
and you will not be allowed to use any spaces, so generally you replace a space
with a capital letter. Scroll to the top of your properties box and change the
“(name)” to btnDisplayMessage.
Notice that the dropdown box at the top automatically
changes to the new button name.
This next step is not anything you will want to do on a
regular basis, but I want to show it to you so you can understand just how much
the IDE is helping you. Go to your Solution Explorer, and at the top right you
will see the icon I have highlighted below, hovering over it should display a
box for you telling you what the button does, in this case “Show All Files”
click it. Now you will see some additional files that the IDE hides because you
will rarely use them and they can mess things up severely if you don’t know
what you are doing. Click the little arrow beside the icon “Form1.vb” and then
double-click the icon “Form1.Designer.vb”.
This will open another tab at the top of your screen. This
is the code that the IDE created when you put the button control on your form.
You can see how much work the IDE is doing for you; I have 50 lines of code
that was created for me without having to write a single line myself. Before we
accidentally mess something up, close the designer tab with the little “x”, and
click the “show all files” icon again to hide the files we don’t need.
I forgot to change the name of the button, so click on it
and go to properties and change the Text property to “Hello World”. Note that
for the text property you are allowed to
type any characters.
Explore some of the other properties if you would like, such
as Font, which allows you to change the font of the text displayed on the
button.
Your First
Code
For this first piece of code we will write the code first,
and then I will explain what everything does. To write code for the button,
double-click it. This should do a couple of things for you, first it opens up a
new tab called “Form1.vb”, and it puts some code in for you.
Private Sub btnDisplayMessage_Click(sender As Object, e As EventArgs) Handles
btnDisplayMessage.Click
End Sub
Note that my writing may move some text to the next line,
your code should have the entire first part on one line, a blank line, and then
a third line “End Sub”
In the space between Private Sub… and End Sub type the
following:
MsgBox("Hello World")
Your code should now look like this:
This page also has a Start button under the menu, click it.
Your form should now open and you should see your button on the screen, click
it.
There’s your first line of code!
Click OK on the message box and stop your application.
Now to explain a little bit about the code and what it does.
First, each form that you create will have its own code page, which will by
default include “Public Class Form1” or whatever the forms name is, as well as
an “End Class”. For the most part, any code that is written for your form will
be done between these two lines, we will go into more details about what a
class is in later sections.
I won’t go into detail right now about the sender, EventArgs
etc. The important parts here are the Sub and Handles.
Sub stands for Subroutine, its counterpart is the Function;
for the most part these are the same, but Subs are designed to execute a piece
of code while a function is designed to do something such as a calculation and
return a result. Don’t worry too much about the Private piece right now.
If you were to just type MsgBox(“Hello World”) in the code
page without a handles, nothing will happen except a few errors, you have to
tell the code when to display the messagebox. The handles accomplishes this.
From the example above you can see that the handles was put in for you
“btnDisplayMessage.Click”. This tells the code to execute only when the button
we created is clicked, this is called an event.
Go back to your Form1.vb tab, and then double click the top
of your form, by “Hello World” for example.
This will take you back to the code page where you will see
that some new code was added.
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
End Sub
A new Sub was created for Form1_Load, notice that the
handles may not be what you expect such as Form1.Click. What it did do was
create a sub that is executed when the form is first loaded, any code you put
here doesn’t require anything from the user other than starting the
application. In the sub type in the code
MsgBox("Form Loaded")
And click the run button. This time you’ll see that you get
the messagebox before the form is displayed. When you want code to run when
your application starts, you put it here.
As you started typing the code for the
messagebox, you should have seen something pop up on your screen that looks
like this.
This is called Intellisense, it guesses at what you are
typing as you type, which can save you time or help you to remember the name of
what it is you are trying to do. Further, there is a box that comes up that
tells you what the code is expecting next, like when you write a formula in
Excel and it tells you what it wants next. I will walk through each of these
briefly.
- ·
Prompt As Object: This is the message that you
want to display within the messagebox, this message must be in quotes. At the
bottom of the popup you will see “Prompt:…” This gives you more information
about what is expected next, it tells you it is required and what it does as
well as the limitations such as 1,024 characters.
- ·
Note that for the rest of these the description
is in brackets “[]” this means they are optional.
- ·
Button As Microsoft.VisualBasic.MsgBoxStyle: A
dropdown will appear to help you select this, which is an icon that will appear
on the messagebox, choose Critical.
- ·
Title As Object: The title for the messagebox,
type “This Is The Title”
Click run to launch the application. You should now see a
messagebox like this:
Textbox
Control
Before we finish this tutorial I want to introduce you to
another of the most common controls, the textbox. A textbox is a place where
you can display text or receive text from the user. Go back to the IDE and look
for textbox in the toolbox and add it to the form.
Note that when the textbox is
selected you see 2 squares, one on either side which is for resizing the width.
The standard textbox is for single lines of data, but it you click the little
right facing arrow at the top right corner of the box you should see a checkbox
for MultiLine:
Once you check this box you see that there are now 8 little
squares so you can resize the box in any dimension. Unless you are displaying
multiple lines of text to the user, you would generally leave this as single
line. The right facing arrow is on several controls and gives you quick access
to some of the most common formatting selections; you can also achieve this
from the properties box by setting the Multiline property to true. Change the
name of the textbox to txtOutput.
Now instead of displaying our message in a messagebox, we
are going to put it in the textbox. While working on code you will often want
to insert a messagebox to see what a particular variable is at any given time,
instead of writing and deleting them several times you can comment them out,
this leaves the code there but does not execute it. Go back to your code and put
a tick mark “ ‘ “ before the 2 lines containing the messagebox. If you need to
comment many lines at a time you can use the comment/uncomment icon from the
menu.
Now we want our button to populate the textbox with our
message, go to the click event for the button (where the handles has the .Click
method, or double-click the button again). Now type “Me.txtOutput.Text=”Hello
World!””. The “Me” in the code makes the code refer to the current form, this
isn’t necessary but is often helpful as it will reduce your list of options
making the intellisense show results closer to what you need. Your code should
now look like this.
Click the run button, your textbox should still be blank,
but when you click the run button your textbox should populate.
One last note for the textbox, you can have it default to a
certain text by setting the text property to whatever you would like in
properties of the textbox, if you do it this way you do not need to put the
text in quotes.
Code from project:
Public Class Form1
Private Sub btnDisplayMessage_Click(sender As Object, e As EventArgs) Handles
btnDisplayMessage.Click
'MsgBox("Hello
World")
Me.txtOutput.Text = "Hello
World"
End Sub
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
'MsgBox("Hello
World!", MsgBoxStyle.Critical, "This is the title")
End Sub
End Class
