FIT 100

Lab 7:  Writing and Running Your First

Visual Basic Program

Winter 2002

Reading to for Lab 7:

·         Chapter 2 of Computer Programming Fundamentals with Applications in Visual Basic 6.0 (p. 27-50)

·         Chapter 3 of Computer Programming Fundamentals with Applications in Visual Basic 6.0 (p. 59-67)

 

Introduction:

The purpose of this lab is to introduce you to the VB Integrated Design Environment (IDE) and to create a simple VB project. The IDE is the programming environment where you create applications. A VB project is the collection of files created when you are working on an application. Your TA will go through this environment with you in lab.

 

You will have time to start working on this exercise in lab. You will demonstrate your working program to your TA at the end of lab or at the beginning of the next one if time runs out.

 

Objectives:

  1. To become familiar with the development environment for Visual Basic
  2. To work with programming objects and be able to identify them by their name properties.
  3. To create a simple working program.

 

TO DO: 

  1. Create a folder called Lab7 on the local Drive

  2. Open up Visual Basic 6.
    Start>Program Files>Microsoft Visual Studio 6.0>Microsoft Visual Basic 6.0

 

When you start VB you will be presented with a “New Project” dialog box. Select the default project type, “Standard EXE”.

 

After selecting the project type, the interface (the IDE) will be displayed.  This typically contains the menu bar, the tool bar, the toolbox, and three other tool windows: Form, Project, and Properties.

Menu Bar

 

Tool Bar

 

ToolBox

 

Project Window

 

Properties Window

 

Form Window

 

 

 
 

 

  1. Rename your project:
    1. Each time you begin a project, the default name, Project1, appears at the top of the form. To change the name, choose
      Project> Project1 Properties,
      and then type in your name as the new project name.

 

  1. Rename the form:
    1. When working with objects in VB, it is important to realize that there are many properties associated with them. Even the form on which you design your application is an object (and has over 50 properties that can be set).

 

    1. To change the form name, click on the Properties window (or press F4) to bring it into focus. Name is the very first property. Select this property field and type in “frmFirst”.

 

  1. Change the title bar of your form:
    1. Notice that the title bar of the form still says “Form1”. To change this text, select the Caption property and type in “My First VB Program”.

 

  1. Make the form a little bigger on your screen
    1. Change the size by clicking on one of the corners and dragging outwards.

 

  1. Use the toolbox to add the following objects to your form:

·         A Text Box

·         A Label

·         (4) Command Buttons

Do NOT create a controlled array.  If you create one command button and then copy and paste it onto the form, the question of creating a controlled array will pop up.  Say No.

To add each object, click once on the tool in the tool box.  Then go to the form and hold down the right mouse button as you “draw” the object onto the form.

 

 

  1. Change the names of each of the objects and their captions. 


Follow the same directions for changing the form name.

·         Name the Text Box: txtATextBox
Change the Text to: This is a text box

·         Name the Label lblALabel:
Change the Caption to: This is a label

·         Name the first Command Button: cmdClick
Change the Caption to:  This is what you click!

·         Name the second Command Button: cmdGreen
Change the Caption to:  Green!

·         Name the third Command Button: cmdYellow
Change the Caption to:  Yellow!

·         Name the fourth Command Button: cmdVisible
Change the Caption to:  Visible!

 

 

  1. Change the background color for each of the objects, including the form:

 

    1. Go through the properties of each object, including the Form, and change the background colors using the Backcolor property and work with the Palette tab to select a color.

·         Make the frmFirst form blue

·         Make the cmdClick button purple (NOTE: You must first change the Style property to Graphical)

·         Make the cmdGreen button green (NOTE: You must first change the Style property to Graphical)

·         Make the cmdYellow button yellow (NOTE: You must first change the Style property to Graphical)

·         Make the cmdVisible button lilac (NOTE: You must first change the Style property to Graphical)

·         Make the lblALabel label red

 

  1. Change the font style of each object that has a caption to something different
    1. Using the Font property, change the properties so that it uses your favorite font on all of them.

 

  1. Run the program
    1. Now that you have added all of these objects to your form, let’s “run” the program to see what it looks like.

 

    1. Click on the Run icon on the Tool Bar, or go to Run>Start… on the menu bar.

 

 

 

    1. Try clicking the cmdClick button.  Notice that you can click the button, but nothing happens.  That is because we have not added any code into our program so that something will happen when a user clicks the button.  You will learn more about the event handler procedures that are used to control a program in the next lab.

 

    1. Click on the Stop button to end the program.

 

Now that you have had time to get familiar with forms and other objects in the Visual Basic IDE, we’ll create a little program that uses a bit of code to do display the date and time in our form.

 

  1. Save your project to the Lab7 folder on the local drive
    1. Notice that you are prompted to save not just the form, but the project as well.

 

    1. Since you already named our form frmFirst, you can just click OK to save it.

    2. You have named your project with your name.  Your name should come up in the window.  Click OK to save it.

    3. Your entire project, consisting of the form and the project space, is now saved.  You will have 2 files associated with your project.  One for the form and one for the project.  The extension on a form file is .frm and the extension for a project file is .vbp.

 

You will use this project in your next lab, so make sure you ftp your work to your Dante account, or save it to disk.  When saving, upload the entire Lab7 folder you created to hold this work to your Labs folder on Dante.

 

  1. Close the frmFirst form.

 

