DevCity.NET :: Simple Steps in VB.NET. Part 1

Article source code: ssteps1_thebutton.zip

When the absolute beginner searches the web to find something he or she can do with VB.NET, it is usually too advanced and/or too complicated to start with. If it isn't, it is certainly something which focuses on one function, which in turn is very useful, but a bit boring. I believe that the very beginner should learn useful things, but puh-leeze, leave those complicated things for later. Programming is already serious enough, so why not have some fun with it? Of course, a fun application is not necessarily a useful program. On the other hand, it teaches useful functions in the easiest way possible; functions you will need when writing something really complicated. Besides, it shows the absolute beginner that success is not only for the advanced.

What you will learn here is exactly what I mentioned above: an easy, less useful fun program with some useful functions. You don't need even the slightest idea about programming to complete this successfully. Now you might be wondering: what the heck is that guy talking about? Okay, let's first look at what you will do.

You will create a simple form with four buttons, each of which has a different function: make a button visible/invisible, close the form, and one which will display a message. In addition, you will also insert tool tips – those little yellow boxes with detailed information that pop up when the mouse rests over a button. Got curious? Then, let's start.

Before you start, make sure you have a bottle of French champagne in the freezer to pop when you're done – I mean, with the program.

First, click Start, point to All programs, then point to Microsoft Visual Studio.NET, and finally click the program icon for Microsoft Visual Studio.NET. Relax; it may take a few seconds to open. If this is the first time you open the program, you will see the following window:

(Figure 1)

You may decide to change some settings here. If you have nothing but Visual Basic.NET installed, it may be a good idea to change the setting Visual Studio Developer to Visual Basic Developer.

Click Get Started, in the upper left. You should see the following:

(Figure 2)

In this window, you can also see your recent projects. Of course, only if you have some. If you do, there will be a link you can click to open the project. However, only four links will be displayed here. If you have more than four recent projects, you can click Open Project and choose the project you want to open. You can also adjust this number to display up to 24 recent projects – not quite the thing for beginners. To change this number, click Tools, then Options and adjust the number accordingly. If you ever want to open your projects outside the development environment, go to this folder: C:\Documents and Settings\yourusername\My Files\Visual Studio Projects.

To start a new project, click New Project (sounds obvious, doesn't it?). A new window will open. In the left pane, click Visual Basic Projects. In the right pane, click Windows Application. Double-click the name (WindowsApplication1) and type the name you would like to give your application. I called mine TheButton. Click OK and wait until the project is created and opened.

(Figure 3)

What you will see next should look like this:

(Figure 4)

If you have left the settings (see Figure 1) at default, the toolbox (on the left) will be hidden. In this case, move your mouse to the toolbox

(Figure 5)

It's probably a good idea to leave the toolbox permanently open. To do so, click the Auto Hide button. If you later prefer the toolbox closed, click Auto Hide again.

(Figure 6)

You know already that the Toolbox is on the left. In the upper right is the Solution Explorer, and below it the Properties. Go to the Properties window and look where it says Form1.vb. You can change this name to anything you'd like, but always be sure it ends with .vb and that there are no spaces. For now, you don't need to change it.

The title of your form is Form1, which isn't the best title for it. Let's change this first. Click the form once, go back to the Properties and look for the item Text. Form1 should appear there. Double-click Form1 and type The Button, or anything you'd like. Click on the form to confirm and activate the changes. You see, now your form has changed the title (Figure 7). At this point, you could also change the name, but leave it as it is for now. Whenever you change the name, make sure it ends with .vb.

(Figure 7)

Now the time has come to insert the buttons. Go to the Toolbox. Under Windows Forms, look for Button (Figure 8).

(Figure 8)

You can either drag and drop a button on the form, or you can simply double-click to insert a button. Insert four buttons. Your form will look like this:

(Figure 9)

Move your mouse over each button and drag them to an appropriate place.

(Figure 10)

Your form could look something like this:

(Figure 11)

The first thing you can see is that the buttons aren't exactly centralized. One way to centralize the buttons is to count the dots on each side. Aw, c'mon – I'm just kidding! Click the left button of your mouse and hold it while you're dragging over all the buttons (Figure 12).

(Figure 12)

Release the button (from the mouse, of course), and see that all buttons were chosen (Figure 13).

(Figure 13)

Now click on Center Horizontally. Observe the dark spot with the tool tip (Figure 14). Next to it on the right, there is a button to Center Vertically. Feel free to use this, too.

(Figure 14)

Click on the form once. Click once on Button1 and go to Properties. Change Text from Button1 to Close, and change Name from Button1 to btnClose. Click on each button once and change those items for the other buttons as follows:

Original Text	Changed	Original Name	Changed
Button1	Close	Button1	btnClose
Button2	Message	Button2	btnMsgBox
Button3	Show	Button3	btnShow
Button4	Hide	Button4	btnHide

Your form should now look like this:

(Figure 15)

Now, let's start with the code. Double-click the button Close and edit the code so that it looks like the following (note that everything in green is not essential, it's just an explanation):

