Lab #7: Graphical User Interfaces
Video Modules 16 and 17
Your instructor or TA may ask you to
!do this exercise, possibly modified in some way
!work on another assignment
Goal of Exercise
This lab is an exercise in designing forms and writing event procedures. You have done all of these tasks previously. The only new concept here is using forms. As you know, Graphical User Interfaces are developed using the VB/DOS Form Designer. In this exercise, you will construct two different forms, and then you will write the event procedures for those forms.
Background
In order to complete this lab, you should be familiar with the material from Chapters 16 and 17, especially text boxes, command buttons and labels. Recall that event procedures can use every programming concept you have learned.
Exercise (15 points)
Part A (6 points)
The Lead GAs have been told to modify SUB DisplayMessage, which is in your Lab Library, and which you have been using since early in the course. The Lead GAs are very busy, so they have decided to make you write the new SUB for them. Your assignment is to create a new SUB called MSUDisplayMessage which works like the generic SUB DisplayMessage. MSUDisplayMessage will
!accept one string argument: the message you want to display
!SHOW a Form which contains a text box, a label and a command button (The user must not be able to modify the contents of the text box.)
!be colored green and white to show school spirit
Notes
You design the Form and its Event Procedures separately from the SUB MSUDisplayMessage.
MSUDisplayMessage will set the appropriate properties of the controls which are on that Form and then use the SHOW method to display the Form.
When the user clicks on the command button, the Form should be removed from the screen.
After creating MSUDisplayMessage, write a Main Module that tests MSUDisplayMessage.
Creating a form with controls
Since you have not previously used forms, we want to take you step-by-step through the process of constructing a form, inserting the necessary controls, specifying their properties and writing the event procedures to make those controls work.
STEP 1: Create a header
As you have done in previous labs, you must first create a header which contains all necessary documentation like your name and section number. (This step is critical so that the program begins in a BASIC file.)
Save the project as
U:MSUDM.MAK
and the header file as
U:MSUDM.BAS
STEP 2: Create a form
To create a form, you must go to the FILE menu and select NEW FORM.
STEP 3: Save the form in a unique file
Visual Basic will ask you for a file name to save the form in. NEVER leave the default name of FORM1.FRM! Type in a file name and click on OK. Let's call this form U:MSUDISPL.FRM
STEP 4: Using the Form Designer
Once you have entered a valid filename, you should see a screen like the one below. This is the Visual Basic Form Designer. The gray rectangle which covers most of the screen is a blank form, that is, your "drawing area." This is where you will draw the text box and other controls. On the left hand side is a list of the controls that you can use when making the form. Near the top of the screen are menus for setting the property and values for each control. For this lab, you will need to use a text box, a label, and a command button.
STEP 5: Creating a Command Button
To draw a command button, double click on Command Btn from the Tools list. This will place a rectangle named Command1 in the center of your form. Move the button to the bottom of the screen by clicking on the button and dragging it with the mouse.
You have created your first command button! However, you still have to give it a name and to set its properties. To do those two tasks, you will use the CtlName property and the Caption property. (See the figure above: "Select the property you want to set and the value you want that property to have.")
If the command button is not already highlighted ("has focus"), click once on it to give it focus. When you do this, all subsequent steps refer to this command button. (The same is true for any control for which you need to change the properties.)
Go to the Property Menu at the top and click on the down arrow. This will show you a list of properties for the command button.
Select the CtlName property, and set its value to OKBtn. (To replace the default value with your box name, you will need to place the cursor on the right hand side of the Value menu and click once.)
In a similar manner, also set the value of the Caption property of the Command Button to OK. Simply scroll down the Property menu to find this property.
STEP 6: The Finished Form
At this stage, you have made a command button and have set its appropriate properties. Now do the same thing for a text box and a label, and set their appropriate properties. Notice that the Property menus are different in each case: Visual Basic gives you only the relevant properties for each control, and these are different for command buttons, text boxes and so on.
For the text box, you will have to set the CtlName and Text properties. (The latter is set to blank so that the box is empty.) You will also need to set the multiline property of the text box to True. (Why?). We chose the CtlNameMSUTextBox, but you are free to choose a different CtlName.
For the label, you will have to set the CtlName and Caption properties. We chose the CtlNameMessageLabel, but you are free to choose a different CtlName. Note also that, after you enter the Caption property of the label, you will have to touch Enter in order to see the change on the screen.
Your form should now look like the one below. Set the BackColor of the form to Green by placing the cursor somewhere on the form (but not on the text box, command button or label), then clicking on the correct color palette at the bottom of the screen. Select the Forecolor by clicking between the parentheses and then selecting White. Your Form design is now complete.
STEP 7: Event Procedures
You are now ready to write the Event procedures for the various controls in the form. You do this in the programming environment, where you write code, not in the Forms Designer, where you are at this moment.
To go back to the programming environment, select the option Event Procedures under the Edit menu. Visual Basic will ask you if you want to exit to the programing environment, and you will answer OK. You then will be asked if you want to save the changes that you have made to the form. You must say YES at this stage. Once you have done this step, your screen now should be similar to the one below.
The left column lists the name of the file in which you saved your form: msudispl.frm
The objects in the center column are the controls that you have created. Thus, you currently have the command button (OKBtn), the textbox (MSUTextBox), the label (MessageLabel) and the form itself as the various controls.
The right column indicates the event associated with each control. You are interested in creating an event procedure for the click event of the command button (OKBtn). Select OKBtn in the second column and Click event in the third column, then click on "Edit in Active." This will create a new Event SUB called OKBtn_Click(). Write the appropriate VBDOS code in this SUB.
Note that we chose a particular set of CtlNames. If you had chosen different ones, you would see them in the figure above.
Similarly, create an event SUB to prevent the user from writing in the text box. (For help, refer to chapter 17).
To create an event SUB, select the Edit menu and then Event Procedures.
STEP 8: Saving the FORM file as TEXT
Your FORM U:MSUDM.FRM is saved in binary format by default. You have to save it in Text format. To do this, select the Save File As option under the File menu and select the Text format (by clicking in the parentheses on the left.)
STEP 9: Creating MSUDisplayMessage( )
Now you may create a SUB MSUDisplayMessage(text$), which
receives one string argument
puts it into the TextBox
SHOWs the form you just created with the desired message
The SUB has to be created in the file U:MSUDM.BAS To do this, double-click on this filename (below the CODE button) in the window on the right side of your screen, and then select Edit-In-Active. You are now working in the BASIC file.
To test SUB MSUDisplayMessage, CALL it from the Main module with a string like "Hello World" as argument.
Part B (9 points)
Now you will use what you have learned in Part A to solve a second problem. The Lead GAs were pleased with your work on MSUDisplayMessage and have decided to ask you to rewrite a second Library module, SUB DisplayNumber (in case someone asks them to do it later). Now your job is to create MSUDisplayNumber. It will
!accept two arguments, the first one a string, and the second a number
!SHOW a Form which contains two text boxes and a command button. (The two text boxes will display the two arguments which are passed to MSUDisplayNumber.)
!be colored green and white to make the Lead GAs happy.
You will do this in a NEW PROJECT and with a new header etc.
Notes
Just as before, you design the Form and its Event Procedures separately from the SUB MSUDisplayNumber.
MSUDisplayNumber will set the appropriate properties of the controls which are on that Form, then use the SHOW method to display the Form.
If the properties have been set correctly, the string and numeric values which were passed to MSUDisplayNumber should appear on the Form when it is loaded.
When the user clicks on the command button, the Form should be removed from the screen.
After creating MSUDisplayNumber, write a Main Module that tests your SUB.
Save your program using SAVE PROJECT
Project name:U:\MSUDNUM
File name:U:\MSUDNUM
Further Information
!Start by designing your Form and Event Procedures. Change the control names of your text boxes and command buttons. Do NOTleave default control names such as Command1, etc.
!The STR$ Function
You cannot set the text property of a text box to a numeric value, since text boxes will hold only strings. Therefore you will need to use the STR$ function. STR$ accepts a numeric argument and returns a string representing that number. For example, if num is a numeric variable and its value is 50, then
LET num$ = STR$(num)
will store the string value "50" in the string variable num$.
!String "Smooshing"
Just like you can add two numbers in VB/DOS, you can also "add" two strings! You don't really add the strings like numbers, but instead stick them together, creating a new, bigger string. For example:
LET a$ = "Hi "
LET b$ = "There!"
LET c$ = a$ + b$
CALL DisplayMessage(c$)
would result in the message "Hi There!" being displayed on the screen.
The important thing to remember is that you must only smoosh two strings! You cannot mix data types! Therefore, if you wanted to "smoosh" a text string and a numeric value, you would first have to use the STR$ function to transform the numeric into a string representation. For example,
LET a$ = "You Won "
LET b$ = "dollars"
LET c = 100
LET message$ = a$ + STR$(c) + b$
CALL DisplayMessage (message$)
would result in the message "You Won 100 dollars" being displayed on the screen.
Lab #7: Graphic User Interfaces, page 1 of 7