Return to IFS 110 class Notes Menu!

Project 5
Drag-and Drop Events and More Complex Code Structures

Traffic Sign Tutorial

• Application is tutorial that teaches meaning of several traffic signs
• Instructed to drag and drop the signs into the correct containers
• If sign dropped into an incorrect container it snaps back to its original location

Options Menu (3 commands)

1. Clear - returns all signs to their original locations
2. Show - places the signs in their correct containers
3. Quiz - presents a series of three questions about the shapes of the signs

Creating the Interface

• Size and location of form determined
• Controls added to form
  • one shape control
  • one individual image control
  • one individual label control
  • two arrays of image controls
  • one array of label controls

Uses of Controls

• Label control - used to contain the run-time instructions for the application
• Shape control - used to visually group the traffic signs
• Individual image control is left blank and is not visible at run-time (it contains a blank picture that is assigned to other image controls through code statements to make them appear to move)

Dragging and Dropping Code

• Run-time dragging and dropping of a control does not automatically change its location.
• When the left mouse button is released to drop the control, the control retains its original position
• Any relocation must be specifically programmed with code to occur when the left mouse button is released

Dragging and Dropping Code

• When dragging and dropping many times the control does not actually move
• The control only appears to relocate by changing the properties of it and other controls, such as the Visible property

Dragging and Dropping Terms

• Source control - control being dragged
• Target control - the control over which the source control is located during the dragging operation
• Sign appears to move into a container by changing the Picture property of container from being blank to being equal to the Picture property of the image being dropped

Dragging and Dropping Code

Note: Much of the apparent movement is the result of changing the values of the Picture and Visible properties.

• The controls for the five signs are grouped in an array to simplify the code later

DragMode Property

• DragMode property - the value determines the ability to drag a control during run-time
• Automatic - dragging operation initiated during run-time by positioning mouse pointer on control and clicking left mouse button
• DragMode property set in Properties Window or with code statements

Setting Properties (steps)

• properties of form
• properties of five label controls used to display the names of the containers
• properties of the controls in the imgSign array
• properties of the individual image and label controls

Setting Properties
imgSign Array Controls

• Controls in array must have a common value for their Name property
  • no similar restriction on any other properties of controls in an array

DragIcon Property

Note: When dragging initiated during run-time, only an outline of control is moved across the desktop.

• DragIcon property - can be set for a control so that an image other than the control's outline can appear as the control dragged
• DragIcon property will be set using code statement

Sign Icons

• To load the icons Visual Basic had to access the .ICO files from COMMON\GRAPHICS\ICONS\TRAFFIC directory
• Once icons are loaded, they are saved as part of the form file, and the .ICO files are not used again

Writing Code

• DragOver event - occurs when a drag-and-drop operation is in progress. The mouse pointer position determines which target object receives this event.
• Write code that applies to any control being dragged over the target by using the word source in the code

Example: Source.Visible = False (invisible for any control being dragged over)

DragOver Subroutine

Note: changing the source control's Visible property to False does not affect the source control's DragIcon property (drag icon is still visible)

• Changing the source control's visible property to False gives the effect that the source control is being picked up and moved

DragDrop Subroutine

• DragDrop event - occurs when a drag-and-drop operation is completed as a result of dragging a control over a form or control and then releasing the left mouse button
• Visual Basic automatically adds the line to a DragDrop subroutine

Sub ctrlName_DragDrop (Source As Control, X As Single, Y As Single)

DragDrop Subroutine

• The arguments of the DragDrop procedure are listed in Table 5-2 page VB 5.26
• DragDrop event procedure is used to control what happens after a drag-and-drop operation has been completed.

Example: can use the DragDrop event to move the source control to a new location or change the Visible property of the source control

Traffic Sign Code Activities

• General_Declarations sub
• frmTraffic_Load, DragOver, and DragDrop subs
• Label1, Label2( ), imgContainer( ), and imgSign( ) DragDrop subs
• mnuClear_Click sub
• mnuShow_Click sub
• mnuQuiz_Click sub

General_Declarations Sub

• Traffic Sign Tutorial keeps a count of the number of correct sign placements by adding the number 1 to a variable NumCorrect%
• Since NumCorrect% must be available to more than one subroutine it must be declared.

Declaring Variables

• Variables declared with Dim statement in general declarations procedure of form are available to all procedures within form
• Generally put Dim statement at beginning of procedure
• Can use Dim statement at the module (General declaration) or procedure level to declare the data type of a variable

Type-Declaration Characters

• An alternative way to declare the data type is to use a type-declaration character instead of the as type clause.
• Type-declaration character is a special character appended to the variable name that identifies its data type

Example: 
$ sign used for strings, % sign used for integers  Dim num%

Three-letter Prefixes Variables

