Visual Basic Programming: Visual Basic Code—Part 5 Arrays

Lesson
In previous lessons you learned that variables are storage places for data and that
there are many types of variables.  In this lesson we will look at a more powerful form
of the variable call the array.  Consider the following:

Name = "Jim"
Name = "Bob"
Name = "Ann"
Text1 = Name

If this code were placed in the event procedure of a command button, what would show
up in the text box when the button was clicked? If you said Jim, Bob, and then Ann you
would be wrong. Remember that the contents of a simple variable can change.  As the
computer moves down through the code it first assigns the string Jim to the variable,
then, in the next line, it replaces Jim with Bob, and finally, Bob with Ann.  Ann is the
name displayed in the text box.

But what if we want to have the computer store all three names?  Well, I guess you
could use three simple variables such as Name1, Name2, and Name3.  But what if there
were 100 names to store?  The answer is to use something called the array variable. 
The simplest array variable takes the general form:

ArrayVariableName(Index)

The index is a number starting at 0 and can be as large as needed.

Using the three names we can assign them to the array using the following code
(assume we have called the array variable Name as well):

Name(0) = "Jim"
Name(1) = "Bob"
Name(2) = "Ann"

Now if we want to display the name in a text box, we will only have to know the index
number which represents where the name is stored in the array.  For example if we
want to display the name Bob, the code would look like:

Text1 = Name(1)

The array variable must be declared in the General...Declarations section of the code
window.  You can do that in a number of ways.  Each of the following result in space
being reserved in the computer's memory to store data.

Dim Name(10)
or
Dim Name (1 to 10)
There is a difference in the two methods however.  In the first, we don't specify a lower
index limit and by default this is set to zero (0). So in the first line Dim Name(10) there
are really eleven places to store data 0 - 10.  In the second, since the lower index of 1
is specified, there are 10 places, 1 - 10.

An array with a single index is called a 1 dimensional array.  Here's an example.

Suppose you want to store some information on a car.  Let's say there are 6 properties;
Model, Make, Type, Engine, Color, Seat Type; and you want to store them in a
particular order.  An array variable can be used.  Consider the following:

AutoSpecs(0) = "Crossfire"
AutoSpecs(1) = "Chrysler"
AutoSpecs(2) = "Coupe"
AutoSpecs(3) = "3.2 litre"
AutoSpecs(4) = "Slate Grey"
AutoSpecs(5) = "Individual"

If we needed to print this information we could use a definite loop, as shown next

For Counter = 0 to 5
       Printer.print = Autospecs(Counter)
Next Counter

We are using the variable Counter as the Index.  The Definite Loop will change the
counter from 0 to 5 in steps of 1.  The Printer.printer line will send the data to your
default printer. (Note. this happens when you end the program.  To get it to print
immediately, include the code Printer.EndDoc after the Next Counter line.)

But what if we had more than one car and we wanted to build a program that would
print out the specifications on whatever car the customer chose.  Well we could use a
separate array variable for each car but if you had a lot of cars that would mean a lot of
variables.  The solution would be to use an array variable with 2 dimensions.  Consider
the following:
 

1 2 3 4 5

1 Crossfire PT Cruiser Hummer Ion 9-5

2 Chrysler Chrysler GMC Saturn Saab

3 Coupe Convert. SUV Sedan Wagon

4 3.2 litre 2.4 litre 6.0 litre 1.6 litre 2.4 litre

5 Grey Blue Red Yellow White

Split
6 Individual Individual Individual Bench
Bench
This is exactly like the first example only now there are 5 choices.  In table form we can
identify a particular entry by stating its coordinates, that is which row and which
column.  For example, the color Red is in Row 5 and Column 3.  The 1.6 litre engine is
in Row 4, Column 4.

It's clear that now you need 2 Index numbers to identify a particular piece of
information.  An array variable that can store rows and columns is called a 2
dimensional array and takes the general form:

ArrayVariableName(RowIndex, ColumnIndex)

Let's assume that we have declared the array using the longer version (to get rid of the
0 index)

Dim AutoSpecs(1 to 6, 1 to 5)

Which means we have 6 rows and 5 columns

To enter the data into the array you will need to use something like the following:

AutoSpecs(1,1) = "Crossfire"
AutoSpecs(2,1) = "Chrysler"
AutoSpecs(3,1) = "Coupe"
AutoSpecs(4,1) = "3.2 litre"
AutoSpecs(5,1) = "Slate Grey"
AutoSpecs(6,1) = "Individual"

Note that the row index changes from 1 to 6 but the column index stays the same at 1. 
That's because the information on the first car in all in column 1.

What if you want to print out the specifications on the Hummer.  It's in column 3 and
the specs are in rows 1 to 6.  The following code would do the job (we are assuming
that the data has been entered into the array variable).

For Row = 1 to 6
       Printer.Print AutoSpecs(Row,3)
Next Row

Again, we allow the row index to change but keep the column constant at 3.

What if you wanted to print out all the vehicle specifications.  Would you need 5
For...Next loops.  The answer is to use Nested loops.  Nested means one inside the
other like soup bowls on the shelf.  Consider the following:

