2

Integrated Development
Environment

Objectives
• To become familiar with the integrated
development environment.
• To be able to create a standard executable.
• To be able to identify the controls in the toolbox.
• To be able to understand the types of commands
contained in the menus and the tool bar.
• To be able to customize the form using properties.
• To be able to customize the form using controls.
• To be able to customize controls using properties.
• To be able to save a project.
• To be able to execute a simple program.
• To understand the difference between design mode
and run mode.
Seeing is believing.
Proverb
Form ever follows function.
Louis Henri Sullivan
Intelligence . . . is the faculty of making artificial objects,
especially tools to make tools.
Henri-Louis Bergson
Our life is frittered away by detail . . . Simplify, simplify.
Henry Thoreau
26 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

Outline
2.1 Introduction
2.2 Integrated Development Environment Overview
2.3 Project Window
2.4 Toolbox
2.5 Form Layout Window
2.6 Properties Window
2.7 Menu Bar and Tool Bar
2.8 A Simple Program: Displaying a Line of Text
Summary • Terminology • Good Programming Practices • Self-Review Exercises • Answers
to Self-Review Exercises • Exercises

2.1 Introduction
Visual Basic’s Integrated Development Environment (IDE) allows the programmer to cre-
ate, run and debug Windows programs in one application (e.g., Visual Basic) without the
need to open additional programs (i.e., a program to create the program, a program that ex-
ecutes the program, a program that debugs the program, etc.). In this chapter, we overview
the Visual Basic IDE features and discuss how to create and execute a simple program.

2.2 Integrated Development Environment Overview

When Visual Basic is loaded, the New Project dialog shown in Fig. 2.1 is displayed. The
New Project dialog allows the programmer to choose what type of Visual Basic program
to create. Standard EXE, which is highlighted by default, allows the programmer to cre-
ate a standard executable (i.e., a program that uses the most common Visual Basic fea-
tures). We use Standard EXE for the majority of examples and exercises in this book,
although later in the book you will learn about some of the other types.
Each type listed in Fig. 2.1 describes a group of related files called a project. Collec-
tively, the project files form a Visual Basic program. The project types listed in Fig. 2.1 are
the “Visual” in Visual Basic, because they contain predefined features for designing Win-
dows programs. The programmer can use or leverage these existing project types to create
powerful Windows applications in a fraction of the time it would normally take to create
the same applications in other programming languages.
The New Project dialog contains three tabs—New for creating a new project,
Existing for opening an existing project and Recent for opening a project that has been
previously loaded into the IDE. Note that the New Project dialog is displayed every time
Visual Basic is executed unless the Don’t show this dialog in the future checkbox (in
the lower-left portion of Fig. 2.1) is checked. The number and names of the types appearing
in the window can differ depending on the version of Visual Basic. Figure 2.1 shows Visual
Basic Enterprise Edition project types (you may be working with another version of Visual
Basic 6 that shows fewer project types).
A project type is opened by either double-clicking its icon with the left mouse button
or by single-clicking the icon with the left mouse button and pressing Open. Opening a
project type closes the New Project dialog and loads the features associated with the
selected project type into the IDE.
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 27

Fig. 2.1 New Project dialog.

Pressing Cancel closes the New Project dialog without opening a project type.
Pressing Help opens the on-line assistance. We refer to single-clicking with the left mouse
button as selecting or clicking, and we refer to double-clicking with the left mouse button
simply as double-clicking.
Figure 2.2 shows the IDE after Standard EXE is selected. The top of the IDE window
(the title bar) displays Project1 - Microsoft Visual Basic [design]. The environment
consists of various windows, a menu bar and a tool bar. The menu bar contains several
menus (File, Edit, View, etc.), each of which we overview shortly. The tool bar contains
several icons that provide quick access to commonly used features. We discuss several of
these tool bar icons in this chapter and others later in the book.
A Standard EXE project contains the following windows:
• Project1 - Form1 (Form)
• Form Layout
• Properties - Form1
• Project - Project1
• Toolbox
The Project - Form1 (Form) window contains a form named Form1, which is
where the program’s Graphical User Interface (GUI) will be displayed. A GUI is the visual
portion of the program (i.e., buttons, etc.)–this is where the user enters data (called inputs)
to the program and where the program displays its results (called outputs) for the user to
read. We refer to the Form1 window simply as “the form.”
28 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

Toolbox Form Title bar

Menu bar Tool bar

Fig. 2.2 IDE with a Standard EXE project open.

