Read Visual Basic Notes text version

CS 110 Visual Basic Notes

Introduction

Visual Basic (VB) is a computer programming software. You can write your own Windows programs to do just about anything you want to do. There are two steps to writing a Visual Basic program. Step 1: design the screen (the way you want your program to look) Step 2: design and write the code (what you want the program to do)

Objects: Everything in VB is an object. You'll start each new VB project with a blank window called a form. The form is an object. Then you'll add other objects such as buttons, labels, and picture boxes to your project. Deciding what objects you need is part of Step 1.

Properties: Each object has properties. Properties are things like size, color, font, and position. Different types of objects have different properties. For example: A horizontal scroll bar object has a property that determines the way the slider button moves when a user clicks the mouse between the button and end of the scroll bar. A text box object wouldn't have that property. Setting the properties for your objects is also part of Step 1. Naming Objects: Each object that you add to your project has a name property. Although VB gives each object a default name, the default name is not very meaningful. It's better to use name that tells what type of object it is and what it's used for. There are two ways that professional programmers name objects: 1. Prefix naming - this is often called "Hungarian" notation. Prefix naming uses both lowercase and uppercase characters. The first three letters of the name tell what type of object it is. The rest of the name begins with an uppercase letter and tells something about the purpose of the object. The term Hungarian notation was coined by some programmers who thought it looked like Hungarian writing.

Some programmers use words in the name with more than one capital letter. These are used to show relationships among processes or objects.

2. Postfix naming - The first part of an object's name begins with one or more words that describe the purpose of the object. The second part of the name is the type of object.

Postfix naming is now the standard being used by programmers at Microsoft for naming objects.

Throughout the projects in this book, we'll use Hungarian notation for naming the objects. Regardless of which method you choose for naming, stick to standard abbreviations and be consistent. It will make it easier for other people to understand what your project is doing.

The table below shows some of the types of objects in Visual Basic and how you name them in prefix and postfix notation.

Prefix Type of Object Form Button Text Box Label Horizontal Scroll Bar Vertical Scroll Bar Abbreviation frm btn txt lbl hsb vsb img Picture Box pic

Example Prefix Name frmConverter btnDisplay txtName lblHappyBirthday hsbMeters vsbYards imgMyPhoto picClipArt

Example Postfix Name ConverterForm DisplayButton NameTextbox HappyBirthdayLabel MetersScrollBar YardsScrollBar

ClipArtPictureBox

Other things that you should notice: o o Names of objects have no spaces in them. Certain letters in the names are capitalized. Type carefully!

1-2

Project 1 - Happy Birthday

Overview of the Project: This program will display the words "Happy Birthday !!!" on the screen. Step 1: Design the Screen The form will have a pink background. A label box will be used to display the words. The label box will have a blue background with white letters. There will be three buttons: an "Exit" button, a "Display" button, and a "Clear" button. Here's a sketch that shows where the objects will go:

form background = pink

Happy Birthday Label Background = blue Foreground = white

Display Button

Clear Button

Exit Button

Step 2: Design and Write the Code The user should be able to activate the buttons using the keyboard in addition to the mouse. You will add code to each button so that it performs the correct actions. Create the Project: Start Visual Basic: Click the START button, then choose Programs, then Microsoft Visual Studio.NET 2003, then Visual Studio.NET 2003 again (the one with the multicolored swirl).

Click the File Menu, then choose New, then Project. You should see the New Project Window as shown below:

Visual Basic Projects should be highlighted on the left and Windows Application should be highlighted on the right. If something else is highlighted, click to change it. Next to Name: delete WindowsApplication1 and type Project1. Next to Location: click the Browse button. Locate your USB drive and select the folder you want to save your project in. Click Open. On the New Project Window click OK.

WARNING: Do not save your project on the C drive! Save it on your USB drive.

2-2

Project1 -Happy Birthday

Quick "View" buttons

You should see a window similar to this one:

Toolbox

At the left, there is an area marked "Toolbox". It has a list of all of the different types of objects: Label, LinkLabel, Button, TextBox, etc.

If yo u d on't see the Toolb ox, lo ok for a b utton on the left ed g e tha t sa ys "To olb ox". Clic k the b utton, then m ove yo ur c ursor to the top o f the To olb ox a nd c lic k on the p ush p in.

Set Form Properties: Click on the title bar of the form where it says "Form1". On the right you should see the Properties Window with a list of the properties that belong to the form.

Project1 - Happy Birthday

2-3

Click the

button near the top of the Properties Window to put the properties in

alphabetical order.

Note: the na m e p rop erty sta ys a t the top of the list, even w hen the p rop e rtie s a re in a lp ha b etic a l ord er.

