A. Lab # CIS170A-A1

B. Lab 1 of 7: Windows Forms Applications

C. Lab Overview – Scenario / Summary:

TCOs:
1. Given a specific Integrated Development Environment (IDE), develop a set of “flash card” like training materials that address basic functionality.

This lab will accomplish the following.
• Display VB Controls such as labels and buttons on a form
• Modify control properties such as Text and Name
• Implement event handlers that are associated with controls on the form

D. Deliverables:

Step Deliverable Points
A-9 Program Listing, Output, and Project Files 15
B-5 Program Listing, Output, and Project Files 30

The Dropbox deliverables include the following.
1. For each exercise, include a zipped file with all the files from your Visual Basic project (see directions in Doc Sharing on how to collect and zip files.)

2. For each part of the lab, create a single MS Word document and include the following.
• For each part of the lab, copy and paste your code directly into the MS Word file.
• Include screenshot(s) of your test data with test results. Enter enough data to demonstrate that all your code has been tested.
• Include a screenshot of the Visual Basic build output messages. Check your build output to make sure you have a successful build with (0) errors and (0) warnings. NOTE: The build output messages appear at the bottom of your window after you click the Build menu and before you click the Start Without Debugging option. Your build output messages provide a list of compiler warnings or errors and let you know whether your program compiled successfully.
• Include the Word document as part of the Zipped project file.
3. Upload each part of the lab into its corresponding weekly Dropbox.
 
E. Visual Studio/Visual Basic 2010

The examples in the book use Visual Basic 2010 Express and you can download and install VB 2010 for FREE at the following website:

http://www.microsoft.com/express/downloads/.

Once you get to this site, select “Visual Basic 2010 Express” and follow the instructions to install on your computer.

You can use Visual Basic 2010 Express for all your assignments in this course.

The tutorials in the course use Visual Studio 2010 Professional, which is the version that is on Citrix, and which you can download for free at the Student Software Store. However, the steps and Integrated Development Environment (IDE) look and feel is exactly the same between Visual Basic Express and Visual Studio so the book, lecture, and lab examples will be all consistent. If you have any questions, please post a question to the Lab Forum TDA.

F. Lab Steps:

Preparation:
If you are using the Citrix remote lab, follow the login instructions located in the iLab tab in Course Home.

Locate the Visual Studio 2010 Icon and click to launch the application.

Part A: Building Your First Windows Form Application
Step 1: Creating a Windows Form Project

To start a New Project, click on File -> New Project.

Step 2: Naming Your Project

In the New Project window, select Windows Form Application. If your New Project window has a single text box at the bottom, type your application name in the area provided at the bottom and click OK as shown below. If your New Project window has multiple text boxes at the bottom, continue to the next step.

If your New Project window has multiple text boxes similar to the dialog below, complete the following steps.

1. Enter the name of your application in the Name text box.
2. Select a location to save your project. You can use the Browse button as needed.
3. Make sure the check box labeled “Create directory for solution” is checked.
4. Select OK.

Save the Project

If your version of the New Project window allowed you to enter a location and check the “Create directory for solution” check box, skip this section.

If you were presented with the first New Project window, you DID NOT actually tell MS Visual Studio to store the resulting project folders and files (there are many of them), so it is a good idea that before you start constructing the project to do a “Save All” in one of two ways.

Select the “Save All” Icon in one of several ways.

1. Click the “Save All” Icon
2. Select File -> Save All
3. Type CTRL+SHIFT+S

In the Save Project form select “Browse” and navigate to the folder where you want to save all the project folders and files (you will need to know this folder in order to submit the project). Make sure “Create directory for the solution” is checked (this is the directory you will submit for grading; directions are given at the end of the lab). The following is what you will see:

Step 3: Create The Form

The project will open up with a new blank Windows form, as shown below. Notice the primary windows where you will be working are:

1. the form;
2. the Solution Explorer window; and
3. the Properties window.

When the Document Window is open so that a form is displayed, you are in the “Form Design” mode.

Open the Toolbox

When you are in the Form Design mode another important Window is the Toolbox Window. If the Toolbox Window is not displayed, you can display it in one of three ways.

1. Click the Toolbox Icon.
2. From the Menu select View -> Toolbox.
3. On the keyboard type CTRL+ALT+X.

When the Toolbox does appear, click “Pin” so that it remains on top of the view (you can change this to autohide later if you prefer).

Rename the form

You should always give your controls a meaningful name, including the form. After all, a control is just another variable type and all variables should have a name. To change the name you will use to reference the control in code, modify the Name property as shown below. Notice the “( )” around the Name property makes this property show up on the top of the properties list, which indicates the importance of the Name property.

Also, you will notice that changing the Name property of the form does NOT change the file name and “form1.vb” is still listed in the Solution Explorer. In professional applications you will have dozens, if not hundreds, of files so in order to manage this complexity you will want to rename the actual file (you will learn later than you can actually put them in sub folders as well). To rename the “form1.vb” file:

