Visual Programming - Unit 1

Customizing a Form and Writing

Simple Programs
SPIT106 - Visual Basic
 Introduction to Visual Basic
• High-level programming language derived from
BASIC
• BASIC means Beginners’ All-purpose Symbolic
Instruction Code.
• . Visual Basic is a user-friendly programming
language designed for beginners
• Visual design with drag-and-drop GUI elements
• Integrated Development Environment (IDE) for
rapid development
 Starting a New Project
• Standard EXE project is default
• or an ActiveX control you are building from
scratch
• File → New Project or CTRL + N
• Choose 'Standard EXE' to begin
• Next, note the blank
window in the upper-
left corner of the center
window, which has a
grid of dots.
• This is the form that
you will customize by
adding controls such as
common buttons and
list boxes to it.
• You can then use the
grid to align the
controls that you will
place on the form.
 Altering a Form
• Resize form using mouse on form edges
• Use Form Layout window to position on screen
• Dynamic resizing possible at runtime
• Moving the form at design time so that it will show up at a
different location when the program starts up is a little
trickier.
• To change where the form will appear at run time, you need
to work with the Form Layout window, which is in the lower-
right corner of your screen.
• This window looks like a blank monitor, as shown here (on
your screen it may look a little smaller, and you may not be
able see the name of the form inside the icon
To change the position of a
form at run time, follow
these steps:
• Move the cursor to
the Form Layout
window. (The cursor
will change to a four-
headed arrow).
• Drag the form to the
position in which you
want it to appear
when the user starts
your program.
 The Properties Window
• F4 to open Properties Window
• Used to set properties like Name, Caption, Color
• Alphabetical and Categorized views available
• Title bar - working with the properties of Form 1.
• The line below the title bar also tells you Name of the object(Form 1) you are working with
and type of object(Form); EX: ‘Form 1 Form”.
• click the down arrow at the far right of this line to see at a list of these controls
• highlighted line - reads “Caption” in the first column and “Form I” in the second column. (If it
isn’t highlighted on your sereen, click on this, line to make it so.)
• The second column of the Properties window always indicates the current called the Settings
of the property.
• Once you’ve highlighted a line in the Properties window, you will be able to change the
current setting.
• The Setting box mostly works like an ordinary Windows text box as far as how you enter or
edit information.
• The DEL and INS keys work as you would expect, and so on.
• The key point to keep in mind is that whatever you enter in the Caption Settings box becomes
• the new caption for the form. For example, if you double-click in the right-hand column of
the Properties window, the whole Caption line will be selected.
 The Properties Window
• Since the right-hand column is working like an ordinary text box, there’s another method for
changing the setting for a property, which some people prefer:
– Move the mouse until the mouse pointer is in the right column of the correct line in the
Properties window.
– Click at the location where you want to insert the text.
– Enter the text you want you want to insert.
• Note that this method inserts text; it doesn’t replace the text originally there.
• To replace part of the text, you first have to select the text; holding down the mouse button
and dragging the pointer across the text or using a SHIFT+Arrow key combination lets you
select part of the text.
• Finally, the defaults arrangement in the Properties window is alphabetical. If you want the
Properties to be listed by functionality, simply click on the Categorized tab at the tab at the
top of the Properties window.
• This rearranges the Properties by what they do. As you can see here, there are categories for
the form, its behavior, and so on.
 The Properties Window
• Moving Through the Properties window
– You can use the arrow key or the mouse to scroll through the Properties window.
• Trivial Property:
A trivial property is simple to set. It takes a direct value, such as a number, string, or
Boolean.
Examples:
Label1.Caption = "Hello"
Form1.BackColor = vbBlue
Check1.Value = 1

These are trivial because:

They involve simple data types (string, number, etc.)
They use direct assignment =
 The Properties Window
• Nontrivial Property:
– A nontrivial property is more complex.
– It usually:Is an object, not a simple valueRequires using Set to assign
– May involve creating and configuring a separate object first
Example
Public Property Name As String
Get
Return _name.ToUpper() ' Always return name in uppercase
End Get
Set(value As String)
_name = value.Trim() ' Remove leading/trailing spaces before storing
End Set
End Property
To run a Visual Basic application
Three ways to run a Visual Basic application:
1. Select the Start option from the toolbar by clicking the forward arrow (it’s usually the
twelfth tool)
2. Select the Start option from the Run menu by using the mouse or by pressing ALT+R, S.
3. Press the F5 shortcut.

After a short delay, the form will pop up super-imposed on the Visual Basic IDE
▪ Notice that this form has neither a minimize nor a maximize button and is located
relative to the screen as was indicated in the Form Layout window.
▪ Notice also that, unlike when you changed the caption, the changes to the Max and Min
button properties show up only at run time (that is, when you run the application).
To run a Visual Basic application
– To return to developing an application, you can click on the exit (X) button on the form,
or open the Run menu and click the End option, or use the End tool (the tool that looks
like a stop button on a cassette recorder).
Summary of the methods for changing
the properties
 Scale Properties

Property Description
Sets the unit of measurement (e.g.,
ScaleMode
Twips, Pixels, Points, etc.).
Sets the coordinate for the left edge of
ScaleLeft
the scale.
Sets the coordinate for the top edge of
ScaleTop
the scale.
Sets or returns the width of the internal
ScaleWidth
coordinate system.
Sets or returns the height of the
ScaleHeight
internal coordinate system.
Define the current drawing position
CurrentX, CurrentY (used with graphics methods like Print,
Line).
 Color Properties
• The BackColor and
ForeColor properties via
the color Platte
– hexdecimal code
– hexadecimal color codes
allows you to set up to
16,777,216
 Color Properties
• The system tab on this dialog
box gives you a list of the colors
currently used by windows for
its various elements. If you click
on the palette tab, the colour
grid shown here pops up.
• The background color of the
form will automatically show
changes to the Background
property.
• You won’t see the effect of
changing the ForeColor
property until you do something
like displaying text on the form.
 Working with the Color Palette

• Open the color palette. Open the color palette by going to the View menu and
choosing the color palette (ALT + V, L). Here’s something like what you’ll see:
• Notice, to the left of the palette, a dark box enclosed in a lighter box.
• The inner box diaplays the current foreground color, and the outer box display
the current background color.
• You can change the foreground color by clicking the inner box and then
clicking any of the colored boxes displayed. To change the Backgraound color,
click the outer box and then click any of the colored boxes displayed.
 Working with the Color Palette
• The text box in the lower-left corner of the color
palette displays the foreground and backgraound
colors for any text in the form in the form or
control you’ve selected. To go back to the default
colors specified in the Windows control panel,
click the Default command button at the right.
• You can also create your own coco for the color
palette. Each of the blank boxes on the button of
the color palette represents a possible custom
color. To make one, follow these steps:
• Click one of these blank boxes, and
then click the Define Colors command
button (which is now enabled). This
opens the Define Color dialog box,
shown here.
• Change the amount of red, green, or
blue; color; hue; saturation; or
luminosity of the color to suit your
need by adjusting the controls in the
dialog box.
• Press the Add Color button to create
the custom color or the Close button to
cancel.
• To make the color palette go away, double-click on
its control box or use the ALT + F4 shortcut when
the palette has the focus.
Making a Form Responsive in
Visual Basic 6.0
Understanding Events and Form
Behavior
 Introduction

• Making a form responsive is essential for creating interactive Visual Basic applications.
• Forms must respond to user actions (e.g., mouse clicks, loads, etc.).
• Making a Form Responsive
• By now, you should be comfortable with designing Visual Basic forms. But making a form in
the right size, shape, and having the right background color is hardly what Windows
programming is all about.
• The essence of a Microsoft Windows program (and, therefore, of Visual Basic) is to make
your forms respond to user actions.
 Event Handling in VB6
• Visual Basic object can recognize many different events.

• For example, if a user clicks an area on the screen, you may want to display a message;

• if the user clicks a command button, you may want to perform a specific action, such as
displaying an image.

• Making something happen is where the programming comes in!

• The point is that although Visual Basic objects can recognize many different events, the
objects will basically sit there insert unless you’ve written code to tell them what to do when
the event happens.

• This means that for any events to which you want a Visual Basic object to respond, you must
write an event procedure telling Visual Basic what to do.

• Event procedures are nothing more than the lines of programming code that tell Visual Basic
how to respond to a given event.
 Form_Load Event

• This code is an example of an event procedure

template.
Private Sub Form_Load () BackColor = vbRed
End Sub
And run the program you’ll see that the
background color of the form indeed changes
to red.
Form_Click Event
Form_Click Event
 Output and Behavior

• As you’ve probably guessed, the Print command sends the

exact text found between the quotation marks directly to the
form.
• It uses whatever values you have currently set for the Font
property and the Fore Colour property.
• In the preceding illustration, I changed the Font property so
the font size for the form would be 14 points-this makes a
larger “splash” than the default size of 8 points.
• Notice that the default starting position for displaying text is
the upper-left corner of the screen; you’ll see how to change
this in Chapter 6.
Monitoring Multiple Events
 Object.Method.
• If all you want to do is clear the screen • Object Name..Method What To Do
before displaying the second message, you • The default name for the first form
need only make the first like of the Double-
created in a Visual Basic project is
click procedure the Cls keyword. As it’s
Forml, so the Double-click procedure in
name suggests, this keyword clears any text
this syntax could be written as follows:
and graphics in the form. Your Double-click

event procedure now looks like this:

Sub form_Dbclick () Form 1.Cls
Private Sub Form_Db1 click ( )
Cls Forml.Print “I said to click once, not
Print “I said to click once, not twice!”
End Sub twice!”.

End Sub
 Printing a Visual Representation of a Form

• However, getting an image of the form, including whatever is currently

displayed on the form, to the printer requires only a single command:
PrintForm.
• The PrintForm method tries to send to your printer a dot-for-dot image of
the entire form.
• As an example, add the line PrintForm to the Double-Click procedure
before the End Sub line. Then double-click and see what happens.
 Typos
• Nobody types completely accurately all the time.
Visual Basic can print out many typing errors when
you enter a line of code, and it will even correct
come (such as leaving off a closing quote). All this
happens even before you try to run your program.
• But few programmers enter code without typos. So
to see what might happens, let’s suppose you made
a typo when you were writing the Click event
procedure presented earlier, and you misspelled the
command word Print by typing Printf instead.
 Typos
•Printf should be in a different color

•If you don’t notice the color change and try to run

the program and click in the form.

•Visual Basic will immediately respond with an

error message box

•message box tells you, “Sub or Function not

defined

•If you press ENTER or click the OK command

button, the offending word remains highlighted,

and you can either type the correct replacement or

move the mouse pointer to the “f” and press DEL.

After you make the correction, the program will

run as before.
 Typos
• Visual Basic can even find some syntax errors after you finish typing a line. To make sure this
feature is on (or to turn it on, if it is off), choose Tools/Options and then go to the
Environment page. Move to the item marked Auto Syntax Check and make sure that it is
checked (on).
 Saving Your Work
• You should get into the habit of saving your work frequently and, in fact, Visual Basic
will not let you exit the program or start a new project without asking whether you
want to save your work.
• Even more is true: Visual Basic lets you set its options so that it will automatically save
your work before a project runs.
• This minimizes the direct effects of system crashes, because you can’t save a project
while it is running or when you are in break mode.
• To activate this feature:
• Choose Tools/Options and go to the Environment page.
• In the “When a program starts” box, change the “Don’t Save Changes” to
either one of the two other options. (I always choose the “Save changes,
don’t prompt” option.)
• Saving from the File Menu

– Save form:
• Show current working form
• CRTL+S (or use ALT+F.S).
• The default extension for form files is. Frm.
• The first time you choose this option, Visual Basic pops up a dialog box
• Subsequent uses do not pop up a dialog box

– Save Form As:

• The same dialog box as save form.
• This box allows you to rename the current form (.frm) file and is the only way
to make a backup copy or store a copy of the current form on another disk.
• To select this option, press CTFL+A (or ALT+F,A)

– Save project:
• to save the entire project
• ALT+F,V
• Vbp is the extension
– Save Project As:
 Creating Stand-Alone Windows Programs
• One of the most exciting of Visual Basic is the ability to change your projects into stand- alone

Microsoft Windows programs.

• These will be files that users can simply double-click on in Explorer in order to run them.

• Users won’t need to have a copy of VB on their systems at all!.

• To make a stand-alone VB application, simply go to the File menu and choose the Make Project

EXE File option (ALT+F,K).

• .vbp file with an.exe extension). For the stand-alone program, the Windows desktop uses the