For Column = 1 to 5
       For Row = 1 to 6
              Printer.Print AutoSpecs(Row,Column)
       Next Row
Next Column
In the first iteration of the loop, Column = 1 and Row = 1 therefore Crossfire will be
printed.  When Visual Basic reaches Next Row it increases the Row index to 2 but the
Column index stays at 1.  Therefore the next thing printed is Chrysler.  All the first
column will be printed before the Column Index is increased to 2 and then the Row will
start at 1 again.  Then Column 2 will print and so on.

The Column loop is called the outer loop and the Row loop the inner loop.  The row loop
also changes the fastest and the column loop the slowest.  In the following illustration,
lines have been drawn between For and Next parts of the two loops.  Note the lines are
nested.  In the second illustration the Next Row and Next Column statements have
been switched. The lines now cross over one another, the loops are not nested and the
code will not work.

Figure Properly Nested Loops

Figure Loops Not Nested Properly

The loops can be seen in operation in the following animation:

Animation Nested Loops

In the first part of this lesson you learned that there was another kind of variable called
an array which could store multiple pieces of information. That information could then
be accessed by using an index number which identified where it was stored.

A similar array concept, called the control array, can be applied to Visual Basic controls.
To understand what a control array is and how to use it let's look at an example.

We have a rather simple Visual Basic program consisting of 5 command buttons and a
text box. When the program is run, one of the buttons is clicked and the text box
indicates which button. The text box back color also turns red to draw attention. The
interface (form) would look like the next illustration.
Figure Interface

The code for the application is shown next:

Private Sub Command1_Click()

Text1 = "Button 1"
Text1.BackColor = vbRed
End Sub

Private Sub Command2_Click()

Text1 = "Button 2"
Text1.BackColor = vbRed
End Sub

Private Sub Command3_Click()

Text1 = "Button 3"
Text1.BackColor = vbRed
End Sub

Private Sub Command4_Click()

Text1 = "Button 4"
Text1.BackColor = vbRed
End Sub

Private Sub Command5_Click()

Text1 = "Button 5"
Text1.BackColor = vbRed
End Sub

Note that each of the event procedures (which are run when the button is clicked) is
very similar, the only difference being the button number. Whenever you see very
similar code repeated a number of times you can be sure that there is some way in
Visual Basic to shorten this up. The answer here is to use a control array.

We begin by placing a single button on the form. Instead of placing 4 more, we will
right click on the first button and select copy. We will copy the control. Next we will
right click on the form and select paste. You will be presented with a message box
asking if you want to create a control array. We will answer yes and paste 3 more
controls for a total of 5. There is one odd thing about this procedure. All the controls
will have the caption Command1. Look at the next animation to see how this is done.

Animation

Now we have a problem. If the five buttons are all called Command1 how do we tell
them apart? There are two clues. If we open the code window by clicking on any of the
five buttons (it doesn't matter which because it's the same code window) we see that
the standard two lines that show the event procedure has an additional part. Look at
the next diagram.

Figure Event Code for the Button Control Array

Normally there would be nothing in the brackets after Command1_Click. Now we see
Index as Integer.  Let's look at the other clue.  If we look at the property window for
the first button (you need to select it) we see something different here as well. Look at
the next diagram.

Figure Property Window for one Control Array

Note that in the small window, the control is listed as Command1(0). If you click on the
second command button and look at the property window, it is listed as Command1(1).
The way to tell them apart is by an additional number called the index. The index
number for the first control in the array is 0, the second is 1, and so on. By using the
the index number you can shorten the code. Here's what the code looks like using the
control array.

Private Sub Command1_Click(Index As Integer)

Text1 = "Button " + Str$(Index + 1)

Text1.BackColor = vbRed

End Sub
Two lines of code replace ten. In fact if you used 100 buttons there would still be only
two lines of code! When the button is pressed, the Index variable is assigned the index
number of the button, beginning at 0. Let's look at the code more closely, in particular
the first line.

Figure Explanation of Code

We place the character string Button inside quotes. Note the space. Any characters
inside quotes display exactly as typed. We use the Str$ function (String) to convert a
number into a string. We added 1 to the Index variable because the Index starts at
zero and we captioned the first button as button 1. The two + symbols are different.
The first concatenates the two strings so they can be displayed in the text box. The
second is simple addition to increase the value of the Index by 1.

Let's practice some of this in the activity section.

Activity
The purpose of this activity is to develop capability with using Arrays

Activity1 Cut the Deck Game

In this activity we will program the computer to play a very simple game called cut the
deck! The program will generate a random number between 1 and 13 and this number
will be used to select a card from an array variable that holds the names of the 13
cards.

First, set up the visual part of the program.

 Open Visual Basic and select a Standard.EXE.

 Draw a frame on the form, and then 2 more, smaller frames on Frame1.  Add 3
textboxes, 2 buttons, and 2 labels as illustrated in the next diagram. 

Note: You must select and draw the controls on the frames.
Figure Sample Program Layout

 Change the properties for each of the objects so that your interface looks
something like the following.  Note, the text in the text boxes just gives an
indication of what size to set the text box font!

Figure Sample of Modified Layout

