Event-driven

Programming
Lesson 1

1
 2

Learning Objectives
1. Describe Event-Driven Programming
2. Define Visual Basic ( VB )
3. Identify Benefits of using Visual Basic
4. History of Visual Basic
5. Describe the process of visual program design and development.
6. List and describe the three steps for writing a Visual Basic project.
7. Describe the various files that make up a Visual Basic project &
identify the elements in the Visual Studio environment.
8. Design a user interface by following the instructions in the given
problems.
 3

Event-Driven Programming
 currently the default paradigm in software engineering.
 it uses events as the basis for developing the software.
 These events can be something the users are doing
 clicking on a specific button
 picking an option from drop-down
 typing text into a field,
 giving voice commands,
 or uploading a video
 or system-generated events such as a program loading.
 4

Event-driven Programming
 is designed to react.
 5

Why Is It So Popular Right Now?

 Event-driven programming serves the user with
the quickest and most accurate responses and this
usually translates into better user experience and
business gains.
 the whole focus of software development is on the
actual people using the app and their actions, so it
will produce better and more intuitive products for
the end-users.
 6

Why Is It So Popular Right Now?

 The opposite of event-driven programming would be software that
doesn’t need any user input to act.
 There are definitely valid use cases for this as well but the majority of
popular applications on the market right now function through user
input (all the social media platforms, games, productivity tools, etc).
 GUI (graphical user interface) applications can experience the
biggest benefits of using this approach.
 One of the big benefits of event-driven programming is that it’s
 very intuitive, flexible and naturally well-suited to applications whose
control flow are based, not on its structure, but rather on internal or
external events.
 7

What’s the Best Programming

Language for This Approach?
 Because event-driven programming is an approach
rather than a type of programming language, it can
be practiced with any programming language.
 8

What Are the Disadvantages?

 Since it offers the most value for GUI applications,
some other use cases might not benefit from it.
 complex to master and not worth the trouble when
your application is very simple and small.
 9

What’s the Next Big Thing?

 The next big paradigm shift definitely comes with serverless
computing — it’s another level of abstraction that makes creating
new applications easier and quicker.
 With serverless, you don’t have to worry about server ops anymore;
 you can just write your functions,
 upload the code to one of the cloud providers (AWS Lambda is
currently the biggest one) and let them handle all the backend work
(and you only pay for the time when your code is executed).
 This is the next big change that will bring event-based programming
to the next level and it’s already gaining mainstream traction.
 10

Event-driven programming
 isa programming paradigm in which the flow of program
execution is determined by events
 for example a user action such as a mouse click, key press, or a
message from the operating system or another program.
 An event-driven application is designed to detect events as
they occur, and then deal with them using an appropriate
event-handling procedure.
 The idea is an extension of interrupt-driven programming of
the kind found in early command-line environments such as
DOS, and in embedded systems (where the application is
implemented as firmware).
 11

Event-driven programs
 can be written in any programming language, although some
languages(Visual Basic for example) are specifically designed
to facilitate event-driven programming, and provide an
integrated development environment (IDE) that partially
automates the production of code, and provides a
comprehensive selection of built-in objects and controls, each
of which can respond to a range of events.
 Virtually all object-oriented and visual languages support
event-driven programming.
 Visual Basic, Visual C++ and Java are examples of such
languages.
 12

A visual programming IDE

 such as VB.Net provides much of the code for detecting events
automatically when a new application is created.
 The programmer can therefore concentrate on issues such as
interface design, which involves adding controls such as
 command buttons,
 text boxes, and
 labels to standard forms (a form represents an application's
workspace or window).
 Once the user interface is substantially complete, the
programmer can add event-handling code to each control as
required.
 13

Visual programming environments

 will even provide code templates for event-handlers, so
the programmer only needs to provide the code that
defines the action the program should take when the
event occurs.
 Each event-handler is usually bound to a specific object
or control on a form.
 Any additional subroutines, methods, or function
procedures required are usually placed in a separate code
module, and can be called from other parts of the
program as and when needed.
 14

Background
 Before the arrival of object-oriented programming languages, event
handlers would have been implemented as subroutines within a
procedural program.
 The flow of program execution was determined by the programmer,
and controlled from within the application’s main routine.
 The complexity of the logic involved required the implementation
of a highly structured program.
 All of the program’s code would be written by the programmer,