The Form Layout window enables the user to specify the form’s position on the
screen when the program is executed.
The Properties - Form1 window displays form attributes or properties (i.e., color,
font style, size, etc.). The Project - Project1 window groups the project’s files by type.
The toolbox contains controls for customizing the GUI (i.e., the form). Controls are
GUI components such as buttons and checkboxes. We discuss a simple example at the end
of this chapter that customizes a form with a control from the toolbox. We discuss toolbox
controls throughout the book, especially in Chapters 10 and 11.
In the remainder of this chapter, we use these windows to create, manage and execute
our first Visual Basic program.

2.3 Project Window

The window titled Project - Project1 (Fig. 2.3) is called the Project Explorer and con-
tains the project files. We refer to the Project Explorer window simply as the Project
window.
The Project window’s tool bar contains three buttons, namely View Code, View
Object and Toggle Folders. When pressed, the View Code button displays a window
for writing Visual Basic code. Writing code is the main subject of this book. View Object,
when pressed, displays the form. Double-clicking Form1 (Form1) also displays the form.
Both View Code and View Object are initially disabled (i.e., the buttons appear gray and
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 29

pressing them has no effect) unless Form1 (Form1) is selected (i.e., highlighted) as it is
in Fig. 2.3. Figure 2.4 shows both the View Code and View Object buttons disabled. The
Toggle Folders button toggles (i.e., alternately hides or shows) the Forms folder. When
shown as in Fig. 2.3, the folder is visible, and when hidden as in Fig. 2.4, the folder is invis-
ible. The Forms folder contains a listing of all forms in the current project. Early in the
book our projects will have only one form.
Later in this chapter we will save projects and forms with more meaningful names. The
current names Project1, Form1, etc. are default names provided by Visual Basic to help
you get started. Visual Basic does many things automatically to minimize the amount of
work you must do to create applications. In this regard, Visual Basic is the world’s most
popular RAD (Rapid Applications Development) programming language. The Project
window becomes an important project management tool as projects become more complex
(i.e., contain more forms and other support files).

2.4 Toolbox
The toolbox (Fig. 2.5) contains controls used to customize forms. Controls are prepackaged
components that you reuse instead of writing them yourself–this helps you write programs
faster. In this chapter, we overview the toolbox controls and in later chapters we discuss
these controls in greater detail. Notice the box named Data displayed at the bottom of Fig.
2.5 when the mouse pointer (i.e., the white arrow) rests on the Data control. These boxed
descriptions, called tool tips, are displayed by Visual Basic to tell you what each icon
means. Tool tips are also displayed for many IDE features besides the toolbox. Figure 2.6
summarizes the toolbox controls.

View Code
Project name

View Object Forms folder

Form module
Toggle Folders

Fig. 2.3 Project window.

Toggle Folders

Disabled buttons
Form1 (Form1)
unselected

Fig. 2.4 Project window with disabled buttons and Toggle Folders set to off.
30 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

Pointer (not a control) PictureBox

Label TextBox

Frame CommandButton

CheckBox OptionButton

ComboBox ListBox

HScrollBar VScrollBar

Timer DriveListBox

DirListBox FileListBox

Shape Line

Image Data

OLE Tool tip

Fig. 2.5 Toolbox window.

Control Description

Pointer Used to interact with the controls on the form (i.e., resize them, move
them, etc.). The pointer is not a control.
PictureBox A control that displays images.
Label A control that displays uneditable text to the user.
TextBox A control for accepting user input. TextBoxes can also display text.
Frame A control for grouping other controls.
CommandButton A control that represents a button. The user presses or clicks to
initiate an action.
CheckBox A control that provides the user with a toggle choice (checked or
unchecked).
OptionButton A “radio button.” OptionButtons are used in groups where only one
at a time can be True (i.e., on)—like the buttons on a car radio.
ListBox A control that provides a list of items.
ComboBox A control that provides a short list of items.

Fig. 2.6 Toolbox control summary (part 1 of 2).

CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 31

Control Description

HScrollBar A horizontal scrollbar.

VScrollBar A vertical scrollbar.
Timer A control that performs a task at programmer-specified intervals. A
Timer is not visible to the user.
DriveListBox A control for accessing the system disk drives (C:, A:, etc.).
DirListBox A control for accessing directories on a system.
FileListBox A control for accessing files in a directory.
Shape A control for drawing circles, rectangles, squares or ellipses.
Line A control for drawing lines.
Image A control for displaying images. The Image control does not provide
as many capabilities as a PictureBox.
Data A control for connecting to a database.
OLE A control for interacting with other window applications.

Fig. 2.6 Toolbox control summary (part 2 of 2).

2.5 Form Layout Window