Now code the program!

 In General...Declarations add the line:

Dim Card(1 To 13), CardNumber1, CardNumber2

 In the Form...Load event procedure add the code:

Card(1) = "Deuce"
Card(2) = "Three"
Card(3) = "Four"
Card(4) = "Five"
Card(5) = "Six"
Card(6) = "Seven"
Card(7) = "Eight"
Card(8) = "Nine"
Card(9) = "Ten"
Card(10) = "Jack"
Card(11) = "Queen"
Card(12) = "King"
Card(13) = "Ace"
Randomize

 In the Command1 code window type the following code:

CardNumber1 = Int(13 * Rnd + 1)

Text2 = Card(CardNumber1)

 In the Command2 code window, type the following:

CardNumber2 = Int(13 * Rnd + 1)

Text3 = Card(CardNumber2)

If CardNumber1 > CardNumber2 Then

    Text1 = "Player1 Wins!"
ElseIf CardNumber2 > CardNumber1 Then
    Text1 = "Player 2 Wins!"
Else
    Text1 = "It's a DRAW!"
End If

 Save the form and label.  Use the same name such as cutthedeck.
 Run the program. 

Player 1 will press the cut button (command1) and show player 1's card. 
Then player 2 presses the cut button and in addition to displaying player 2's
card in the text box, this code will decide on who is the winner.  Ace is High!!

Copy all files to your course portfolio.

Improvements
Try adding some "improvements" to this application:

1. Add a counter and a textbox to each of the player's frames to keep track of
how many times they win. Hint: Place the counters in the Block If section
(Command2). If they tie (draw) the counters should remain the same.
2. Player 1 should cut the deck before player 2.  Can you disable player 2's ability
to cut the deck until player 1 has finished? 

Hint: Player2 is in Frame3.  If you place a command like Frame3.Enabled =

False no controls on the frame will work.  If you place the command
Frame3.Enabled = True everything on the frame will now work.  You need to
figure out where to place these commands.  You can also make a Frame (or
any control for that matter) true or false in the properties window so that it will
not work as soon as the program is run (or you can place the command in the
Form...Load code).

Activity 2 VB Web Browser Enhancements

This is an activity based on one you have already done.  We have added the idea of a
control array to further show how that feature works.

 Run Visual Basic and select the Standard.EXE

 Draw a frame on the form.  You might want to change the background color of
the frame right away so that you can see the other controls you are going to
place.
 Next, select and draw an Option button on the frame.  It should look like the
following:

Figure Frame with Option Button 

 Right-click on the Option1 box and select Copy.  Right-click again and select
Paste. You will be asked if you want to create a control array.  Click Yes.
  Continue by pasting 4 more Option boxes, so that you have 6 in all.

Figure Options Boxes on Frame

Next, you need to add a Microsoft control that isn't in the toolbox. (Note: if this doesn't
work for you you may not have Power User status.  Tell your instructor if you have
problems with the next step!)

 Open the Project menu and select Components.  Scroll down until you find
Microsoft Internet Controls and place a check in the box to the left.  Click OK.
Figure Adding Microsoft Internet Controls to the Toolbox

 When this control is added to the toolbox, select and draw it on the frame.  You
can make your frame and the internet control (web browser) much larger that
the next diagram.

Figure Frame with Internet Control Added

Next you will need to add some code. 

 Open the code window and add the following to the General...Declarations.

Dim website(6)

 Next add the following code (exactly) to the Form...Load event procedure. (the
text is made smaller below so it will fit without wrapping)

website(0) ="http://www.ski-doo.com"
website(1) ="http://www.arctic-cat.com/snowmobiles/index.asp"
website(2) ="http://www.yamaha-motor.ca"
website(3) ="http://snowmobiles.polarisindustries.com/snowmobiles/default.aspx"
website(4) ="http://www.bladesnowmobiles.com/"
website(5) ="http://www.alpina-snowmobiles.com/"

 Finally open the Option1_Click(Index As Integer) event procedure and add just
one line of code:

WebBrowser1.Navigate website(Index)

 Save the program before you try it!  Use a suitable filename for both the form
and project.
 Click the Start button and run the program. 

The first option button (also called Radio buttons) will be automatically selected
and something should appear in the web browser control window.  Try each of
the other option buttons.  If you get an error check the address in the
Form...Load code window.

Note that we didn't ask you to change the Caption or BackColor of the option buttons. 
Now that you know what each button does, go back and change the captions to
something meaningful.  Or you can arrange the captions from the best to the worst, in
your opinion :)

Improvements

Note that the browser window doesn't have any of the buttons and toolbars found in a
normal browser.  You can add a few extras.  Try the following:

1. Add a command button and give it a caption Back. In the code window for the
Command1 button add the following code.

WebBrowser1.GoBack

When you click this button you will go back to the previous site. 
NOTE: If you are already at the first site visited and click this button you will
get an error.  Just run the program again.
2. You can add a few more buttons and code them with one of the following. 
make sure to enter an appropriate caption.
 WebBrowser1.GoForward
WebBrowser1.Stop
WebBrowser1.Refresh

Test Yourself
© 2007 CDLI. All Rights Reserved.