same icon that Visual Basic uses for the executable version of the project.

• When you distribute a Visual Basic program, it is also necessary to supply one or more dynamic

link libraries (DLLs for short) to the user.

• DLLs can be shared, no matter how many different stand-alone Visual Basic applications users

have, they need only one copy of the 1.4 megabyte VB DLL in a directory accessible to Windows.

• The will also need only one copy of any custom control files used by your Visual Basic application.
Project Dialog box
 Toolbox and Controls
• Toolbox contains UI controls (buttons,
textboxes, etc.)
• Use View → Toolbox or ALT+V, X
• Click and drag controls onto form
 Creating and Naming Controls
• Double-click to create control
• Use 'Name' property to identify in code
• Prefix convention: cmd for button, txt for textbox
• There are two reasons why the feature of locating controls only
at grid points-called aligning to the grid or snapping to the grid-
makes positioning controls in Visual Basic a snap.
– First, the corners and sides of any control will always end up on a grid
mark.
– Second, you have a small amount of leeway when you move the
crosshair, Only when the vertical line of the crosshair hits a grid mark
does the object move left or right.
– Similarly, only when the horizontal line of the crosshair hits a grid mark
does the object move up or down.
 Working with a Control Already on a Form
• To work with an existing control, you must first select it (remember the
buzzword for this is “giving it the focus’).
• You do this by moving the mouse pointer until it is inside the control and
then clicking. (Or, you can press the TAB key until the focus is at the
control.
• You can tell which control has the focus by looking for the sizing
handles.).
Resizing an Existing Control
• Suppose you’ve created a command button but aren’t happy with its
size. To change the size of an existing command button at design time,
you either:
• Use the Properties window to adjust the Width and Height properties,
or Work with the sizing handles.
• Simply click inside the control by moving the mouse pointer to the
control and clicking once. When the sizing handles are visible, you know
the control is selected.
• Try resizing a control with the sizing handles by following these steps:
– Move the mouse pointer to sizing handle and click and hold sown the left mouse button.
– Drag the mouse until the control is the size you want.
• Moving an Existing Control
– Now, to move an existing control
– Move the pointer anywhere inside the control, click the left
mouse button, and hold it down.
– Drag the mouse until the control is at the location you want it
to be, and then release the left button.
• For finer control over the movement of controls:
– Select the control.
– Use CTRL + an arrow key to move the control one grid mark at
the time
– Or, you can directly adjust the left and Top properties in the
Properties window.
 Using the double-Click shortcut for creating
