Lab 1 of 7: A Simple Input and Output Program(40 Points)
Submit your assignment to the Dropbox located on the silver tab at the top of this page.
(See Syllabus “Due Dates for Assignments & Exams” for due dates.)
L A B O V E R V I E W
Scenario and Summary
In this lab, you will create a Visual Basic project that has a form like the one below.
The user types in his or her first and last name and presses the button, which displays the first and last name in the labels containing straight lines. For example, if you enter John in the First Name box and Smith in the Last Name box and click the Display Name button, your output should look like this.
Deliverables
Section
Deliverable
Points
Step 18
Lab1YourFirstLastName.docx (Word document) Screen shot of Windows form Copy of button_click event code
40
Category
Points
%
Create a form and rename it.
3
7.5%
Change for text property.
2
5%
Add a label and change the text property, First Name.
3
7.5%
Add a textbox and rename it txtFirstName.
3
7.5%
Repeat Steps 5-7 for Last Name.
3
7.5%
Add a command button, btnDisplay, and text property Display Name.
3
7.5%
Add a label to display the first name, lblFirst. The text property should be blank. Repeat the process for lblLast.
3
7.5%
Code the button-click event.
10
25%
The program is tested and runs as expected.
10
25%
Total
40
100%
Preparation
Go to http://lab.devry.edu, enter your user name and Citrix login password, and click the Log On button to log into the Citrix iLab Server.
TIP: For more information about logging into the Citrix iLab Server, see the iLab page under Course Home.
Locate the Microsoft Visual Studio 2010 icon, and double click on it. (You may need to scroll down to locate it.) The icon for Visual Studio 2010 looks like this.
If you see the Choose Default Environment Settings dialog, pictured below, select Visual Basic Development Settings, and click the Start Visual Studio button.
After a short delay while Visual Studio starts up, you should see a screen that looks similar to the following (it’s okay if yours looks slightly different).
L A B S T E P S
STEP 1: Download the Week 1 iLab Instructions
Pull down the File menu and select New Project, as shown.
The New Project dialog box will open. Under Project Types, make sure Windows under Visual Basic is selected. Under Templates, make sure Windows Forms Application is selected. In the Name box, enter Lab1YourFirstnameYourLastname (for example, student John Smith would enter Lab1JohnSmith).
Click OK to create the project.
You should now see the default form, Form1.vb, open in the Design window, and you should see the project tree in the Solution Explorer on the right, as shown.
L A B S T E P S
STEP 2
In the Solution Explorer window, right click on the form Form1.vb and select Rename.
Enter the new name Lab1YourFirstnameYourLastname.vb (e.g., for John Smith, Lab1JohnSmith.vb), and press Enter.
L A B S T E P S
STEP 3
Make the Toolbox visible by clicking on the icon that looks like a hammer and wrench. It is immediately above the Solution Explorer window.
At the top of the Toolbox on the left side of your screen, click the pushpin icon to pin the Toolbox open:
Your screen will now look similar to this, with the Toolbox at the left of your screen.
L A B S T E P S
STEP 4
Now, you can design your user interface. Click on the form in the Design window to select it. The Properties window for the form should appear at the lower right of the screen, with the Text property of the form visible. In the
Text property, type Lab1YourFirstnameYourLastname. After you press Enter, this information will appear in the form’s title bar, as shown below:
L A B S T E P S
STEP 5
In the Common Controls section of the Toolbox, find the Label control. (If the Common Controls section is collapsed, click on the small plus sign (+) at the left of the heading to expand it so that you can see all the controls inside this section.) Click on the Label control and, while holding down the mouse button, drag it onto the form, as shown.
L A B S T E P S
STEP 6
Click once on the Label1 control to display its Properties window. The Text property should appear. Change the Text property to read First Name. When finished, your form should look like this.
L A B S T E P S
STEP 7
Grab a Textbox control from the Toolbox and drag and drop it onto the form under the Label. In the Properties window, scroll up to its Name property and change it to txtFirstName. This is the name you will use to refer to the Textbox when you get input from it in your code later on.
L A B S T E P S
STEP 8
Repeat Steps 5 to 7, this time adding a Label and a Textbox with these property settings.
Control
Property
Setting
Label
Text
Last Name
Textbox
Name
txtLastname
Your form should look like this now.
L A B S T E P S
STEP 9
Now, drag a button onto your form from the Toolbox, and change its Name property (at the top of the Properties window) to read btnDisplay and its Text property to read Display Name, as shown below. (You may need to enlarge the button by selecting it and dragging the sizing handles on its edges so that all of Display Name can be seen.)
L A B S T E P S
STEP 10
Now, put the Labels that will hold the output of your program on your form. We will name these labels lblFirst and lblLast because we’ll need to refer to them in our code. We’ll also put a series of hyphens in their text properties so that they are visible when empty. The properties you should set are listed here.
Control
Property
Setting
Label3
Name
lblFirst
lblFirst (was Label3)
Text
——-
Label4
Name
lblLast
lblLast (was Label4)
Text
——-
Your form should look like this now.
L A B S T E P S
STEP 11
Your user interface is now designed. Now, you can code the button’s click event. Start by double clicking on the button. The btnDisplay_click event should appear. Any code you place between the Private Sub btnDisplay_click . . . statement and its End Sub statement will fire when you run the program and click the button. This is what makes Visual Basic an event-driven program.
L A B S T E P S
STEP 12
Type the code shown in the button-click event below. The statements preceded by a single quotation mark are called comments and don’t execute when the program runs. Comments are good for making your code readable to others and are considered good forms of documentation. You need to spell everything exactly as it appears in the screen shot below, or your program will generate errors when you try to run it.
L A B S T E P S
STEP 13
Click the Save All icon in the toolbar to save your program permanently.
L A B S T E P S
STEP 14
Now, you’re ready to test and debug your program. Click on the Start Debugging button on the toolbar to compile and run your program. Some programmers also call this button the Run button.
When your form appears, type a first name and a last name into the textboxes, and click the button. This will fire the btnDisplay button’s click event, which will execute the code, displaying the names in the Labels.
TIP: If you get error messages or if your program does not run correctly, see the “Debugging Your Programs” section at the end of these lab instructions for advice.
L A B S T E P S
STEP 15
Now, you need to take a screen shot of your working program. If necessary, press the Start Debugging button to bring up your running form. Enter a first and last name and press the button. Now, press CTRL-ALT-PrintScreen simultaneously. Nothing will seem to happen, but this action will take a copy of the form and place it on the clipboard.
L A B S T E P S
STEP 16
Launch MS Word. Right click in the document and select Paste. Your screen shot should appear there.
L A B S T E P S
STEP 17
Close your running program by clicking the X in the upper right corner of the form. In Visual Studio, double click on the button to bring up the btnDisplay click event. Select all the code in the window and paste it into the Word document. Your Word document should look like this so far.
L A B S T E P S
STEP 18
Save the Word document as Lab1YourFirstNameYourLastname.docx, and submit it to the Week 1 iLab Dropbox.
Congratulations on completing your first Visual Basic program!
Debugging Your Programs
1. If you made an error in your code, you will get a message that looks like this.
If this happens, click the No button. Then, look at the Error List at the bottom of the screen.
In this case, the variable strFirstName was intentionally misspelled to show you how to handle the error. The Error List’s description of the error says, “Name ‘strFirstNam’ is not declared.” This is because the variable was declared as strFirstname but referred to as strFirstNam (without the e). This is an error because you must always spell your variable names exactly as you declare them!
If you double click on the error description in the Error List, your mouse will highlight the misspelled variable name, and you can spell it properly. Press the Start Debugging button again to see if your program works. Repeat the process as often as you need to correct your errors.
2. If at any time you find that you can’t type anything into a button-click event or if you find the mouse unresponsive to clicking in Visual Studio, go to the toolbar at the top of the screen and try selecting the Stop Debugging button.
When you get an error in your code, you might need to stop the program completely before Visual Studio will let you make changes to the click_event code. Pressing the Stop Debugging button accomplishes this. Here is a picture of the Stop Debugging button.
Debugging is a natural part of the programming process. Even experienced programmers have errors in their code that have to be found and fixed. Therefore, try not to view errors as a source of frustration; instead, look at them as opportunities to practice your debugging skills. If you get stuck, you can post in the Q & A Forum or contact your professor for assistance.