The Form Layout window (Fig. 2.7) specifies a form’s position on the screen at runtime.
The Form Layout window consists of an image representing the screen and the form’s
relative position on the screen. With the mouse pointer positioned over the form image,
drag (i.e., hold down the left mouse button, then move the mouse and release the button)
the form to a new location. Note that the mouse pointer changes shape when over the image
representing the form. Later in the book we discuss the various shapes that the mouse point-
er can assume.

2.6 Properties Window

The Properties window (Fig. 2.8) displays the properties for a form or control. Properties
are attributes such as size, position, etc. Like a form, each control type has its own set of
properties. Some properties, like Width and Height, such as, are common to both forms
and controls, while other properties are unique to a form or control. Controls often differ in
the number and type of properties.

Screen

Mouse pointer

Form

Fig. 2.7 Form Layout window.

32 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

Name of control
or form (Form1)

Type of control
or form (Form)

Scrollbar

Selected property

Selected proper-
ty description

Fig. 2.8 Properties window with the Alphabetic and Categorized tabs.
Properties are listed either alphabetically (by selecting the Alphabetic tab) or cate-
gorically (by selecting the Categorized tab). Alphabetic lists the properties in alphabet-
ical order and is the default. Clicking the Categorized tab lists properties by categories,
such as Appearance, Behavior, DDE, Font, Misc, etc. The scrollbar can be used to
scroll through the list of properties (by dragging the scrollbar up or down). We discuss set-
ting individual properties later in this chapter and throughout the book.

2.7 Menu Bar and Tool Bar

Commands for developing, maintaining and executing programs are contained in the IDE’s
menus. Figure 2.9 shows the menus displayed on the menu bar for a Standard EXE
project. Menus contain groups of related capabilities from which the user may select appro-
priate choices. The menus of Fig. 2.9 are summarized in Fig. 2.10. Note: Your version of
Visual Basic may not have some of these menus.

Fig. 2.9 IDE menu bar.

CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 33

Menu Description

File Contains options for opening projects, closing projects, printing projects, etc.
Edit Contains options such as cut, paste, find, undo, delete, etc.
View Contains options for displaying IDE windows and tool bars.
Project Contains options for adding features such as forms to the project.
Format Contains options for aligning and locking a form’s controls.
Debug Contains options for debugging.
Run Contains options for executing a program, stopping a program, etc.
Query Contains options for manipulating data retrieved from a database.
Diagram Contains options for editing and viewing the design of databases.
Tools Contains options for IDE tools and options for customizing the environment.
Add-Ins Contains options for using, installing and removing add-ins. Add-ins are typically
independent software vendor (ISV) products that extend Visual Basic’s features.
Windows Contains options for arranging and displaying windows.
Help Contains options for getting help.

Fig. 2.10 Menu summary.

Rather than having to navigate the menus for certain commonly used commands, the
programmer can select them from the tool bar (Fig. 2.11). The tool bar is comprised of pic-
tures called icons that represent commands. Figure 2.11 shows the standard tool bar (i.e.,
the default tool bar). The figure indicates which menus contain the equivalent commands
and it shows a few specific icons related to displaying the IDE windows.

2.8 A Simple Program: Displaying a Line of Text

In this section, we will create a program that displays the text “Welcome to Visual Ba-
sic!” on the form. The program consists of one form and uses one Label control to dis-
play the text. The program is a Standard EXE. We do not write a single line of program
code. Instead, we introduce the techniques of visual programming in which through vari-
ous programmer gestures (such as using the mouse for pointing, clicking, dragging and

Project icons File icons Edit icons Run icons View icons

Toolbox
Tools icon
Project explorer Properties window
(Project window)
Form Layout window

Fig. 2.11 Tool bar icons.

34 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

dropping) we provide Visual Basic with sufficient information so that it can automatically
generate all or a major portion of the program code for our program. Figure 2.12 shows
the program at runtime. In the next chapter, we begin our discussion of writing program
code. Throughout the book we will produce increasingly substantial and powerful pro-
grams. Visual Basic programming involves a combination of writing a portion of the pro-
gram code yourself and having Visual Basic generate the remaining code automatically.
Here are the steps you perform to create, run and terminate this first program:
1. Setting the form’s title bar. The form’s Caption property determines what is
displayed in the form’s title bar. In the Properties window, set the Caption
property to Fig. 2.12: A Simple Program. To change the value of this
property, click in the field next to Caption (this field displays Form1). Delete
the existing value using the Backspace key or Delete key and enter the new value.
Hit the Enter key (Return key). Note: As you enter a new value for the Caption
property the form’s title bar changes in response to what you are typing.
2. Setting the form’s Name property. The Name property identifies a form or control.
Set the Name property to frmFig02_12. After the property is set, note the
changes to the Properties window and Project window as shown in Fig. 2.13.

