CPSC 481 Assignment 3:
VB Intro Stuff part 1

Note: Lots more example programs (including these) on the 481 website at:

• http://www.cpsc.ucalgary.ca/~saul/hci_topics/vb_examples/index.html

Contents:

• Introduction to VB
• Open and run the first example program
• Build the first example from scratch (takes 10 minutes!!)
• Open and run the second example program
• Build the second example from scratch (takes another 10 minutes!!)
• MSDN Visual Basic Documentation
• MSDN Sample Programs - The Location!!

Introduction to VB

Visual Basic is an event-driven language. So, when you talk about events, we're talking about things that happen in the program which cause little events to occur (similar idea to IRQ stuff you learned hopefully in 455). An example of this could be clicking a button causing a button_click event to be generated. You write code to react to these events and guide a user through your program.

You design your form completely visually, using a set of widget tools and drawing on the form directly just like you would in a paint program or something like this. This stuff is so easy, you'll love it ... or maybe not ... but it's quick and relatively pain free.

Okay, these examples were developed by James Tam, and I've just reproduced them here. His website has all his full details on what exactly these things entail, but I'll get into them a little bit myself. If it seems that there's something missing here, be sure to check out over there for more info.

Okay, the first thing you need to do with visual basic is basically just start it up. No problem. Go:

Start --- Programs --- Microsoft Visual Basic --- You get the picture .... :)

When you load it up for the first time, Microsoft Office might churn away for a couple of minutes. This is an issue with Office 2000 and you don't need to worry about it too too much. It will only happen the once. In any case, when VB is finally loaded up, and you pick Standard Exe from the new project dialog, here's what you'll be confronted with:

Click image for a complete description...

This is your main programming environment. You do all your form design and coding from this window. Now, probably the best way to get right into this thing is to sit down and just hack out a quick program. Like I say, these are ones that James made, and they're perfect for our purposes so kudos to him. :)

Okay, great, now just exit VB without saving whatever you've done.

Open and Run the First Example Program

I figure the best way to get introduced to VB is to open a program and run it and play around with it, so that's going to be the order on this page. Open it, run it, then we'll design it from scratch. The first program is James' first example. Here's a link to download a zip file containing the example:

Click here to download

Okay, the steps to follow:

1. Just save the file to your desktop.
2. Double click the file to open it with winzip.

3. This is what a VB Project File Icon looks like. FYI. :)

   Click "Extract" and extract the file to your desktop (note: you need to extract both files).
4. On your desktop, you should now have a folder called "example01"
5. Go in there and double-click "firstproject.vbp" (.vbp stands for "Visual Basic Project")
6. Now, you should get VB loaded up with that project, no problem!

With that going, you can push the play button (center of the top tool bar) and see what it looks like. There are a couple of things you can do with it:

• If you push the button, you'll see the text there change
• if you move your mouse around, it'll track your mouse movements by displaying the coordinates
• you can change the background colour by clicking the checkbox

here's the first sample program window

Great, you've seen that VB works. Now what? Well, at this point there are a couple of things you can do. One is poking around with this program, looking at James' code, or you can close this up and design it from scratch (should take you like 5 - 10 minutes!!). I suggest building it. :)

Build the First Example from Scratch

Okay, this is going to be hella-easy. :) I'll insert little comments in this step by step process where you can run the program and try it out as you go along. Okay, on with the fun!!

1. Start Visual Basic and pick "Standard Exe" from the list of new projects. You'll land in the screen we saw above.
2. Go to the properties page (on the right) and find the caption property for the main form (Form1). Change that to My First Example Program or something lame like that. :)
3. Add a Command Button to the form by clicking the tool and then drawing on the form.
4. Now, click once on the button you just drew to select it and go to the properties page on the right-hand side of the screen. Find the (name) property and change it to cmdPressMe.
5. Next, in the same properties page, find the caption property and change its value to Press Me.
6. Now, double click the button. This will bring up the code-view window. Type in the following code into the cmdPressMe_Click() subroutine shell that's generated for you:

 'Note: comments have an apostrophe (') at the beginning of the line
 Private Sub cmdPressMe_Click()
	 cmdPressMe.Caption = "You pressed me!" 
 End Sub 