control
• As you know, if you double-click on any of the toolbox icons, the matching control appears in
the center of the screen.
• The more controls you double-click on, the higher they get stacked. You then can use the
techniques from the previous section for moving controls to reposition and resize the
controls on the stack.
• For example, suppose you want to create an application with five command buttons
symmetrically dispersed, as shown in figure 4-1.
• The easiest way to do this is to double-click on the Command Button icon five times.
• This stacks five command buttons in the center of the form.
• Then you can easily use the method given in the previous section to move the buttons to the
locations shown in figure 1-12
 Working with multiple controls
• Here are the steps for the “dragging” method to select multiple control:
– Imagine a rectangle that surrounds only those controls you want to select. Move to one corner of this
imagined rectangle and click the left mouse button.
– Hold the left mouse button down and drag the dotted rectangle until it covers all (and only) the controls
you want to select. Then release the mouse button.
The grouped controls all show sizing handles now. Note that all but one of the sizing handles are grayed. This is how
you know a group has been successfully selected.
• Once you have selected a group controls, when you move any control in the group, Visual Basic moves the other
controls in a similar way.
• For example, if you move one control that is part of a selected group down two grid marks, all the other controls
move down two grid marks.
• The dragging method of selecting multiple controls only works when the controls to be move can be placed in a
rectangular “lasso” that excludes any other controls. If the controls are widely scattered on the form, you’ll need
this next method:
• Select each control by moving the mouse pointer to it and holding down the left mouse button while pressing
CTRL.
 Working with multiple controls
