VB6/VBA 16, Wizard 2
 
What puts the polish on many GUI-based programs is their use of wizards to help users through a rough spot in running the program. In this second of two tutorials on VBA wizards we show all the details on how to make a professional wizard using all the Microsoft GUI tricks. At the same time, readers will get a solid review of methods which help in the development of any VBA userform or VB windowing applications.Finally a copy of the code is available on our website.


In our last tutorial we developed the first half of our Setup Wizard - the Command buttons and Multipage tab controls. In this tutorial we develop a navigation aid

 

Figure 1
The Final Look of the Setup Wizard

which Microsoft calls a Subway Map which shows each step of the wizard - in our case, the Intro, Info, Logon, and Go steps or phases of the Setup Wizard. At the sametime, we hide the tabs of the Multipage control ( and this is the key trick) because the pages are activated by the Command Buttons ( Next and Previous) or the Subway Map.
Figure 2 shows where we left off in our last tutorial with the Command Buttons and Multipage Tabs working plus the blank black background image for the Subway Map.Next we need to add 4 small Image controls from the toolbox to the subway map and rename the Image controls Imintro, Iminfo, Imlogo, and Imgo respectively. Make the BackColor property of the Imintro green and the BackColor property of the Imgo image read. This follows the Microsoft convention for Subway Maps - the starting "subway station" or step is green, the final destination step is red.

 

Figure 2 - Where we left off in the last tutorial

next using the Format menuitems to line-up the subway stations as shown in Figure 1 (see our previous tutorial on the details of how to do this). Next add a single narrow image connecting all the Image 'subway stations. You will need to use the Format | Order | Send to Back menu option to get the right look. Finally, add four labels and make their (Name)s and Captions respectively equal to:

Lintro - Intro
Linfo - Infor
Llogo - Logon
Lgo - Go

Normally I am very casual about following naming conventions for controls - whatever is memorable and works for you. But here we need consistency in the naming of the Image and Label controls because we are going to use another VBA coding trick to help navigate the Subway Map. So please follow our naming conventions here.

In fact the next step is to make click on the Subway Map images and labels (8 times in all) and add the following one line of code each time:

for Imintro_Click() and Lintro_Click() add => Tabs.Value = 0
for Iminfo_Click() and Linfo_Click() add => Tabs.Value = 1
for Imlogo_Click() and Llogo_Click() add => Tabs.Value = 2
for Imintro_Click() and Lintro_Click() add => Tabs.Value = 3

What these eight subroutines do is activate the correct tab on the Multipage control depending on what "subway stop" has been collected. but just as we did in the case of the Command Buttons we have to make sure the converse is true - if the Info tab of the Multipage is activated (perhaps using the Next button); then the Subway map is updated as well. we

Public Sub setSubwayMap()
REM First restore the labels to default color and size
Controls("L" & curStep).ForeColor = vbWhite
Controls("L" & curStep).Font.Size = 11

REM - depending on Tab value set curStep- current step
Select Case Tabs.Value
Case 0
curStep = "intro"
Case 1
curStep = "info"
Case 2
curStep = "logon"
Case 3
curStep = "go"
End Select

REM - Now with new value of curStep highlight active Subway Stop
REM - by making its label bigger and yellow in color
Controls("L" & curStep).ForeColor = vbYellow
Controls("L" & curStep).Font.Size = 12
End Sub

Note to make this all work we must add the following line to the top of our code - Dim curStep as String and then the following line of code - call setSubwayMap - to the top of the Sub Tabs_Change() procedure. Finally we shall coverup the Multipage Tabs and use the complete area of the Tab for our various Wizard steps/pages. To do so highlight the Mutipage Tabs and set its Style property to 2-fmTabStyleNone. Then set the Picture property of the Intro Page to Start.bmp. which is just a white rectangle created in Microsoft Paint equal in size to the MultiPage control (just use the Height and Width properties of the Multipage when creating Start.bmp in Paint using Image | Attribute menuitem.). One final setting will ensure that the picture fits exactly over the surface of the Intro page - set the PictureSizeMode property to 1-fmPictureSizeModeStretch. And voila - our Wizard is half-baked!

Figure 3 shows the final result. In our last tutorial on Wizards we get to do the fun part - make the Setup Wizard work. In the meantime keep in mind our VBA Wizard contest. Readers are encouraged to create their own VBA wizards using this half-baked design as a template.Use any application program that supports VBA. If we have enough entries, the top three wizards will be published in this column and receive $100 each plus a small no-prize. PS:April 1, 2007 Just as a note, nobody entered the contest.

Figure 3 - Subway Map fully enabled

 
Top of Page  Tutorials Home