CHAPTER 1:

INTRODUCTION TO
VISUAL PROGRAMMING

Session Objectives Character Based System

VISUAL BASIC
After this session you will be able to In character-based system, text was the medium of information
• Differentiate between Character Based Systems and Graphical exchange. The application displayed text that prompted the user
User Interface for the required information. It also specified the valid options,
if any. The use then responded to these prompts by specifying
• Appreciate the need for Visual Programming
the required information.
• Comprehend the concept of Even Driven Programming
For example the character based application may prompt for the
• Overview of Visual Basic information required to generate an order as shown below
• Hello student in today’s first session of Visual
Programming we will be covering Introduction part.
Introduction
During the last three decades man has invented many electronic
devices, but the computer has made a greater impact on society
that any other device. They have made a potentially significant
contribution to the society. Computer hardware and software
have undergone several changes in the last few decades. When
you look around you, you find computers are used in a wide
range of applications be it for commercial purpose,
entertainment purpose scientific etc. The areas of computer
application (usage) are literally too numerous to mention.
Microsoft Word, Microsoft Excel, Payroll system are few of the
applications of computers.
When we speak of an application, application has two parts
• User Interface- This is the screen displayed by the
application. We interact with an application via the interface.
Every application has a user interface in one form or the
other. The application asks for and we provide the necessary
instructions using the interface.
• Program- Computer needs clear-cut instructions to tell The user moves from one field to another specifying the
them what to do how to do and when to do. A set of necessary information. Note that listed below are the various
instructions to carry out a specified task is called a program. option such as Print and Save and the key combinations that are
That is what goes on in the background. to be used to achieve the necessary action. For example the key
To present an analogy from the real world consider how we use combination <Ctrl+P> will print the Order
a television. We use the ON/OFF switch to put it in, volume Such application is not very easy to use essentially because the
control to increase/lower the volume, channel selection to user cannot react intuitively to this interface
switch channel etc. These controls represent the interface while For example when the user has to move onto a New Bill he has
what happens internally when we use any of the controls to read the bottom of the screen and use the key combination
constitute the program. <Ctrl+N>. Similarly the user has to remember all the items
All interactions between the user and the application are via the that are sold by the shop. There is no list from which he can
user interface. Thus for any application to be successful it needs select a product from those available.
to have a good user interface. The user interface makes a The disadvantage with character based systems was that with
program easy to use. A good user interface will be each new application the user has to spend time and effort
• Easy to learn getting used to the way it worked
• Easy to use Graphical User Interface
• Attractive With the advent of graphical operating systems like Windows
Let’s understand the different types of system based on the the world of computing went through a dramatic change. It
interface opened up a whole new world of graphics
• Character Based System Interfaces that use graphics came to be know as Graphical User
Interface (GUI). These became very popular because the user
• Graphical User Interface System

© Copy Right: Rai University

3E.552 1
 could identify with the graphics displayed on screen GUIs have example the applications will always use a window as a base for
VISUAL BASIC

revolutionized the computer industry. They demonstrated that the interface and buttons to initiate actions.
the proverb “A picture is worth a thousand words” hasn’t lost This means that if the process of building the user interface is
its truth to most computer users. simplified then the time and effort required in developing an
The primary requirement for an interface is that it is easy to use. application can be reduced.
We must be able to react intuitively to an interface presented to The need of the hour was an environment that would allow
us. This is possible if the interface presented in such that it the easy design of the user interface. Thus the art of visual
emulates real life. programming was born.
E.g. consider the calculator. In a physical calculator there are
Visual Programming
buttons for each of the numbers and operations possible. With
In the case of the Calculator application, as a programmer won’t
the use of graphical user interface application which has a similar
you be happy if you have a programming tool which allows
interface and working is possible.
you to simply click and place buttons and text box without
Windows applications have a consistent user interface. This writing any code. Visual Programming aims at providing the
means that the user can spend more time mastering the user with an interface that is intuitive and easy to use. In
application and less time worrying about which keystrokes do developing such an interface the programmer employs user-
what operations. friendly features such as windows, menus buttons and list
The Need for Visual Programming boxes.
There are several programming tools that allow us to build A visual programming environment provides all features that
visual appealing and intuitive interface. These tools allow us to are required to develop a graphical user interface as ready to use
design interfaces that employ user-friendly features such as components. The programmer does not have to write code to
menus, buttons, windows etc. Java is a programming language create and display commonly required user-friendly features each
that helps to build intuitive interface. time around.
However the disadvantage of such tools is that the interface is When the programmer needs a specific user interface feature
designed using code. The programmer has to code the user such a button, he selects the appropriate ready to use compo-
interface features specifying the size, position etc. This makes nents provided by the visual programming environment. These
designing the user interface a major task in itself. components can be moved resized and renamed as required
For example for the calculator displayed For example if the programmer needs to have a button then
• The programmer has to create each of the user interface the visual programming environment provides him with one.
features individually. Thus the programmer has to write code All that the programmer does is select a button and place it on
that will create and display screen at the required position
• The Windows Typically the mouse is used to select and place the necessary
component. Thus the visual programming environment is
• The 20 buttons
called as point and click environment.
• The text box
A visual programming environment automates the process of
• The buttons are to be sized and positioned such that they creating a user interface. The interface provided by the visual
form a symmetrical and aesthetically pleasing interface. programming environment to the programmer is called the
• The text on each button is to represent its use. visual interface. Using the visual interface the programmer
This is as far as the design of the interface is concerned. The designs the user interface visually instead of writing code.
next step is to code the functionality to be provided by the In addition the visual programming environment also provides
system. a means of associating code with each component. In the case
• Each time the user clicks on a button the application must of calculator for each button we can specify that the code is to be
determine which button has been clicked and perform the executed when we click on it’s buttons.
necessary action. Advantages of Visual Programming
• When a number button is clicked the number is to be Visual Programming enables
displayed otherwise the selected operation is to be • Visual development of graphical user interface which are easy
performed. This has to be implemented by writing code. to use and easy to learn
Therefore a programmer spends a lot of time writing code for • A programmer need not write code to display the required
the user interface. Moreover a large percentage of the time is component
wasted in actions such as aligning the buttons properly,
• For example the visual programming environment displays a
determining which button has been clicked and then executing
list of available components. The programmer picks up the
the appropriate code.
required component from this list to display it.
The functionality of each application is different and so coding
• The components can be moved resized and even deleted if
it is inevitable. However the user interface components that are
so required
used with different application remain essentially the same. For