1. select “Form1.vb” in the Solution Explorer;
2. right click;
3. select Rename; and
4. give the file a meaningful name. The name can, but does not have to be, the same as the Name property.

Change the Text to Display

It is important to understand that the Name property is the name of the control that you will use to reference the control in code, which is different from the “Text” property (which is the text displayed to the user of the program). In the case of a form, the Text property value is displayed as the form’s title in the top left-hand corner.

To change the text that will be displayed to the user, select the control whose text you want to change (in this case it is the “frmHello” form), scroll down to the “Text” property in the Properties Window and enter the text you want to display to the user. Make sure to save your changes.

Execute the Program

At this point, if you want to see how your partially constructed form will look to the user, you can execute the partially created program by clicking on the green Run button that looks like a triangle or pressing F5. The program should look similar to the following:

Add a Label Control

If the Toolbox is not displayed, click on the Toolbox Icon (or type CTRL+ALT+X).

Follow these steps to add a label control to the form.

1. Select the Common Controls tab of the Toolbox.
2. Scroll down to the Label control.
3. Click on the Label control and drag it into the middle of the form.
4. Change the Name property to “lblName.”
5. Change the Text property to “Hello.”
6. Save your changes

Add a Button

Follow these steps to add a button control to the form:

1. Select the Common Controls tab of the Toolbox.
2. Scroll to the Button control.
3. Click on the Button control and drag it into the middle of the form.
4. Change the Name property to “btnHello.”
5. Change the Text property to “Click to Say &Hello.”
6. Save your changes.

*Note the way the “&” modifies the text displayed on the button. By placing an “&” in front of the H in “Hello” the H will display underlined.

Notice that as you constructed the form, you followed the same basic set of steps for each control>

1. Select the type of control from the Toolbox.
2. Drag the selected control to the place on the form where you want it to display.
3. Change the Name property to a meaningful name. (Using the type of control abbreviation will help organize your code but it is not required and some would say is not “good style”).
4. Change the Text property to the text you want to display to the user.
5. Change other properties as specified by the form design (more to come on design).
6. Save your changes.

Execute the Program

At this point, if you want to see how your partially constructed form will look to the user, you can execute the partially created program by clicking on the green Run button that looks like a triangle or pressing F5. The program should look similar to the following:

Step 4: Implement the Event Handlers

At this point, we have created a Windows Form, placed a few simple controls on the form, and even executed the partially constructed project. However, we haven’t written any Event Handler code, which means the button and the program as a whole does not do anything very exciting. In this next step, we will write code that will execute when the user clicks on the button.

There are several ways to get into the Code Window, which is where we create control event handlers, but Visual Studio provides a very easy way to create the default Event Handler for a control. In the case of a command Button, as you would expect, the default event is the “Click” event. To create the event handler for the button click event, double click the button in the form design window and the event handler method is automatically created for you. The cursor is automatically placed in the body of the event handler so you can immediately begin writing code! Give this a try. Double click on the button and you should see something similar to the following: (it may not be exact depending on your project settings).

The “btnHello_Click” handler is the code module (or in Visual Studio terms, the method) that will be executed when the user clicks the button. For this part of the assignment, we will just change the Text property of the label to provide a greeting message to the user.

At the insertion point between the start of the Event Handler and the “End Sub” type the following:

lblName.Text = “Hello my name is YOUR NAME” ‘type your name

You will notice that as you begin to type “lbl” the Visual Studio Intellisense will automatically try to find the controls with the name of the control. This is one reason you want to give each control a valid and meaningful name. It will be much easier to find the control reference in code. Also, using a data type abbreviation in front of the variable name helps narrow the search for your controls. When the control you want to reference is listed you can click on it in the list. Additionally, if the control is highlighted in the list, hitting the space bar will insert the full identifier name in the code.

Notice that when you hit the dot or period at the end of a control name, Intellisense will list the properties that you can modify in a dropdown list. You will see the “default” property (the property that is most commonly used) highlighted and you can either click on the property you want to change in code or, if the property is selected, you can hit the space bar.

While this may not seem like a major time saver in this program, professional programs may have hundreds of controls on a form. Because each control has dozens of properties, using Intellisense to find the controls and properties you are looking for will make you a more proficient programmer and help prevent build and compilation errors!

The result will look similar to the following:

Step 5: Correct Build and Compile Errors

We are now ready to run the program; however, if there are any build or compile errors in the code the program will not execute and you will need to correct these errors before executing. For example, in the following code the Text property of the label has been misspelled. You can tell there is an error in several ways.

1. Click Error List Icon
2. View Error List by selecting from the menu View -> Error List

Once the Error List is open, you see the error “Tet” is not a member of “System.Windows.Forms.Label,” and this error is on line 4 of the code. You can also tell that there is an error by the blue squiggly line under the error. If you double click on the error in the Error List, the statement with the error will be highlighted as shown below:

