3/2/2024
SIT 103: VISUAL PROGRAMMING
(Lecture 1 & 2)
Introduction to the Visual Environment
By Mbogo Njoroge
Low-level Programming Languages
Assembly Languages
Assembly languages use mnemonics in place of the 0s and 1s
in programs. It is common to see that the mnemonic ADD is
used to represent the add operation. For example,
ADD bx, ax
In order to execute a program written in Assembly language,
the program should be first converted into a machine
language program using an Assembler, which is also a
program.
Assembly languages are low-level languages and are CPU
type-dependent.
High-Level Languages (cont’d)
High-level languages allow programmers to write programs in
a more readable form. For example:
grossPay = hours * rate
Programs written in high-level languages should be converted
into machine languages using interpreters or compilers.
An interpreter translates a program from high-level language
into machine language line by line during program execution.
A compiler translates a program into machine language in its
entirety before executing the complied program.
Language Portability
Low-level languages are CPU-dependent, thus they are not
portable.
High-level languages are not CPU-dependent, thus they are
portable. Compilers that work for specific types of computer
systems made the high-level language portable.
KUMBUKA:
History of Programming Languages
Machine Languages
Computer hardware consists of microelectronic switches,
which can be switched on or off. The on/off switch status can
be represented using binary 1 and 0.
Example of machine language code:
0010 1100 0110 0000
Machine language is CPU type-dependent. That is, every
type of CPU has its own machine language.
Machine languages are low-level programming languages.
1 2
High-Level Programming Languages
High-level program languages more resemble English
language than low-level languages. Examples:
• Visual Basic • C#
• Python • C
• Javascript • C++
• Java • PHP
• Visual Basic is not just a programming language
• It’s a programming environment with tools to:
• Create screen elements
Write programming language statements
•
3 4
Programming Models
Two programming models in use:
•Procedural programming - Legacy model
•Constructed as a set of procedures
(operational, functional units)
•Each procedure is a set of instructions
•The Gross Pay computation is a procedure
•Object-oriented programming (OOP) – Modern model
OOP makes code reuse easier
OOP is more suitable for developing complex software
Visual Basic 2010 is an object-oriented programming
language.
5 6
 3/2/2024

Object-oriented programming (OOP)

Procedural programming
The program concentrates on the major tasks that the program
needs to perform. A program accomplishes a major task, which
is divided into sub tasks and accomplished by sub programs.
An object-oriented program concentrates on software objects
that are extracted from real-world objects. The major task of
the program is accomplished by sending messages to the
objects in the program.

Radio Receiver Program Radio Receiver Program (OOP)

Start
User Interface Speakers
Convert audio
Get frequency settings and signal into sound
volume settings from user
Set Frequency/
Start receiving/
Stop receiving

Receive Extract audio Send audio Extract audio signal Signal

Signal
radio signal from signal to Extractor
Receiver
signal radio signal speakers

7 8

OOP Terminology

What is an object?
The VB.2010 IDE
An object in the context of object-oriented programming is
anything that software developers are interested.
• VB.Net Integrated Development
Environment (henceforth referred to as the
Software objects model the real-world objects, which may be IDE) window shown in the next slide with a
visible or invisible, something one can touch or untouchable;
few of its main components. It provides a
something that has weight or weightless.
good environment with ready to use tools
Sample objects: which the application
Car, person, employee, air, credit, receipt and account. developers/programmer uses when creating
programs

9 10

The IDE
IDE Components
• Solution Explorer - this window contains a list of all open
projects and files/items associated with the current solution.
• Form designer - this window is where all controls for a given
solution will be placed and manipulated. A windows
application may have one, two or many windows forms
associated with it. Note a console application will have no form
designer window, nor toolbox, since a console application
contains no forms.
• Toolbox - this window is where all VB controls will be
retrieved from. In actuality, you can consider the items in the
toolbox as class containers. Retrieving a control from the
toolbox is analogous to instantiating an object from that class.
Thus clicking on the button item (class) in the toolbox will give
you a button object. You can either double click on the control
Code you wish to add to the form, or you can drag and drop your
5 control.
Window
• Properties - this window is where property values are set for a
11 given control 12
 3/2/2024