7. At this point, you can run the program and press the button to see what happens.
8. Okay, next on the list is to add two labels. Labels are added with the tool.
9. By selecting each label in turn, change their (name) properties to lblCoordsA and lblCoordsB, respectively.
10. Now, change the caption property of lblCoordsA to read Current mouse coordinates: and just leave the other one the way it is.
11. At this point, just double click somewhere on the form, but not on any of the controls or labels you have added. This should yield you the shell for the Form_Load() subroutine. Now for a little lesson in events. :) With Form as your active object, select the MouseMove event from the event list as pictured below.

12. When you click it, you should get the shell for the Form_MouseMove( ... ) subroutine. Here's the code you want for that routine:

 Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
	 lblCoordsB.Caption = "x = " & X & " y = " & Y 
 End Sub 

13. Now when you run the program, you should get an active record of where your mouse is when you move it around on the form.
14. Okay, good to go. One last thing to add to this program. Using the tool, draw a checkbox on the form.
15. Change the (name) property of the checkbox to chkBGColour.
16. Then, change the caption property of the checkbox to read Change Background Colour.
17. Next, double click the checkbox to give yourself a shell for the chkBGColour_Click() event handler. The code for that routine looks like this:

 Private Sub chkBGColour_Click()
 ' If CheckBox checked then set background of form to red. 
 If (chkBGColour.Value = Checked) Then 
	 Form1.BackColor = RGB(255, 0, 0) 
 ' If CheckBox is unchecked then set background of form to grey. 
 ElseIf (chkBGColour.Value = Unchecked) Then 
	 Form1.BackColor = RGB(210, 210, 210) 
 End If
 End Sub

And that should pretty much do it for the program. If you run it now, it should do all the same stuff that the example you downloaded did.

Open and Run the Second Example Program

The second example program is a little more complicated, but not that much. It just shows you a bit about list boxes and throwing stuff back and forth. Cool, without further adue, check out the download link:

Click here to download

Okay, the steps to follow:

1. Just save the file to your desktop.
2. Double click the file to open it with winzip.

3. The project file for the second example program.

   Click "Extract" and extract the file to your desktop (note: you need to extract both files).
4. On your desktop, you should now have a folder called "example02"
5. Go in there and double-click "Example2.vbp" (.vbp stands for "Visual Basic Project")
6. Now, you should get VB loaded up with that project, no problem!

With that going, you can push the play button (center of the top tool bar) and see what it looks like. There are a couple of things you can do with it:

• You can add whatever text is typed into the text box as an entry in the listbox.
• You can remove entries from the listbox by pressing the "remove" button.

second example main window

Hip fantastic, eh? :) Again, many thanks go out to James for making this example. Now, let's just build this thing from scratch to make sure you know what you're doing.

Okay, this is going to be hella-easy. :) Okay, on with the fun!!

1. Start Visual Basic and pick "Standard Exe" from the list of new projects. You'll land in the screen we saw above.
2. You know how to change the caption property of the main form, but you don't need to ...
3. Okay, I'm going to give this to you really quickly.
   1. Add a button.
      • change its caption to &Add - note: the '&' will make the letter after it a keyboard shortcut
      • change its (name) to cmdAdd
   2. Add another button.
      • change this second button's caption to &Delete
      • change that button's (name) to cmdDelete
   3. Add a label.
   • change the label's caption to Text to add or which ever saucy comment you like. :)
   4. Add a textbox using the tool (just draw it on the form like the other controls!)
   • change that textbox's (name) to txtAddText
   5. Add a listbox using the tool (again, just draw it on the form!)
      • change that listbox's (name) to lstTextList