MS Visual Studio provides many tools to help you become a more efficient programmer. You have seen how to use Intellisense and this example illustrates how to use the Real Time compile tools. That is, Visual Studio attempts to compile each statement as it is typed so that errors are automatically listed in the Error List and highlighted by squiqqly lines in the code.

It is strongly recommended that you ensure each statement is free of errors as you type it in and DO NOT let multiple errors stack up in the Error List as you construct your program. The most efficient way to program is to correct errors as you make them! If you let the errors stack up in the Error List you will spend a lot of unnecessary time going back and fixing errors rather than simply correcting them as you go along.

If you have an error that you just can’t seem to correct on your own post a question to the Lab Help TDA Forum.

Step 6: Building/Rebuilding Your Code

Once your code is error free there will be no errors listed in the Error List and there will be no statements that have squiggly lines. At this point we want to Build the project which is how the actual machine-readable code is created. During the build process, any components required to execute the program are linked into a single “Executable” file.

In both Visual Studio Professional and Visual Basic Express, the project is automatically built each time you click the Run command. You can verify this by making sure the Status Bar updates with a “Ready” state.

However, if you want to build the project without executing the application in Visual Studio Professional, you select the Build -> Build Project Name. In Visual Basic Express, you would select Debug -> Build Project Name (where the Project Name is the name of the project). In either case, if the project builds successfully the Status Bar will provide a success message such as the one found in the lower left corner of the following screen shot.

If the build is successful, you can execute the program. If there are errors, the build will NOT be successful and you WILL NOT be able to execute the program. Once all errors are removed, the working program will look something like the following:

Step 7: Deliverables

1. Capture a screen print of your output [Do a PRINT SCREEN and paste into an MS Word document].
2. Copy your code and paste it into the same MS Word document that contains the screen print of your output.
3. Save the Word Document as CIS170A_Lab01_A_LastName_FirstInitial.
4. Zip up the Word Document along with complete set of project files into a single document.
5. Place deliverables in the Dropbox.
END OF PART A

Part B: Building a Letter Grade Project

Step 1: Open a New Project
Be sure to have gone over Part A several times before you begin your laboratory assignment. In this part of the lab you are asked to create a Visual Basic Windows Form application on your own.

Create a new project in VB.NET. Name your project CIS170A_Lab01_B_YourName.

Step 2: Program Description

Review the Syllabus section titled “Assignment Values and Letter Grades” and you will see the following grade scale:

Letter Grade Points Percentage
A 900-1,000 90% to 100%
B 800-899 80% to 89%
C 700-799 70% to 79%
D 600-699 60% to 69%
F 599 and below Below 60%

In this program, you will create a program that will display the percentage required to obtain a certain grade. There will be one button for each of the five grades, a Points label, and a Percentage label. When the user clicks the letter grade button the appropriate points for that grade will be displayed in the Points label and the percentage for the grade will be displayed in the Percentage label.

The form will also have a “Clear” button that when pressed will clear the Points and Percentage labels to empty strings so that no points or percentage values will be displayed.

The form will also have an “Exit” button that when activated will close the form.

The form will also have a label, or labels, that provide your name, the course title, week number, and lab title.

An example of what your program could look like is below. Note that you are free to place your controls in any layout that you believe makes sense.

Step 3: Build the Form

The following is a table listing the controls you should include in your final product along with their name and text properties.

Object Property Setting
frmGrades Text Grade Distribution
lblHeading Text Name, Course Title, Week Number, Lab Title
lblPoints Text Grade Points
lblPercent Text Grade Percent
btnGradeA Text A
btnGradeB Text B
btnGradeC Text C
btnGradeD Text D
btnGradeF Text F
btnClear Text Clear
btnExit Text Exit

You are free to experiment with colors and form design as you see fit. However, your application must meet the listed requirements.

Step 5: Implement the Event Handlers

Use the following as the design for your event handlers.

Control Name Event Task
btnGradeA Click Set lblPoints text to “900–1,000”
Set lblPercent to “90%–100%”

btnGradeB Click Set lblPoints text to “800 – 899”
Set lblPercent to “80%–89%”

btnGradeC Click Set lblPoints text to “700–799”
Set lblPercent to “70%–79%”

btnGradeD Click Set lblPoints text to “600–699”
Set lblPercent to “60%–69%”

btnGradeF Click Set lblPoints text to “599 and below”
Set lblPercent to “Below 60%”

btnClear Click Set lblPoints text to “”
Set lblPercent to “”
btnExit Click Close program (Hint: use “Me.close”)

Step 5: Deliverables

1. Capture a screen print of your output [Do a PRINT SCREEN and paste into an MS Word document].
2. Copy your code and paste it into the same MS Word document that contains the screen print of your output.
3. Save the Word Document as CIS170A_Lab01_B_LastName_FirstInitial.
4. Zip up the Word Document along with a complete set of project files into a single document.
5. Place deliverables in the Dropbox.
END OF PART B