Locking Controls

Once you are happy with the position of the controls on

your form, you may want to use Visual Basic’s locking feature.
By choosing Format / Lock Controls or the Lock Control tool
from the Toolbar, you can prevent yourself from inadvertently
moving a properly positioned control. Since this item is a
toggle, choosing it again frees up controls so that you can move
them again.

Deleting control

You may end up with too many controls on your form

especially if you use the double-click method a lot. To delete a
control:

1. Move the mouse pointer until it is

inside the control, and click the left mouse
button to select it.
2. Press DEL, or open the Edit menu and choose the
Delete option by pressing ALT
+ E, D.
 Basic controls and its properties
Basic controls of Visual Basic 6.0 | PPTX
 Access Keys

• ALT and one other key, the access key, to quickly activate a control or a menu for example.

These access keys are underlined in the caption of the control or name of the menu item.

• Visual Basic makes it easy to set up an access key for any object that has a Caption property.

• When you set the caption, all you have to do is place an ampersand ($) in front of the

letter you want to be the access key.

• For example, look at Figure 2-1. Notice that the C in the caption is underlined. When the

application is running. You can activate this button either by pressing the ALT+C combination

or by clicking on the button.

• Although it is possible to have the same access key for more than one control on a form,

doing so is unusual.

• What happens in this situation is that the focus moves to the next control with the same