including the code required to ensure that events and exceptions
were handled, as well as the code required to manage the flow of
program execution.
 15

Visual Basic, Controls, and

Events
 16

Visual Basic, Controls, and Events

1. An Introduction to Visual Basic
2. Visual Basic Controls
3. Visual Basic Events
 17

An Introduction to Visual
Basic 2010
 Why Windows and Why Visual Basic
 How You Develop a Visual Basic Application
 The Different Versions of Visual Basic
 18

Visual Basic 2010

 Language used to create Windows applications.
 Provides a Graphical User Interface or GUI.
 The sequence of instructions executed in the program is
controlled by events.
 19

Sample Input Screen

 20

How to Develop a Visual Basic

Application
 Design the Interface for the user.
 Determine which events the controls on the
window should recognize.
 Write the event procedures for those events.
 21

Different Versions of Visual Basic

 Version 1.0 – 1991 Version 2.0 – 1992
 Version 3.0 – 1993 Version 4.0 – 1995
 Version 5.0 – 1997 Version 6.0 – 1998

 Visual Basic.NET – 2002 (NOT BACKWARD

COMPATIBLE WITH EARLIER VERSIONS)
 Visual Basic 2005 – November 2005
 Visual Basic 2008 – November 2007
 Visual Basic 2010 – April 2010
 22

Visual Basic Controls

 Starting a New Visual Basic Program
 Text Box Control
 Button Control
 Label Control
 List Box Control
 Name Property
 Fonts / Auto Hide
 Positioning and Aligning Controls
 23

Visual Basic Start Page

 24

Start a New Project

 25

New Project Dialog Box

select

click on OK button
 26

Initial Visual Basic Screen

 27

Toolbox
 28

4 Ways to Place a Control from the

Toolbox onto the Form Designer
 Double-click
 Drag and Drop
 Click, Point, and Click
 Click, Point, and Drag
 29

Four Controls at Design Time

text box

To select a control, click on it. Sizing handles will appear when

a control is selected.
 30

Text Box Control

 Used for input and output
 When used for output, ReadOnly property is set to
True
Tasks button

sizing handles
 31

Properties Window

Press F4 to
display the
Properties
window for the
selected control.

categorized view alphabetical view

 32

Properties Window (continued)

selected control

properties settings

Description pane
 33

Some Often Used Properties

 Text
 Autosize
 Font.Name
 Font.Size
 ForeColor
 BackColor
 ReadOnly
 34

Setting Properties
 Click on property name in left column.
 Enter its setting into right column by typing or
selecting from options displayed via a button or
ellipses.
 35

Setting the ForeColor Property

1. Click on ForeColor.
2. Click on button at right of
settings box.
3. Click on Custom tab to
obtain display shown.
4. Click on a color.
 36

Font Property
1. Click on Font in left
column.
2. Click on ellipsis at right
of settings box to obtain
display shown.
3. Make selections.
 37

Button Control
 The caption on the button should indicate the
effect of clicking on the button.

Text property
 38

Add an Access Key

 39

Label Control
 Used to identify the contents of a text box.
 Text property specifies caption.
 By default, label automatically resizes to
accommodate caption on one line.
 When the AutoSize property is set to False, label
can be resized manually. AutoSize is used
primarily to obtain a multi-rowed label.
 40

List Box Control

 Initially
used to display several pieces of output.
 In Chapter 4 used to select from a list.
 41

The Name Property

 Used by the programmer to refer to a control in
code
 Setting for Name property near top of Properties
window
 Use appropriate 3-character naming prefix
 Use descriptive names
 42

Control Name Prefixes

Control Prefix Example

button btn btnCompute
label lbl lblAddress
text box txt txtAddress
list box lst lstOutput
 43

Renaming the Form

 Initial
name is Form1
 The Solution Explorer window lists a file named
Form1.vb.
 To rename the form, change the name of this file
to newName.vb
 newName should begin with prefix frm.
 44

Fonts
 Proportional width fonts, such as Microsoft Sans
Serif, use less space for "I" than for "W"
 Fixed-width fonts take up the same amount of
space for each character – like Courier New
 Fixed-width fonts are used for tables.
 45

Auto Hide
 Hides Toolbox when not in use
 Vertical push pin icon indicates auto hide is
disabled.
 Click the push pin to make it horizontal and enable
auto hide.

push pin
 46

