Upload
vuphuc
View
223
Download
1
Embed Size (px)
Citation preview
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.