Title bar

Fig. 2.12 Program at run-time.

Properties window and Project

window areas where the form’s
Name is displayed

Fig. 2.13 Properties window and Project window after the Name property is set.
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 35

Good Programming Practice 2.1

Prefix the Name of each form with frm to make form objects easy to identify. 2.1

3. Resizing the form. Click and drag one of the form’s enabled sizing handles (the
small squares around the form shown in Fig. 2.14). White sizing handles are dis-
abled and the programmer cannot use them to resize the form. Sizing handles that
are black are enabled and can be used for resizing. Size the form according to your
own preference. Sizing handles are not visible during program execution.
4. Centering the form. Center the form using the Form Layout window (Fig. 2.15).
This causes the form to display in the center of the monitor when the program is
executed.

Title bar

Grid

Disabled sizing handle

Enabled sizing handle

Fig. 2.14 Form with sizing handles.

Form

Screen

Fig. 2.15 Form Layout window with form centered.

36 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

5. Changing the form’s background color. The BackColor property specifies a

form or control’s background color. Clicking BackColor in the Properties
window causes a down-arrow button to appear next to the property value as shown
in Fig. 2.16. When clicked, the down arrow displays a window with the tabs Sys-
tem (the default) and Palette. Click the Palette tab to display the palette (a
group of colors from which the user selects one by clicking). Select the box rep-
resenting yellow. The palette disappears and the form’s background color changes
to yellow. Note that BackColor displays a small rectangle representing the cur-
rent color.
6. Adding a Label control to the form. Double-click the toolbox's Label control
to create a Label with sizing handles in the center of the form (Fig. 2.17). The
Label displays the word Label1 by default. Double clicking any toolbox con-
trol results in a control being created and placed in the center of the form. When
the sizing handles appear around the Label, the Properties window displays
the Label’s properties. Clicking the form causes the form’s properties to be dis-
played in the Properties window.
7. Setting the Label’s display. The Label’s Caption property determines what
text (if any) the Label displays. The form and Label each have their own Cap-
tion property—with each being completely independent of the other. Forms and
controls can have properties with the same name without conflict. Set the La-
bel’s Caption property to Welcome to Visual Basic! (Fig. 2.18). The
Label displays each character as it is typed. Note that when the edge of the La-
bel is reached, the text automatically wraps to the next line.

Current
color

Down
arrow

The color
yellow

Fig. 2.16 Changing the BackColor.

CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 37

Label control icon

Sizing handle

Label created by
double clicking
Label control

Fig. 2.17 A Label placed on the form.

Fig. 2.18 The Caption property set for the Label.

8. Naming the Label. The Label’s Name property is used to identify the Label.
The default name for the Label we just created is Label1. Set the Name prop-
erty to lblWelcome.
Good Programming Practice 2.2
Prefix the Name of each Label with lbl to make Label objects easy to identify. 2.2

Good Programming Practice 2.3

Following widely accepted naming conventions can make your program clearer—especially
to other people. 2.3
38 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

9. Customizing the Label’s colors. Like a form, a control’s BackColor is gray by

default, and we wish to change it to yellow. There are two ways to accomplish this
using the Label’s properties. One way is to change the Label’s BackColor
property to yellow—which works well as long as the form’s BackColor does
not change. If the form’s BackColor changes, the Label BackColor re-
mains yellow. The second way is to change the Label’s BackStyle property
from Opaque (i.e., solid) to Transparent (i.e., see through). The Label’s
ForeColor property determines the color in which text is displayed. Set the
ForeColor to blue using the techniques discussed in Step 5.
10. Setting the Label’s font size and aligning the Label’s text. Clicking the Font
property value causes an ellipsis button to appear (Fig. 2.20). When this button is
pressed, the Font window of Fig. 2.21 appears. The font name (MS Sans Serif,
Serif, etc.), font style (Regular, Bold, etc.) and font size (8, 10, etc.) can be se-
lected. The current font is applied to the text in the Sample area. Under the Size
category select 24 and press OK. Next, select the Alignment property—which
determines how the text is aligned within the Label boundaries. The three
Alignment choices are Left Justify (the default), Right Justify and
Center. Select Center. At this point, you might notice that the Label size is
too small for the font size. In the next step we will resize the Label.
11. Positioning and resizing the Label. Resize the Label using the Label’s sizing
handles, such that the Label appears similar to that of Fig. 2.22. Note the change
in the mouse pointer when it is placed over a sizing handle. Center the Label on
the form by dragging the Label. The grid dots on the background of the form are
used for aligning controls and are only visible at design time.