Other IDE Components

• The Form Layout window: specifies a form’s position on the
screen at runtime. The Form Layout window consists of an
image representing the screen and the form’s relative position
on the screen. With the mouse pointer positioned over the form
image, drag the form to a new location.
• Menu Bar: Contains a standard command and specific
command like (File, Edit, View, Project, Format, Debug, Run,
etc.)
• Tool Bar: Contains several icons that provide quick access to
commonly used features
• Code Window: Each standard form has one code window for
that supports a text editor for the programmer to type-in and
edit the VB statements code. The user can write code in this
code window(as a work sheet) in the design stage. This code
will be applied at run time. The code is written in code window
and it will be edited quickly by code editor. Code consists of
language statements, constants, and declarations. To open the
code window, double-click the form or control for which you
13
choose to write code
Steps in Developing Application at the IDE
• There are three primary steps involved in building
a Visual Basic application at the VB IDE:
• 1-Draw the user interface: customize the
windows that the user sees and interacts with by
placing controls and components on the layouts of
the project’s Forms.
• 2- Assign properties to controls : set the
properties of the GUI controls
• 3- Attach code to control Event Procedures:
Decide on the events each control should recognize
and code the event procedures for those events.
Debug, test, and execute the program
14

Focus on Visual programming terminology

Recommended Naming Conventions • Events: These are actions by the user or by the system that
for VB Objects Visual Basic can detect and respond to e.g. A user clicking a
command button of a form will generate a click event for
Object Class Prefix Example that button.
Form frm frmDataEntry • Event Driven Programming: When a program is event
Button btn btnExit driven, its code executes in response to events involved by
TextBox txt txtPaymentAmount the user, Operating System or Application.
Label lbl lblTotal
• Project: a collection of files created to make Windows
Radio Button rad radBold application i.e. In Visual Basic, each form is treated as a
CheckBox chk chkPrintSummary
separate file.
Horizontal ScrollBar hsb hsbRate
Vertical ScrollBar vsb vsbTemperature • Control: An item inside the standard Toolbox used for
PictureBox pic picLandscape creating objects that constitutes the GUI. Objects so created
ComboBox cbo cboBookList can have a code attached to it.
ListBox lst lstIndegredients • Option Explicit: The Option statement setting toggled
between ON/OFF. Setting it to ON requires to declare all the
1- 15
variables before they are used. 16

Example of Object Example of Object

• This is a Visual Basic

GUI object called a form • Form elements are
• Contains data and actions objects called controls
• Data, such as Hourly Pay • This form has:
Rate, is a text property – Two TextBox controls
that determines the – Four Label controls
appearance of form objects – Two Button controls
• Actions, such as Calculate Gross Pay, is a method that • The value displayed by
determines how the form reacts a control is held in the text property of the control
• A form is an object that contains other objects such as buttons, • Left button text property is Calculate Gross Pay
text boxes, and labels
• Buttons have methods attached to click events

17 18

Event Driven Programming: Events
• The GUI environment is event-driven
• An event is an action that takes place within a
program & the program recognizes and responds to it
– Clicking a button (a Click event)
– Keying in a TextBox (a TextChanged event)
• Visual Basic controls are capable of detecting many,
many events
• A program can respond to an event if the programmer
writes an event procedure
19
Name Property
• All controls have properties
• Each property has a value (or values)
• Not all properties deal with appearance
• The name property establishes a means for the
program to refer to that control
• Controls are assigned relatively meaningless names
when created
• Programmers usually change these names to
something more meaningful
21
Naming Conventions
• Control names must start with a letter
• Remaining characters may be letters, digits, or underscore
• Convention used in this book:
• 1st 3 lowercase letters indicate the type of control
– txt… for Text Boxes
– lbl… for Labels
– btn… for Buttons
• After that, capitalize the first letter of each word
• txtHoursWorked is clearer than txthoursworked
23
3/2/2024
Visual Basic Controls
• As a Windows user you’re already familiar
with many Visual Basic controls:
• Label - displays text the user cannot change
• TextBox - allows the user to enter text
• Button – performs an action when clicked
• RadioButton - A round button that is selected or
deselected with a mouse click
• CheckBox – A box that is checked or unchecked with
a mouse click
• Form - A window that contains these controls
20
Examples of Names
 The label controls use the default names (Label1, etc.)
 Text boxes, buttons, and the Gross Pay label play an
