Module 5 Objectives

By the end of this module, you should be able to:

Distinguish between a command line interface and a graphical user interface.

Use the basic features of the Windows operating system.

Use your pointing device to manipulate an open window.

Open, close and name files.

Explain how event-driven programming works.

Distinguish between an interface and its code.

Describe the three steps involved in creating a Visual Basic project.

In the Beginning

Up until the mid 1980s, users interacted with

the computer's operating system by entering

commands at the command line. This was

known as a command line interface, or CLI.

MS DOS, Microsoft Disk Operating System,

used a command line interface. The user

controlled the computer with commands such

as dir typed at the command line. Dir was the

command used to display a list of files. The

image shows a command line interface

program that uses text to ask the user a series of questions, then arrives at output based on the

user's responses.

There were other user interfaces existing at this time as well. Programs such as word

processors used interfaces but the interfaces were often difficult to work with. There was very

little consistency from one program to another. Generally, programs were not "user-friendly."

It was not long before both users and developers

realized that more powerful and user-friendly

applications were needed.

Improvements to computer hardware, along with the

need for better applications, brought about the

development of the operating system GUI, or

graphical user interface. The GUI-based operating

system allowed the user to communicate with the

computer using a keyboard and mouse, executing

commands at the click of a button. Microsoft

Windows, a commonly-used operating system, is

probably the operating system GUI that you are most

familiar with.

The Microsoft Windows interface allows the user to

interact with the computer and its programs through

a window. A GUI displays pictures, called icons, in these windows. Icons are used to perform

various tasks. Menus provide easy access to commonly-executed commands. With this

development, multitasking became possible. Multitasking allows for more than one application

to run at the same time, each in a different window

In the Beginning (continued)

Since the late 1980s, Microsoft Windows and the Macintosh operating systems have been the

platforms of choice for most personal computer users. These Windows-based GUI operating

systems and the programs that run within them offer many advantages, including:

The ability to use the entire computer screen for single or multiple applications

Common functionality from one application to another—menus, for example, generally work the same way in all applications

The ability to use colour and graphics

The ability to use a variety of input devices

Many of today's software applications are Windows-based. That is, they run on your screen in a

window.

A person who develops software for Windows-based applications must become very familiar

with a Windows-type operating system and how it works.

The Windows Operating System

Microsoft Windows gets its name from the way in

which it organizes your screen. The viewable

area of your screen is called a window. When

the Windows operating system is running, the

window that first appears on your screen is

referred to as the desktop.

Think of the desktop window as your own

desktop. Well-organized people do not keep all

their papers and files in one big pile. Usually, they

would organize them into stacks of related

documents. Windows works the same way,

organizing groups of related materials into

separate "piles" on the desktop. The Windows desktop starts out with several of these "piles,"

each assigned a name by default—My Documents, My Computer, My Network Places, etc.)

Each of these piles is represented on the desktop by an icon. The user can add additional icons

to the desktop as well.

The three most important features of the Windows desktop are:

Start Button: Clicking the Start button will display a list of commands that perform specific tasks and functions such as shutting down the computer, finding files and opening programs.

Task Bar: The Task bar displays the name of every open program. Clicking on a program name on the Task bar displays or minimizes that program's window. The Task bar also provides an easy and convenient way to switch between open programs and windows.

Icons: Desktop icons are used to represent files and programs. Double-clicking on icons will open the file or program.

The Windows Operating System (continued)

Many programs that you install on your computer will also be represented by an icon on your

desktop. For example, an icon representing a shortcut to Microsoft Visual Basic (VB) 2010

Express is placed on the desktop during the installation procedure. When you double click the

VB icon, Visual Basic opens and runs in a window.

It is possible to double-click on several desktop icons to have all the corresponding windows

open at the same time. After a window has been opened, you can manipulate the window and

its contents using various combinations of clicking, double-clicking and dragging.

It is important to know the basics of the Windows operating system before you can master

Visual Basic. Among other things, you need to be comfortable with manipulating a mouse and a

window, understand how to work with menus and how to open and save files.

Working with Windows

Having worked with the Windows operating system and other Windows-based software

applications such as a word processor like MS Word, you are probably quite familiar with the

