VB Tutorial 2

VB Tutorial 2 - VB Interface

Figure 1
VB Project Explorer Window

Visual Basic Tutorial 2

In the first tutorial we took a quick tour of the Visual basic canvas and the visual programming tools such as the toolbox, form window, properties sheet and Project Explorer. In this installment we spend a little more time getting to know the programming side of the Visual Basic environ especially VB's very powerful text editor and some of the ways you can customize working with the VB IDE.

Return to VB Project Explorer

In our previous lesson we emphasized the importance of VB's Project Explorer as key navigation aid among all the forms and code that make up a Visual Basic program. If the Project Explorer window is not showing just click the View | Project Explorer menu items (or Ctrl+R keyboard shortcut) to pop it up like in Figure 1. As you might expect the Project Explorer works very much like Windows Explorer. There are two folders - one for all the forms used in a VB program project and another for all the modules. Modules are Visual Basic program code that can be

called and used anywhere in the VB program. By clicking on the forms folder it expands out to show all the forms used in a VB program project. In effect the project file (.vbp file extension) keeps track of all the resources used in a VB program. Project Explorer is a window into that project file.

To add new forms to a project click on the Project | Add Form menu item. To delete a form no longer needed in a project click on the form in Project Explorer the select the Project | Remove menu items. However, the most common use of the Project Explorer is to quickly move among forms and modules.

As shown in Figure 1, clicking on the code icon brings up the text editor loaded with any code associated with the highlighted form or module. Right next to the code icon, is the form icon - clicking on this icon brings up the form ready for visual programming. Allternately, one can double or rightmouse click on the form or module also to quickly navigate to where you want to go. Right now we want to go to the text editor to modify some Visual Basic code. So we click the code icon.

The Visual Basic Text Editor

Next to VB's Debugger, the second most powerful (and clever) feature of VB is its text editor. The VB development team has lavished great effort on making editing in VB as easy yet efficient as possible. Figure 2 highlights some of the key features of the text editor.

The first thing you notice is that the editor uses color coding: comments are in green; VB keywords are in blue; and most other code is in black.But as we shall see below, users can customize these settings.

Even more important is the fact that VB has a very smart text editor. Everytime a line of code is entered, VB checks its syntax and immediately flags any errors. Some users consider this a nuisance but

Figure 2
Visual Basic's Powerful Text Editor

after using other IDEs for C++ or Java where this is not done - one quickly begins to appreciate the benefits. Besides, VB's Intellisense feature gives users lots of help in getting the syntax right in the first place. Figure 2 shows Intellisense in action - as I started to type the text2 property "text", the Intellisense combo popped up with all the possible properties and had honed in on the right suggestion by the time I had type "te". All I had to do was to hit the Tab key and Intellisense filled in the rest of the command. Not only that but on completion of the line it checks the syntax and, if correct, immediately fancy formats the line. Fancy formatting includes adding blank spaces around operators (like "+", "-", "*", etc), auto-indenting code blocks and capitalizing variable names that have been entered in all lowercase. The latter is reason for including at least one capital letter in all VB names. Then if you have misspelled the name its capital letter does not appear when the line is immediately fancy formatted - so you have a quick way to catch misspellings.

Figure 3
Events List - Text editor Combo

But there is a lot more conveniences built into VB's text editor. In Figure 2 we point to the two combo box coding aids. The first combo box lists all the controls used in a form. The second combo lists all the events that a specific control (a text field in the example)can respond to as shown in Figure 3.

Again this aids coding because only the correct events are shown in the list. If you select an event, VB automatically writes the subroutine header and closer.

Private Sub Text2_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

End Sub
If the subroutine has already been defined, the text editor brings that subroutine into the window for immediate editing. Notice that several subroutines are shown in the text editor at once. By clicking on the View of code toggle switch shown in Figure 2

you can switch from seeing just the one subroutine you are editing or seeing all the subroutines contained in that .frm or .bas file. This raises the final point on text editing. Just as a VB program can have several forms, it also can have dozens of Basic subroutines spread over many files. The .frm and .frx files contain both Basic subroutines and the controls and layout associated with each form. Now .bas files contain only Basic code but this code can be accessed/called from any subroutine.