© Copy Right: Rai University

2 3E.552
• There is no restriction on the number of controls that can be Event Driven Programming

VISUAL BASIC
placed on the form. The interface components have the ability to recognize user
• The programmer can create the user interface visually he can events. This code is built in the interface component. The
align, move or size the component as required without response of the component to the event is determined by the
having to resort to writing code programmer.
• The interface component provided by the visual When an interface component is used the programmer decides
programming environment have code some built into them the action required of the component in response to a particular
event and writes code that will be executed when the event
• For example a button knows when it has been clicked upon.
occurs. Thus the response of identical components to an event
In the case of conventional programming tools the
can be different in different situations.
programmer has to write code to determine the component
that has been clicked and then execute the appropriate code. For example in the calculator the number button display the
selected number in response to the mouse click while the Sqrt
Some popular visual programming tools are
calculates and displays the square root of the window.
• Visual Basic
Each interface component can have multiple events. It is not
• Power Builder necessary that the component should respond to all events that
• Developer 2000 it can recognize. For example we may choose not to respond to
Disadvantages of Visual Programming the key press event in case of a button.
While visual programming makes it easy to create complex user In event driven programming an application is built up as a
interfaces it suffers from some disadvantages: series of responses to user events. The calculator is a good
• AS the name implies the entire process of developing an example of an application that is event driven. All actions in the
application using a visual development environment is application are built as responses to events.
visual. Thus the development environment in itself is The programmer decides the actions required of the application
highly graphical in nature and therefore requires more and divides them up as responses to events for different
memory interface components used. The interface components used and
• Visual development environment require computer of a the events that they respond to depend on the functionality
higher configuration in comparison to the conventional required.
programming tools
• Lager capacity hard disk
• More RAM
• Faster Processor
• Primarily visual development environment can be used
with GUI operating systems such as Windows Check Your Progress
Understanding the Event-Driven Model
In traditional or “procedural” applications, the application itself • Differentiate between Character Based Systems and Graphical
controls which portions of code execute and in what sequence. User Interface
Execution starts with the first line of code and follows a • Stat the need for Visual Programming
predefined path through the application, calling procedures as
• State the advantage of using Rapid Application
needed.
Development (RAD) tool
In an event-driven application, the code doesn’t follow a
• Differentiate between Event Driven and Procedural
predetermined path — it executes different code sections in
languages
response to events. An event could be be like clicking a
button(click event of the button is triggered) Events can be • Explain Event Driven Programming with and example
triggered by the user’s actions, by messages from the system or
other applications, or even from the application itself. The
sequence of these events determines the sequence in which the
code executes, thus the path through the application’s code
differs each time the program runs.
Your code can also trigger events during execution. For
example, programmatically changing the text in a text box cause
the text box’s Change event to occur. This would cause the code
(if any) contained in the Change event to execute. If you
assumed that this event would only be triggered by user
interaction, you might see unexpected results. It is for this
reason that it is important to understand the event-driven
model and keep it in mind when designing your application.

© Copy Right: Rai University

3E.552 3