access key, but that control is not activated until you click the mouse or press the SPACEBAR.
 Image Controls
• Image controls hold pictures. They can also be used to create toolboxes if you don’t have the
Professional edition
• The toolbox for an image control is the sun over a mountain
• Image controls can be used to
– Caption allowing access key for control
– Display icons or pictures created with a program such as Microsoft Paintbrush.
– They can also hold Windows metafiles or Jpegs or Gifs (the most common formats for the
Internet). Jpeg
– format is also the common format used by most digital cameras.
• You load a picture into an image control by resetting the value of the Picture property.
• If you choose the Picture property for the image control, this opens up a dialog box that lets you
choose what image file to load.
• You can also reset the Picture property directly by copying an image from a graphics program to the
Windows clipboard and then using the Copy command on the Edit menu to paste the image into the
image control.
• Visual Basic will attach the graphic to the project when you save it.
• Finally, you can also change this property via code
 Properties of Image Controls
• BorderStyle property for an image control has two possible settings: you can either have no

border (setting = 0) or a fixed single border (setting =1).

• Stretch property. This determines whether the image control adjusts to fit the picture, or the

picture adjusts to fit the control.

– If the Stretch property is left at the default value of False, the control resizes itself to fit

the picture.
– If you change it to True, the picture resizes (as best it can) to fit the control.
• As a general rule, only Windows metafiles - which essentially store directions for drawing

pictures rather than actual bitmaps - can be enlarged without great loss of detail.
– To see this, start a new project and place two large image control on the form. Set the

Stretch property to True for one of them, and leave the default for the other.
– Load the TRFFCO7 “slippery road” icon. Notice that the detail in the enlarged image is

greatly reduced (Stretch property = True), as shown here:

• Stretch property:
– This is a property of the Image control.Stretch = True: When set to true, the
image will be resized to fit the dimensions of the Image control. If the original
image is a bitmap and it's being enlarged, this stretching will likely lead to a loss
of detail.
– Default (likely Stretch = False or similar behavior): If the image is larger than the
control, it might be clipped (only part of it shown), or if it's smaller, it might be
displayed at its original size within the control, leaving empty space. The key is
that it's not being forced to fill the control by stretching.
 Navigating Between Controls

• Using the mouse is the most common way to move from control to control in a Windows application,
but your applications have to allow for using the TAB key as well.
• Tab order is the term used in a Windows application for the sequence of controls that pressing TAB
moves you through.
• In a Visual Basic application, the order in which you create the controls is the order used for the tab
order. The first control you create at design time is the one that receives the focus when the
application starts. If you press TAB once when the application is running, you move to the second
control you created at design time, and so on. If you press TAB when the focus is at the last control
you’ve created, the focus moves back to the first control. (Disabled controls are skipped).
• It’s Possible to change the setting for the tab order via the Properties window or by writing code.
• The property you need to set is the Tablndex property.
• If you set this value to 0 for a control, this control automatically becomes the first control in tab order,
and all the other controls move upward in tab order. What used to be the first control in tab order is
not the second, the second is now the third, and so on.
• If you change a control with a higher tab index, then only controls with larger tab indexes are affected.
If you create a control and set the Tablndex property at design time, the settings for the Tablndex
property are moved higher to make way for the new control.
• You can also change the Tablndex property via code
 The Grid