Positioning Controls

proximity
line
 47

Aligning Bottoms of Controls

snap line
 48

Aligning Middles of Controls

snap line
 49

Tab Order

• The tab indices determine the

order in which controls
receive the focus during
tabbing.
• The control whose TabIndex
property is set to 0 has the
focus when the program
begins.
 50

Visual Basic Events

 An Event Procedure Walkthrough
 Properties and Event Procedures of the Form
 The Header of an Event Procedure
 51

Event
 An event is an action, such as the user clicking on
a button
 Usually, nothing happens in a Visual Basic
program until the user does something and raises
an event.
 What happens is determined by statements inside
the event procedure.
 52

Sample Statements
 txtBox.ForeColor = Color.Red
 txtBox.Visible = True
 txtBox.Text = "Hello World"

General Form:
controlName.property = setting
 53

Sample Form

txtFirst

txtSecond

btnRed
 54

Focus
 When you click on a text box, a cursor appears in
the text box, and you can type into the text box.
 Such a text box is said to have the focus.
 If you click on another text box, the first text box
loses the focus and the second text box receives
the focus.
 55

Examples of Events
 btnShow.Click
 txtBox.TextChanged
 txtBox.Leave

General Form:
controlName.event
 56

The Three Steps in Creating a Visual

Basic Program
1. Create the interface; that is, generate, position,
and size the objects.
2. Set properties; that is, configure the appearance
of the objects.
3. Write the code that executes when events occur.
 57

Code Editor
Code Editor tab Form Designer tab
 58

Display Events for a Control

 Select the control
 Click on the Events
button ( ) in the
Properties window events button
 59

Structure of an Event Procedure

header Private Sub objectName_event(...)
Handles objectName.event
statements
End Sub

(...) is filled automatically with (ByVal sender

As System.Object, ByVal e As
System.EventArgs)
 60

Create an Outline for an Event

Procedure
 Double-click on a control
or Select a control, click on the Events button in
the Properties window, and double-click on an
event

(We nearly always use the first method.)

 61

Sample Form

txtFirst

txtSecond

btnRed

Double-click on txtFirst to create the outline for the Code

Editor
 62

Code for Walkthrough

Public Class frmDemo
Private Sub txtFirst_TextChanged(...)
Handles

txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
End Class
 63

IntelliSense
 Automatically pops up to help the programmer.
 txtFirst.
 64

Code Editor
click tab to return to Form Designer
 65

Sample Form

txtFirst
txtSecond
btnRed

Double-click on btnRed to return to Code Editor and add

the outline of an event procedure
 66

Code for Walkthrough

Public Class frmDemo
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub

Private Sub btnRed_Click(...)

Handles btnRed.Click
txtFirst.ForeColor = Color.Red
End Sub
End Class
 67

Event Procedure txtFirst.Leave

 Select txtFirst on the form
 Click on the Events button in the Properties
window
 Double-click on Leave
 68

Code for Walkthrough

Private Sub txtFirst_Leave(...)
Handles txtFirst.Leave
txtFirst.ForeColor = Color.Black
End Sub
Private Sub txtFirst_TextChanged(...)
Handles txtFirst.TextChanged
txtFirst.ForeColor = Color.Blue
End Sub
Private Sub btnRed_Click(...) Handles btnRed.Click
txtFirst.ForeColor = Color.Red
End Sub
 69

Header of Event Procedure

Private Sub btnRed_Click(…) Handles btnRed.Click

Name, can be changed. Identifies event

Private Sub Button_Press(…) Handles btnRed.Click

 70

Handling Multiple Events

 An event procedure can be invoked by two events.

Private Sub Happening(...)

Handles
btnRed.Click,txtSecond.Leave
txtFirst.ForeColor = Color.Red
End Sub
 71

Altering Properties of the Form

 Thefollowing won't work:
frmDemo.Text = "Demonstration"

 Theform is referred to by the keyword Me.

Me.Text = "Demonstration"
 72

Open and Run an Existing Program

 Click on Open Project in the File menu.
 Navigate to the program’s folder.
 Double-click on the program’s folder to open it.
 Double-click on the file with extension sln.
 In the Solution Explorer double-click on the file
with extension vb. (The Form Designer will
appear.)
 Press F5 to run the program.
 73

Activity
 Design a graphical user interface by following the
instructions carefully.