Contents
# What are the
Keyboard events?
# Sample
application using Keyboard
# What are Mouse
events?
# Sample
application using Mouse
# How to use Drag
and Drop?
# Sample
application using Drag and Drop
# What is control array
and how to create and use it?
Keyboard and Mouse are two most important
input devices. When user uses these devices, Visual Basic generates a set of
events. In this chapter, we will discuss
about the events that are generated by keyboard and mouse. We will also see how
to use these events and how to choose the right event. Drag and Drop interface has gained a lot of
popularity and acceptance among users. We will discuss about how to implement
drag and drop interface, and properties, methods and events related to drag and
drop.
Keyboard Events
When user presses a key on the keyboard,
Visual Basic generates a few events. These events allow user to know which key
is exactly pressed. Keyboard events occur for the controls that can receive
input (have focus).
The following are the keyboard events
available in Visual Basic:
|
Event
|
When does it occur? |
|
KeyDown
|
When user
presses the key on keyboard.
|
|
KeyUp
|
When user releases the key on keyboard.
|
|
KeyAscii
|
When user
presses and releases an ANSI key.
|
Table
8.1: Keyboard events
KeyPreview property of Form
If the KeyPreview
property of the form is set to True,
the form receives keyboard events before controls on the form receive the
events. This is useful when you want to have a global keyboard handler for the
form.
The following section will discuss all the
details related to the three keyboard events mentioned in table 8.1.
KeyDown and KeyUp events
Keydown event occurs when user has pressed a key from keyboard. KeyUp event occurs when user releases a
key that he has pressed earlier. That means every KeyDown event is followed by a KeyUp
event.
These events occur for all types of keys
including special keys like F1 and Home
key. The following are parameters for these two events.
|
Parameter
|
Meaning
|
|
KeyCode
|
A key code is
the code of the key pressed. Each key
on the keyboard has a code. You can
use constants such as vbKeyF1 (the F1 key) to know which key on the keyboard
is actually pressed by user.
|
|
Shift
|
An integer
that corresponds to the state of the SHIFT, CTRL, and ALT keys at the time of
the event. Please see the section
“Knowing status of control key” for details on this.
|
Table 8.2: Parameters
of KeyDown
and KeyUp events.
Knowing the status of control keys
It is possible to know which of the three
control keys - SHIFT, CTRL, and ALT – are pressed at the time of pressing a key
using Shift parameter of KeyDown and KeyUp events.
Shift parameter is an integer parameter with first three bits containing
the status of these three control keys. Depending upon which keys are pressed
the corresponding bits will be set. The
bit and the corresponding key will be:
|
Bit
|
Key
|
Value
|
Constant |
|
0
|
SHIFT
|
1
|
VbShiftMask
|
|
1
|
CTRL
|
2
|
VbCtrlMask
|
|
2
|
ALT
|
4
|
vbALTMask
|
Note: You need not directly deal with bit number. You always use
constants to check for the corresponding key.
To
test whether shift key is pressed, enter:
If (Shift
and vbCtrlMask) <> 0 then
‘
shift key is pressed
End if
To
check whether user has pressed CTRL + F1, enter:
If keycode = vbkeyF1 and ( Shift And vbCtrlMask) <> 0 then
‘
user has pressed Ctrl + f 1
end if
keyDown and KeyUp events will not occur when
user presses:
¨
The Enter key if the form has a CommandButton
control with the Default
property set to True.
¨
The Esc key if the form has a CommandButton
control with the Cancel property
set to True.
¨
The Tab key.
Note: KeyDown and KeyUp events are generally used to trap
extended keys such as function key and arrow keys.
KeyPress Event
Keypress event occurs when user presses and
releases a key. This event occurs only when user presses one of the ANSI keys
such as alphabets, digits etc. This event doesn’t occur when user presses arrow
keys, function keys etc.
KeyAscii parameter
KeyPress event has a single parameter, KeyAscii,
which contains the ASCII code of the key that is pressed.
Note: You can ignore the character by setting KeyAscii parameter to 0.
Sample Application Using Keyboard Events
Now let us develop a small demo application
to understand how to use keyboard events. This application contains a textbox
into which user enters a code. By default, whatever user enters is converted to
upper case and digits are not allowed. However, user can select to convert
subsequently entered characters to any case and also choose to allow digits by
checking Allow Digits checkbox.
Let us take the required steps to create
the project, create user interface, and change properties.
1.
Select File->New Project and select
Standard Exe type
2.
Place the control.
3.
Change the properties as
follows:
Object |
Property
|
Value |
|
Form1
|
Caption
|
Keyboard
Events Demo
|
|
Label1
|
Caption
|
Code
|
|
Text1
|
Text
|
“”
|
|
Frame1
|
Caption
|
Convert To
|
|
Option1
|
Name
|
OptUpper
|
|
|
Caption
|
&Upper
|
|
Option2
|
Name
|
OptLower
|
|
|
Caption
|
&Lower
|
|
Check1
|
Name
|
Chkallowdigits
|
|
|
Caption
|
&Allow
Digits
|
|
Command1
|
Name
|
Cmdexit
|
|
|
Caption
|
&Exit
|
Writing code for KeyPress Event
As we have to convert the entered text to
either of the cases and disallow digits,
if Allow Digits check box is unchecked, the right event for this is KeyPress event. Here is the code for
KeyPress event of Text1.
Private
Sub Text1_KeyPress(KeyAscii As Integer)
Select Case KeyAscii
Case
48 To 57
' ignore if Allow Digits is unchecked
If chkallowdigits.Value = 0 Then
KeyAscii = 0 ' ignore
End If
Case
65 To 90:
'check whether lower case is selected
If optlower.Value Then
keyascii = KeyAscii + 32 '
convert to lower
End If
Case
97 To 122:
'check whether upper case is selected
If optupper.Value Then
KeyAscii = KeyAscii - 32 ' convert to upper
End If
End
Select
End Sub
Listing 8.1: Code for
KeyPress event.
In the above code, we check whether the key
is a digit, or an upper case letter, or a lower case letter using ASCII code of
the entered key.
The
ASCII codes are as follows:
Letters
A to Z 65
to 90
Letters
a to z 97 to 122
Digits
0 to 9 48
to 57
Space 32
Backspace 9
Next we will understand mouse events.
Mouse Events
Mouse events occur when user presses and
releases mouse buttons. The following
are the events related to mouse.
|
Event
|
When does it occur? |
|
Click
|
When user
presses and releases a mouse button.
|
|
Dblclick
|
When user
presses and releases and again presses and releases a mouse button.
|
|
MouseDown
|
When user
presses a mouse button.
|
|
MouseUp
|
When user
releases a mouse button.
|
|
MouseMove
|
When user moves
mouse pointer.
|
Table
8.3: Mouse events.
Click and Dblclick event do
not have any parameters. It is not possible to know which button is pressed and
the position of mouse pointer at the time of click.
MouseDown, MouseUp and MouseMove events give the following
information:
¨
The position of mouse pointer
on the object at the time of user pressing a mouse button
¨
Which button is pressed - Left,
Right or Middle.
¨
Which of the control keys, such
as SHIFT, CTRL, and ALT, are pressed along with mouse button.
The following are the parameter of MouseDown, MouseUp and MouseMove
events.
|
Parameter
|
Meaning |
|
Button
|
Contains a value indicating which button
is pressed. The values are:
1 – left, 2 – Right, 4 – Middle.
|
|
Shift
|
Contains a value indicating which control
keys are held down at the time of pressing mouse button.
1 –Shift, 2 – Ctrl, 4 – Alt.
|
|
x, y
|
The
coordinates of the location where mouse pointer was at the time of click.
|
Table
8.4: Parameters of MouseDown, MouseUp and MouseMove
events
Note: The Button argument for MouseDown and MouseUp differs from the button
argument used for MouseMove. For
MouseDown and MouseUp, the button argument indicates exactly one button per
event, whereas for MouseMove, it indicates the current state of all buttons.
Sample Application using Mouse Events
The following program allows user to draw
lines as you drag the mouse pointer. Here is the list of options available in
this program.
¨
You can draw as you move mouse
pointer by holding down the left button.
¨
You can draw a line by connecting
two points, Where points are marked with right mouse button.
¨
You can clear the form by
holding down Shift key and pressing left mouse button.
Steps to create application
Here are the steps required to create the
application.
1.
Select File-> New Project and select Standard Exe as the project type.
2. Change the Caption of the
form to Mouse Events Demo.
3.
Write the code for required
events as show in listing .
General/Declaration
Dim firstclick As Boolean
Dim px, py
Private
Sub Form_Load()
firstclick = True
End Sub
Private
Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As
Single)
Static x1, y1
'shift click - clear the form
If
Button = 1 And Shift = 1 Then
Cls
Exit Sub
End
If
‘ if
right button is pressed for the first time remember the
‘
coordinates of the point
If
Button = 2 Then
If
firstclick Then
x1 = X
y1 = Y
firstclick = False ‘ next click
will not be first click
Else
‘ This is second click so draw a line connecting first click
‘ point and current point
Line (x1, y1)-(X, Y)
firstclick = True ‘ next click
will be first click
End
If
‘ if
left button is pressed remember coordinates of the point where
‘
mouse button has gone down so that these coordinates can be used
‘ in
MouseMove event
ElseIf
Button = 1 Then
px = X
py = Y
End If
End Sub
Private
Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As
Single)
‘ if
user is moving mouse pointer by holding down left button
If
Button = 1 Then
Line (px, py)-(X, Y)
‘
current point becomes previous point for the next event
px
= X
py
= Y
End If
End Sub
Listing
8.2: Code for Mouse events in sample application
Test Run
Run the above project and test whether it
is doing what it is supposed to do.
1.
Press F5 to run the project.
2.
First take the mouse pointer to
the point from where you want to draw a line and click on right button.
3.
Then take the mouse pointer to
the ending point and again click on right button to draw a line connecting
first point with the second point.
FirstCilck is a variable that is used to know whether the click is first click
or second click. It is set to false by default. It is set to true after form
encounters the first click and again set to false at second click.
4.
Now, test dragging mouse
pointer to draw a line. Whenever you move the mouse pointer by holding left
button a continuous line is to be drawn as you move the mouse pointer. Test it
by dragging the mouse pointer to draw your name.
5.
To clear whatever is on the
form, press Shift + left button of mouse
Drag and Drop
Drag and drop is an interface. It allows
users to drag and drop a control to another control. Dropping control invokes
an action. For example, in windows explorer when you drag a set of files from
one directory and drop them on another directory, all the selected files will
be moved (or copied, if Ctrl key is pressed) to the directory on which the
files are dropped.
The control that is being dragged is called
Source, and the object on which the
Control is dropped is called as Target.
The following are various properties,
methods and events related to drag and drop.
|
Type
|
Name
|
Meaning
|
|
Property
|
Dragmode
|
Specifies
whether control is in manual drag mode or in automatic drag mode. Please see
the following section on drag modes.
|
|
Property
|
Dragicon
|
Specifies the icon to be used as the mouse
pointer during drag and drop operation.
|
|
Method
|
Drag
|
Begins, ends,
or cancels a drag operation.
|
|
Event
|
Dragdrop
|
This event
occurs when a source control is dropped on the target. This event occurs on
target.
|
|
Event
|
DragOver
|
Occurs on
target when the dragging process is in progress.
|
Table
8.5: Properties, Methods, and Events related to
Drag-and-drop.
Manual vs. Automatic drag mode
A control may be in either manual drag mode
or automatic drag mode. In manual drag mode, program has to initiate dragging
process by calling drag method. Whereas
in automatic drag mode, whenever user clicks on the control, drag process is
initiated.
Set DragMode
property of the Control to 0 for manual drag mode or 1 for automatic drag mode.
Drag method
Drag method is used to initiate, cancel or
end drag operation. Drag method is
used to initiate drag operation only when control is in manual drag mode (DragMode set to 0).
Drag action
The following are the valid actions.
|
Action
|
Constant
|
Meaning |
|
0
|
VbCancel
|
Cancels drag
operation.
|
|
1
|
VbBeginDrag
|
Initiate drag
operation.
|
|
2
|
VbEndDrag
|
Ends drag
operation and drops the Control.
|
Note : Change the icon used as mousepointer during dragging process using DragIcon property before dragging is
initiated.
Events related to Drag and drop
During drag-and-drop operation DragOver and DragDrop events occur. Both events occur on target Control. DragOver event occurs when dragging is
in progress. DragDrop event occurs
after the Control is dropped. Both events allow you to access the source
control through source parameter
The following are the common parameters of DragOver and DragDrop events. DragOver
has one extra parameter – State.
|
Parameter
|
Meaning |
|
Source
|
Refers to the
control that is being dragged. You can access the properties and methods of
source control, for example : Source.Picture
|
|
X, y
|
The x and y
coordinates of mouse pointer within target control.
|
|
State
|
Indicates the
transition state of the control being dragged in relation to a target
control. The following are valid values:
0 = Enter (source control is being dragged within the range of a target).
1 = Leave (source control is being dragged out of the range of a target).
2 = Over (source control has moved from one position in the target to
another).
|
Table
8.6 : Parameters of Drag and Drop event procedures.
Sample Application using Drag and Drop
Let us develop a small application using
drag and drop. The aim of this application is to illustrate how to use various
methods, properties and events related to drag and drop.
The application contains four image
controls. Three of them will contain images of the default size and one will
stretch the image. When user drags any
of the three images into fourth image and drops it, the dropped image will be
displayed in enlarged mode.
The following are the steps to be taken to
develop this sample application.
1.
Start a new project using File->New Project and select Standard EXE as the type of the
project.
2.
Place four image controls on
the form and change the properties as follows.
|
Object
|
Property
|
Value |
|
Image1
|
Picture
|
C:\windows\web\disney.ico
|
|
Image2
|
Picture
|
C:\windows\web\life.ico
|
|
Image3
|
Picture
|
C:\windows\web\hwood.ico
|
|
Image4
|
Stretch
|
True
|
|
|
BorderStyle
|
1-Fixed
Single.
|
|
Form1
|
Caption
|
Drag and Drop
Example
|
Note: The picture that is placed in Image control must be an Icon. Because
the same picture is used for DragIcon
property, Which can take only an Icon.
Write the following code. The code consists
of MouseDown event for first three image controls and DragDrop event for fourth image.
Private
Sub Image1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As
Single)
Image1.DragIcon = Image1.Picture
Image1.Drag
End Sub
Private
Sub Image2_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As
Single)
Image2.DragIcon = Image2.Picture
Image2.Drag
End Sub
Private
Sub Image3_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As
Single)
Image3.DragIcon = Image3.Picture
Image3.Drag
End Sub
Private
Sub Image4_DragDrop(Source As Control, X As Single, Y As Single)
Image4.Picture = Source.Picture
End Sub
Listing
8.3: Code for Drag and Drop sample application.
Test Run
1.
Run the application to
understand how it implemented drag and drop. To run press F5.
2.
Click on any of the first three
images and start moving the mouse pointer by holding down left button
(dragging).
3.
Along with mouse pointer the
picture of the image control that you are dragging is moved. This is because we
changed DragIcon property to the
icon in Image control before dragging process starts.
4.
Move the mouse pointer to
Image4 and drop it there. At this stage you should see the enlarged image
displayed in fourth image control.
Using DragOver event
You can use DragOver event of Image4 to display a different icon when control
enters into it to inform the user that the pointer has reached the place where
the control can be dropped. This could be done by changing DragIcon property of the source control when State parameter is 0
(enter). Again DragIcon can be
reset when control goes out of image4. The sample code is shown in listing 8.4.
Private
Sub Image4_DragOver(Source As Control, X As Single, Y As Single, State As
Integer)
' if
entering into control then change dragicon to icon
'
that indicates potential area to drop
If
State = 0 Then ‘replace potential.ico
with an Icon that you want ‘ to use.
Source.DragIcon = LoadPicture("potential.ico")
' if
leaving then reset control's dragicon
ElseIf State = 1 Then
Source.DragIcon = Source.Picture
End
If
End Sub
Listing
8.4: Code to change mouse pointer when control
enters and leaves target.
Using a control array to simplify code
A control array is an array of controls. A
control array is used when we have to write more or less the same code for a
group of controls of the same type. The sample application that we have
developed for drag and drop, is one of the candidates for control array. As you
can see, the code that we wrote for first three images is same except the name
of the control. So by using a control array we can write the same code just for
once, instead of three times.
The concept of control array is same as the
concept of menu array, Which we have seen in chapter 7. A control array is a collection of controls
with the same name but with different values for Index property of the controls. Whenever an event occurs at any of
the controls in the control array, only one event procedure is fired; that is
of the control array and not individual controls.
The event procedures of control array
contain one extra parameter, Index,
that contains the index value of the control at which event has occurred.
To
create a control for three images, take the following steps:
1.
Change the Name property of all three images (Image1, Image2 and Image3) to Images.
2.
Change the Index of first image control to 0, second image control to 1, and
third image control to 2.
3.
Write the code for MouseDown event of control array - Images, as shown in listing 8.5.
Private
Sub Images_MouseDown(Index as Integer, Button As Integer, Shift As Integer, X
As Single, Y As Single)
Images(index).DragIcon
= Images(index).Picture
Image(index).Drag
End Sub
Listing
8.5: Code for MouseDown event of the control array.
Images
(index) refers
to the control that initiated the event. So we use Drag method of that control to start dragging.
That's all. No more changes are required.
Code for DragDrop and DragOver events will remain the same.
If you run the application, it will do the same job as before. But it is more
efficient because we have only one event procedure for three images instead of
three separate event procedures.
Exercises
1.
How can we know button is
pressed, when user clicks mouse button?
2.
What will be the value of Shift parameter of KeyDown event when user presses Ctrl key?
3.
How can we ignore a key using KeyPress event? Is it also possible to
change the key without ignoring it?
4.
What is the event that occurs
when a source control is dragged on to target control?
5.
What are the properties of the
controls to be changed to create a control array?
6.
What is the order of MouseUp and Click event for a Command
button? Is it different from a form?
7.
How do you ignore Backspace
key?
8.
Is it possible to know whether
user pressed Ctrl key while moving the mouse pointer? If yes, how do you check
for it?
No comments:
Post a Comment