Fig. 2.19 Transparent Label with yellow ForeColor.

CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 39

Ellipsis button

Fig. 2.20 Properties window displaying the Label’s properties.

Current
selections

Sample of current
font applied

Fig. 2.21 Font window for selecting fonts, styles and sizes.

Grid
Sizing
handle

Mouse
pointer

Fig. 2.22 Resizing the Label.

40 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

12. Saving the project. Click the Save Project tool bar icon (Fig. 2.23) or select
Save Project / Save Project As... from the File menu to display the Save
File As... dialog (Fig. 2.23). The Save File As... dialog specifies the form file
name that will store all the form’s information (i.e., properties, etc.). We save our
file in the c:\books\vbhtp\examples\chap02\fig02_12 directory. You are
free to choose whatever directory you want. The window provides the capabilities
to visually navigate the directories and to create new folders. After specifying the
name and directory, click the Save button.
The next dialog that appears is the Save Project As... dialog. The features of this
dialog are identical to the features of the Save File As... dialog, except that now we
specify the project file name. The project file stores the name and location of every file in
the project. We save the project in the same directory as the form
(c:\books\vbhtp\examples\chap02\fig02_12). Again you are free to save the project
file in any directory you choose. Figure 2.25 shows the Project window after the project
is saved.
13. Running the program. Prior to this step, we have been working in the IDE design
mode (i.e., the program is not executing). While in design mode, the programmer
has access to all the environment windows (i.e., toolbox and Properties), menus,
tool bars, etc. While in run mode the program is executing and the user can only
interact with a few IDE features. Features that are not available are disabled. To
execute or run your program, click the Start button or select Start from the Run
menu. Figure 2.26 shows the IDE in run mode. Note that the IDE title bar displays
[Run] and that most tool bar icons are disabled. Also note that the Immediate
window appears at runtime. The Immediate window is primarily used for debug-
ging (i.e., removing errors from your program) and is discussed in Chapter 13.

Current directory Up one directory level New folder

Save Project tool

bar icon

Contents of current
directory

Save file as

Fig. 2.23 Save File As... dialog.

CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 41

Fig. 2.24 Save Project As... dialog.

Project name Project file name

Form name Form file name

Fig. 2.25 Project window after saving project.

Run-mode Start button End button Project window

Close
button

Immediate window Form

Fig. 2.26 IDE during execution.

42 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

14. Terminating execution. Clicking form’s Close button icon (i.e., the “X” at the top
right corner of Fig. 2.26) or by clicking the tool bar’s End button terminates pro-
gram execution and places the IDE in design mode.

Summary
• The Visual Basic Integrated Development Environment (IDE) allows the programmer to create,
run and debug Windows programs.
• The New Project dialog allows the programmer to choose what type of Visual Basic program to
create. Standard EXE allows the programmer to create a standard executable (i.e., a program that
uses the most common Visual Basic features).
• The New Project dialog contains three tabs—New for creating a new project, Existing for
opening an existing project and Recent for opening a project that has been previously loaded into
the IDE.
• We refer to single clicking with the left mouse button as selecting or clicking, and we refer to dou-
ble-clicking with the left mouse button simply as double-clicking.
• A Standard EXE project contains the following windows: Project1 - Form1 (Form), Form
Layout, Properties - Form1, Project - Project1 and the toolbox.
• The Project - Form1 (Form) window contains a child window named Form1, which is where
the program’s Graphical User Interface (GUI) will be displayed. A GUI is the visual portion of the
program (i.e., buttons, checkboxes, etc.)–this is where the user enters data (called inputs) to the
program and where the program displays its results (called outputs) for the user to read.
• The Form Layout window enables the user to specify the form’s position on the screen when the
program is executed.
• The Properties - Form1 window displays form attributes or properties (i.e., color, font style,
size, etc.).
• The toolbox contains controls for customizing the GUI (i.e., the form). Controls are GUI compo-
nents such as buttons and checkboxes.
• The window titled Project - Project1 (Fig. 2.3) is called the Project Explorer and contains
the project files. We refer to the Project Explorer window simply as the Project window.
• The Project window’s tool bar contains three buttons, namely View Code, View Object and
Toggle Folders. When pressed, the View Code button displays a window for writing Visual
Basic code.
• View Object, when pressed, displays the form. Double-clicking Form1 (Form1) also displays
the form.
• Both View Code and View Object are initially disabled (i.e., the buttons appear gray and press-
ing them has no affect) unless Form1 (Form1) is selected (i.e., highlighted).
• The Toggle Folders button toggles (i.e., alternately hides or shows) the Forms folder.
• The Forms folder contains a listing of all forms in the current project.
• Visual Basic does many things automatically to minimize the amount of work you must do to cre-
ate applications. In this regard, Visual Basic is the world’s most popular RAD (Rapid Applications
Development) programming language.
• The Project window becomes an important project management tool as projects become more
complex (i.e., contain more forms and other support files).
• The toolbox contains controls used to customize forms. Controls are prepackaged components that
you reuse instead of writing them yourself–this helps you write programs faster.
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 43

• Tool tips are displayed by Visual Basic to tell you what each icon means.
• The pointer is used to interact with the controls on the form (i.e., resize them, move them, etc.).
The pointer is not a control.
• A PictureBox is a control that displays images.
• A Label is a control that displays uneditable text to the user.
• A TextBox is a control for accepting user input. TextBoxes can also display text.
• A Frame is a control for grouping other controls.
• A CheckBox is a control that provides the user with a toggle choice (checked or
unchecked).
• An OptionButton is a “radio button.” OptionButtons are used in groups where only one
at a time can be True (i.e., on), just like the buttons on a car radio.
• ListBox is a control that provides a list of items.
• A ComboBox is a control that provides a short list of items.
• An HScrollBar is a horizontal scrollbar.
• A VScrollBar is a vertical scrollbar.
• A Timer is a control that performs a task at programmer-specified intervals. A Timer is not vis-
ible to the user.
• A DriveListBox is a control for accessing the system disk drives (C:, A:, etc.).
• A DirListBox is a control for accessing directories on a system.
• A FileListBox is a control for accessing files in a directory.
• A Shape is a control for drawing circles, rectangles, squares or ellipses.
• A Line is a control for drawing lines.
• An Image is a control for displaying images. The Image control does not provide as many ca-
pabilities as a PictureBox.
• A Data control provides a means for connecting to a database.
• An OLE control for interacting with other Windows applications.
• The Form Layout window specifies a form’s position on the screen at run-time. The Form Lay-
out window consists of an image representing the screen and the form’s relative position on the
screen. To reposition the form on the screen, position the mouse pointer over the form image, then
drag (i.e., hold down the left mouse button, then move the mouse and release the button) the form
to a new location.
• The Properties window displays the properties for a forms and controls.
• Properties are attributes such as size, position, etc. Like a form, each control type has its own set
of properties. Some properties, such as, Width and Height, are common to both forms and con-
trols, while other properties are unique to a form or control. Controls often differ in the number
and type of properties.
• Properties are listed either alphabetically (by selecting the Alphabetic tab) or categorically (by
selecting the Categorized tab). Alphabetic lists the properties in alphabetical order and is the
default. Clicking the Categorized tab lists properties by categories, such as Appearance, Be-
havior, DDE, Font, Misc, etc. The scrollbar can be used to scroll through the list of properties
(by dragging the scrollbar up or down).
• Commands for developing, maintaining and executing programs are contained in the IDE’s
menus. Menus contain groups of related capabilities from which the user may select appropriate
choices.
44 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

• The File menu contains options for opening projects, closing projects, printing projects, etc.
• The Edit menu contains options such as cut, paste, find, undo, delete, etc.
• The View menu contains options for displaying IDE windows and tool bars.
• The Project menu contains options for adding features such as forms to the project.
• The Format menu contains options for aligning and locking a form’s controls.
• The Debug menu contains options for debugging.
• The Run menu contains options for executing a program, stopping a program, etc.
• The Query menu contains options for manipulating data retrieved from a database.
• The Diagram menu contains options for editing and viewing the design of databases.
• The Tools menu contains options for IDE tools and options for customizing the environment.
• The Add-Ins menu contains options for using, installing and removing add-ins. Add-ins are typ-
ically independent software vendor (ISV) products that extend the features of Visual Basic.
• The Windows menu contains options for arranging and displaying windows.
• The Help menu contains options for getting help.
• Rather navigating the menus for certain commonly used commands, the programmer can select
them from the tool bar. The tool bar is comprised of pictures called icons that represent commands.
• We do not write a single line of code—instead, we introduce the technique of visual programming.
• The form’s Caption property determines what is displayed in the form’s title bar.
• To change the value of the Caption property, click in the field next to Caption. Delete the ex-
isting value using the Backspace key or Delete key and enter the new value. Hit the Enter key (Re-
turn key). As you enter a new value for the Caption property the form’s title bar changes in
response to what you are typing.
• The Name property identifies a form or control.
• To resize a form, click and drag one of the form’s enabled sizing handles (the small squares around
the form). White sizing handles are disabled and the programmer cannot use them to resize the
form. Sizing handles that are black are enabled and can be used for resizing. Sizing handles are
not visible during program execution.
• A form can be centered by using the Form Layout window.
• The BackColor property specifies a form or control’s background color. Clicking BackColor
in the Properties window causes a down-arrow button to appear next to the property value.
When clicked, the down arrow displays a window with the tabs System (the default) and Pal-
ette. Click the Palette tab to display the palette (a group of colors from which the user selects
one by clicking). The BackColor displays a small rectangle representing the current color.
• To add a Label control to a form, double-click the toolbox's Label control to create a Label
with sizing handles in the center of the form. The Label displays the word Label1 by default.
Double-clicking any toolbox control results in a control being created and placed in the center of
the form. When the sizing handles appear around the Label, the Properties window displays
the Label properties. Clicking the form causes the form’s properties to be displayed in the Prop-
erties window.
• The Label’s Caption property determines what text (if any) the Label displays. The form and
Label each have their own Caption property—with each being completely independent of the
other. Forms and controls can have properties with the same name without conflict. The Label
displays each character as it is typed. Note that when the edge of the Label is reached, the text
automatically wraps to the next line.
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 45

• A control’s BackColor is gray by default.

• A Label has a BackColor property. A Label’s BackStyle property can be Opaque (i.e.,
solid) or Transparent (i.e., see through).
• A Label’s ForeColor property determines the color in which text is displayed.
• Clicking a Label’s Font property value causes an ellipsis button to appear. When this button is
pressed, the Font dialog appears. The font name (MS Sans Serif, Serif, etc.), font style (Reg-
ular, Bold, etc.) and font size (8, 10, etc.) can be selected. The current font is applied to the text
in the Sample area.
• A Label’s Alignment property determines how text is aligned within the Label boundaries.
The three Alignment choices are Left Justify (the default), Right Justify and Cen-
ter.
• A Label can be resized using its sizing handles. The shape of the mouse pointer changes when
it is placed over a sizing handle. The grid dots on the background of the form are used for aligning
controls at design time.
• Click the Save Project tool bar icon or select Save Project / Save Project As... from the File
menu to display the Save File As... dialog. The Save File As... dialog specifies the form file
name that will store all the form’s information (i.e., properties, etc.) as well as its directory loca-
tion.
• The Save Project As... dialog’s features are identical to those of the Save File As... dialog,
except that you use it to specify the project file name. The project file stores the name and location
of every file in the project.
• In IDE design mode, the program is not executing. While in design mode, the programmer has ac-
cess to all the environment windows (i.e.f, toolbox and Properties, menus, tool bars, etc.).
• While in run mode the program is executing and the user can interact with only a few IDE features.
Features that are not available are disabled.
• To execute or run a program, click the Start button or select Start from the Run menu. Note that
the IDE title bar displays [Run] and that most tool bar icons are disabled. Also note that the Im-
mediate window appears at run-time. The Immediate window is primarily used for debugging.
• Clicking form’s Close button icon (i.e., the “X” at the form’s top-right corner or clicking the tool
bar’s End button terminates program execution and places the IDE in design mode.

Terminology
active window checkbox
Add-Ins menu click and drag
Alignment property of a Label clicking
Alignment property’s Left Justify value Close button
Alignment property’s Right Justify value controls
Alphabetic tab of Properties window Debug menu
BackColor property of a Form Delete key
Backspace key design mode
BackStyle property design time
button disabled button
Cancel button disabled sizing handle
Caption property Don’t show this dialog in the future
Categorized tab of a Properties window double-clicking
Center value of Alignment property down-arrow button
46 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

dragging Project window

Edit menu properties
ellipsis button Properties window
enabled sizing handle RAD (Rapid Applications Development)
End button radio buttons
Enter key Recent tab of New Project dialog
Enterprise Edition Return key
Existing tab of New Project dialog Run menu
File menu run mode
focus run-time
font Sample area of Font window
Font property of a Label Save button
Font window Save File As... dialog
ForeColor property of a Label Save Project As... dialog
form Save Project tool bar icon
Format menu selecting
Form Layout window sizing handle
Forms folder Standard EXE project type
graphical user interface (GUI) standard executable
grid standard tool bar
Height property standard Visual Basic executable
Help menu Start button
icons System tab
Immediate window title bar
integrated development environment (IDE) toggle
Label control Toggle Folders button in Project window
menu tool bar
menu bar toolbox
mouse pointer Toolbox window
Name property Tools menu
New Project dialog tool tips
New tab of New Project dialog Transparent value
Opaque value of Back Style property VB Application Wizard project type
Open button VB Learning Edition Controls project type
palette of colors View Code button in Project window
Palette tab View menu
project View Objects button in Project window
Project Explorer window visual programming
Project menu Width property
project types Window menu

Good Programming Practices

2.1 Prefix the Name of each form with frm to make form objects easy to identify.
2.2 Prefix the Name of each Label with lbl to make Label objects easy to identify.
2.3 Following widely accepted naming conventions can make your program clearer—especially
to other people.

Self-Review Exercises
2.1 Fill in the blanks in each of the following:
a) A is a customizable window.
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 47

b) The form’s is used to visually align controls.

c) The form’s property specifies the text for the form’s title bar.
d) The window has a dark-colored title bar and is said to have the .
e) The window determines where a form will appear on the screen at execution.
f) The window contains the program files.

2.2 State whether each of the following is true or false. If false, explain why.
a) The tool bar contains the control icons.
b) The Project window is also called the Project Explorer.
c) The tool bar provides a convenient way to execute certain menu commands.
d) The Properties window is also called the Immediate window.
e) A form’s sizing handles are always enabled.
f) The pointer is not a control.

2.3 Match the control name with the proper toolbox icon in Fig. 2.27. Note that OLE is not
shown.

2 3 4 5 6 7 8 9

1 10

11 20

12 13 14 15 16 17 18 19

Fig. 2.27 Toolbox.

a) CommandButton k) TextBox
b) OptionButton l) HScrollBar (Horizontal scrollbar)
c) Label m) DriveListBox
d) Line n) Shape
e) Frame o) CheckBox
f) Image p) Data
g) PictureBox q) FileListBox
h) VScrollBar (Vertical scrollbar) r) ListBox
i) Pointer s) Timer
j) ComboBox t) DirListBox (Directory list box)

Answers to Self-Review Exercises

2.1 a) form. b) grid. c) Caption. d) active, focus. e) Form Layout. f) Project or
Project Explorer.

2.2 a) False. The toolbox contains the control icons.

b) True.
c) True.
d) False. The Immediate window is a distinctly different window.
e) False. Some of the form’s sizing handles are disabled.
f) True.
48 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2

2.3 a) 6. b) 8. c) 3. d) 18. e) 5. f) 19. g) 2. h) 12. i) 1. j) 9. k) 4. l) 11. m) 14. n) 17. o) 7.

p) 20. q) 16. r) 10. s) 13. t) 15.

Exercises
2.4 Fill in the blanks in each of the following statements:
a) The contains a variety of colors, from which the programmer selects one.
b) The three values of the Alignment property are , and .
c) The property changes a control’s foreground color.
d) IDE is an abbreviation for .
e) Clicking the on the toolbar executes the program.
f) The property identifies a form and is often prefixed with frm.
g) GUI is an abbreviation for .
h) A is a group of related files.

2.5 State which of the following are true and which are false. If false, explain why.
a) At run-time, a form’s grid is visible.
b) A tool tip identifies an IDE feature.
c) A Label’s Text property determines what text is displayed to the user.
d) At design-time, almost every IDE feature is available.
e) When placed over an enabled sizing handle, the mouse pointer changes.
f) A Label displays uneditable text to the user.
g) A form and Label have an identical set of properties.

2.6 Build the following GUIs (you need not provide any functionality). Execute each program
and determine what happens when a control is clicked with the mouse.
a) This GUI consists of three Labels colored yellow, red and black.

b) This GUI consist of one Label and eighteen CommandButtons. Note: You must
modify the Label’s BorderStyle property. Also note that the dotted line around the
six (6) button (it can be any of your buttons) appears during run mode.
CHAPTER 2 INTEGRATED DEVELOPMENT ENVIRONMENT 49

c) The following GUI consists of one Label, one CommandButton and four Option-
Buttons. Note: The black dot in Dog automatically appears at run-time but may appear
in a different one of your buttons.

d) The following GUI consists of three VScrollBars and two Labels. Note: One La-
bel requires its BorderStyle property changed. Also note that one VScrollBar’s
scroll box automatically flashes at run-time.

Flashing
scroll box

2.7 Briefly describe each of the following IDE features:

a) tool bar
b) menu bar
c) toolbox
d) control
e) form
f) project
g) title bar

2.8 Briefly describe the differences between design mode and run mode.

2.9 Compare a form’s properties to a Label’s properties. Make a list of all the properties that are common
to both. Now, summarize only the properties on the list we have discussed in this chapter.

2.10 Why do you think that the toolbox, the form and the Properties window are crucial to the
concept of visual programming?
50 INTEGRATED DEVELOPMENT ENVIRONMENT CHAPTER 2