Visual Basic Tutorials

GUI Programming
(VB/Gambus/Other Tools)

GUIProgrammingLaboratory-Prof.D.P.Mishra
2

HOWTO WORK WITH VISUAL BASIC?
• Visual Basic (VB) is the third-generation event-driven programming language and
• integrated development environment (IDE) from Microsoft or its COM programming model.
• Visual Basic is relatively easy to learn and use.
• Visual Basic was derived from BASIC and enables the rapid application development
(RAD) of graphical user interface (GUI) applications, access to databases using Data
Access Objects,
• Remote Data Objects, or ActiveX Data Objects, and creation of ActiveX controls and
objects.
• Scripting languages such as VBA and VBScript are syntactically similar to Visual Basic, but
perform differently.
• A programmer can put together an application using the components provided with Visual
Basic itself. Programs written in Visual Basic can also use the Windows API, but doing so
requires external function
3

HOWTO START VISUAL BASIC?
FIG.1.1 NEW PROJECT WINDOW
TO START VISUAL BASIC,THE STEPS ARE-
1.CLICK ON START PROGRAMS
MICROSOFT VISUAL BASIC STUDIO 6.0
MICROSOFT VISUAL BASIC 6.0
2.THE NEW PROJECT WINDOW APPEARS
(FIG.1.1)
THE NEW PROJECT WINDOW HAS THREE
TABS:-
1)NEW:TO START A NEW PROJECT.
2)EXISTING:TO SELECT FROM A LIST OF
EXISTING PROJECTS.
3)RECENT:TO SELECT FROM THE LIST OF
RECENTLY OPENED PROJECTS.IN
THE NEW TAB ,SELECT STANDARD.EXE
APPLICATION .THIS OPENS THE MICROSOFT
VISUAL BASIC WINDOW.
`
4

COMPONENTS OF VB WINDOW
Project
window
Propertie
s window
Propertie
s layout
window
Form
window
Tool box
Tool
bar
Menu
bar
Title
bar
FIG 1.2 COMPONENTS
OF WINDOW
5

TITLE BAR:-
THE TITLE BAR(FIG 1.3)APPEARS AT THE TOP OF THE
VB WINDOW AND DISPLAYS TITLE OF THE PROJECT.
BY DEFAULT THE VB GIVES NAME SUCH AS PROJECT1,
PROJECT 2 .
A VB APPLICATION WORKS ON 3 MODES:-
FIG 1.3
TITLE BAR
RUN
MODE
BREAK
MODE
DESIGN
MODE
6

MENU BARANDTOOL BAR
MENU BAR-
THE MENU BAR(FIG 1.4) CONSISTS OF MANY DROP-DOWN MENUS.CLICKING ON ANY OF
THE OPTION OF THE MENU BAR MAKES IT ACTIVE.
TOOL BAR-
THE TOOL BAR(FIG 1.4) HAS BUTTONS THAT PROVIDE SOME OF THE MENU OPTIONS.
Menu bar
FIG 1.4 MENU BAR AND TOOL BAR
7

FORM WINDOW
THE FORM WINDOW(FIG1.5)
IS THE PRIMARY WORK
AREA THAT FORMS THE
BACKGROUND OF THE
APPLICATION .
THE USER
CAN DRAW OBJECTS ON
THE FORM.
FIG. 1.5 FORM WINDOW
8

 TOOLBOX
THE TOOLBOX (FIG 1.6)CONTAINS ICONS
THAT REPRESENT COMMONLY USED
CONTROLS SUCH AS LABEL,TEXTBOX,
COMMAND BUTTON ,ETC.
FIG 1.6 TOOLBOX
9

10
PROJECT WINDOW
IT DISPLAYS A LIST OF ALL FORMS THAT MAKES UP
THE APPLICATION.IT HAS THREE BUTTONS ON THE TOP LEFT.(FIG 1.7)
1.CLICK ON VIEW OBJECT TO OPEN A FORM.
2.CLICK ON VIEW CODE TO OPEN CODE WINDOW.
View
Code
View
object
Select
form
FIG 1.7 PROJECT WINDOW

11
PROPERTIES WINDOW
THE PROPERTIES WINDOW LISTS THE PROPERTY OF THE SELECTED
CONTROLS OR FOR THE FORM. THE PROPERTY WINDOW HAS TWO TABS:
1.THE ALPHABETIC TAB LIST ALL THE PROPERTIES IN ALPHABETIC
ORDER.(FIG 1.8)
2.THE CATEGORIZED TAB LISTS THE PROPERTIES CATEGORY-
WISE(FIG 1.9)
FIG 1.8 ALPHABETIC TAB OF PROPERTIES
WINDOW
FIG 1.9 CATEGORIZED TAB OF
PROPERTIES WINDOW

12
FORM LAYOUT WINDOW
IT SHOWS THE POSITION OF THE
FORM RELATIVE TO THE MONITOR’S
SCREEN WHEN THE PROGRAM IS
EXECUTED.(FIG 1.10)
FIG 1.10 FORM LAYOUT
WINDOW
FAST FORWARD
TO VIEW FORM LAYOUT
WINDOW PRESS
SHIFT+F4

13
IN VB, AN APPLICATION CAN BE DEVELOPED BY THE
FOLLOWING STEPS:
1. CREATE A FORM
2. PLACE CONTROLS ON THE FORM
3. SET PROPERTIES OR THE CONTROL
4. ADD CODE TO THE HANDLE THE EVENTS
 THE CONTROLS IN THE TOOLBOX CAN BE CALLED
OBJECTS IN VB.
 EVERY CONTROL IS ASSOCIATED WITH ITS INDIVIDUAL
PROPERTIES ,METHODS AND EVENTS.
DEVELOPMENT OF ANAPPLICATION

14
PROPERTY
IT IS THE NAMED ATTRIBUTE OF AN OBJECT
FOR EXAMPLE,THE TEXT BOX HAS PROPERTIES
SUCH AS COLOR,FONT,ENABLED,VISIBLE,ETC.
METHOD
IT IS AN ACTION THAT CAN BE PERFORMED ON AN OBJECT.
EVENT
WE KNOW THAT VB IS AN EVENT-DRIVEN PROGRAMMING
LANGUAGE.A TEXT BOX SUPPORTS VARIOUS EVENTS SUCH
AS
CLICK,DOUBLE-CLICK,MOUSE UP ETC.WHEN AN
EVENT OCCURS,A PARTICULAR CODE IS EXECUTED

15
HOWTO PLACE CONTROLS ONTHE FORM?
A CONTOL CAN BE PLACED ON A FORM USING TWO METHODS.
FIRST METOD
• DOUBLE CLCK ON THE CONTROL IN THE ICON IN THE TOOLBOX.
• THE CONTROL APPEARS IN THE MIDDLE OF FORM.(FIG 1.11)
FIG 1.11 CONTROL ON THE FORM

SECOND METHOD
CLICK ON THE CONTROL ICON IN THE TOOLBOX AND THEN
CLICK ON THE DESIRED LOCATION ON THE FORM.DRAG THE
MOUSE DIAGONALLY SO THAT THE CONTROL HAS THE DESIRED
SIZE.(FIG 1.14)
TO REPOSITION THE CONTROL ,HOLD DOWN THE LEFT MOUSE
BUTTON AND DRAG THE CONTROL TO A NEW LOCATION,
TO RESIZE THE CONTROL,CLICK THE CONTROL,DRAG ONE OF
ITS EDGES OR CORNERS.
FIG 1.14 DRAGGING DIAGONALLY
16

17
TO CHANGE THE POSITION OF THE CONTROL:
FIG 1.12 DRAGGING THE CONTROL
 TO RESIZE THE CONTROL JUST CLICK ON THE
CONTROL AND RESIZE THE POINTERS ON ITS EDGES
AND CORNERS.
 DRAG THE EDGES POINTER FOR CHANGING THE SIZE EITHER
HORIZONTALLY OR VERTICALLY.[FIG 1.13(a)]
 DRAG THE CORNER POINTERS FOR CHANGING THE SIZE
DIAGONALLY.[FIG 1.13(b)]
FIG 1.13(a) RESIZING CONTROL VERTICALLY FIG 1.13(b) RESIZING DIAGONALLY
DRAG IT TO THE NEW LOCATION.
(FIG.1.12)
CLICK THE CONTROL

18
DELETE A CONTROL
CLICK ON
DELETE

19
• TO CREATE A VB APPLICATION ,WE NEED AN
INTERFACE FOR THE USER TO INTERACT.
• THE FORM IS WHERE THE INTERFACE IS
DRAWN.
• SOME OF THE COMMON PROPERTIES , EVENTS
AND METHODS ARE:
FORM OBJECT

FORM PROPERTIES
CAPTION :IT SETS THE TITLE OF THE FORM
NAME :IT GIVES THE NAME OF THE FORM WITH WHICH IT IS
REFERRED TO IN THE CODE.THE DEFAULT VALUE IS FORM.
APPEARANCE:VALUE 1 MAKES THE FORM LOOK LIKE THREE-
DIMENSIONAL.VALUE 0 MAKES THE FORM LOOK
FLAT.
FONT:IT SETS THE FONT TYPE ,FONT STYLE AND FONT SIZE
FOR THE TEXT.
FORE COLOR :IT SETS THE COLOR FOR THE TEXT ON THE FORM.
ENABLED:VALUE TRUE MAKES THE FORM RESPOND TO MOUSE
AND KEYBOARD EVENTS.VALUE FALSE MAKES THE
FORM RESPONDING TO ANY EVENT.
BACK COLOR:IT SETS THE FORM’S BACKGROUND COLOR.
VISIBLE: VALUE FALSE MAKES THE FORM INVISIBLE
20

FORM EVENTS
CLICK FORM-CLICK EVENT IS TRGGERED WHEN THE USER CLICKS
ON THE FORM .
LOAD FORM-LOAD EVENT IS TRIGGERED WHEN THE FORM I LOADED.
THIS LOADS THE FORM INTO THE MEMORY.
FORM METHODS
PRINT THIS PRINTS TEXT STRING ON THE FORM.
SHOW THIS MAKES THE FORM VISIBLE.IT IS THE
SAME AS SETTING A FORM’S VISIBLE
PROPERTY ON TRUE.
HIDE THIS MAKES THE FORM INVISIBLE
21

LET US SEE HOW A VB APPPLIATION IS
CREATED AND EXECUTED
SUPPOSE WE WANT TO DISPLAY A MESSAGE ‘LEARNING VISUAL BASIC
IS FUN’ ON THE FORM.
THE STEPS TO CREATE EXEXCUTE AND SAVE VB APPLICATION FOR
THIS MESSAGE ARE:
CLICK
ON
START
22

MICROSOFT
VISUAL
Bssic
CLICK PROGRAMS CLICK MICROSOFT VISUAL
BASIC STUDIO
THEN CLICK ON MICOSOFT VISUAL BASIC 6.0

4.MAKE SURE FORM IS SELECTED IN THE
PROJECT EXPLORER WINDOW.
5.IN THE PROPERTIES WINDOW
 CHANGE THE CAPTION MESSAGE.
 SELECT THE BACKCOLOR OF THE FORM.
 CLICK ON THE DROP-DOWN ARROW ON THE RIGHT OF BACK
COLOR AND SELECT A COLOR.
 MAKE SURE THE PALLETE TAB IS SELECTED.(FIG 1.16)
FIG 1.16 BackColor Property
24

• SELECT THE FONT CLICK ON THE BUTTON TO THE RIGHT WITH THREE DOTS(FIG 6.17).
• THE FONT WINDOW APPEARS.(FIG 6.18)
• SET THE FONT AS ARIAL,FONT STYLE AS BOLD AND SZE AS 18;AND CLICK ON OK.
FIG 6.17 FONT PROPERTY FIG 1.18 FONT WINDOW
25

6.TO WRITE THE CODE:
• DOUBLE-CLICK ANYWHERE ON THE FORM TO GET
THE CODE TEMPLATE(FIG 1.19).
• BETWEEN THE TWO LINESOF THE TEMPLATE,TYPE
THE FOLLOWING CODE(FIG 1.20)
FIG 1.19 CODE TEMPLATE FIG 1.20 VB CODE
26

7.TO SAVE THIS VB APPLICATION:
i. SELECT FILE SAVE TO FIRST SAVE THE FORM(FIG 1.21) AND
THEN THE PROJECT (FIG 1.22).
8.TO RUN THIS VB APPLICATION:
i. PRESS F5 OR CLICK THE START BUTTON ON THE TOOL BAR.(FIG 1.23)
FIG 1.23 START BUTTON ON TOOLBAR
Start button
FIG 1.21 SAVE FROM FIG 1.22 SAVE PROJECT
27

9.THE OUTPUT OF THIS VB APPLICATION IS SHOWN
IN (FIG 1.24).
FIG 1.24 OUTPUT OF THE VB CODE
FAST FORWARD
TO RUN A PROGRAM
PRESS F5
28

COMMON CONTROLS
POINTER
• THE POINTER PROVIDES THE WAY TO RESIZE
OR MOVE THE OTHER CONTROLS.
• THIS IS AUTOMATICALLY ACTIVATED AFTER
THE USER PLACES A CONTROL ON THE FORM.
TOP TIP
THE POINTER IS THE ONLY CONTROL IN THE
TOOLBOX THAT CANNOT BE PLACED ON THE FORM
29

LABEL
LABEL IS A CONTROL THAT CAN BE USED TO DISPLAY TEXT THAT
USER CAN EDIT DIRECTLY.
PROPERTIES
NAME : THIS GIVES THE NAME USED TO REFER LABEL IN THE CODE.
CAPTION: THIS IS THE TEXT DISPLAYED IN THE LABEL.
FONT: THIS SETS FONT,FONT STYLE AND FONT SIZE.
BORDER STYLE: THIS DETERMINES THE TYPE OF BORDER.
APPEARANCE: THIS IS 3-D IN APPEARANCE.
EVENTS
CLICK:THIS EVENT IS TRIGGERED WHEN THE USER CLICKS ON THE
LABEL.
DOUBLE CLICK:THIS EVENT IS TRIGGERED WHEN TH USER DOUBLE-
CLICKS ON THE LABEL
30

TEXTBOX
• THE TEXT BOX IS A CONTROL THAT IS USED TO RECEIVE INPUT FROM
THE USER AND ALSO TO DISPLAY THE OUTPUT.
• IT CAN HANDLE STRING(TEXT) AND NUMERIC DATA BUT NOT
PICTURE OR IMAGES.
PROPERTIES
NAME: THIS IS THE NAME USED TO REFER TO THE TEXTBOX IN THE CODE.
APPEARANCE: THIS IS 3-D OR FLAT IN APPEARANCE
MAXLENGTH: THIS LIMITS THE LENGTH OF THE TEXT. VALUE 0 INDICATES
LIMITED LENGTH.
MULTILINE: THIS SPECIFIES WHETHER THE TEXTBOX DISPLAYS A SINGLE LINE
OR MULTIPLE LINES.
31

PASSWORD CHAR:THIS HIDES THE TEXT WITH A
SINGLE CHARACTER(USUALLY * IS USED).
ENABLED:VALUE TRUE/FALSE DETERMINES WHETHER
THE TEXTBOX RESPONDS TO ANY EVENT OR NOT.
LOCKED:VALUE TRUE/FALSE DETERMINES WHETHER
THE TEXTBOX CONTENTS CAN BE CHANGED OR NOT.
TEXT:THIS IS THE STRING TO BE DISPLAYED IN THE TEXTBOX.
EVENTS
CHANGE:THIS EVENT IS TRIGGERED EVERY TIME WHEN
THE TEXTBOX DISPLAYS A SINGLE LINE OR MULTIPLE
LINE.
METHOD
SetFocus:THIS POSITIONS THE CURSOR INSIDE THE TEXT BOX.
32

COMMAND BUTTON
THE COMMAND BUTON IS VERY IMPORTANT CONTROL AS IT IS
USED TO EXECUTE COMMANDS AND IT DISPLAYS AN ILLUSION
THAT THE BUTTON IS PRESSEDWHEN THE USER CLICKS ON IT.
PROPERTIES
APPEARANCES: THIS IS 3-D OR FLAT IN APPEARANCE.
CAPTION:THIS IS THE STRING THAT IS DISPLAYED ON THE
COMMAND BUTTON.
VISIBLE:VALUE TRUE/FALSE DETERMINES WHETHER IT IS VISIBLE
OR NOT.
FONT:THIS SETS FONT,FONT STYLE AND FONT SIZE.
ENABLED:VALUE TRUE/FALSE DETERMINES WHETHER IT RESPONDS
TO AN EVENT OR NOT.
EVENTS
CLICK:THIS EVENT IS TRIGGERED WHEN IT IS SELECTED BY CLIICKING
ON IT.
33

LET US NOW CREATE AN APPLICATION
USING ALL THE COMMANDS DISCUSSED
PREVIOUSLY
THE STEPS TO CREATE ,EXECUTE AND SAVE A VB
APPLICATION ARE:
1)SELECT PROGRAMS
MICROSOFT VISUAL BASIC 6.0.
2)IN THE NEW PROJECT WINDOW,SELECT STANDARD.
EXE.TH FORM WILL APPEAR ON THE SCREEN.
3)NOTICE THAT THE PROPERTIES OF THE FORM WILL
APPEAR IN THE PROPERTIES WINDOW.
i. SELECT CAPTION , AND TYPE ‘DISPLAY MESSAGE’.
ii SELECT BackColor , AND CHANGE IT TO ORANGE.(FIG 1.25)
34

4)PLACE THE LABEL ON THE FORM AND CHANGE ITS
PROPERIES AS SHOWN BELOW:
PROPERTIES SETTINGS
CAPTION ENTER YOUR NAME
FONT 12,BOLD
BackColor SAME AS FORM
5)PLACE ANOTHER LABEL ON THE FORM AND CHANGE IN
PROPERTIES AS SHOWN BELOW:
PROPERTIES SETTINGS
NAME lblmessage
FIG 1.25 CHANGED CAPTION AND BackColor
35

CAPTION (BLANK)[DELETE LABEL 2 THAT APPEARS ON THE
RIGHT SIDE]
BorderStyle 1-FIXED SINGLE
FONT 12,BOLD
6) PLACE THE TEXTBOX ON THE FORM AND CHANGE ITS PROPERTIES
AS SHOWN BELOW:
PROPERTIES SETTING
NAME txtname
TEXT (BLANK)
FONT 12,BOLD
7)PLACE COMMAND BUTTON ON THE FORM AND CHANGE ITS
PROPERTIES AS SHOWN BELOW:
PROPERTIES SETTING
NAME cmdok
CAPTION OK
FONT 12,BOLD
8)PLACE ANOTHER COMMAND BUTTON ON THE FORM AND
CHANGE ITS PROPERTIES AS SHOWN BELOW:
36

PROPERTIES CONTROLS
NAME cmdEXIT
CAPTION EXIT
FONT 12 ,BOLD
9)TO WRITE THE CODE,DOUBLE-CLICK ON THE OK
COMMAND BUTTON TO GET THE CODE TEMPLATE.WRITE
THE CODE AS SHOWN IN FIG 1.26
10)CLICK ON THE VIEW OBJECT BUTTON IN THE PROJECT
EXPLORER WINDOW TO RETURN TO THE FORM.
11)DOUBLE-CLICK ON THE EXIT COMAND BUTTON TO GET
CODE TEMPLATE.WRITE THE CODE AS SHOWN IN
FIG.1.27
FIG 1.26 VB CODE
37

12) TO SAVE THIS VB APPLICATION,SELECT FILE
SAVE PROJECT AS.THIS FIRST SAVES THE FORM AND
THEN THE PROJECT.
13)TO RUN THIS APPLICATION,PRESS F5 OR CLICK THE
START BUTTON ON THE TOOLBAR.
TRICKY TERMS
GUI-(GRAPHICAL USER INTERFACE)IT ENABLES THE USER TO INTERACT WITH AN
APPLICATIONTHROUGH THE USE OF ICONS,BUTTONS,MENUS,DIALOG BOXES AND
WINDOWS.
EVENT-DRIVEN PROGRAMMING-A PROGRAMMING BASED ON
THE EVENT(ACTION)PERFORMED.
INTEGRTED DEVLOPMENT ENVIRONMENT-INTEGRATING MANY DIFFERENT
FUNCTIONS SUCH AS DESIGNING,EDITING,COMPILING,
DEBUGGING IN A SINFGLE WINDOW.
FIG 1.27 VB CODE
38

Thankse-mail: dpmishra@bitdurg.ac.in
Cell: 7898351022

Visual Basic Tutorials

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to Visual Basic Tutorials

Similar to Visual Basic Tutorials (20)

More from BIT DURG

More from BIT DURG (20)

Recently uploaded

Recently uploaded (20)

Visual Basic Tutorials