concept of a window.

A typical window contains the features shown in the image below.

Working with Windows (Continued)

In this lesson, we will look at key features of an open window.

Title Bar

The dark-coloured bar across the top of the window, just below the window's top border

Displays the name of the window or application open in that window, along with the minimize, maximize and close buttons

Active Window

Although it is possible to have multiple windows open at the same time, only one window is active at any one time.

The active window is the window that is on top—the one you are currently working in.

The active window is indicated by a highlighted, or vividly-coloured, title bar, as shown.

Dragging A Window

A window can be moved to another location on your screen by placing the mouse pointer over the title

bar, pressing and holding down the left mouse button and then dragging the window to the desired

location.

Menu Bar

Located at the top of an application window, just below the title bar

Displays the names of pull-down menus and their related commands

Toolbar

Located just below the menu bar

Contains icons representing common tasks like saving, printing, cutting and pasting

Toolbar tasks can also be performed from the menu bar.

Status Bar

Shows the current status of the active window

Using Your Pointing Device

Programs such as Visual Basic, which is designed to run under Microsoft Windows, are easy to

use once you learn some basic Windows terminology and a few basic techniques. As you have

learned, input devices allow you to communicate with the computer or "put information into the

computer." Your input tells the computer what you want it to do.

The keyboard and the mouse are the two main input devices that you will use. The mouse is a

hand-held input device that controls the movement of the pointer that you see on your screen.

The mouse is used to manage objects on the screen.

As we continue with this lesson, we will look at:

Mouse pointers

Mouse actions

Name the Features!

A typical window contains many features. Do you remember what they are? Try to identify the

three features that are highlighted below. Complete each statement by choosing the correct

feature from the drop-down menu. Don't forget to check your feedback to see how you did!

That's right. Clicking the Start button will display a list of commands that perform specific tasks and

functions such as shutting down the computer, finding files and opening programs. Please continue.

That's right. The Task bar displays the name of every open program. Clicking on a program name on the

Task bar displays or minimizes that program's window. The Task bar also provides an easy way to switch

between open programs and windows. Please continue.

That's right. Desktop icons are used to represent files and programs. Double clicking on icons will open

the file or program.

Working with Menus

The Menu Bar is displayed at the top of an open window, just below the Title Bar. Each word on

the Menu Bar names a pull-down menu from which different commands can be selected.

Clicking on the menu name will display a list of commands on that menu.

The following image shows the File menu that is displayed when File is selected from the Menu

Bar. Clicking outside the menu list or pressing the Esc key removes the menu from the screen.

Some commands on the menu, such as the Save As command, have an ellipsis (…) following

the command name. The ellipsis means that a dialogue box will appear when this command is

selected. The dialogue box will ask for more information before executing the command.

Clicking a right-pointing arrow after a menu command will reveal a group of submenu items.

Clicking on one of these submenu items will execute additional commands.

Event-driven Programming

Applications that run in a Windows environment are event-driven. These programs do not

begin execution at line one of the code and end at line 500. The user controls "how the code is

executed," not the programmer.

The user can do many things—click a button, call for a menu command to be executed or even

open another program while the current one is running. As the Windows-based programmer,

you must plan for all of the possibilities.

Whenever the user does something in the Windows environment, like clicking the mouse,

moving the mouse or clicking a button on a form, Windows sends a message. The Windows-

based program interprets the message as an event. Each object (a button, for example) in the

program's interface has several events. As the programmer, you must add code to an event to

make the object do something when Windows sends the message.

An event-driven program waits for an event to occur before executing any code and then only

executes the code for that event. An object's events are also called that object's procedures.

Everything in Windows-based programming is set up in procedures.

Programming in a Windows Environment

Feature Used For

Windows (sometimes called forms) Containers for presenting a variety of

programs—they contain a variety of

menus and submenus that are consistent

from user interface to user interface Message boxes

Dialogue Boxes

Graphical objects (including buttons, text boxes,

list boxes, picture objects)

To collect and present data in the

windows

Other objects such as timers, printers, files Behind-the-scenes objects that are

managed by the operating system and

provide common resources for all

programs