Find the Size property. Click in the area to the right of it and type 600, 480. Press Enter. (You can also change the size of the form by dragging one of its sizing handles.) Click in the area to the right of the Text property. Change the default text "Form1" to "Birthday" and press Enter. Notice how the title bar of the form has changed.

Rename the Form:

Find the Name property. It's always located at the top of the properties list. Change the default name to frmBirthday (It's Hunogarian notation, remember?) Since you just changed the name of the form, you must change the Startup Settings for your project. Click on the View Menu, then choose Solution Explorer. The Solution Explorer Window appears on the right, just above the Properties Window. Look for the name "Form1.vb" in the Solution Explorer. Right click on "Form1.vb", choose "Rename", then type frmBirthday.vb and press Enter.

2-4

Project1 -Happy Birthday

Right click on the name "Project1" and choose Properties. Here's what you should see:

Next to "Startup object:", click the down pointing arrow. Select the frmBirthday line. The display should now look like:

Project1 - Happy Birthday

2-5

If you forget to change the Startup object, you will see errors when you try to run your program.

Return to the Properties Window and look for BackColor. Click next to the word "Control" then click the down arrow button. Select the Custom tab and choose pink (top box in the 2nd column).

Add a Label:

There are different ways to place a label object on the form. One way is to left click the icon in the Toolbox, then move the cursor to the form. The cursor will change to a plus sign. Then you can drag your cursor to make the label as big as you want it.

Another way is to double click the icon in the Toolbox. This places the label box at the upper left corner of the previous object. In this case, it is the form. The object can then be dragged to the proper location and sized. Click the Label icon in the Toolbox. Move your mouse over to the Form. Drag to draw a rectangular area for the label, then release the mouse button.

Change Label Properties: Move to the Properties Window. Check the top to make sure it says Label1. Change the text property to "Happy Birthday !!!". Change the name property to lblBirthday Click on the BackColor property. Click the down arrow button, click the Custom tab, and select a blue color. Click on the ForeColor property. Click the down arrow button, click the Custom tab, and select white. Click on the Font property. Click the ellipsis button (...) and select Lucida Calligraphy, Bold, and 36 point. If you cannot find Lucida Calligraphy, select a different font style instead.

2-6 Project1 -Happy Birthday

Click on the TextAlign property. Click the down arrow button and select the middle, center box (2nd row, 2nd column). Adjust the size of the label by dragging the sizing handles on the edges so that the screen looks like this:

Save Your Work: Now would be a good time to save what you have done so far. Click the File Menu and choose Save All.

Add the Buttons: Click the Button icon in the Toolbox and drag an area for the new button on the lower left side of the Form. Change the name property to btnDisplay

Project1 - Happy Birthday

2-7

Change the BackColor property to gray. Change the text property to &Display. Do not forget the "&." The ampersand places an underscore beneath the D and allows the user to activate the button by typing <ALT> D. The screen should look like this:

Add the 2nd Button: Right-click the Display button and choose Copy. Move the cursor to the center of the Form. Right-click and choose Paste. You may need to drag the new Button to align it with the Display button. Change the text property of the new Button to &Clear. Change the name property to btnClear

2-8

Project1 -Happy Birthday

Add the 3rd Button: Move the cursor to the right side of the Form. Right-click and choose Paste. You may need to drag the new Button to align it with the Display and Clear buttons. Change the text property of the new Button to E&xit. This will place the underscore beneath the "x." Change the name property to btnExit

The screen should look like this:

Save your work again. Click the File Menu and choose Save All. That's the end of Step 1: Design the Screen. Now it's time to move on to Step 2: Design and Write the Code.

Project1 - Happy Birthday

2-9

Step 2: Design and Write the Code We'll start with the Exit button since it's the shortest code. Double click on the Exit button. The Code Window will open. The cursor is automatically placed between two lines of code that Visual Basic writes for you. The first line starts with "Private Sub btnExit_Click..." and the second line says "End Sub". Don't change those lines. Type "end." See the screen below. "end" is the code for exiting the program. Press Enter. Visual Basic automatically capitalizes the command and changes the color.

Minimize the toolbox by clicking the "push pin". That way you'll be able to see more of the Code Window. Near the top of the Code Window, there is a drop-down list that says btnExit. (The tip will say "Class Name" when you point to it.)

2-10 Project1 -Happy Birthday

Click the down arrow and select btnClear. To the right of the Class Name area, there is another area that says "Declarations" (The tip will say "Method Name".) Click in the arrow to the right of "Declarations" and elect "Click."