• Accurately positioning controls,

• mastering it will help you give your applications a finished, professional,
look.
• In order to control the grid, choose Tools Options (ALT+T,O), and then go
to the General page on the Options dialog box, as shown in Figure 4-12.
• Show Grid You can turn the grid on or off by changing the Show Grid
setting.
• The default setting is on. There is usually little reason to turn the grid
off. Grid Width, Grid Height Boxes The Width and Height text let you set
the distance (in twips) between grid marks.
• The default is 120 twips. Change these both to 60, and the grid becomes
twice as fine.
• Align Controls to Grid The Align Controls to Grid check box determines
whether controls automatically move to the next grid mark or whether
they can be placed between grid marks.
 Grid
• Usually you are better off changing the grid spacing to match your design requirements than
turning this option off.
• It’s possible to align an item to the grid even if you’ve chosen to turn this option off. To do
this, select the control by clicking it once (the sizing handles show up) and choosing Format|
Align|to Grid (or using the right-click menu)
 Message Boxes and Output
• MsgBox "Your message" for pop-up alerts
• Print "Message" to show on form
• Cls to clear form output
 What Happens When a Visual Basic Application Runs

• sees the initial form that you’ve designed

• Lot needs to happen in the background
• For example, before the form is visible to the user, Visual Basic
checks whether you’ve written an event procedure for initializing
the state of the form. This event procedure has a mnemonic
name-it’s called the Form Initialize procedure.
• Form Load procedure - to set the initial properties for a form
– Double-click in any blank area of the form to get to the Form-Load
event procedure template.
– You will have to explicitly choose the Initialize procedure from the
Event procedure list box on the right of the Code window in order to
work with it.
Private Sub Form Initialize ()
‘Initialize form level variables
‘Initialize properties
End Sub
• Form_ Initialize procedure:
– The Initialize event is triggered first and only once: Visual Basic triggers this event
when the form is first created.
• Form_ Load procedure:
– triggered when a form is loaded into memory and occurs after the Initialize event.
Usually this code is triggered once only.
• Form_Resize Event:
– Visual Basic triggers the Form_Resize event whenever the user resizes a form, or
minimizes and then restores the form.
• Form_ Activate procedure:
– triggers the Form_Activate event procedure whenever a form becomes active (that is,
when the user moves the focus to it).
– However, if you move to a different application running under Windows and then
return to the form, Visual Basic does not call the form_Activate event procedure again.
– For this reason, the Form_Activate event procedure is usually used only in multiple
form applications.
• Form_ GotFocus procedure
– After the Activate event is triggered, Visual Basic will trigger the GotFocus event for
the form only if all visible controls on it are disabled.
• Form_ Paint procedure (only if the AutoRedraw property, discussed shortly, is False)
– when the AutoRedraw property is set to True, this event is not called, and you’ll need
to use the Refresh method directly
 The Display in Visual Basic

•Visual Basic and Display:

•Visual Basic tells Windows what to show on the screen.
•Windows tells the computer how to show it.
•Windows Drivers:
•When you install Windows, it sets up drivers (software) for your screen and printer.
•These drivers help your computer show pictures and print things.
•For Program Users:
•When you make a Visual Basic program, you can assume the user’s system is ready with proper
drivers.
•Visual Basic depends on Windows to work with the screen and printer.
•Good Side:
•You don’t need to worry about the user’s hardware. Windows handles it automatically.
•Problem Side:
•If a form is moved, hidden, or covered, the picture or text might disappear.
•This can happen even if another app covers your form.
•Keeping Graphics on Screen:
•You can make the graphics stay, but Visual Basic must save the screen image (called a bitmap).
•Bitmaps need a lot of memory. If memory is full, Windows uses the hard disk, which slows things
down.
 Variables and Data Types
• Use Dim to declare variables (e.g., Dim x As
Integer)
• Data types: Integer, String, Double, Boolean
• Initialize and use variables in event procedures
 Strings and Numbers
• Concatenate strings with & operator
• Use built-in functions like Len(), UCase(), Val()
• Handle numeric input and conversions
 Saving and Running Projects
• Use F5 or Run → Start to run program
• Save via File → Save Project / Save Form
• Create EXE using Make Project.EXE