Visual Basic I/0 and Properties
Prerequisites: Read chapters 1 and 2. Know how to enter VB and make a simple GUI. Know how to change the basic properties of controls
In this lesson we will look at more Input Output features on Visual Basic and look at the assignment statement that will be used to set the values of the properties at runtime for your program
Enter VB, Make a radio button in the top left corner of the From. Rename the Form frmIOForm and rename the radio button optRedBG by changing the properties of each. It is very important, again, to rename the control as the first thing you do. We will see why later. Set the Caption property of the radio button to Red Background and the Caption property of the form itself to IO Form. (Hint: You reset the Form properties by clicking on the gray part of the form and making sure the Properties window is visible via View). Now make a second radio button, name it optYellowBG and set its Caption property to Yellow Background. Your screen now should look something like:
We now want to use an assignment statement to allow the student to change the background color of the Form as the program is running. We are used to setting the properties ahead of time in the Properties Window. Now we give the user some control. Double click on the Red Background radio button. In the code window that pops up, enter the following:
frmIOForm.BackColor = vbRed
Your code should look like the following, if you add a comment describing what you are doing:
Notice that the comment on your screen (what follows the ‘ character turns green after you hit enter. It is ignored by the computer but it is useful in that it lets you describe what your code is doing. Run this program. The background is red because when you ran the program the first option button was selected, and your code was automatically run. We want to set the background to something else at runtime. Stop your program from running by clicking the blue box next to the blue triangle you pressed to run your program. Now double click on the second radio button. Enter this code between the Private Sub line and the End line in the code window:
'change the background color to Yellow
frmIOForm.BackColor = vbYellow
Your should be staring at something like:
Run your program. Fix any typos. You should be able to set your background to red or yellow when your program is running. Now stop your program. What is happening? We are using assignment statements. Lets look at this line of code:
frmIOForm.BackColor = vbYellow
You should read this code this way: Take the value of vbYellow and put it into the BackColor property of the control frmIOForm.
The = sign in VB is the assignment statement. It takes whatever is on the right side of the = and puts it into what is in the left side of the =. You can think of the = sign as a left arrow. Put what is on the left into what is on the right. It has NOTHING to do with an = in math.
What is vbYellow? It is a constant in VB that holds the RGB values for Yellow. vbYellow takes the place of this big number. It is like using pi instead of using 3.14159... VB has constants for several colors, and had other constants we will use later. So.. we are taking this big number and putting it into the container called:
frmIOForm is the name of the control. The ‘.’ says you are at the end of the name for the control. What is after the ‘.’ is the name of the propery you want to change. Try this: Make a button on your form. Do not rename it. Just double click on the button and enter this line into the code window:
optRedBG.Caption = “I just changed the caption!”
Try to run the program. If it does not work, it may be because you did not enter the exact name of the control, in this case: optRedBG. This is why you need to name a control with a meaningful name that describes what it is being used for. Think how difficult it would be to remember: lkjlskjflsdkuelfmn.Caption = “YIKES” If your program ran correctly and you press the command button, you should see:
Here again, we changed the property at runtime, taking the string (another name for a group of words..) “I just changed the Caption!” and putting it into the control optRedBG under the Caption property. Do you think we could put set the BackColor property to “Blue”? Try it. Each property has acceptable values and non-acceptable values. VB would puke if you tried to set a control to a word when it wanted a number (or visa versa..).
Stop your program from running. Now change the name of the button Command1 to cmdChangeLabel and change the Caption property to “Change the Label”. We are making an error here to illustrate a point.. Run your program. When you click on the button now, the label does NOT change! Why? Once we renamed our button, VB lost the code we entered for it... well,, not exactly. VB has the code but it cannot use it. Stop your program. Double click on the button to see the code window. You should see:
Notice that you have code for the Command1 button, but since you renamed this button, the program does not access it. You renamed this button cmdChangeLabel. If you double click on the button again, you will be entering code for this button. Can you get rid of this code that is not accessable? Sure. Highlight it and press delete! Moral: Make sure you rename your controls first thing or you may have to reenter code.
Enough.. Close the code window. Select the button and press delete to get rid of it. Now make 2 combo boxes and 2 more radio buttons. Also make a SHAPE. Find it on the toolbox (red square, blue square, yellow circle icon) With this icon selected, make a box to the right of your other controls. Your form should look similar to:
Set the name of the first combo box to cboShape. Name the second cboSize. Name the checkbox chkFilled. Name the first button optCyan. Name the second optBlue. For cboShape, enter in the List property for this control entries for Rectangle, Square, Oval, and Circle. Run you program. You should see Rectangle, Square, Oval, and Circle appear when you click on the down arrow in the combo box. Stop your program. Now double click on the this combo box. You will see the code window:
This is not what we want, since this code will be called if the contents change. We want to call this if the user makes a selection by clicking. Look at the top of the box. In the blue top bar find Project1. Below it you will see cboShape in a white box. This is the object (or control) that is being coded. To the right you will see Change. This is the event that will prompt this code to be executed. In this case: “when the cboShape control gets a Change event, then do the code below..” We want to do the code when the user clicks on the control. To the right of the word ‘Change’ in the white box at the top right of the screen you will see a down triange. Click on it. You will see:
This drop down box shows the events that the combo box can ‘listen’ for. Unfortunately, the Change event only is called when you type info. We want to select info with a mouseclick. Double click on the word ‘Click’ in the list. Notice you will still have the default code stub for ‘Change’, which you can highlight and delete, but you also have a Private Sub/End Sub code stub with the work ‘Click’ on the first line. This code will be called when the user clicks on the combo box. (Could you make it do something different on a double click?? Try this later..)
Now lets write the code for this combo box. Enter this code (the single line between Private Sub and End Sub..)
Here we are taking the ListIndex of what they clicked on in the combo box (0, 1, 2, or 3 in this case, corresponding to the line of where they clicked.. 0 for Rectange, 1 for Square...) and putting it into the shpShape control in the Shape property. Click on the Shape control. Find the Shape property in the Properties window. Note that 0 for this property sets the shape to a rectangle, etc. Also note you could add 2 new lines to your combo box (for rounded Rec and rounded Square). Experiment with this after you run and debug your program now.
One more example. Lets look at the checkbox. Double click on chkFilled. Enter the following line of code:
Explore the Shape property FillStyle of the control shpShape. What do you think will happen? chkFilled.Value will return a 1 or 0. Could you use a combo box for more options?
Time to play. See if you can set the size of the shape to different values my setting, say the second combo box List properties to 1000, 2000, and 500, then changing the Shapes.height property to what was selected. Use the cboSize. Use cboSize.Text to pull out the current value. Use the bottom radio buttons to change the Shapes FillColor to Cyan or Blue.
Assignment: Make the most elaborate program you can design that allows you to manupulate one or more shapes in a program. Experiment with other properties of a Shape. Enlarge the screen size. HAVE FUN! You will want to print out the code and Form for your portfolio.