active role in the program and have been changed
Label1 txtHoursWorked
Label2 txtPayRate
Label3 lblGrossPay
btnCalcGrossPay btnClose
22
Language Elements
• Keywords: Words with special meaning to Visual Basic
(e.g., Private, Sub)
• Programmer-defined-names: Names created by the
programmer (e.g., sngGrossPay, btnClose)
• Operators: Special symbols to perform common
operations (e.g., +, -, *, and /)
• Remarks: Comments inserted by the programmer –
these are non-executable statements & are ignored by
the compiler/interplater when the program runs (e.g.,
any text preceded by a single quote)
24
 3/2/2024

Language Elements: Syntax & Semantics Finding and Fixing Errors

• Syntax: set of rules that defines the correct use grammar of • Syntax Errors
the language as pertains to: • Breaks VB’s rules for punctuation, format, or
 set of characters used in the language spelling
 Key-words/vocabulary used in the language & their correct spelling • Smart editor finds most syntax errors, compiler
 How to combine the words & punctuations to form statements & finds the rest.
expressions in the language
• A program that violates the rules of syntax will not run until • The editor identifies a syntax error with a
corrected squiggly blue line and you can point to an error
to pop up the error message.
• Semantics: pertains to the logical meaning of the words,
statements, and expressions used in the language • You can display the Error List window and line
numbers in the source code to help locate the
The Programming Process error lines.
Summary of Steps: • Run-Time Errors
I. Designing • Statements that fail to execute, such as
II. Creating impossible arithmetic operations
III. Testing • Logic Errors
IV. Debugging 25 • Project runs, but produces incorrect results. 26

Step in Developing an Application Program Step 3: Make a list of the controls needed
Eg:
using VB.Net Type Name Description
TextBox txtHoursWorked Allows the user to enter the number of hours worked.
• Step 1: Clearly define what the program is to do TextBox txtPayRate Allows the user to enter the hourly pay rate
For example, the Wage Calculator program: Label lblGrossPay Displays the gross pay, after the btnCalcGrossPay
– Purpose: To calculate the user’s gross pay button has been clicked
Button btnCalcGrossPay When clicked, multiplies the number of hours worked
– Input: Number of hours worked, hourly pay rate by the hourly pay rate
– Process: Multiply number of hours worked by hourly pay rate Button btnClose When clicked, terminates the application
(result is the user’s gross pay) Label (default) Description for Number of Hours Worked TextBox
– Output: Display a message indicating the user’s gross pay Label (default) Description for Hourly Pay Rate TextBox
Label (default) Description for Gross Pay Earned Label
• Step 2: Visualize the application running on the computer Form (default) A form to hold these controls
and design its user interface
Step 4: Define values for each control's relevant properties:
Eg:
Control Type Control Name Text
Form (Default) "Wage Calculator"
Label (Default) "Number of Hours Worked"
Label (Default) "Hourly Pay Rate"
Label (Default) "Gross Pay Earned"
Label lblGrossPay "$0.00"
TextBox txtHoursWorked ""
TextBox txtPayRate ""
27 Button btnCalcGrossPay "Calculate Gross Pay" 28
Button btnClose "Close"

