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 .