Event-driven programming code Program statements that execute in

response to an event that can be

generated by the user or the system itself

The key to all Windows-based programs is that they all work the same way.

In all Windows-based programs:

Menus and submenus are consistent

Objects work the same way—by clicking, double-clicking, dragging and dropping.

There are interfaces for common tasks such as opening and saving files or managing printer operations.

Where Does Visual Basic Fit in All of This?

Visual Basic is used to create applications for Microsoft Windows. You will be working

with the Visual Basic Integrated Development Environment (IDE.) It includes tools that

allow a programmer to create an application that has features similar to other Windows

applications. The Visual Basic language you will learn is a descendent of the BASIC

language, which was developed in the 1960s by John Kemeny and Thomas Kurtz.

Each Visual Basic program consists of an interface and program code. The Graphical

User Interface, or GUI (pronounced gooie), is what appears on the screen when the

application is running. The program code is the set of instructions that tells an

application's objects how to behave. GUIs have revolutionized the computer industry.

Instead of the old command prompt, users have at their fingertips a desktop filled with

icons that provide a visual guide to what the program can do.

In this course, you will learn how to create the user interface of Visual Basic applications

and then how to write the code that tells the computer what the application should do.

Where Does Visual Basic Fit in All of This? (Continued)

One of the key elements of planning a Visual Basic application is deciding what the user sees—

in other words, designing the screen or interface. For the beginning programmer, this is a fun

and easy way to begin.

As the programmer, you must decide such things as:

How large a window the application should use

Where you will place the buttons and other objects

How you will collect input from the user

How you will display the output

What kind of warning boxes you will need

After you have designed the interface, you must write the code that will make it work!

Objects in Visual Basic recognize events like mouse clicks but how the objects respond to these

events depends on the code instructions that you, as the programmer, write. These instructions

must always be written in order to make objects respond to events. For example, if your

interface has a button, you must write the code that will make something happen when this

button is clicked.

Visual Basic programming is different from conventional programming. In conventional

programming, the code executes line by line until the end of the program. In Visual Basic

programming, the code executes in response to an event and only the code for that particular

event is executed.

Projects vs. Programs

Most of the programming instructions in Visual Basic tell your program how to respond to events

like mouse clicks. The programming instructions are written in what Visual Basic calls event

procedures. Everything executable in a Visual Basic program is either in an event procedure or

is used by an event procedure to help the procedure carry out its job.

Visual Basic applications are called projects, not programs.

A project includes both the:

Interface

Code

The following summarizes the steps you must take to create a Visual Basic project:

1. Design the interface (form window.)

2. Determine which events the objects on the interface should recognize.

3. Write the event procedures for those events.

Once a Visual Basic project is running:

1. Visual Basic monitors the interface to detect when an event occurs.

2. When an event occurs, Visual Basic examines the code to see if you have written an event procedure for that event.

3. If the correct event procedure is found, the code is executed and then Visual Basic goes back to monitoring the interface.

4. If the correct event procedure is not found, nothing happens. Visual Basic monitors the interface and waits for the next event.

These steps cycle continuously until the application ends. Usually, an event must happen before

Visual Basic will do anything. Event-driven programs, therefore, are reactive more than active.

This is what makes them user-friendly.

The following is a short list of terms that you will become familiar with in learning about Visual

Basic and Windows-based programming:

Forms

Controls

Objects

Properties

Events

Procedures

Let's Review!

Module Assignment

There is no assignment for module 5.

Module Test

You must also write the quiz for Module 5. You may do this either before submitting your

assignment or after your assignment has been submitted.

Module 6 Objectives

By the end of this module, you should be able to:

Open a new Visual Basic project.

Identify and describe the purpose of each of the main parts of the Visual Basic development environment.

Customize the Visual Basic workspace to your own preferences.

Introduction to Visual Basic

At first, Visual Basic can seem very confusing. When you open Visual Basic for the first time you

will wonder what all those things on the screen are for. Fear not!

In this unit, you will learn about the Visual Basic development environment—its windows, menus

and tools—and how to customize this environment to your own preferences so that you can

work efficiently.

Once you have completed all the Visual Basic modules in Computer Science 110, you will have