Private Sub btnClose_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles btnClose.Click
  'This will close the program.
  Me.Close()
End Sub

To see your form again, click on Form1.vb [Design]* (Figure 16)

(Figure 16)

Go ahead and edit the code for the other buttons.

Message:

Private Sub btnMsgBox_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles btnMsgBox.Click
  'This will show a message box.
  'Hey, Visual Basic.NET works is the message.
  'Hi Folks is the titel.
  MessageBox.Show("Hey, Visual Basic.NET works", "Hi Folks")
End Sub

Show:

Private Sub btnShow_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles btnShow.Click
  'This will show the Close button.
  btnClose.Visible = True
End Sub

Hide:

Private Sub btnHide_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles btnHide.Click
  'This will hide the Close button.
  btnClose.Visible = False
End Sub

Okay, ready to run the thing? In the menu, click Build, and then click Build TheButton. Then press F5 to run the program. You can also directly press F5, but it's a good habit checking for errors first. If an error occurred, go through the codes once more. Click the buttons and see what happens.

Remember that French champagne. By now, it would be a good idea to take that French champagne out of the freezer. It's quite nasty when the bottle explodes. We're not done yet.

First of all, the form comes up at Windows' default location. I personally prefer a program to open in the center of the screen. To change this, close the running program first. When you're in design view again, click the form once and go to Properties. Look for the item StartPosition. Click where it says WindowsDefaultLocation. From the Dropdown box, choose CenterScreen. Press F5 to run the program again. Voilá! It's almost time for some champagne, but before that, we have to insert some tool tips, so that people like me know what to do with the program.

Go back into design view. In the Toolbox, under Windows Forms, double-click the item ToolTip. Go to Properties and change the name from ToolTip1 to btnTooltip and click on any empty space.

Now double-click the form and edit the code so that it looks like the following:

Private Sub Form1_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
  'The tool tips will appear in yellow boxes
  'when a user moves the mouse over the indicated items.
  btntooltip.SetToolTip(btnClose, _
      "This closes the program - if you can see the button - hehe!")
  btntooltip.SetToolTip(btnMsgBox, "This will display a message")
  btntooltip.SetToolTip(btnShow, _
      "This will show the button to close this program")
  btntooltip.SetToolTip(btnHide, _
      "This will hide the button to close the program")
End Sub

Now, build the program again and run it. Move your mouse over the buttons to see the tool tips. You can now change from Debug mode into Release mode and build the program a last time. (Figure 17)

(Figure 17)

Open C:\Documents and Settings\yourusername\My Files\Visual Studio Projects\TheButton\obj\Release. Click on the blue .exe file. Ta-dah! It works! You can now copy the .exe file to any place you want, including other computers with the .NET Framework installed. It will be fully functional.

Call your family, friends, or whoever, open the bottle of champagne and party. You have completed your first VB.NET program – CONGRATULATIONS! And don't forget to drink the one or the other glass of champagne for me.

Related devCity.NET articles: