Lesson II.

Interactivity Using TextBoxes & CommandButtons

Objectives
To explore Forms and the code behind an application in design mode
To create a simple interactive application

To use and be familiar with the TextBox & CommandButton controls and their
properties
To use the concatenation operator (&)
To be able to familiar with VB events and write a event-handler subroutine
To use the End statement
To understand and use Remarks

Notes
IN FOCUS: TEXTBOX CONTROL
TextBoxes accepts text input such as the users name or address.
TextBox properties.
Property
Alignment
BackColor
BorderStyle
Enabled
Font
ForeColor
Height
Left
Locked
MaxLength
MousePointer
MultiLine
PasswordCha
r
ScrollBars
TabIndex
TabStop
Text
ToolTipText
Top
Visible
Width

The following are the common

Description
Determines whether the text appears 0: left-justified, 1:
right-justified, or 2: centered within the TextBoxs
boundaries.
Specifies the TextBoxs background color. Programmer
selects a color from the Color Palette or specifies a color in
Hex format.
0: None, 2: Fixed Single. Determines whether a single-line
border appears around the TextBox.
Boolean. Determines whether the TextBox is active. A
disabled TextBox does not accept input.
Specifies the font of the text. Clicking this property will
invoke a font dialog box in which you can set the font name,
style, and size.
Specifies the color of the text. Programmer selects a color
from the Color Palette or specifies a color in Hex format.
Specifies the height of the TextBox in twips.
Specifies the number of twips from the TextBoxs left edge to
the Form windows left edge.
Boolean. Determines whether the user can edit the text
inside the TextBox.
Specifies the maximum length of text that the TextBox can
accept.
Determines the image of the mouse cursor when the user
moves the mouse pointer over the TextBox.
Boolean. Determines whether the TextBox can hold multiple
lines of text (True) or just a single line of text (False).
Determines the character that appears in the TextBox when
the user enters a password.
0: None, 1: Horizontal, 2: Vertical, 3: Both. Determines
whether scrollbars appear on the edges of a Multiline
TextBox.
Specifies the order of the TextBox in the focus order.
Boolean. Determines whether the TextBox can receive the
focus.
Holds the text entered in the TextBox. Specified text in this
property becomes the default value that appears in the
TextBox at runtime.
Holds the text that appears as a tooltip at runtume.
Specifies the number of twips from the TextBoxs top edge to
the Form windows top edge.
Boolean. Determines whether the TextBox appears (True) or
is hidden from the user (False) at runtime. Invisible
TextBoxes are only invisible at runtime.
Holds the width of the TextBox in twips.

IN FOCUS: COMMANDBUTTON CONTROL

CommandButton is a control that you press to tell a VB application to perform a particular task. A
button labeled Compute may tell the VB to computer for the sum of two numbers and display the
result on a Label. Below are the common properties of a CommandButton.
Property
BackColor

Cancel
Caption
Default
Enabled
Font
Height
Left
MousePointer
Picture
Style

TabIndex
TabStop
ToolTipText
Top
Visible
Width

Description
Specifies the CommandButtons background color.
Programmer selects a color from the Color Palette or
specifies a color in Hex format. Applicable only when Style
property is set to 1: Graphical.
Determines whether the CommandButton gets a click event
if the user presses Esc.
Holds the text that appears on the CommandButton.
Determines if the CommandButton responds to an Enter
keypress even if another has the focus.
Boolean. Determines whether the CommandButton is active.
A disabled CommandButton is grayed out and cannot be
pressed.
Specifies the font of the CommandButton caption. Clicking
this property will invoke a font dialog box in which you can
set the font name, style, and size.
Specifies the height of the CommandButton in twips.
Specifies the number of twips from the CommandButtonss
left edge to the Form windows left edge.
Determines the image of the mouse cursor when the user
moves the mouse pointer over the CommandButton.
Holds the name of an icon graphic image that appears on
the CommandButton as long as the Style property is set to
1-Graphical.
Determines whether the CommandButton appears as a
standard Windows button (0: Standard) or a
CommandButton with a color and possible picture (1:
Graphical)
Specifies the order of the CommandButton in the focus
order.
Boolean. Determines whether the CommandButton can
receive the focus.
Holds the text that appears as a tooltip at runtime.
Specifies the number of twips from the CommandButtons
top edge to the Form windows top edge.
Boolean. Determines whether the CommandButton appears
(True) or is hidden from the user (False) at runtime. Invisible
CommandButtons are only invisible at runtime.
Holds the width of the CommandButton in twips.

IN FOCUS: EVENTS
Events, as discussed in the introduction, are the primary elements of a user and VB interaction.
Your application opens a dialog box when the user selects the Open menu or outputs the square of
two numbers when the user clicks on a button. Selecting the menu and clicking the button are
examples of events.
Events can be keyboard- or mouse-triggered. With the mouse, you can use the MouseDown,
MouseUp, and MouseMove events to enable your applications to respond to both the location and
the state of the mouse.

Event

Description

MouseDow
n

Occurs when the user presses any mouse button.

MouseUp

Occurs when the user releases any mouse button.

MouseMov
e

Occurs each time the mouse pointer is moved to a new point on

the screen.

Click

Occurs when the user clicks the selection mouse button (may
be the right or left button).

DblCLick

Occurs when the user double clicks the selection mouse button
(may be the right or left button).

Keyboard clicks and key presses also provide means of data input and basic window and menu
navigation. The following are the events you can trigger using the keyboard:

Event

Description

KeyPress

Occurs when the user presses any keyboard key.

KeyUp

Occurs when a pressed key returns to its normal or up state.

KeyDown

Occurs when a key is in its down state (when the user presses
the any key).

How do a KeyPress and KeyDown or a MouseDown and a Click differ from each other? KeyPress and
MouseDown are keyboard/mouse state related. They occur at that instant when the mouse button
is clicked down and a key is pressed down. This means the events occur before the mouse button
or key is released back to its normal state. Click and KeyPress occur after the user has clicked the
mouse or pressed a key.
How do we create event-handlers then?
Window appears like the one below.

When we double click the CommandButton, a Code

Visual Basic automatically creates an Event Procedure for you in the format:
Private Sub cmdSum_Click()
End Sub
An Event Procedure is simply a block of statement executed when an event (in this case, a Click)
of a particular control is triggered. cmdSum is the name of the control that we clicked. The Click()
event is the default event of a button VB assumes that you want to do something like calculating
the sum of two numbers when the user clicks on this button at runtime. If this is indeed what you
want, you write VB code within the procedure. The ListBox on the right contains all the Events
supported by cmdSum, a CommandButton control. It supports, aside from Click(), MouseUp(),
LostFocus(), and many others. The TextBox also supports events. You might want to execute a
procedure when the user enters something in the TextBox (a KeyPress() event), or when it the user
edits the text property at runtime (Change() event).
IN FOCUS: THE END STATEMENT

The End statement ends an application immediately. No code after the End statement is executed.
The program will also not respond to further events. To end the program, simply execute the
statement End as in the following example:
Private Sub cmdQuit_Click( )
End
End Sub

IN FOCUS: REMARKS
Remarks are notes that you write in your code. These notes are commonly used to help clarify
some code, explain codes to readers, state the programmers name and the date the program was
written, and describe the purpose of the program. Since remarks are intended for people, they are
completely ignored by VB.
VB supports two kinds of remarks:

Remarks that begin with the Rem statement
e.g.
Rem Programmer:
Jay R.C. Fernandez
Rem
Computer Center
Rem
17 May 2001
Rem This program computes for the average of 3 numbers.

Remarks that begin with the apostrophe

e.g.
x=x+1
This statement increments the value of x by 1.
y = Computer
This statement assigns the string Computer to variable y

Lesson in Action
The application that will be creating will ask for the users first and last name and outputs Hello
<firstname> <lastname>! in a label. The visual representation of the program is as follows:

1. Create a new project.

2. For the Form control, set the following properties:
Name
frmMain
Caption
An Interactive VB Application
MaxButton
False
StartUpPosition
Center Screen
Height
4410
Width
6195
BackColor
White
3. Drag 3 Labels to the Form:
Set the following properties for the first Label:
Name
lblFName
BackStyle
Transparent

 Caption
Font
Top
Left
Width
Height
Set the following properties

Name

BackStyle

Caption

Font

Top

Left

Width

Height
Set the following properties

Name

BackColor

Caption

Font

Width

Height

Top

Left

First Name
Arial, Size 14, Regular
600
360
1575
495
for the second Label:
lblLName
Transparent
Last Name
Arial, Size 14, Regular
1200
360
1575
495
for the third Label:
lblOutput
Light Blue
None. Erase Default Value
Arial, Size 14, Italic
5295
975
1800
360

4. Drag 2 TextBox controls to the Form.

Set the following properties for the first TextBox:
Name
txtFName
Font
Arial, Size 14, Regular
Text
None. Erase Default Value
Width
3495
Height
495
Top
480
Left
2160
Set the following properties for the second TextBox:

Name
txtLName

Font
Arial, Size 14, Regular

Text
None. Erase Default Value

Width
3495

Height
495

Top
1080

Left
2160
5. Drag 2 CommandButton controls to the Form.
Set the following properties for the first CommandButton:
Name
cmdGreet
Caption
Greet
Width
1695
Height
495
Top
3120
Left
2160
Set the following properties for the second CommandButton:

Name
cmdQuit

Caption
Quit

Width
1695

Height
495

Top
3120

Left
3960
6. Enter the following procedures.

Private Sub cmdGreet_Click()

lblOutput.Caption = "Hello " & txtFName.Text & " " & txtLName.Text & "!"
End Sub
Private Sub cmdQuit_Click()
End
End Sub
7. Run the application and see how your new application works.
8. Save your work as Lesson2.vbp.

On your Own
1.

1. Create an application with the following specifications: Add two

CommandButtons and one Label between them in one line. Make the Labels Caption
property blank. When the user clicks the first CommandButton, a caption should appear
on the Label that reads Left Button Clicked!.
When the user clicks the second
CommandButton, a caption should appear on the Label that reads Right Button Clicked!.
2.
2.
Create an application with five CommandButtons aligned
vertically. Reverse the focus order so that when you run the application and press the Tab
key several times, the focus order flows upward through the CommandButtons.