Step 5: List the methods needed for each control: Step 7: Check the code for errors:
Eg: – Read the flowchart and/or pseudocode
Method Description
btnCalcGrossPay_Click Multiplies hours worked by hourly pay rate – Step through each operation as though you are the
These values are entered into the computer
txtHoursWorked and txtPayRate TextBoxes
– Use a piece of paper to jot down the values of variables
Result is stored in lblGrossPay Text property
btnClose_Click Terminates the application and properties as they change
– Verify that the expected results are achieved
Step 6: Create pseudocode or a flowchart of each method:
• Create pseudocode or a flowchart of each method:
– Pseudocode is an English-like description in programming Step 8: Use Visual Basic to create the forms and other
language terms controls identified in step 3:
Store Hours Worked x Hourly Pay Rate in sngGrossPay.
Store the value of sngGrossPay in lblGrossPay.Text.
– This is the first use of Visual Basic, all of the previous
– A flowchart is a diagram that uses boxes and other steps have just been on paper
symbols to represent each step – In this step you develop the portion of the application
Multiply hours Copy value in the user will see
worked by sngGrossPay to
Start hourly payrate. End
lblGrossPay
Store result in text property
sngGrossPay. 29 30

Step 9: Use Visual Basic to write the code for the event
procedures and other methods created in step 6
– This is the second step on the computer
– In this step you develop the methods behind the click
event for each button
– Unlike the form developed on step 8, this portion of the
application is invisible to the user
Step 10: Attempt to run the application - find syntax errors
– Correct any syntax errors found
– Syntax errors are the incorrect use of an element of the
programming language
– Repeat this step as many times as needed
– All syntax errors must be removed before Visual Basic
will create a program that actually runs
Overview on .NET
.NET is not a single programming language but a pack of
programming environments of Visual Languages that includes:
– Visual Basic
– Visual J#
– Visual C++
– Visual C#
All these languages has the same source code and supported
on a common .NET Framework
The .NET Framework:
.Net Framework is a platform that provides tools and technologies
to develop Windows, Web and Enterprise applications. It mainly
contains two components,
It provides a common set of services that can be used when
programming in any supported language • Enabling a
programmer to write programs that run on any operating
system on any hardware platform
Its main components are two;
1. .NET Framework Class Library (FCL)
2. Common Language Runtime (CLR)
3/2/2024
• Step 11: Run the application using test data as input
– Run the program with a variety of test data
– Check the results to be sure that they are correct
– Incorrect results are referred to as a runtime error
– Correct any runtime errors found
– Repeat this step as many times as necessary
Documentation
Documentation is the written text and comments that make
a program easier to read, use and modify.
Documentation is an essential part of a software program.
Documentation can be found the code text. A software manual
is also considered as part of the documentation.
UHCL has its own documentation guidelines. Students should
check the requirements on my web page and follow the
guidelines in the program assignments.
31 32
Common Language Runtime (CLR)
.Net Framework provides runtime environment
called Common Language Runtime (CLR) in which ALL the
.Net Programs are run.
The code which runs under the CLR is called Managed Code.
Programmers need not worry on managing the memory if the
programs are running under the CLR as it provides memory
management and thread management.
Programmatically, when our program needs memory, CLR
allocates the memory for scope and de-allocates the memory if
the scope is completed.
Language Compilers such as C#, VB.Net, J# converts the
Code/Program to Microsoft Intermediate Language (MSIL)
intern this will be converted to Native Code by CLR (See the
figure description on next slide)
33 34
.Net Framework Class Library (FCL)
• .Net FCL is also called as Base Class Library and it is common
for all types of applications i.e. the way the Library Classes and
Methods are accessed in VB.NET is the same way they are
accessed in C#, and it is common for all other languages in .Net
The following are different types of applications that can make
use of .net class library.
• Windows Application.
• Console Application
• Web Application.
• XML Web Services.
• Windows Services.
• Developers just need to import the FCL/BCL in their language
code and use its predefined methods and properties to implement
common and complex functions like reading and writing to file,
graphic rendering, database interaction, and XML document
manipulation.
35 36
 3/2/2024

