VB6/VBA Tutorial 15 - Wizards
 
One of the advantages of using VBA is that it gives you a virtual copy of the Visual Basic development environ for free in every edition of Microsoft Word, Excel, Powerpoint and nearly 200 other application programs running in Windows 95, Windows 98, Windows NT and Windows 2000. However, Visual Basic 6 and VBA-Visual Basic for Applications are not exactly the same. So in our next exercise we will create a VBA wizard (see Figure 1) which uses exactly the same techniques and code written by Microsoft developers. In the process we shall point out where VB and VBA do differ while at the same time reviewing some of the GUI techniques and methods learned over the past few lessons.

Figure 1 - The Setup Wizard

This exercise will span at least two tutorials so in order to encourage users to tryout the code there is a small contest as well. Readers are encouraged to create their own VBA wizards using any application program that supports VBA. Send those entries to us by email below or to me care of The Computer Paper. The top three wizards will be published in this column and receive $100 each plus a small no-prize.


The Setup Wizard

The Setup Wizard as shown in Figure 1 is from a real application and it uses coding tricks adopted from Office 2000 - Visual Basic for Applications Fundamentals by David Boctor, Microsoft Press. However, we have simplified some of the graphics and coding methods while hopefully retaining the richness of the design.

A Wizard is designed to instruct while at the same time getting users over a rough spot in an application. So the Wizard itself better be easy navigate and use otherwise it will defeat its own purpose. So as readers will shortly see, wizards are designed with two or even three sets of navigation controls and all sorts of aids and cues to reassure the user that what they are doing is the right thing (or conversely preventing users from making mistakes).

So our Setup Wizard has three sets of navigation controls: a tab or Multipage control, command buttons, and what is called by Microsoft GUI engineers a subway map. The subway way map is actually made up of small image controls and labels that react to mouse clicks (HTML veterans will be familiar with the equivalent image maps and links). The Setup Wizard has been designed to simplify the process of setting up a commercial application that requires the user to obtain a password by calling or e-mailing the supplier with their registration information. As shown on the subway map in Figure 1, setup and registration involves a four step process: 1)Intro-where the user is told what the Wizard will do for them; 2)Info-which gathers and validates the registration information; 3)Logon-which gets the registration information over the Internet or instructs the user how to call a toll free number to to do the same by phone assuming an Internet connection is not available; and 4)GO-which verifies the passwords received and after doing the final program registration, launches the user into their newly purchased program.

First Phase


The first phase will setup and test the tab/multi-page control and the command buttons. Launch your VBA program (Excel 2000 is our choice but much of the code was actually developed in Visio's VBA edition). Select Tools | Macro | Visual Basic Editor. Then in the VBA Editor select Insert | Userform and a small blank form appears in VBA. In the property editor, rename the caption from "UserForm" to "Setup Wizard". Add four Command Buttons to your form along the bottom. (Hint: in VBA if you double click the icon for Command Buttons in VBA - CTRL+click does the equivalent in VB - you will be able to draw the Command Buttons in one operation. Click on the pointer to deactivate the Command Button tool).

Now for some quick tricks to get the Command Buttons all the same size and lined up nicely along the bottom of the form. First, lasso the Buttons with the mouse so all four are highlighted. Then choose the menu items Format | Make Same Size | Both - VBA does that. Then align the Buttons along the same tops line with Format | Align | Tops. Finally, even the spacing between the Buttons with Format | Horizontal Spacing | Make Equal. Of course you can do all these step manually, one button at a time; but trust me the menus do make it faster.

Next change the Captions and Name of the Command Buttons as follows using the Properties Window:
CommandButton1 => Cancel and Name => cbCancel
CommandButton2 => Previous and Name => cbPrevious
CommandButton3 => Next and name => cbNext
CommandButton4 => Finish and name => cbFinish
Now double click on the Cancel button. VBA should automatically switch you into text editing mode creating an empty subroutine cbCancel-Click(). Add one line of code to that subroutine - Unload Me. Return to VBA's visual design mode by clicking on the View Object icon in the Project window. Users are going to find that switching between visual design and text editing is as common an operation in VBA as in VB. So it pay to leave the Project Window with the View Code and View Object icons constantly open so switching contexts is just a mouse click away.So switch back to visual design and double click the Finish button. Again enter the one line of code - Unload Me.

Now we are ready to add the most important control - the Tab or Multipage control.from toolbox click on the Multipage control, drag and drop it in the upper 2/3rds of the the form. Right click on any tab of the Multipage and choose New Page from the popup menu. Right click again and ass a fourth New Page. Change the Page as follows:

Page1 to Intro
Page2 to Info
Page3 to Logon
Page4 to Go
Then rename the Multipage1 to Tabs. Double click the Next button and add the a line of code- Tabs.Value=Tabs.Value+1
add a similar line of code to the Previous button: Tabs.Value = Tabs.Value - 1 . Finally, add to the Tabs_Change() subroutine the following Select Case which manages all the buttons whenever one of the Tabs is selected or Tabs.Value changes and the code is as follows:

Select Case Tabs.Value
Case 0 'Intro chosen
cbNext.Enabled = True

cbPrevious.Enabled = False
cbFinish.Enabled = False
Case maxTabs - 1 'Finish chosen
cbNext1.Enabled = True
cbPrevious.Enabled = False
cbFinish.Enabled = False
Case Else ' Info or Logon chosen - so make sure Next and
cbNext1.Enabled = True
cbPrevious.Enabled = False
cbFinish.Enabled = False
End Select


Finally we add the Image control to the left 1/3rd of the form as shown in Figure 2. Change Image1 BackColor to Black. So now we have two ways to navigate in the Setup Wizard; either using the Command Buttons - Cancel, Previous, Next, Finish; or the Tabs - Info, Intro, Logon, Go.

First, we shall test the code and make sure that the Command Buttons change when various Tabs are selected or conversely the Tabs change when the various Command Buttons are selected. In the next tutorial we shall add a third navigation tool the Subway Map. When the Subway Map is set in place we shall in effect "cover-up" the Tabs MultiPage so that the tabs are no longer available but the control still works with the Subway Map and Command Buttons. So until the next tutorial.

 
Top of Page  Tutorials Home