• Naming convention exists for variables, where a 3-letter prefix identifies data type
• Three-letter prefix does not substitute for declaring data type with the as type clause the way the type-declaration character does
• Both the 3-letter prefix and type-declaration characters make code easier to understand (choice between two largely one of personal preference or documentation standards of specific organization)

Visual Basic Data Types
(see Table 5-4 VB 5.28)

frmTraffic_Load Sub

• Traffic form centered on desktop
• Subroutine assigns a picture to DragIcon property of each control in imgSign array
• default property setting for drag icon is outline of the control
• DragIcon property for each image is set equal to that image's Picture property

imgSign(0).DragIcon = imgSign(0).Picture

Form_DragOver Sub

• Subroutine executed when control dragged over the form
• Since shape control does not have DragOver event, this event occurs when one of the traffic signs is dragged from original position
• Appearance of sign being moved (change Visible property of the source control to False) (drag icon visible, source control not)

Other DragDrop Subroutines

• Control can be dropped on any of the controls
• If traffic sign is dropped on any control other than an imgContainer is incorrect
• When error occurs, setting the source control's Visible property back to True makes the control appear to snap back to its original location

imgContainer_DragDrop Sub

• Dropping a sign on one of the containers may or may not be correct
• Care was taken to add controls in arrays to form in a certain order and assign pictures of imgSign array and captions of Label2 array in same order
• Correctness of dropping sign on container is determined by whether their indexes match

imgContainer_DragDrop Sub

• Later, imgSign controls will be rearranged on form to make tutorial harder, but this will not affect their indexes
• If correct add 1 to NumCorrect% variable
• counter - variable used to hold a count
• increment - add one to (positive / negative)
• nested - structure contained within another structure of the same type (see p VB 5.34)

Procedures Advantages

1. No duplication of effort
2. Reduces the length of a program
       saves memory space
       reduces complexity
3. Code can be shared with other projects
       saves time when coding new projects

Calling Clear Procedure

• The imgContainer_DragDrop subroutine returns the signs to their original positions when all 5 signs are placed in the correct containers.
• This is the same thing performed by the mnuClear_Click subroutine.
• Instead of writing duplicate code to return the signs imgContainer_DragDrop subroutine can call mnuClear_Click sub.

mnuClear_Click (calls subroutine)

mnuClear_Click Subroutine

Returning Signs involves 2 Actions

1. Clearing pictures from container images
        (setting Picture property to Picture property of imgBlank control)
2. Setting Visible property of imgSign controls array to True
       (each sign appears to return to its original location)

Note: Subroutine also resets the value of NumCorrect% to 0

mnuShow_Click Subroutine

• All signs appear to move from original locations to the correct containers
• Accomplished by setting imgSign control's Visible property to False and by setting each imgContainer's Picture property equal to the Picture property of the imgSign control's corresponding index

mnuQuiz_Click Subroutine

• Presents a series of three questions about the shapes of some signs
• A For...Next loop is used to repeat the process of presenting a question and processing an answer
• When Quiz displayed, main form removed using Hide method instead of Unload method (Form remains in memory)
• InputBox function displays a prompt in a dialog box, waits for user to input text or choose a button, then returns the contents of the text box to the subroutine

INPUTBOX FUNCTION

• Syntax: InputBox (Prompt, Title, Default)
• Prompt - String expression displayed as the message in the dialog box (max of 255 characters depending on width of char)
• Title - String expression displayed in title bar of dialog box (If title omitted, nothing is placed in title bar)
• Default - initial value in text box
• OK clicked, InputBox function returns whatever is in the text box (Cancel (""))

Select Case (extension of If)
see Table 5-6 VB 5.39

Select Case textexpression

Case expression1
        statementblock-1

Case expression2
        statementblock-2

Case Else
        statementblock-n

End Select

Select Case Example

Select Case MaritalStatus

Case Is = 1
    Debug.Print "Marital Status is Single"

Case Is = 2
    Debug. Print "Marital Status is Married"

Case Else
    Debug. Print "Marital Status is Invalid"

End Select

Do Until loop Syntax

Do Until condition (header statement)

statementblock

Loop (terminator statement)

Do - 1st statement in control structure

statementblock - statements repeated

Until - indicates loop executed until condition is True

condition - numeric or string that evaluates to True

Do Until loop Example

Sub Form_Load ( )

'Prints values 0 to 9 to the Immediate Window

Dim Count As Integer

Count = 0

Do Until Count = 10
    Debug.Print Count
    Count = Count + 1
Loop

End Sub

UCase$ function

• Returns a string with all letters of the argument uppercase

Syntax:

UCase$ (stringexpr)

Example:

teststring = "pete rose"

Name$ = UCase$ (teststring)

returns a value of "PETE ROSE" in Name$

Project 5
Drag-and Drop Events and More Complex Code Structures

END

Creating and Using a DragDrop Event Procedure Requirements

Return to IFS 110 class Notes Menu!