The screen should look like this:

Click to place the cursor between the lines that say "Private Sub btnClear_Click..." and "End Sub". Type lblBirthday.text ="" and press Enter. (That's two double quotes with nothing in between.) Note: When you type lblBirthday and the period, a pull down menu with properties will appear. The Text property should be selected. You can either continue typing the rest of the command or you can choose Text from the list and type the rest of the line.

Project1 - Happy Birthday

2-11

This line of code will erase the contents of the text property in the lblBirthday label. When the program is running and the user clicks the Clear button, the words "Happy Birthday !!!" will disappear.

Type carefully! If you press Enter with a typo in the code, you will see wavy blue underlines under the part with errors. Fix the errors before you go on.

The screen should look like this:

Click on the down arrow next to the Class Name, btnClear, and select btnDisplay. Click on the down arrow next to the Method Name, Declarations, and select Click. Click to place the cursor between the lines that say "Private Sub btnDisplay_Click..." and "End Sub".

2-12

Project1 -Happy Birthday

Now type lblBirthday.Text = "Happy Birthday !!!" (Don't forget to type the quotes.)

The screen should look like this:

Close the Code Window by clicking the gray X just above and to the right of the Method Name. Save your work. Click the File Menu and choose Save All. That's the end of Step 2: Design and Write the Code. Now it's time for testing.

Project1 - Happy Birthday

2-13

Testing Your Program To run the program, click the Debug menu and choose Start (or just press the <F5> key). This will build and run the program.

When the program is running, the screen look like this:

Test the Display button and the Clear button by clicking each button to see if it works. Test the Display button with Alt-D then test the Clear button with Alt-C.

If a button doesn't work properly, click the red X button at the top right corner of the running program. Go back to the steps for the button that didn't work and fix it.

2-14

Project1 -Happy Birthday

Test the Exit button by clicking it. To run the program again, press <F5> again. Test the Exit button with Alt-X. Save your work again. If you're working in Jacobs Hall 204, leave your project open and sign up to be graded. If not, click the File Menu and choose Close Solution. When you need to open the project again later, click the File Menu, then choose Open Solution. Select your USB drive, double-click the folder Project1, then double-click the file Project1.sln. (See the screen below.)

Warning! When opening a Visual Basic project in the lab, DO NOT use the "Open an Existing Project" list on the Start Page. Use the File Menu as described in the previous paragraph.

Project1 - Happy Birthday

2-15

Congratulations! You have just completed your first Visual Basic project!

Important: When you're ready for grading, start Visual Basic and open the project you want to have graded before you sign up to be graded.

Also, make sure you have read the "Grading Standards" for the assignment.

2-16

Project1 -Happy Birthday

Project 2

Overview of the Project: This project is very similar to the previous project. It has a Label, a PictureBox, and one Button. Step 1: Design the Screen The font color in the Label is blue. When the cursor enters the label box, the text will appear in white letters. An appropriate picture should be added in the upper left corner of the form.

PictureBox

Form: name = frmBirthday background = pink

Label: Text = blank name = lblBirthday Background initial = blue Background change = transparent Foreground = blue

Exit button

Step 2: Design and Write the Code

The text property in the Label should begin as a blank. When the user moves the mouse over the Label, the words "Happy Birthday !!!" should appear. Create the Project: Start Visual Basic: Click the START button, then choose Programs, then Visual Studio.NET 2003, then Visual Studio.NET 2003 again (the one with the multicolored swirl). Click the File Menu, then choose New, then Project. Next to Name: delete WindowsApplication1 and type Project2.

Next to Location: click the Browse button. Locate your USB drive and select the folder you want to save your project in. Click Open. On the New Project Window click OK.

Set Form Properties: Click on the title bar of the Form. Make the Toolbox visible and put the Properties list in alphabetical order. Change the Size of the Form to 600, 480. Change the Text property to "Birthday". Change the BackColor property to pink. Change the Name property to frmBirthday (Remember, the name property is at the top of the properties list.) In the Solution Explorer, rename Form1.vb to frmBirthday.vb Change the Startup Settings so that frmBirthday is the Startup object. (If you don't remember how to do this, refer back to Project 1, page 2-5.)

Add a Label: Click the Label icon in the Toolbox. Move your mouse over to the Form. Drag to draw a rectangular area for the label, then release the mouse button. Change Label Properties: Move to the Properties Window. Check the top to make sure it says Label1. Click next to the Text property and delete the default text "Label 1". This will make the label blank. Change the name property to lblBirthday

3-2 Project2 - Happy Birthday with a Picture

Change the BackColor property to blue. Change the ForeColor property to white. Change the Font property to Lucida Calligraphy, Bold, and 36 point. Change the TextAlign property to MiddleCenter.

The screen should look like this:

Save Your Work: Now would be a good time to save what you have done so far. Click the File Menu and choose Save All. Add the Button: Click the Button icon in the Toolbox and drag an area for the new button on the lower left side of the Form. Change the name property to btnExit

Project2 - Happy Birthday with a Picture

3-3

Change the BackColor property to gray. Change the text property to E&xit. Do not forget the "&." The ampersand places an underscore beneath the x and allows the user to activate the button by typing <ALT> X. The screen should look like this:

Download the image file: Open Internet Explorer (don't close Visual Basic) and go to the web site at www.cs.nmsu.edu/~esteiner/cs110 Click on the link "Student Files for Lab Assignments". Scroll down until you see the section labeled "Lab 9". Right-click on the file name "birthday.wmf". Choose "Save Target As". Select your USB drive and the folder you want to store the file in. Click Save. Close Internet Explorer and return to Visual Basic.

3-4

Project2 - Happy Birthday with a Picture

Add the PictureBox: Double-click the PictureBox icon in the tool box. Drag the PictureBox frame to the upper left corner of the form and size it appropriately. Change the BackColor property to white. Change the Name property to imgBirthday For pictures it is important to select the proper size mode. The SizeMode property has four settings:

1. "Normal" setting means the upper left corner of the image is placed at the upper left corner of the PictureBox frame. If the PictureBox frame is smaller than the image, only part of the image will appear. 2. "StretchImage" setting means the image is sized to fit the PictureBox frame. If the image is larger than the frame, the image will be shrunk to fit the frame. If the image is smaller than the frame, the image will be enlarged to fit the frame. 3. "AutoSize" setting means the size of the PictureBox frame is changed to match the size of the image. If the image is larger than the frame, the frame will be enlarged. 4. "CenterImage" setting means the center of the image will appear in the center of the frame. If the image is larger than the frame, only part of all the image will appear.

Set the SizeMode property to StretchImage. Click on the Image property, click on the ellipsis button. Select your USB drive and the folder where your CS 110 files are located. Select the file birthday.wmf then click the Open button. That's it for designing the screen. Save your work.

Project2 - Happy Birthday with a Picture

3-5

The screen should look like this:

Add Code to the Exit Button Double-click on the Exit button to open the Code Window. Type end between the "Private Sub ..." and "End Sub" lines just like you did in project 1. Add Code to the Label Click the down arrow next to the Class Name area (shows btnExit) to see the list of objects. Select lblBirthday Click the down array next to the Method Name area (shows Declarations). Select MouseEnter. At the cursor, type lblBirthday.Text = "Happy Birthday !!!" Click the down array next to the Method Name area and select MouseLeave. At the cursor type lblBirthday.Text = "" (That's two double quotes with nothing in between.)

3-6

Project2 - Happy Birthday with a Picture

The code window screen should look like this:

Press F5 to run the program. Test to see whether the code works or not. When you move the mouse over the Label, the words Happy Birthday !!! should appear in white letters. When you move the mouse out of the Label, the words should disappear. Click the Exit button to exit from running the program. (If your Exit button doesn't work, you can also click the red X at the top-right corner of the form. If your program does not work correctly, check your typing. Fix the error(s) and run the program again until it works. This is called "debugging".

Each time you run your program, make sure you exit from running it before you try to make any changes.

Project2 - Happy Birthday with a Picture

3-7

Add Code to the PictureBox Now add code to the PictureBox so that the same thing happens when the mouse enters or leaves the PictureBox. To do this, double-click on the PictureBox to open the Code Window. Select MouseEnter from the Method Name list. Type the code lblBirthday.Text = "Happy Birthday !!!" Select MouseLeave from the Method Name list. Type the code lblBirthday.Text = "" Run the program again and make sure the PictureBox works correctly. Save your work. If you're working in Jacobs Hall 204, leave your project open and sign up to be graded. If not, click the File Menu and choose Close Solution.

3-8

Project2 - Happy Birthday with a Picture

Information

Visual Basic Notes

28 pages

Report File (DMCA)

Our content is added by our users. We aim to remove reported files within 1 working day. Please use this link to notify us:

Report this file as copyright or inappropriate

562523


You might also be interested in

BETA
Microsoft Word - LotusScript for the Terrified R5 Update.doc
Mercury QuickTest Professional Tutorial
Oracle JHeadstart 11g - End-to-end Tutorial
Walkthrough: Creating a Workflow with Association and Initiation Forms
Microsoft Word - F10_final.doc