ENGSCI 232 Computer Systems 2005

Lab 4b: Intro to Visual Basic Programming

We will be using Visual Basic, not Visual Basic for Applications (VBA), in this course. We will use a full-blown Visual Basic compiler that can convert your VB into a stand alone application you can run on any PC. In this lab, we explore a few of VB's basic ideas.

Steps 1, 2, 3,…Launch VB by following the menus: Start -> Programs -> Microsoft Visual Studio 6 -> Microsoft Visual Basic 6. The following window appears.

Choose Standard EXE, and click Open. This gives the following simple application ready for you to extend.

We wish to add a button to the form.

1

Select the "Command button” on the General toolbar (bottom right in the figure below)

Drag to create a command button on the form.

Changing PropertiesWith the new button selected, you can see all the values for the "properties" of the button in the righthand property window. Change the "caption" property to “Click Me”. There is a range of other properties you can change, either by hand (as we’ve just done) or using code. We'll try some of these later.

Adding Event HandlersDouble click the “Command1” button; this will allow you to add code to react to the messages (events) the button sends out. (Later on, you can use the View menu to switch back to viewing the form.)

2

Note the two menus at the top of the code editor. The left menu (“Command1”) gives the name (as shown in the properties window on the right) of the object we are currently interested in. The right menu names the event we want to react to. We are currently in the "click" event handler, and will enter our own code to react to this event. Start by typing "Command." as shown below. (The dot at the end is important.)

Notice how VB brings up a list of all the properties of the button that we may want to set. (These are typically the same properties as listed in the properties window.) Type in the first few letters of “Caption”, and then, as a shortcut, press TAB to select the Caption property.

3

Complete the code as shown.

Save your project (File -> Save Project As) into a new folder (maybe called “VBIntro”) in your directory. (Note that VB will save several files in this folder. You can open the project again later by clicking the .vbp (VB project) file.)

We run our program by pressing the Play button. Do this now.

The form comes up. Click the button to send the “Click” event, and see how your code reacts to this to change the button caption.

Close the Form to stop the program running, and return to the editor.

DebuggingVB offers good debugging options. To see these, go the "Command1.Caption = …" line, and press the F9 key to insert a "breakpoint". (You can also use the Debug -> Toggle Breakpoint menu.)

4

Start your program running again (press Play, or F5 as a shortcut), and then click the form's "Click Me" button. VB now starts executing your code, and pauses at the line with the breakpoint. (To enter this debug mode any time your program is running, you can the press the pause button . Note that while your program is waiting for you to do something, it is actually running, and so you need to press the pause button if you want to enter debug mode.)

With the program paused, you can hold the mouse over a variable to see its value. You can also use the Immediate window (View->Immediate Window) to type in code that you want to run immediately, such as "Print Command1.BackColor"; try it.

The Debug -> Step Into (F8 as a shortcut), Step Over (shift-F8), and Step Out commands let you single step through the code (either going into any new subroutines line by line, stepping over them all in one go, or running until we step out of the current subroutine). Try one "Step Into" command, and you'll see the arrow move to the next line. You can now see the program paused at the next line.

Switch back to the form (using Alt-Tab), and confirm that the button's caption has changed. Now switch back to the VB editor again using another Alt-Tab.

VB lets you alter what line will run next. Try clicking back anywhere on the "Command1.Caption=…" line, and choose the Debug -> Set Next Statement menu command. You'll see the arrow move back to this line.

5

VB is also clever in that we can edit the program while it is paused. To see this, delete the exclamation mark from the "Feels good!" text. Press F8 to "Step into" this line, and note that the caption on the button has now changed. (Use Alt-tab to switch to the form, and then come back to VB.)

Finally, remove the breakpoint by going to the "Command1.Caption = …" line and pressing F9 (or choosing Debug -> Toggle Breakpoint). Press the stop button to stop the program running; this takes us back to editting mode. We could also use the Play button to continue running.

Note: It's very easy to forget that you are paused in debug mode. Always try pressing Stop if VB doesn't appear to be letting you do something such as add a new button to the form; it's probably because the program is paused in debug mode.

More EventsWe will next add code to handle the MouseMove event that a button sends whenever we move the mouse while over the button.

Choose the MouseMove menu item from the list of events. VB creates a new subroutine to handle this event.

Type in the following code.

6

Run your code as before, and see how this works.

Add an event handler for the Form object (choose Form from the left menu) to handle the MouseMove event (choose MouseMove from the right menu). Add the code shown below. (Note that after choosing Form, VB puts in a Form_Load event handler; you can delete this empty subroutine if you wish after adding the MouseMove event that you want from the righthand menu.)

Run your code to see how this works.

Hints: To get help on some word, type it in,

select it, and then press F1. The variables x and y in the

Form_MouseMove subroutine are the co-ordinates of the mouse position. VB uses co-ordinates that increase going right and down, as shown (right).

The position and size of the button are defined as shown below:

7

Assignment Task:Modify this program so that the actual button moves away from the mouse as the mouse gets close to it. However, the button should not move off the form. Be sure to make use of properties of the button and form as required. The mouse should run away in the way a cow might in a fenced field. In the example shown (right), the mouse is to the left and beneath the button, so the button moves diagonally up and then, because it hits an edge, along to the right. It keeps moving until it is far enough away from the mouse, at which point it stops.

Notes: The form’s ScaleMode property should be changed from the default of “twips” to

“pixels”. The result of this is that changing an x (or y) co-ordinate of an object by 1 moves the object by 1 pixel (1 dot) on the screen.

The size of the form can be determined using Form1.ScaleWidth and Form1.ScaleHeight, as indicated in the figure below. (Form1.Width and Form1.Height are subtly different, and not so useful.)

Whenever the code in your Form.MoveMouse moves the “Click Me” button, VB will fire off another MouseMove event, which will result in your code running again. (This happens even if you didn’t move the mouse.) The effect of this will be to make the button ‘run away’ very fast, possibly even too fast to see. This is OK.

8

Algorithm:Your code for handling the Form_MouseMove event should work something like the following. (You can be more efficient in your code, but will lose marks if you make changes that are less efficient.)

If the mouse is close to the button (within about 100 pixels of the centre vertically and within about 200 pixels of the centre horizontally) then

Compute the change delX (either +1, -1, or 0) you want in the button’s x coordinate. Note: The sgn(p) function gives +1 if p>0, -1 if p<0, and 0 otherwise; this might be useful.Compute the change delY you want in the button’s y coordinate Compute and store in a new variable NewLeft the button’s new x coordinate Compute and store in a new variable NewTop the button’s new y coordinate If the NewLeft coordinate puts the button outside the left or right edge of the window, modify NewLeft so that the button just touches the left/right edge.If the NewTop coordinate puts the button outside the top or bottom edge of the window, modify NewTop so that the button just touches the top/bottom edge.Use the Command1.Move NewLeft, NewTop command to move the Command1 button to the new x,y co-ordinates.

End if

Hand-in and MarkingAt the start of the first lab after the mid-semester break you should hand in a listing of your code. Full marks will be awarded for well documented, efficient, clean code. You should also have your code running at the start of this lab for us to check. This assignment should be completed individually.

9