Creating ExactTime:

A digital clock with the date on the window bar:

This Time. This is a simple digital clock program with the date on the window bar. Your goal in writing the digital clock program is to create a simple VB6 program. The essential features are:

·         Change the form name.

·         Change the caption on the window bar.

·         Place and use a label control.

·         Place and use a timer control.

·         Customize the window to be attractive.

·         Save the project and form files.

 

Each of these features will be discussed below. The ExactTime application has the following window interface:

 

         

The VB environment allows you to change the properties for each object in the properties window.  However, if you just use the properties window to make those changes (i.e. changing the background color, etc.) your program won’t be very exciting.  We can attach code to a particular object event so that at run-time (when the program is executed by a user), it will react in pre-coordinated ways.

 

As stated above, there are many properties and events associated with objects in VB.  One of the events that occur whenever someone opens up a form and runs it is the FORM LOAD event. 

  1. Open a New Project in Visual Basic:
    1. File>New Project…(your first project, that you have saved, will now be closed.  Select yes to save changes)
    2. Double click on Standard EXE

 

  1. Change the Project name to ExactTime and the Form name to frmClock
    1. (go to Project> Project1 Properties). 
    2. Now, change the form name.  This time (no pun intended), change the name property for the form to frmClock. 

 

Do not change the caption property right now-we’ll deal with that in a moment.

 

  1. Use the Tool Box to place a label on the form. 
    1. Name the label lblTime. Select a better font, and enlarge it to approximately 20 points.

 

To change the caption of the form, you will do something a little different than just changing text in the properties window.
The caption on the form’s window bar is to be assigned the current date at the time the window is loaded. Therefore, the "Form_Load" event should be customized to assign the date to the caption.

 

Attaching code to an object:

 

  1. Open the code window for the form
    1. Go to View>Code.  Or, simply double click on the Form object.

 

Your code window will look similar to the above graphic.  The drop down menu on the left allows you to select the object you wish to work with (your form).  Objects will usually be listed by their Name property EXCEPT the form object, which will always be identified as Form.

The drop down menu on the right is the list of events and procedures that can be associated with the various objects in your program. 

 

  1. Select the Form object from the left drop down menu and the Load event from the right drop down menu.

 

 

Notice that once you select each of these options from the list, the following text appears.  This is standard in VB.  By default, when you select an object and select an event procedure, the first and last lines of code that you need to have for that procedure are added in for you.  You will type in all relevant code between those lines.  Now, add in the code that you need from step 20.

 

  1. Customize the Form_Load Event
    1. The following code will do that:

 

Private Sub Form_Load()

frmClock.Caption = Date


End Sub

 

Date is a function that returns the current system date in the default format mm/dd/yy. When the form is loaded, the current date will appear on the window bar.

 

 

  1. Save your project to the Lab7 folder. 
    1. You have already named the project and form so you should be able to click OK to save both with the correct names:


ExactTime for the project
frmClock for the form

You will be prompted to save the form first, and then the project.  When you have saved both, two files are created:  ExactTime.vbp and frmClock.frm.

 

  1. Run your program to see if the date shows up in the form caption. 
    1. When you see that it works, go to the next step

 

  1. Stop the program to add more objects:

 

·         Use the Tool Box to place a Timer somewhere on the form (it will be hidden when you run your program). 

·         Change the Name property of this control to tmrTime.

·         Set the interval property to 1000, i.e. the timer should "go off" every 1000 milliseconds (1 second).

 

  1. In the code window, Select the tmrTime object from the left drop-down menu and the Timer event from the right menu. 

 

The time event we create should cause the caption on the label to be set to the computer’s time.

 

  1. Add the following code to do that:

 

Private Sub tmrTime_Timer()

 

lblTime.Caption = Time

 

End Sub

 

REMEMBER!!!! VB adds in the start and end lines of code for the event, so you should only have to type one line of code!!!

Time is like Date, a function that returns a variant indicating the computer system time in HH:MM:SS format.

What happens is this:

The timer "goes off" every second. That event causes the procedure "tmrTime" to be called. It changes the caption of the label to the current time. Whenever anything on the form is changed, the window is "repainted," i.e. redisplayed. Since most of the information is unchanged and remains in a fixed position, the clock appears to be ticking.

 

  1. Change the properties of the window to be attractive.
    1. This requires you to:

·         Change the form’s background color.

·         Shrink the window so that it nicely frames the time symbols.

·         Change the background color of the label to match the background of the window.

·         Change the color of the font of the label (ForeColor Property) to be attractive and to contrast nicely with the window’s background.

·         Set the starting position property of the form to be the center of the screen. (Use the Form Window in the lower right of your screen)

 

  1. Save your project again.

 

  1. Compile your program. 

 

    1. Go to File>Make ExactTime.exe. That operation will make another file in the directory where you have stored your ExactTime project.
    2. This is the ExactTime.exe file. To run your program, go to Windows Explorer, to the Lab 7 folder where it is saved and double click on the ExactTime.exe.

 

  1. FTP your work to a folder on your Dante account. 

 

You DO NOT need to put these projects inside your public_html folder.  They can go in a folder that you designate for Lab work or Project work.

 

  1. Show your executable to your Instructor before leaving or at the beginning of the next lab.