4. And that should be it for the Form Design portion of this program. Now we just have to fill in the code for each of these controls.
5. Double-click on the form ... but be careful to not double-click on any of your controls! This should get you the Form_Load() routine. Note: this gets called automatically every time the form loads up from scratch... Here's the only code for that:

 'if there's nothing in the listbox, disable the delete button...
 Private Sub Form_Load() 
	 If (lstTextList.ListCount = 0) Then
		 cmdDelete.Enabled = False
	 End If
 End Sub

6. Now, go back to the form design window and double-click the Add button. The code for cmdAdd_click() is as follows:

 Private Sub cmdAdd_Click()
    ' Add the string that is currently in the textBox to the List Box.
    lstTextList.AddItem txtAddText.Text
    
    ' delete button disabled?  enable it. :)
    If (cmdDelete.Enabled = False) Then
        cmdDelete.Enabled = True
    End If
 End Sub

7. Once that's done, get the form design and double-click the Delete button. cmdDelete_Click() looks like this:

 ' This method contains the code for the click event for the delete button.
 Private Sub cmdDelete_Click()
     ' if the listbox isn't empty, remove an item ... disable delete button if necessary...
     If (Not (lstTextList.ListCount = 0)) Then
         lstTextList.RemoveItem (lstTextList.ListCount - 1)
         If (lstTextList.ListCount = 0) Then
             cmdDelete.Enabled = False
         End If
     End If
 End Sub

8. And we are done! If you run the program now, you should be able to add and remove stuff from the listbox depending on what you type in the textbox. Fun, eh? :)

MSDN Visual Basic Documentation

The MSDN Library is available from a few different locations and contains a ton of information about Visual Basic and other Microsoft Visual Studio stuff. (I'm not pluggin' it, I'm just saying it's useful if you're using the products. :) ) Anyways, here's some ways to get at it:

• In the Start menu, it's under Microsoft Developer Network
• In VB, just go to the help menu and hit Index
• In a web browser, you can go to the MSDN online site (that has lots of technical articles and other stuff). Their website is http://msdn.microsoft.com/. This is the only resource that you can get at from anywhere... ie, you can load the library browser from home unless you have the disks. :)

Yeah. :) That's where you get it. If you load the program from VB or the start menu, this is what your browser looks like:

the MSDN library window

Terrific, eh? :) Okay. You probably want to look up only stuff to do with Visual Basic, especially if you're using the search engine. You can automatically filter down what you're looking at by changing the active subset that MSDN's looking at to just look at Visual Basic. It's as easy as picking the Visual Basic subset from the dropdown list (see the picture, below)!! (damn that sounded cheesey, I should be in marketing...) In any case, now stuff that's specific to VB is black text in the index list and unrelated stuff is sorta greyed out.

choosing the active subset

That's about all I have to say about the MSDN library. It's a very complete reference, but may take a little bit of getting used to. For a fun challenge, try finding the VB function MsgBox and throwing one up in an example programs ... just by clicking a button or something.

MSDN Sample Programs: The Location!!

The sample programs included in MSDN are also included online, but aren't attached to the Library Browser. Unfortunately they are not installed on each and every computer, but they exist on the server and there are a couple of ways you can go about getting access to them.

Mounting the Directory as a Drive

1. Easy peasy. :) If you're on a 2000 box in the lab downstairs, double-click the My Computer on the desktop.
2. Go to the Tools menu, and select Map Network Drive
3. In the path textbox, type in the path \\pc\user\pub\msdn\samples\vb98 and then press Finish.

the map network drive dialog

4. When you're done with that, you should have a drive listed in your My Computer that will get you directly to the sample programs, where you can copy stuff out of to play with. There's tons of stuff in there!

Make a Desktop Shortcut to the Samples

1. Right-click on your desktop and select new - shortcut
2. In the location textbox of the dialog that pops up, type in the path \\pc\user\pub\msdn\samples\vb98 and then hit next.
3. When you hit finish, that shortcut on your desktop should fly you right to the Samples folder.

create a new shortcut dialog

back to the top!!