the skills necessary to write useful and interesting applications that can run in the Windows

operating system.

The Visual Basic development environment contains all the resources and tools you need to

build Windows-based programs.

Your First Look at the Development Environment

Parts of the Visual Basic Development Environment

The Visual Basic Development Environment contains the following programming tools

and windows that you will use to construct your Visual Basic programs.

Menu Bar

The Menu bar provides access to the Visual Basic commands.

Standard Toolbar

The toolbars provide quick access to things that are found in the menus. There are

several specialized toolbars. The Standard Toolbar is shown here.

Project Window

The Project Window allows you to access the different parts of your project, such as its

forms. You have instant access to any part of your project at any time through the

Project Window.

Properties Window

The Properties Window lists the properties or characteristics of your form or an object

on your form. You can set the properties of the form, or an object on the form, in the

Properties Window.

Form Window

Visual Basic creates Windows programs. The user interface for Windows programs is a

window. Each window in the program that you create is created on a form. The Form

Window appears as a dotted grid. The grid will help you edit and align different objects

on the form. Think of the form as a blank window on which you will draw the part of the

program that the user sees - the interface. When you write the codes that will make the

objects work, you will use the Code Window. The Code Window is not shown in this

image.

Toolbox

The Toolbox controls, represented by icons, are used to create objects, such as CommandButtons and

TextBoxes, which will be placed on the form. Toolbox controls are used to draw the objects that appear

on the form. All of the controls that you can use in your project are in the toolbox.

Moving and Resizing Windows

The Visual Basic programming environment can be pretty crowded with all these windows and

tools available at the same time. You can control the shape and size of each element in the

development environment by moving and resizing any of the tools or windows.

Moving Windows and Tools

To move a window, the Toolbox or a toolbar, click and drag on the title bar for the element you

wish to move.

Resizing Windows

If you want to see more or less of a window, drag one of its borders to resize the window.

Closing and Restoring Windows

Closing Windows

The Project Explorer Window

The Project Explorer is an important window. You will need it to get from one part of your project

to another as your project grows in size. While you are designing the user interface, or the form,

the Project Explorer is usually in the way and can be closed. Close the Project Explorer window

by clicking the Close button in the upper right corner of the Project Explorer window.

The Properties Window

You need the Properties window to set the properties of the form and all of the objects that you

place on the form.

The Toolbox Window

The toolbox needs to be available while you are designing the user interface. Once you have

placed all your objects on the form using the toolbox controls, it is a good idea to close the

toolbox. You will then have a better view of the form for setting properties and positioning the

objects.

Restoring Windows

You can restore closed windows in one of two ways:

Using View on the Menu bar

Each of the windows listed on the previous screen can be restored by using the View menu. On

the Menu bar, click View and select the window you wish to restore from the drop-down list, as

shown on the previous page.

Using the Toolbar

On the right side of the Standard toolbar you will find icons for the windows.

If you wish to restore one of these closed windows, click the window's icon on the toolbar (as

shown above.)

Activity Practice closing and restoring each of the following windows:

Project Explorer

Properties Window

Toolbox

Let's Review!

Module Assignment

There is no assignment for this module.

Module Test

You must write the quiz for Module 6.

Module 7 Objectives

By the end of this module, you should be able to:

Create a simple user interface.

Set properties for various controls from the Properties window.

Create code in the Code window.

Save and run a project.

Build an executable file.

A Glimpse of Your First Visual Basic Program

As you have already learned, the Visual Basic programming environment contains

many powerful tools to help you run and manage your programs. It contains everything

you need to build your own applications for Windows.

In this module, we will create and run our first Visual Basic project. You will follow step-

by-step instructions to create the interface. You will then copy and paste the program

code into the Code window and run the application to see it in action.

You will not create the Visual Basic code yourself for this project. Needless to say, you

will not be so lucky once you move to the next module!

Over the course of the remaining units, you will learn how to write Visual Basic code.

You will have to write all the code for your assignments, so make sure you read

carefully and practice as you go. Follow all the steps in each of the exercises and try to

understand what happens at each step along the way.

A Glimpse of Your First Visual Basic Program (Continued)

Lucky Seven