Figure 4
The VB Options Settings

Figure 5
Project Setting

Configuring Visual Basic

Just as in Word or Word Perfect, Visual Basic allows users to customize how VB works and their own working environ. Figure 4 shows the Options dialog in VB. It allows you to make a number of changes including Editor settings, how docking will work etc. In Figure 4, we changed some of the color coding and font defaults used in the text editor. You find the options dialog under Tools | Options menu items.

Under the Projects | Properties there is a second dialog for configuring the how this specific project will work. Many of these setting will be covered when we get to the more advanced features of Visual Basic like debugging and compiling your program into a runtime .EXE file. In Figure 5 we show how to switch which form will will be the first form loaded by VB when the program starts up. This can be useful when attaching a password dialog or entry "splash" screen to your program as we shall in our exercise.

Password Program

In this exercise we shall write aprogram that checks for the password "Howdy from VB6" and then prints ashort messsage. First we design the Form. Start up VB and enter File | New and choose the Standard EXE - we will discuss other templates in future tutorials.

Now click on the form and in the Properties sheet change the form's Caption to "Enter Password". Drag and draw a label from the toolbox onto the top

left of the form. Change the label's Caption property to "Enter Password " also. Next drag and draw a textbox just below the the label and extend it to the right edge of the form. Blank out the textbox's Text property and change its Password Char property to "*". This will cause the password when filled in to be displayed in asterisks but the string is hidden but available to the VB program. Finally add a command button to the form. Change its caption to "Okay". Select Run | Start from VB's

Figure 6 Password Dialog

menus and the form shown in Figure 6 should be displayed. Now that the form is ready let's do the programming.

First, double click on the Okay button. This will bring up VB's Text Editor with the cursor right in the middle of the Private Sub Command1_Click() subroutine. Type the following code:

' Any line beginning with an apostrophe is a comment , like this one
' For testing tell the user their password
MsgBox "Your password is " & Text1.Text
End

Note how easy it is to put in comments. Any line beginning with an apostrophe becomes a comment line. For the purpose of this exercise we are going to echo back to the user their password. This is for demo purposes - the MsgBox command would normally be replaced by a call on the procedure or program that this password is designed to protect - becuase if we get here the validation has worked.

Now let's enter the code required to validate the password. Choose the Text1 control from the text editor's Control combo box at the top left of the editor window. Choose the Validate event from the right combo box and again VB creates a skeleton routine - Private Sub Text1_Validate(Cancel As Boolean). Type in the following code for the validate procedure:

'Password checking routine
'Default is that Cancel is not necessary
Cancel = False
'Here we test for correct password
If Text1.Text <> "Howdy from VB6" Then
' MsgBox is so important for quickly giving notices to users
'learn this command and all its variants well
MsgBox "Invalid Password - please re-enter", vbOKOnly
Cancel = True
'here we do a little 2 step to make sure
'Text 1 will always get focus if password is wrong
'this is a workaround a VB bug
okay.SetFocus
Text1.SetFocus
End If

Here is how the Validate procedure works. It is invoked or called as soon as the user exits from the password textbox - no matter how that is done. This ensures that no one can bypass the password check. Note the Boolean Cancel is set to false. Thus the default is that we are not going to hold the user up asking for a correct password. Then we test for the password in the If-statement. Note that the password must be spelled exactly with spaces and caps as shown - Howdy from VB6. If the password is entered properly, the MsgBox echoes the password and the rogram exits - otherwise users are prompted for the password again. Congratulations - that complete your first VB program.

In upcoming tutorials we will examine VB syntax and do some more simple programs using more of the VB controls. In the meantime, a good exercise would be to add thecapability of checking the password against a list of valid passwords contained on file. Till next time.

Resources:

Beginning VB6/Wrox pages 113-150 or VB6 Black Book pages 1-33 cover many of the above topics in more detail.