Compilation of Visual Basic .NET Source Code, Object Code and Executable Code
•The bytecode created by the VB .NET compiler must be
•Source code refers to the program written in a high-level
interpreted by the Microsoft Common Language Runtime
(CLR) interpreter before the CPU can execute it.
language.

•The CLR is part of Microsoft .NET platform. •Object code is the machine language version of the
source code.
•The runtime files of Microsoft .NET platform is part of
Microsoft Visual Studio .NET and can also be downloaded •Executable code is created from the object code and
from the Microsoft web site.
necessary software library components. The executable
code is ready to be run on an operating system.

language-specific CLR and JIT •In Microsoft Windows operating system, a file with file
.NET compiler compiler native machine
IL types of .exe holds the executable code.
program code

37 38

VB.Net Comparison Operators

VB.Net Arithmetic Operators
You can use arithmetic operators to perform various mathematical operations These operators are used for making comparisons between variables. All are
binary in operation(ie. they always take TWO operands)
Operator Operator Name Brief Description
Operator Operator Name Brief Description
Symbol
+ Addition - A binary operator Symbol
- Generates the sum of its two operands > Greater-than - Generates the value TRUE iff the value of its
- Subtraction - A binary operator
- Generates the difference between its two operands by left operand is bigger/larger than the value of
subtracting its right operand from its left operand. its right operand, otherwise it generates the
* Multiplication - A binary operator
- Generates the product of its two operands. value FALSE
/ Floating point - A binary operator < Less-than
division - Generates a floating point result after dividing its left operand
>= Greater-than or
by its right operand.
\ Integer division - A binary operator Equal-to
- Generates the whole number part of the quotient after dividing <= Less-than or
its left operand by its right operand.
MOD Modulus - A binary operator Equal-to
- generates a whole number remainder after dividing its left = Equal-to - Generates the value TRUE iff its left operand
operand by its right operand.
^ Exponent - A binary operator and its right operand have the same value,
- Generates the value of its left operand raised to the power of its otherwise it generates the value FALSE
right operand
- negation - A unary operator that must always lie to the left of its operand <> Not equal-to
- Changes the sign of its operand from positive to negative or * Complete this table by filling in the blank rows of the third column *
from negative to positive 39 40

VB.Net Logical Operators

Initial Visual Basic Screen
These operators help us in making logical decisions and evaluates to one of two
possible values; (TRUE or FALSE)
Operator Operator Brief Description
Symbol Name
And logical AND - A binary operator
- Generates the value TRUE iff its two operands are
TRUE, otherwise it generates the value FALSE
Or logical OR
Not logical NOT

Xor logical XOR

AndAlso

OrElse

IsFalse
IsTrue
* Complete this table by filling in the blank rows of the second and third columns *
*Draw truth tables for each of the operators AND, OR, NOT, and XOR * 41 42
 3/2/2024

Starting a New Project The Toolbox

1
• A Windows control is a graphical object that allows the user to interact
Click File
with an application program via visual elements displayed on the
computer screen.
3 • Since there are so many controls for various purposes, their insertion to
2 an application and their configuration are left to the computer
programmer.
• The Toolbox is the accessory that provides most of the controls used in
an application (Microsoft Visual Studio Windows: The Toolbox (functionx.com))

By default, the Toolbox is

positioned on the left side of the
IDE. To change that position, you
can drag its title bar away and
dock it to another side of the IDE

43 44

The Properties Window The Solution Explorer Window

• Solution Explorer displays the projects that form your
solution, the files and folders in a project as they appear on
the physical hard drive, and any assemblies, COM objects
or files the project references

Properties Settings
The Properties
window lists the
design-time
properties for
selected objects and
their current
settings. You can
change these
properties at design
Exercise time. When you
a) Whats the name of the currently selected controle? select multiple
controls, the
b) Identify the property-value setting for the properties;
Properties window
i. Multiline contains a list of the
ii. ShortcutEnabled properties common
iii. Size to all the selected
45 46
iv. Text controls