The Visual Basic program you are going to build is a game program called Lucky

Seven. This game simulates a lucky number slot machine. Here is what your program

will look like when it is finished:

The Lucky Seven user interface contains the following elements:

Two command buttons

Three lucky number windows

A graphic

A label

These elements will be produced in the program by creating seven objects on the Lucky

Seven form, then changing the properties for each object. After the user interface is

designed, you will write the code for the Spin and End command buttons. The code for

the Spin button will process the user's button clicks and produce the random numbers.

The Lucky Seven interface is a variation of the original version, used with

permission from Microsoft Press (2003.)

The Lucky Seven game is often used with beginning Visual Basic programmers as a

quick way to catch your interest and motivate you to learn more!

To create our version of Lucky Seven, you will follow the three essential programming

steps in Visual Basic:

1. Create the user interface.

2. Set the properties.

3. Write the program code.

We will create the program and then discuss the details once it has been created.

Designing the Lucky Seven Game (Let's Get Started)

In this lesson, you will start building the Lucky Seven game by creating a new project

and then using controls in the Toolbox to build the user interface.

Start Visual Basic. On the File menu, click New Project. If Visual Basic opens to the

New Project window, select Standard EXE and click Open.

The Project1 window will be displayed, similar to the window shown.

Now, click the "Let's Get Started" link shown below to view the step-by-step procedure

you will need to follow when designing the Lucky Seven Game. You may find it easier to

print the steps so that you do not have to keep switching windows as you work.

Lucky Seven Revisited

The Lucky Seven user interface that you have now created should contain the following

elements:

Two command buttons

Three lucky number windows

A graphic of a treasure chest of coins

The Lucky Seven label

We used the Toolbox controls to create seven objects in the form window and then

changed several properties for each object. After the interface was designed, we added

the program code for the Spin and End command buttons. This code is what makes the

game "work" when the user clicks the Spin button.

When the Lucky Seven program runs, the user interface appears on the screen.

Nothing happens until the user clicks the Spin button. When the Spin button is clicked, it

triggers a "click event." This event is then processed by the program code and produces

three random numbers. A treasure chest picture is displayed, or not displayed, based

on the random numbers.

The following three steps should always be followed when creating a Visual Basic

program:

1. Create the interface.

2. Set the properties for the objects on the interface.

3. Write the code.

The following table illustrates these steps in the Lucky Seven program.

Programming step Number of items

1. Create the user interface Seven objects (two command buttons, four labels and one image)

2. Set the properties Caption, font, fore color, alignment, border style, stretch, visible

3. Write the code For two events (spin, end)

When designing the Lucky Seven game, we followed the Program Development Cycle that you

learned about in Unit 3. To review, each step of the cycle is listed on the loose-leaf paper on the

right.

Analyze the problem

Design a game that displays a graphic if the lucky number seven is output.

Design the solution

The program should:

1. Pick three random numbers and display them when the spin button is clicked.

2. Display an image if the number seven appears as one of the three numbers.

3. Stop when the user clicks the end button.

Choose the interface

The interface that will be used will have:

1. Spin button and end button (command button objects)

2. Three spinner windows (label objects)

3. A descriptive label (label object)

4. A winner display window (image object)

Write the code

The code for the Spin event will use the algorithm expressed by the flowchart on the left.

Test and debug

Run the program and test for errors.

Document

Comment the code as it is being written, clarifying sections for human readers.

Looking at Visual Basic Terminology

Just like any activity, Visual Basic programming has its own special terminology that you

must become familiar with. Now that you have had your first taste of a Visual Basic

application with the Lucky Seven game, it is time to take a look at some of the initial

vocabulary and concepts that you encountered. Each of the important Visual Basic

concepts will be covered in more depth as you go through the lessons.

Let's Review!

Some very important concepts were covered in this module. One concept in particular

that you may wish to refer to in the future is the correct procedure to follow when saving

your Visual Basic projects and forms.

It is a good idea to copy and paste this information somewhere that it is easily

accessible. You may have to refer to it often until you become familiar with saving your

projects. Module Assignment

There is an assignment for this module. It is assignment #4.

Module Test

There is no test for this module.