VisualBasicMadLibs - Computer Science

advertisement
Page 1
Gr8 Designs For Gr8 Girls
Visual Basic Mad Libs Workshop at The University Of Western Ontario
1. Log onto the machines in MC 230 or MC 235. The user id and password will be written on the white board at the
front.
2. Click on the Start Menu>All Programs>Microsoft Visual Studio 2010>Microsoft Visual Studio 2010
3. If prompted select Visual Basic Development Settings, then click on the Start Visual Studio button. NOTE: It takes a
few minutes for Visual Basic to start, don’t worry if nothing happens for a minute.
4. While you are waiting, here is the program we will be making:
http://www.csd.uwo.ca/~lreid/grade8designs/madlib/vbmadlib1.exe Try running it and think about what you, as
the USER of the program, are doing. (Today you get to be both the USER and the PROGRAMMER of a program)
5. You might see a window with a tab called Start Page, click on the X to the right to close this Start Page window, we
don’t ever need it (if you get an error message pop up, just click on the Yes or OK button here as well to get rid of
that message).
6. From the File menu, select New Project, then click on the little picture called Windows Forms Application and
leave the name the same (probably it will be WindowsApplication1), then click on the OK button. At this point a
little square box will pop up called Form1, think of Form1 as the piece of paper that you will design your mad lib on.
The rest of the screen (around Form1) is called the design area. This is where we will BUILD our program (we are
like a mechanic BUILDING the car, the design area is our garage). Occasionally we will try RUNNING our program,
this is when we see if our program is doing what we want it to do (then we are like a driver DRIVING the car).
Never close the design area until the teacher tells you to!
SOME NOTES ABOUT WRITING A VISUAL BASIC MAD LIB PROGRAM:
There are only 4 real objects/parts of the mad lib screen you need to know about to build a simple Visual Basic mad lib
program:
a. Form  this is like a window or a piece of paper that you will design everything on
b. Button  you can click on a button to stop your program or you can click on a button to make your mad lib. Thus
you will need two buttons: a Quit button and a Make Mad Lib button
c. Label  this is a box that holds instructions or hints for the person looking at your form
d. Textbox  this is where people can type in the verbs/nouns/adverbs, etc.. that will be used in your mad lib. Thus,
remember people using your program can type into a textbox but they can only read a label (they cant type into it).
Each of these objects has properties and events:
e. Property: something special about an object, for example the backcolour of a form or the text on a label or font size
of a label.
i. NOTE: an important property of EVERY object is the name (name), because it is how the program knows which
object we mean. Thus the form we now have is called Form1, it’s name is Form1
f. Event: something a person can do to an object like a person can change the text in a textbox or move his/her
mouse over a label.
QUESTIONS: What event can a person do to a button? What event can a person do to form?
Page 2
7. Before we do anything, let’s save our project. Go to the File menu and press File>Save All. Click on the text box to
the right of Location: Type in the following  X:\ Then back at the Solution Name: box type your first and last
name together with NO space and a 1 at the end of your joined name, all lowercase letters. For example, if your
name was: Katie Cook, then give your project the name: katiecook1
For example:
8. Look at your first form, it is GRAY and BORING. Let’s make the form a bit prettier
. First, click anywhere on the form, then in the bottom right corner you should
see a Properties box (a little window with a list of items). Double click on the
property called Text (this is similar to the nickname of the form) and change the
text from Form 1 to your name’s mad lib like: Katie Cook’s Mad Lib and hit enter.
Now look back at the top of Form1, notice it changed! Now let’s change the
colour of it. Double click on the property called BackColor, then click on the little
arrow on the right, then click on the Web tab and slide the scroll bar down till you
see a pretty colour you like, click on that colour and look at your form again.
9. Now let’s make a button for our window. To add a button, you need the tool box. The tool
box is probably already on your window, it will be along the left hand side and look like
this. If you can not see the toolbox, go to the View Menu, then select View>Toolbox . It is
easier if we keep this open all the time, click on the
auto hide (it looks like a Thumb Tack), this will keep
it open. You might need to open the Common
Controls tools by clicking on the little + next to it. The tool we want is the Button. Double
click on the Button icon and a button should show up on your form (slide
the mouse over to your form if you can’t see all of the form). Move the
button to the bottom right corner of the form and you can resize it if you
want to make it a bit bigger. Click once (don’t double click) on the button
and then look at the properties of the button by looking at the Properties
window in the bottom right. Double click on the Text property of this
button and change the text to say Quit. You can change the BackColor
property too of the button if you want. Your form should look sort of like
this:
Page 3
10.Save the project again from the File menu  File>Save All
11.Now let’s try to RUN (make our program work and see what someone using our program would see) our program.
To run it, we just click on the little picture of the triangle along the top as shown in this picture:
When
your program is running, you will see your form pop up. If the person using our program clicks on the X in top right
corner of the window, the program will end/quit. Try clicking on the X. Now run the program again (click on the
triangle) BUT this time, click on the Quit button you made and watch what happens…NOTHING!!! That is because
we haven’t told the Quit button what we want it to do when someone clicks on it. Close your running program
again by clicking on the little X again.
12.When your program is NOT running, double click on your Quit button. You will now see the Code Window. It
should look similar to this 
Public Class Form1
This is the place where we tell the
Private Sub Button1_Click(ByVal sender As …
buttons what we want them to do
End Sub
(sort of like under the hood of a car)
End Class
NOTE THE FOLLOWING:
i. The instructions for this button are for when someone clicks on it (other things someone could
do to a button are: move his/her mouse over the button. There are LOTS of other things
someone can do to a button).
ii. The words Private Sub Button1_Click… mean this is the START of what to do when someone
clicks and the words End Sub mean this is the end of what to do when someone clicks.
13. We are going to tell the button to make the program END when someone clicks on the button. To do that we just
type the End command
Public Class Form1
between the Private
Private Sub Button1_Click(ByVal sender As System.Object, …
Sub and the End Sub
End
like this 
End Sub
End Class
14.Now run your program again (remember, click on the little triangle on the tool button) and see if the button works
(press the triangle) and then click on your Quit button. HURRAY, the Quit button works!
Page 4
15.Now let’s build our mad lib parts. Here is the mad lib we will be using to write this program:
month:
year (in the future):
body part:
location:
boy's name:
girl's name:
(A)
(B)
(C)
(D)
(E)
(F)
Dear __________(E),
I'm sorry I cannot go to the ____________(D) with you. I had
an accident and broke my __________(C). Let's go later. My
first available day is in _________(A) of ___________(B).
Hope to see you then.
Sincerely,
_____________(F)
16.First we need to tell the person using our
program the 6 pieces of information we will
need from him/her to do this Mad Lib. The tool we use to give people information is the Label
tool, so we will need 6 labels. We should position them neatly to make it easy for the person
using our program to read our form. First we need to get back into design mode, click on the
tab called Form1.vb[Design] at the top of the code window (if you are still in the code window)
so that you now see your form again. Make sure you click once on the form and NOT the
button, so you add the labels to the form, and not to the button. To add the 6 labels, go to the
tool box on the left side again and double click on the label tool 6 times:
17.Your form should look sort of like this:
18.Now move the labels so they are laid out more nicely, similar to this:
19.Now change the Text property for all 6 labels so that they say the parts of
the mad lib we need the person to enter. Remember you change the
property of an object (in this case a Label object) by click ONCE on the
label you want to change, then go to the Properties window in the bottom
right and change the Text property to Month: for the first label, Year (in
the future): for the second label… etc. Your form should look like this:
NOTE: if you get into the code window by mistake, just click on the Design
tab at the top of the window.
20.Now if we run our program again, (press the triangle), notice that the
problem now is that we told the person running our program what we
need them to enter but we forgot to give them a location to enter the
stuff! Press your Quit button to stop running your program to get back
into Design Mode. To let someone type data into your program, you
will need to use a tool called a TextBox. Thus we need 6 TextBoxes to
hold the 6 pieces of information we need from the person running our
program.
Page 5
21.Now let’s add 6 Textboxes. Click once on the form, then go to the Toolbox on
the left and click 6 times on the TextBox tool. Your form will look similar to
this: Move the text boxes so that they are next to the label for which we need
the data. Thus your form should look like this
now:
22.Now we have to name the textboxes with
good names (rather than TextBox1, TextBox2)
so that they are easier to remember later on.
The Name property is one of the MOST
important properties of an object/tool so
rather than being in alphabetical order, the Name is almost
always at the top of the property box. Click on the first text box
(the one for month) and look at it’s properties. They should look
like this, notice the third one is the (Name) property. We don’t
want to get the text boxes mixed up so we will give each text box
a good name. The first one will be called txtMonth, to name it
this, double click on the (Name) property and type in txtMonth
like this: Then call the next TextBox txtYear and the next one
txtBodyPart and the next one txtLocation and then next one txtBoy
and call the last one: txtGirl. (MAKE SURE YOU USE THE EXACT SAME
SPELLING AS ABOVE FOR EACH TEXTBOX)
Page 6
23.Now make one last thing, make another Button like your Quit
button. Double click on the Button icon(picture) in the Toolbox
along the right and move the new button to the bottom left
corner and resize it if you want. Change the Text property (in
the properties area in the bottom right) to the text: Make Mad
Lib. Now your form should look like this:
24.Your form now has all the parts it needs, although we still have
to write a little bit of code. Save your project (File>Save All)
25.Now try running your program again (press the little triangle).
Fill in the text boxes with appropriate information and then
click on the Make Mad Lib button. Notice that the Make Mad
Lib button doesn’t do anything . We have forgotten to tell
this new button what to do when we click it. Remember we need to write code in the code window to do that.
Click on your Quit button to stop the program and get back into design mode and then double click on the Make
Made Lib button (it’s name property is Button2, just it’s text property is Make Mad Lib) to get to the code window
for that button. You should see this code:
Public Class Form1
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
End Sub
End Class
26.Now we need to tell Button2 (the Make Mad Lib button) what to do. First of all we need to give the form/windows
some variables to help us complete this task. Variables are like holders or containers (really they are locations in
the computer’s memory) that hold data. Our variables are going to hold string data. In computer science String
means a group of letters. Thus, our holders are going to hold groups of letters (words). We will need to tell our
program whenever we want to use a holder/variable what type of stuff we are going to put in it. We will tell our
program we need a variable in a place where all the buttons and program can use them, right after the start of the
form (right after Public Class Form1). When you are telling a program you need to use variables you are
DECLARING them. We will declare a variable/holder called stra as String (this means the variable has a name of
stra and it will be holding words). Type the code into your form EXACTLY as it is here:
Public Class Form1
Dim stra As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
End Sub
End Class
Page 7
27.Now we need to put data (strings or mad lib in between words) into
the new variable. We don’t need to use the variables until we click
on Button2, so we will fill the variable with data just after the start
of clicking on Button2 (after Public Sub Button1_Click…). For the
variable stra we just want it to contain the data “Dear “ so we just
put the following code:
stra = “Dear “
(the beginning of our mad lib). Thus the code will look like this:
Dear __________,
I'm sorry I cannot go to the ____________ with you. I
had an accident and broke my __________. Let's go
later. My first available day is in _________ of
___________. Hope to see you then.
Sincerely,
_____________
Public Class Form1
Dim stra As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
stra = “Dear ”
End Sub
End Class
28.Now we have made the variable and put data in it, now we need to attach the variable we just made (stra) to
whatever the user has put in the boys name textbox and then OUTPUT that newly joined group of words , to make
sure everything is working as we go along. We need a place to store everything as we join it up. We will make a
special variable called strbigmadlib that holds all the words as we join them together. Remember we ALWAYS
NEED TO DECLARE THE VARIABLE BEFORE WE USE IT. After we declare it we can join the words “Dear” to the boys
name and put the madlib so far into strbigmadlib. The following code declares the new variable we need and joins
up the words, add the new code below EXACTLY as it is written:
Public Class Form1
Dim stra As String
Dim strbigmadlib As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
stra = “Dear ”
strbigmadlib = stra & txtBoy.text
End Sub
End Class
29.Notice that in visual basic, the way that you join words is the symbol &. (that is what we used to join stra to the
stuff in the textbox called txtBoy. The bits typed in by the person using our program are each stored in the
textbox’s Text property. Thus, the first text box would have what the user typed in (such as February) in
txtMonth.text . The boys name is in txtBoy.text
30.Now run the program again, notice that it still doesn’t output anything! That is because we still don’t have the step
where we make output. There are many ways to make output in Visual Basic. We will use a quick and easy tool
called a MsgBox (it stands for message box). We will make the message box display strbigmadlib Type the code as
shown in below and then try running your program again and putting data in the textboxes:
Page 8
Public Class Form1
Dim stra As String
Dim strbigmadlib As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
stra = “Dear ”
strbigmadlib = stra & txtBoy.text
MsgBox(strbigmadlib, MsgBoxStyle.Exclamation, “My Mad Lib”)
31.
End Sub
End Class
After you run your program, see if you can figure out what the MsgBoxStyle.Exclamation does and where the “My
Mad Lib” shows up! Notice also that our mad lib right now is not complete! We need variables for all the in
between words in the madlib. Remember you need to declare all the variables you need first and then put the
words in them. Let’s move on to the next set of words. First declare another variable called strb
32.Now for variable strb, to put the data (words) into it is a bit trickier. Look at the mad lib we are using and notice
that we need to move to the next line sometimes (like after the Boys Name). Also notice that then we need a blank
line and then the following words: “I'm sorry I cannot go to the ”. In visual basic, there is a special variable that
means go to the next line, it is called vbCr . To attach vbCr to the in between words we use the symbol &. Thus the
code to fill strb would be:
strb = vbCr & vbCr & “I’m sorry I cannot go to the “
Here is the code for strb, type it all in to the code window EXACTLY as it is written below:
Public Class Form1
Dim stra As String
Dim strb as String
Dim strbigmadlib As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
stra = “Dear ”
strb = vbCr & vbCr & “I’m sorry I cannot go to the “
strbigmadlib = stra & txtBoy.text
MsgBox(strbigmadlib, MsgBoxStyle.Exclamation, “My Mad Lib”)
End Sub
End Class
Page 9
33.Now we also need to join strb and the location textbox onto strbigmadlib, so that they display also. Join them as
shown in the code below:
Public Class Form1
Dim stra As String
Dim strb as String
Dim strbigmadlib As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
stra = “Dear ”
strb = vbCr & vbCr & “I’m sorry I cannot go to the “
strbigmadlib = stra & txtBoy.text & strb & txtLocation.text
MsgBox(strbigmadlib, MsgBoxStyle.Exclamation, “My Mad Lib”)
End Sub
End Class
34.Now try running your program again and make sure the location was joined into the mad lib.
35.Now let’s build the rest of the mad lib. Type the following code exactly as shown:
Public Class Form1
Dim stra As String
Dim strb As String
Dim
Dim
Dim
Dim
strc
strd
stre
strf
As
As
As
As
String
String
String
String
Dim strbigmadlib As String
Private Sub Button1_Click(ByVal sender As System.Object, …
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object…
stra = "Dear "
strb = vbCr & vbCr & "I'm sorry I cannot go to the "
strc = " with you. I" & vbCr & "had an accident and broke my "
strd = ". Let's go" & vbCr & "later.
My first available day is in "
stre = " of " & vbCr
strf = ". Hope to see you then. " & vbCr & vbCr & "Sincerly, " & vbCr
strbigmadlib = stra & txtBoy.text & strb & txtLocation.text
MsgBox(strbigmadlib, MsgBoxStyle.Exclamation, “My Mad Lib”)
End Sub
End Class
36.And don’t forget the step to add all the new variables and the input from the user in the textboxes together and
store it in strbigmadlib as shown in this line:
strbigmadlib = stra & txtBoy.Text & strb & txtLocation.Text & strc &
txtBodyPart.Text & strd & txtMonth.Text & stre & txtYear.Text & strf &
txtGirl.Text
Page 10
37.Now we have all the in between bits for the mad lib in variables. Save the project again (File> Save All). Run the
program again, fill in the text boxes and click the Make Mad Lib Button. Everything should work now!
If it doesn’t work quite right, make sure that the final code for the Make Mad Lib button will look like this:
Public Class Form1
Dim stra As String
Dim strb As String
Dim strc As String
Dim strd As String
Dim stre As String
Dim strf As String
Dim strbigmadlib As String
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles
Button1.Click
End
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles
Button2.Click
stra = "Dear "
strb = vbCr & vbCr & "I'm sorry I cannot go to the "
strc = " with you. I" & vbCr & "had an accident and broke my "
strd = ". Let's go" & vbCr & "later.
My first available day is in "
stre = " of " & vbCr
strf = ". Hope to see you then. " & vbCr & vbCr & "Sincerly, " & vbCr
strbigmadlib = stra & txtBoy.Text & strb & txtLocation.Text & strc & txtBodyPart.Text &
strd & txtMonth.Text & stre & txtYear.Text & strf & txtGirl.Text
MsgBox(strbigmadlib, MsgBoxStyle.Exclamation, “My Mad Lib”)
End Sub
Private Sub CheckIfTextBoxEmpty()
End Class
If (txtBoy.Text = "" or
38.Now save your program (File>Save All), run it again and try
entering the data again into the textboxes. Then press the Make
Mad Lib button and now you should have a little window with your
mad lib! Now press your Quit button to go back to the design area.
39.Our final step is to make it into a program that other people can
run, an .exe file. To do this, go to the Build Menu and select Build
katiecook1 (only it should have your name). This will make a
katiecook1.exe file (only with your name) in the area where you
project is stored, under the Bin directory/folder. NOTE: When
building if you ever get a message like “This file has been modified
outside of the source editor. Do you want …..t” just always pick Yes
to All
40.One last little example, this time try using this madlib:
http://www.csd.uwo.ca/~lreid/grade8designs/
madlib/vbmadlibwithchecking.exe
I added this code, see if you can figure out what it does:
txtGirl.Text = "" or
txtLocation.Text = "" or
txtYear.Text = "" or
txtBodyPart.Text = "" or
txtMonth.Text = "") Then
Button2.Enabled = False
Else
Button2.Enabled = True
End If
End Sub
Private Sub txtBodyPart_TextChanged…
CheckIfTextBoxEmpty()
End Sub
Private Sub txtLocation_TextChanged…
CheckIfTextBoxEmpty()
End Sub
Private Sub txtBoy_TextChange…
CheckIfTextBoxEmpty()
End Sub
Private Sub txtGirl_TextChanged…
CheckIfTextBoxEmpty()
End Sub
Private Sub txtMonth_TextChanged…
CheckIfTextBoxEmpty()
End Sub
41.NOW, let’s start all over again and make your very own Mad Lib
txtYear_TextChanged…
program but this time change the textboxes and the final mad lib to be Private
a mad
libSub
of your
own creation, use your
CheckIfTextBoxEmpty()
End
Sub
imagination or you can use one of the ones we have at this address:
http://www.csd.uwo.ca/~lreid/grade8designs/madlib/samplemadlibs.html Once you have created your .exe file,
we will move it up on to the internet so that hopefully your parents can see what you did today! To get started go
to the File Menu and select New Project and click on the OK button. Remember to save (File>Save All) it as
yourname2, for example katiecook2 (we need the 2 so we don’t overwrite the one we just did together). The
helpers will be walking around the room to help you if you get stuck, so don’t worry if you get a bit mixed up .
Download