Arab Republic of Egypt

Ministry of Education
General Administration For
Developing Computer and Information Technology

Third grade preparatory

First semester
 Third grade preparatory
First semester
Preparation
Samir Hassan Mohamed Dr.Gamal Eldin Mohamed Amin
General Manager Technical Office Manager
Educational Computer Department Technology Development Centre

Ahmed Abdallah Mansour Tamer Abd ElMohsen Mansour

Computer Expert Computer Expert
Educational Computer Department Educational Computer Department

Translation
Aziza El Sayed Bassiouny Saleh Marzouk El Refaie
Computer Expert English Language Counsellor
Educational Computer Department Ministry of Education (Formerly)

Review
Prof.Mohamed Fahmy Tolba Prof.Ahmed Mohamed Mahmoud Tobal
Minister’s Advisor for Information Technology Minister’s Assistant for Information
(Formerly) Technology(Formerly)

2012/2013

(2)
 Introduction
Dear students, we offer this book in computer and information technology,
as amended and revised by a group of university professors and experts who
specialize in this area. We hope to keep you informed of the latest developments
in era of technology to keep pace with scientific development in problem
solving, flowcharts and the basics of programming through the dot-net style.
This is done in a simplified manner as the first step in the path of programming.
This branch is very up to date; the world of computers and information
technology relies greatly on it as we are going to see through the first and
second semester books.

The work team

(3)
 Index
content page
Chapter I :Problem Solving 5
 Problem Solving. 6
 Problem Solving Stages. 6
 Flowchart. 8
 Simple Flowchart. 8
 The use of Branching (Decision) in Flowcharts. 12
 The use of Loop in Flowcharts. 16
 Questions. 22
Chapter II :Introduction to Visual Basic .Net 24
 The language of Visual Basic.net. 25
 Programing and computer memory 25
 The language of Visual Basic.net and Framework.net 25
 Visual Basic.net and IDE 26
 Questions. 30
Chapter III :Controls 32
 Form. 33
 Button. 36
 Label. 39
 Textbox. 40
 ListBox. 40
 ComboBox. 41
 GroupBox. 42
 RadioButton. 42
 CheckBox. 44
 Questions. 45
Chapter IV:Code Window 48
 Code Window. 49
 Event Handler. 49
 Setting the (Properties) programmatically. 52
 Questions. 53

(4)
 Problem Solving [
By the end of this chapter, student will be able to:

Define the problem.

Identify the problem solving stages.
Write steps to solve the problem “Algorithm”.
Draw flowcharts that reflect the steps of the solution.

(5)
 In your daily life, you may face a lot of problems through various activities that contain many
problems.

Problem is a situation that requires a solution or an objective you want to achieve through
following consecutive steps sequentially.

Problem Solving is the steps, activities, and processes to be done to reach an output or
objective.

Consider the following problem:

The problem is: Baking a cake according to certain specifications, input available are the
ingredients (such as eggs, flour, milk …etc.), then followed by activities or procedures that
should be done sequentially to get the cake in suitable shape.

Dear student
In this book, we focus on Problem Solving techniques
using the computer.

First: Problem Definition:

Problem definition implies the identification of required outputs, available inputs and,
arithmetic and logical operations to be executed.

Second: Algorithm Preparation:

Algorithm is one of the methods used to solve a problem through logically arranged
procedures.
After identifying and analyzing the problem, outputs and inputs; a plan in the form of a
series of successive steps is made which is called an (Algorithm), devised by the
Mathematician and the founder of Algebra “Muḥammed Ibn Mūsā al-Jwārizmī”.

One of the methods to represent algorithm is flowchart.

(6)
Flowchart:
It is a diagram that uses standard graphical symbols to illustrate the sequence of steps
required for solving a problem or specific question.
Some advantages of flowcharts:
 Facilitating the reading and understanding of the problem and illustrating to the
programmer what must be done.
 Useful to explain the program to others
 helping in documenting the program in better manner, especially if the program is
complicated

Third: Program design

Having drawn a “Flowchart” to solve the problem, using a computer; we have to
translate this flowchart into one of the programming languages.

Fourth: Program Testing

During writing a program we unintentionally make some mistakes e.g. writing a minus
sign (-) instead of (+). We cannot detect errors unless we begin entering data to the program
with previously known results; and compare the results of the current program to those of the
well-known results and so you can discover the errors and correct them.

Fifth: Program Documentation

This step includes writing all steps taken for solving the problem that include: given
Input, output, plan for solving the problem, drawn flowchart, programming language used
for coding , instructions, date of last modification of the program and, people who contribute
to the program development process . This is done to have the program documented to go
back for feedback and correction. This documentation is beneficial when more than one
person participate in writing or modifying the program.

Dear Student
After we have learnt about the problem-solving
stages and flowcharts, we will learn about some standard
(agreed on symbols), Special symbols can also be used for
exceptional cases.

Here are some of the most commonly used symbols as shown in table (1-1)

(7)
 Significance symbol

)Terminal(

) Input/Output (

)Process(

)Decision(

)Flow Lines(

Table (1-1) Common symbols for Flowcharts

First: Define the problem

Output: The sum of two numbers

Input: The first number is “A “and the second number is “B”
Processing (Solution): C =A+B where the result is C

(8)
 Second :Algorithm Third :Flowchart
1 Start
Start
2 Enter the number A and the
number B Enter A and B

3 Performing the sum of the two

numbers using this equation C=A+b
C=A+B, the output is C

4 Print the output C

Output C
5 End

End

Table (1-2) Algorithm and Flowchart for summation of tow numbers

1- The flowchart should start with the Start symbol and end with the End
symbol.
2- A,B,C are variable names .The variable refers to a memory storage that holds a
value.
3-The equation: C =A+B, indicates the sum of the value of A, to the value of B, and
stores the result in C.
4-Entering values in A and B is done by using the term “Enter”, inside a
parallelogram, you can also use another term to get the same meaning
like “Read” or “Input”.

5-The sum equation is written inside the rectangle, as it represents an

arithmetic operation.

6-The output is expressed with a parallelogram using the term “Output”,

we can also use another term like “Print” or "output".

7-Note that flow line shows the order of an Algorithm.

(9)
 First: Define the problem
Output: The value of “Y”.
Input: X.
Processing (Solution): Compute the value of “Y” from the equation Y=3x+2.

Dear Student / remember:

1. The left hand side (LHS) of any equation should contain
only one variable; the value of this variable will be the
(output) or the solution of the equation.
2. The right hand side (RHS) of the equation may contain
abstracted values or arithmetic expressions that have one
or more variables (inputs).

Second :Algorithm Third :Flowchart

1 Start
Start

2 Enter value of X Input X

3 Calculate Y =3*X+2
Y=3*X+2

4 print value of Y
Print Y

5 End
End

Table (1-3) Algorithm and Flowchart to solve a first degree equation

(10)
Dear Student/ Notice
The word “Area” refers to a Variable name, whose value is
the calculated area of the rectangle; also “Perimeter” is a variable
name whose value is the calculated perimeter of the rectangle.

Variable names are chosen to WELL indicate the content of the

variables.

First: Define the problem

Output:

Input:

Solution :

Second :Algorithm Third :Flowchart

(11)
 There are many problems that contain a question requires a Yes or No, or requires
branching to other processes determined by flowchart.

First: Define the problem

Output: print the word “ “.
Input: the score X.
Solution: If the value of X is greater than or equal 50; the word “ ” will
be printed.

Second :Algorithm Third :Flowchart

1 Start
Start
2 Enter the values of X

3 If X> =50 then Enter X

3-1 Print “ successful ”

4 End X>=50 Print

successful

End

Table (1-4) Algorithm and Flowchart to print the message “‫”ناجح‬

Dear Student / Notice

The execution of step (3-1) will be done only when the
value of x is greater than or equal to 50 (the result of the
condition is True), then it moves to step (4); otherwise when the
value of x is less than 50 (the result of the condition is False),
the execution is transferred to step 4 directly.

(12)
 First: Define the problem
Output: print the result of dividing two numbers “R” or print the word
“undefined"
Input: Numerator is “num1”, denominator is “num2”.
Solution: if num2=0 then print “undefined”, otherwise print the result of the
division “R”.

Second :Algorithm Third :Flowchart

1 Start Start

2 Enter the Numerator num1

Enter num1
3 Enter the denominator num2

4 If num2 =0 then Enter num2

4-1 Print “undefined” print

Num2=0
4-2 Go to step 7 “undefined”

5 R=num1/num2 R=num1/num2

6 Print R
Print R
7 End

End

Table (1-5) Algorithm and Flowchart to print the division of two numbers
Dear Student / Notice
1. Step (4) is a decision (represented by the rhombus shape)
It is a comparison that evaluates this question (is
num2=0?) If the result is Yes then the word “undefined"
will be printed according to mathematical rules; then the
execution will be transferred to step (7) to end the
program and prevent the execution of the division.
2. If the result of the condition in (step 4) is false, the
execution will be transferred to step (5) directly because
step (4-1) and (4-2) won’t be executed.

(13)
 First: Define the problem
Output: print the number type (even or odd).
Input: the number “N”.
Solution: the even number is determined if the entered number is divisible by 2
without remainder, otherwise it will be odd.
Second :Algorithm Third :Flowchart
1 Start
Start
2 Enter N

3 If N is divisible by 2 without Get N

remainder then

3-1 Print “even number”

N
4 Else divisible
by 2
4-1 Print “odd number”

5 End EVEN ODD

End

Table (1-6) Algorithm and Flowchart to enter a number and print its type (odd or even)

First: Define the problem

Output: print out “greater than zero” – “less than zero “or “equal zero”.
Input: temperature degree Celsius “D”.
Solution: the temperature degree entered will be compared to zero.

(14)
 Second :Algorithm Third :Flowchart
1 Start
Start
2 Enter D (temperature
degree)
Get D
3 If D=o then

3-1 Print “Equal zero” Print

D =0
Equal 0
4 Else
Print
4-1 if D<0 then Below 0 D<0

4-1-1 Print “Below zero”

Print
4-2 Else Above 0

4-2-1 Print “Above zero”

5 End End

Table (1-7) Algorithm and Flowchart to get the temperature

First: Define the problem

Output: print out “the largest number is ...? “– “the smaller number is .…? “
Input: X, Y so x not equal y
Solution: ………………

Second :Algorithm Third :Flowchart

(15)
 Flowchart Modified Flowchart
Start

Input R

A= 3.14 * R * R

Print A

End

Table (1-8) Flowchart to calculate the area of a circle

First: Define the problem

Output: print numbers from 1 to 3
Input: number M
Solution: print number M and increment it by 1 then continue printing
until the value of M become greater than 3

(16)
 Second :Algorithm Third :Flowchart
1 Start
Start
2 M=1
M=1
3 If M<=3 then

3-1 Print M
M<=3
3-2 M=M+1

3-3 Go To step(3) Print M

4 End M=M+1

End

Table (1-9) Algorithm and Flowchart to print the numbers from 1 to 3

Dear Student / Notice

As long as the value of M does not exceed 3, the program prints value
of M. When M becomes 4 ;( M=4) the program goes to step (4).

Start

The opposite figure is the same flowchart M=1

drawn above but in a different way, this
means that what really matters is the M<=3
sequence of solution steps not the flowchart M=M+1
figure. Print M

End

You can track the progress of the solution steps and follow each step of the code as shown
in table (1-10).

(17)
 Step value of M Result
1-Start There is No variable
2-M=1 1
3-If M<=3 (True) 1
1 3-1 Print M
3-2 M=M+1
1
2
1

3-3 Go to step (3) 2

3-If M<=3 (True) 2
2 3-1 Print M
3-2 M=M+1
2 2
3
3-3 Go to step (3) 3
3-If M<=3 (True) 3
3 3-1 Print M
3-2 M=M+1
3
4
3

3-3 Go to step (3) 4

3-If M<=3 (False) 4
4-End 4

Table (1-10) Tracking the variables and the corresponding result of exercise (1-7)

How many times was the content of the loop executed? ……………………
What will be the value of M after the end of the loop? ……………………………

Dear Student / Notice

1-When the value of M equals 4, the condition becomes (False).

2-We conclude that the number of repetition in the loop is pre
known in this exercise.
3- The variable M is called a counter; as it causes the steps (3-1)
and (3-2) and (3-3) to be repeated for a definite number of times (3 times).

(18)
 Algorithm Flowchart
1 Start
Start
2 J=1
J=1
3 If J <=12 then

3-1 Print J*3 J <=12

J=J+1
3-2 J=J+1
Print J*3
3-3 Go To step(3)

4 End End

Table (1-11) Algorithm and Flowchart to print the multiplication table of No 3.

Compare this flowchart to the one in the previous exercise (what are the differences?).

(19)
Make the necessary modifications to the Flowchart of the previous exercise, so that
you can enter the required multiplication table constantly instead of printing the
multiplication table of “3”.

Algorithm Flowchart
1 Start
2 Enter N
3 J=1
4 If J<=12 then
4-1 Print J*N
4-2 J=J+1
4-3 Go To step(4)
5 End

Table (1-12) Algorithm to print the multiplication table of an entered number

:Algorithm Flowchart

(20)
 Algorithm Flowchart
1 Start
Start
2 N=1
N=1
3 Sum=0
Sum=0
4 Sum =Sum + N
Sum=Sum+N
5 N=N+1
N=N+1
6 If N>3 Then

6-1 Print Sum N>3

7 Else
Print Sum

7-1 Go to step (4)

8 End End

Table (1-13) Algorithm and flowchart to print the sum of integer numbers from 1 to 3
You can track the values of variables as shown in table (1-14)
Step Value of N Value of Sum Result
1-Start No variable No variable
2-N=1 1 No variable
3-Sum=0 1 0
4-Sum=Sum+N 1 1
5-N=N+1 2 1
6-if N>3 (False) 2 1
7-1 Go To step (4) 2 1
4-Sum=Sum+N 2 3
5-N=N+1 3 3
6-if N>3 (False) 3 3
7-1 Go To step (4) 3 3
4-Sum=Sum+N 3 6
5-N=N+1 4 6
6-if N>3 (True) 4 6
6-1 Print Sum 4 6 6
Table (1-14) tracking the values of variables and corresponding results of exercise (1-9)

(21)
Dear Student / Notice
Variable N is considered a Counter, while variable Sum is used for
accumulation process.

(22)
 First: Put () in front of the correct sentence and (X) in front of the wrong one:
(1) Flowcharts use standard symbols and lines to represent a problem algorithm. ) )
You can use any Geometric shape to represent Algorithm when drawing
(2) ) )
flowcharts.
(3) The symbol is used to represent start and end of flowchart. ) )
(4) The rectangle symbol is used to represent the data input operation. ) )
(5) The symbol is used to represent a decision process in flowcharts. ) )
(6) The problem means that an objective or output is required to reach. ) )
(7) Preparing a cup of tea is an example of a problem. ) )
Problem solving is the steps, activities, and processes to be done to reach an
(8) ) )
output or objective.
The program documentation is a set of procedures arranged logically for solving a
(9) ) )
specific problem.
(10) The program testing is writing down all the steps taken to solve a problem. ) )
(11) Documenting the program means making sure that the program is free of errors. ) )
(12) Algorithm is a set of procedures arranged logically for solving a specific problem. ) )
The program documentation is writing down all the steps taken to solve a
(13) ) )
problem.
(14) Testing the program means making sure that the program is free of errors. ) )
Flowcharts are diagram representations which depend on drawing some standard
(15) ) )
symbols to clarify the order of procedures to solve a problem.
Flowcharts help to facilitate understanding of the problem, analyse and convert it
(16) ) )
to a program.

Second: Choose the appropriate answer to complete each phrase of the following:
1- Steps, activities and procedures to be done to reach an objective or an output - can be
called:
a. problem definition b. problem c. problem solving

2- On drawing flowcharts we use:

a. standard symbols and lines b. all geometric figures c. one geometric figure

3- A set of procedures arranged logically for solving a specific problem – can be called:
a. problem b. algorithm c. program testing

4- Making sure that the program is free of errors – can be called:

a. program testing b. program documentation c. algorithm

5- Writing down all the steps taken to solve a problem errors – can be called:
a. program documentation b. program testing c. flowcharts

(23)
6- Problem-solving includes many terminologies, the terminology that expresses the
preparation of a cup juice is:
a. Flowchart b. algorithm c. problem

7- Problem-solving approach includes many of the terminologies, the terminology that

expresses the mathematical problem is:
a. Algorithm b. problem c. program design

8- A diagramatic representation that depends on drawing some standard symbols to

clarify the order of procedures to solve a problem can be called:
a. Problem b. algorithm c. flowchart

9- In the following flowchart:

Start

M=1

FALSE
M<=3
M=M+1
TRUE
Print M

End

The number of iterations (print the value of M) is:

a- 2 b- 3 c- 4

10- In Flowchart of the previous question, the value of M after the end of the iterative
loop equals:
a. 2 b- 3 c- 4

(24)
 Introduction to Visual Basic.net
By the end of this chapter, the student will be able to:

Explain what is meant by programming language

Identify the essence of Visual Basic.net
Identify the main components of IDE screen
Identify what Framework.Net can provide

(25)
 In the previous chapter, you have studied the logical steps of solving a problem. In this
chapter, you will deal with Visual Basic.net program which will enable you to convert the
steps of solving a problem into programme codes that can be carried out.

It is one of the high level programming languages and designed to be easy to learn as
its commands and instructions use English language vocabulary and it can be used in many
applications such as:

1- Windows applications

2- Web applications

Commands and instructions which are written in Visual Basic.net enable you to create
objects in computer memory and every object has:

1- Properties such as (size-colour- font) of the text written on the program interface.
2- Events such as click on a command button.
3- Procedures, each one contains commands and instructions which are carried out when
calling this procedure.

So, the Visual Basic.net is considered:

Object oriented as its programmes work through objects in computer Memory.

Event Driven as commands and instructions are carried out as soon as certain event
occurs.

The Framework.Net provides the following:

* Libraries through which we create the objects,

* Runtime environment (called Runtime) in computer memory where Applications
produced by the language of Visual Basic.net language work in.
* Compilers which compile commands and instructions written in Programming
language into machine code which the Computer deals with.

(26)
The programmer of Visual Basic.net needs Integrated Development Environment ( IDE )
which provides tools and merits to the programmer that help him create applications (
windows – mobile – web…..). Visual Studio represents IDE as shown in figure (2-1):

‫جديد‬Create
‫إنشاء مشروع‬
new project

Figure (2-1) IDE window

When the programmer creates a new project, it appears as in figure ( 2-2 )

Figure (2-2) (IDE) screen for new project

(27)
Numbers shown in figure (2-2) refer to some components of Integrated Development
Environment IDE
1- Form Window
2- Toolbox Window
3- Properties Window
4- Solution Explorer

The form is the interface which the user deals with through different controls such as Button,
Textbox, label……etc. as shown in figure (2-3)

Form window after putting controls Form window before putting controls

Figure (2-3) form window before and after putting controls

It contains tools of controls which can be put on the Form and can be shown in
categories as in Figure (2-4)
Notice that there is (+) sign beside every category and when you click it, a group of tools
controls appear and you can show all tools of controls by choosing the category (All
Windows Forms)

Some of these categories include:

*Common Controls

*Menus & Toolbars

Figure (2-4) ( Toolbox)

(28)
 There is a group of control Tools under each category as shown in figure (2-5)

Figure (2-5) controls under various categories

Some Common Controls
Button TextBox Label ListBox
ComboBox CheckBox RadioButton
Table (1-1) Some common Controls

Each tool of the above Common Controls has a group of properties which can be
adjusted through "Properties Window" as shown in Figure (2-6)

Property name Property value

(left column) (right column)

Figure (2-6) Properties Window

(29)
 The shown Properties in Properties Window are different according to the active part on
the IDE screen.

There is a list of folders and files of the projects in this part as shown in Figure (2-7)

Solution name

Folders and
files for first First Project
project

Second Project
Folders and
files for second
project

Figure (2-7) Solution Explorer window

(30)
First: Put () in front of the correct sentence and (X) in front of the wrong one:
N Question Answer
1- The VB.net language is one of the high level languages. ( )
2- The VB.net language is one of Event Driven languages. ( )
3- The VB.net language is the only high level language. ( )
The VB.net language is considered a high level language because it is easy to
4- ( )
learn.
The VB.net language is used in producing Windows applications and Web
5- ( )
applications.
6- The VB.net language is used in producing Web applications only. ( )
7- The VB.net language can't be used in producing Windows applications ( )
Every Object is characterized by certain properties and certain behaviour
8- ( )
when a certain event occurs on it.
Events and procedures which belong to any object in VB.net language are
9- ( )
called properties.
The name, the size and colour of an object are all samples of events that can
10- ( )
occur to the object in VB.net language.
The name, the size and colour of an object are all samples of properties of
11- ( )
some objects in VB.net language.
The Events are the commands and instructions which are carried out when a
12- ( )
certain procedure occurs to the object in VB.net language.
The procedures are the commands and instructions which are carried out
13- ( )
when a certain procedure occurs to the object in VB.net language.
Pressing click and D-click are samples of some events that can occur to an
14- ( )
object in VB.net language.
15- Framework.net contains Compilers, libraries and runtime environment ( )
Compilers in Framework. Net are considered the environment of runtime for
16- ( )
applications which are produced in VB.net language.
Compilers are programmes that translate commands and instructions written
17- ( )
by the programmer from the high level language into machine language.
Object Oriented Programming Languages are the languages that work
18- ( )
through objects in memory.
All programming languages which carry out a group of commands and
19- ( )
instructions are considered as Event Driven languages.
Visual Studio is considered IDE because it includes a group of tools, elements
20- ( )
and characteristics necessary to produce applications.

Second: Choose the correct answer to complete each statement:

1-Object Oriented programming language depends on:
a- using Windows applications.
b- Using Web applications
c- Objects in computer memory.

(31)
2-You can produce Windows applications or Web applications by using:
a- Objects in computer memory
b- VB.net language
c- Properties and Events
3- Characteristics which describe the object such as size, name and colour are called:
a- Properties
b- procedures
c- Events
4-Click on Button is:
a- property
b- procedure
c- Event
5-Commands and instructions which we want to carry out are called:
A -properties
B -producers
c - Events
6- The Properties term refers to:
a- Features that describe the object.
c- Events that can occur to the object.
c- Commands and instructions that are carried out.
7-The Events term refers to:
a- properties that describe the object.
b- Events that can occur to the object.
c- Commands and instructions that are carried out.
8-The Procedures term refers to:
a- properties that describe the object.
b- Events that can occur to the object.
c- Commands and instructions that are carried out.
9-libraries, Compilers and Environment of runtime of applications are the most
important components of:
a- Object Oriented.
b- Event Driven.
c- Framework.net.

10- IDE is called:

a- Visual Basic.net
b- Visual Studio.
c- Framwork.net.

(32)
 Controls
By the end of this chapter, student will be able to:

Recognize the Properties Window.

Choose the appropriate Property.
Choose the proper value for the Property.
Differentiate between controls Properties.

(33)
3-1 Form
The Form has many properties which share in defining the form of program screen we want
to create. Here are some properties of the Form:

N Property name Function

1 Name Name of Form used in Code Window.

2 Text The appeared Text on the title bar of the Window.
3 Backcolor The background color of the Form.
4 Right to Left The direction of Controls on the form Window From Right to Left.
5 Right to Left layout The layout of Controls on the Form from right to left.
MinimizeBox It controls the appearance or disappearance of MinimizeBox of Form
6
Window.
MaximizeBox It controls the appearance or disappearance of MaximizeBox of Form
7
Window.
ControlBox It controls the appearance or disappearance of ControlBox of Form
8
Window.
9 FormBorderStyle The Border style of Form Window.
WindowState It defines the Window State of the Form (Maximizing, Minimizing or
10
normal).

Here are the effects of setting the previous properties on the Form:

Appearance mode Form Window after setting

property Value
of property effect the property

Name frmSquare In design mode The value of Name property

doesn't appear on the Form
because it is used as Form
name in code window.

(34)
Text ‫مساحة المربع‬ In design mode and
runtime mode

BackColor DarkSeaGr In design mode and

runtime mode
een

RightToLeft Yes In design mode and

runtime mode

RightToLeftLayout True In design mode and

runtime mode

(35)
The following is the effect of setting the value of the previous properties of the form :

Appearance mode of Form Window after

property value
property effect setting the property

MaximizeBox False In design mode and

runtime mode

MinimizeBox False

ControlBox False In design mode and

runtime mode

FormBorderStyle None In design mode and

runtime mode
Note the
disappearance
of title bar and
form borders

WindowState Maximized In runtime mode The form is Full screen

(36)
Notes:
 There are common properties among different Controls such as (Name-Text – Forecolor
– Backcolor - Right To Left…….etc.)
 There are some properties which their effect doesn't appear on Controls until you set
some other properties , for example the Right to Left Layout property doesn't work
unless the value Right to Left equals Yes.
 There are properties of the form, if they are set, they are applied to Controls which are
placed on this Form such as font and ForeColor properties.
 The default value of the property (Text) and the property (Name) is the same and it is
(Form1).
 When you set some properties, the effect of setting appears directly on the Form in design
mode of the programme.
 There are some properties which their effect doesn't appear on the Form or Controls until
you run the programme.
 The other Controls may have the same properties mentioned above, so they won't be
repeated again When we studying these other controls once more.
 We will study the distinctive properties of each tool as follow:

3-2 Button
It is one of Controls which can be placed on the Form. When you click it, it does a certain
task.

3-2-1 placing the Button on the form.

By double clicking on the Button control on Toolbox, the Button appears on the Form in
Design mode as it is shown in Figures (3-1) and (3-2)

Double Click here

Figure (3-1) Button in Toolbox Figure (3-2) the shape of Button after drawing it

(37)
 Some distinctive properties of Command Button:
N Property Function
1 Location The location of placing Button on the Form.
2 Size Defining the height and width of Button on the Form.
3 Text The appeared Text on the Button
4 BackColor Choosing the backColor of the Button.
Font Defining (shape, size and style) of the Text font appeared on
5
the Button.
6 ForeColor Choosing the ForeColor to the appeared Text on the Button
Note that when you click on the command button in the design mode:

 Eight squares appear on the borders of the Button.

 You can change the size of the Button by using the process of drag and drop
using the pointer of the mouse through the eight squares.
 You can change the location of Button by using the process of drag and drop
after moving the mouse pointer until it turns into a shape with four heads.

property Value Appeared effect of Form Window after setting the

property property

location 0,0

In design mode and

runtime mode

(38)
location 98,108

In design mode and

runtime mode

Size 75,23

In design mode and

runtime mode

Size 121,62

In design mode and

runtime mode

Backcolor Yellow

Forecolor Blue

Text ‫احسب‬ In design mode and

runtime mode

(39)
3-3 Label
It is a tool used in showing a Text on the Form Window which can't be changed during
programme Runtime.
Some distinctive properties of the Label:

N Property Function

AutoSize The Size of the Label is defined automatically according to the

1
written Text if the Value of property equals true.

2 BorderStyle Choosing the Border Style of the Label

Here are the effects of setting the previous properties on the Label tool:

The effect of
The Form window after setting the
property Its Value property
property
appears

Name lblResult In design mode

Text :‫النتيجة‬

Forecolor Choosing an
appropriate
color

Backcolor Choosing an
appropriate
color In design mode
Font Choosing the and runtime mode
Size, Style and
Type of the
appropriate Font

AutoSize False

BorderStyl FixedSingle
e

(40)
Notice: You can change the size of Label manually by using the process of drag and drop
when the Value of the property AutoSize is false through the eight handles in design mode
only and its effect appears in design mode and runtime mode.

3-4 TextBox
It is a tool used to insert (input) data from the user during programme run time.
Some distinctive properties of the Textbox:
N property Function

1 Maxlength It defines the maximum number of letters which can be

inserted in the TextBox
2 PasswordChar It defines a symbol used instead of written text in case we
have a password.
3 Multiline allows multiple lines within the text box control tool.
Here are the effects of setting some properties on TextBox :
The effect
of
Property value property Window Form after setting the property

appears

Maxlength 30 In runtime
mode.
Letters less then 30

Password * In design Letters replaced by *

Char mode and
runtime
Multiline True Writing in
mode after
multiline
set a value
to the text
property

(41)
3-5 ListBox:
Shows a list of items
Some distinctive properties of ListBox:
N Property Function

1- Items A group of items shown in the ListBox

2- Sorted It defines whether the elements in the list are sorted or not.

3- selectionMode It defines whether it is possible to choose one item or more

shown in the ListBox.

Here is the effect of setting some properties on the ListBox :

The effect
Property value of property FormWindow after setting the property
appears

Items ‫عمرو‬ Names sorted

In design
alphabetically
‫رامي‬ and
runtime
‫ياسمين‬ mode Select more than one
item
‫سمر‬

SelectionMode Multiextended In runtime

mode

Sorted True In design

and
runtime
mode

3-6 ComboBox
A ComboBox control displays a drop-down list from which one item can be selected.
Some distinctive properties of the ListBox:
N Property Function
1- Items A group of items which are shown in comboBox.
2- AutoCompleteSource It is a source of suggested items to select from.
3- AutoCompleteMode It defines the method of list completing process.

(42)
Here is the effect of setting some properties on the ListBox :
Effect of
Property value property FormWindow after setting the property
appears

Items ‫مصر‬
‫السودان‬
‫جيبوتي‬
‫اريتريا‬
Note when writing
‫الصومال‬ "‫ "اال‬the countries
‫ليبيا تونس‬ starting with "‫ "ال‬are
In runtime
‫الجزائر‬ suggested
mode
‫المغرب‬
‫موريتانيا‬
(Each
country
name in
single
line)
AutoCompleteMode Suggest

AutoCompleteSource ListItems

3-7 GroupBox :
Is used to group other controls of same function together on the Form window
Here is the effect of setting some properties on the GroupBox:
Effect of
Property value property FormWindow after setting the property
appears

Text ‫النوع‬ In design

mode and
Forecolor Choose the
runtime
Red color
mode
RightToLeft yes

(43)
3-8 (RadioButton):
The programme user selects one alternative only.
Some distinctive properties of the ListBox :
N property Function

1- Checked It shows whether RadioButton has been chosen or not.

2- Text It is the Text shown on RadioButton

In case of placing a group of RadioButtons and set the text property to each one of them in
design mode as it is shown in the following Figure (3-3)

Figure (3-3) A set of RadioButton

During programme runtime , you can select one RadioButton only as it is shown in Figure (3-4)

Figure (3-4) Choosing one RadioButton

You can use GroupBoxes such that each group has a title and the user is allowed to choose
one alternative from each group as it is shown in Figure (3-5)

(44)
 Figure (3-5) Choosing one RadioButton of each group

One RadioButton is placed inside the GroupBox by dragging the appropriate

radioButton inside the GroupBox.

3-9 Checkbox
It is used for placing some alternatives to enable the user to select

One CheckBox or more as shown in Figure (3-6)

During programme runtime, you can select more than one Checkbox.

As shown in Figure (3-6)

Figure (3-6) Choosing more than one CheckBox

(45)
 :
First : Put ( √ )in front of the correct statement and(×) in front of the wrong one :-
N Question Answer

The function of the property RightToLeft of the Form is to define the direction of
1 ( )
Controls from right to left.
The function of the property RightToLeft of the Form is to define the state of the Form
2 ( )
on the screen in a position of Maximizing or Minimizing.
Setting the property ControlBox of the Form can control the Form in a position of
3 ( )
Maximizing during programme.runtime.
The property"Name" is used in showing a certain Text in the title bar of user window a
4 ( )
name of the window.
5 The property Text is used in showing a certain text the title bar of of user window. ( )
Setting some properties of the Form is applied to Controls which are placed on the
6 ( )
Form.
The effect of setting the WindowState property of the form appears only in runtime
7 ( )
mode
8 You can change the location of Command Button on the Form through Size property. ( )
You can change the location of Command Button on the Form through Location
9 ( )
property.
Placing Controls automatically on the Form on the co-ordinate (0-0) is in the middle of
10 ( )
the Form.
11 You can change the size of Label manually if AutoSize=true ( )
12 You can change the size of Label manually if AutoSize=false ( )
13 "Textbox control tool: is the only tool which has the property passwordChart ( )
14 "Textbox control tool: is the only tool which has the property AutoSize ( )
15 ListBox and ComboBox share in "Items" property. ( )
16 ListBox and and ComboBox share in " Suggest " property ( )
GroupBox is the tool used in containg a group of controls, these controls have the
17 ( )
same function on the Form.
ListBox is the tool used in containg a group of controls, these controls have the same
18 ( )
function on the Form.
19 CheckBox can be used on the Form to choose the Gender of student male or female. ( )
Combobox is the control tool that allows the user to choose one element of several
20 ( )
elements in the smallest possible space on the form window
Second: Choose the correct answer to complete each statement:-
1- The function of "Right to Left" property of the Form is:
a- define the direction of Control tools from Right to Left.
b- Define whether the layout of ControlTools on the Form is from Right to Left.
c-define the state of the window in a state of maximaizing or minimaizing.
2- ControlBox property of the Form is helping to:
a- showing or hiding of Maximaizing Box.
b- Control the appearance of the Form whether it is in a position of Minimaizing / Maximaizing /
Normal.
C-Control the appearance or disappearance of ControlBox in the Form.

(46)
3-The used property in showing a certain Text on the titlebar of a Form is :
a- Name b-Text c-FormBorderStyle
4-On setting some properties of the Form, they are applied on Control Tools
Which are placed on the Form (one of them is):
a-Name b-Forecolor c-Text
5-The effect of setting this property doesn't appear unless in runtime mode (This property is):
a-FormBorderStyle b-WindowState c-RightToLeft
6-The property which is responsible for the size, shape and effect of the Text font shown on
the Button is :
a-Backcolor b-Forecolor c-Font
7-You can change the position of the Button on the Form through the following processes
except for:
A-drag and drop by the mouse b-setting Size property c-setting Location property
8-You can change the position of the Button on the Form through:
a.setting Location property b-setting Size property c-the eight squares around the
Button
9-On inserting any ControlTool by pressing D-Click from the ToolBox on the Form , the
appropriate place to be shown is :
A-coordinate (0, 0)
b-the middle of the Form
c-the position of ControlTool is different according to the size of the Form
10-The size of Label is defined automatically on the Form if the property is:
a-AutoSize = False b- BorderStyle= FixedSingle c- AutoSize=True.
11-You can change the size of control "Label" manually if the property is :
a- AutoSize = False- b- BorderStyle= FixedSingle c- AutoSize=True-
12-The following properties belong to TextBox except for:
a-AutoSize b-MultiLine c-MaxLength
13-The Object TextBox is marked by one property:
a-AutoSize b-Name c-PasswordChart

14-The right value which can be used to set the PasswordChart of the TextBox is:
a-Pw b-True c-*
15-The ListBox and ComboBox share in this property:
a-Suggest b-Item c-SelectionMode
16-The ControlTool which is used in containing a group of controls that have the same
function on the Form is:
a-ComboBox b-ListBox c-GroupBox

(47)
17-The Control tool which can be used on the Form to choose Gender of the student
"male"or "female" is:
a-RadioButton b-CheckBox c-TextBox

18-The ControlTool which can be used on the Form and allows the user to choose more than
one alternatives is :
a-RadioButton b-GroupBox c-CheckBox

19-The ControlTool which allows the user to choose one item of 15

in the smallest possible area on the Form is:
a-ComboBox b-ListBox c-RadioBox

(48)
 Code Window
By the end of this chapter, students will be able to:

Work with the Code window.

Define the Event Handler.
Adjust Controls’ Properties programmatically.

(49)
4-1 Code Window
Visual Basic.NET language provides a window through which we can write instructions and
codes of the program called (code window)
To open the (Code Window) of (Form1) perform the following:
1. Make sure that the window Form is active
2. From the keyboard press (F7)
The Code window is displayed as shown in figure (4-1)

1
2
4 3
5
Figure (4-1) (Code Window)
The numbers shown in figure (4-1) indicate:
(1) Name of the file where codes are saved.
(2) Name of the file where the Form window interface is saved.
(3) The declaration of Class; its name is (Form1).
(4) Space between two lines; to type codes for the Class (Form1).
(5) The end of the class (form 1).
4-2 Event Handler
It’s a procedure which contains a code that is carried out when a corresponding event
occurs..
To create event handler do the following steps:
1. In the (Solution Explorer) window, right click the file (Form1.vb) and, select (View
Code) from the context menu as shown in figure (4-2).

Project name

From the context menu

choose (View Code)

Figure (4-2) to display the Code Window

(50)
 When choosing (View Code) the following figure (4-3) appears

1 2

Figure (4-3) the Code Window

The numbers shown in figure (4-3) indicate:

(1) A drop-down menu of (Class Names) that displays the names of controls on the form.
(2) A drop-down menu of (Method Names) or events; associated with the item selected
from the (Class Names) menu.

Select Button1

figure (4-4)display control names in the Code Window

2- Open (Class Name) menu and note that the default names of the controls are listed as shown
in figure (4-4).
Suppose that the window of the form used is as shown in Figure (4-5)

Figure (4-5) The model window in the new project

without setting (Name property) of controls included on the Form.

(51)
3- When you select (Button1) from the Class menu drop down list, open (Method name)
menu it displays the events associated with (Button1) as shown in figure (4-6).

Choose the event (Click)

Figure (4-6) choose the required event from the drop-down menu
(Event handler) as shown in figure (4-7):

5
4
1
2 3
6 Figure (4-7) (Event Handler)

The numbers shown in figure (4-7) indicate:

(1) The procedure name composed of (object name, event name).
(2) End of procedure line.
(3) What causes the call of the procedure (event occurrence) .
(4) Between the two lines shown; the code that will be executed on calling the
procedure is written after the occurrence of the (Event
(5) The declaration of the class line (frmSquare)
(6) The end of (class) line.
5-Adjust the property (Name) for the following controls as shown in table (4-1).
No control Value of the property(Name)
1 Button1 btnCalculate
2 Label1 lblLength
3 Label2 lblResult
4 TextBox1 txtLength
Table (4-1)

After setting the properties, select (Code) from (view) menu.

(52)
Open the (Class) menu and note that the displayed names of the controls have been changed as
shown in figure (4-8).

Figure (4-8) the displayed new Names of the (Controls)

In chapter 3, we have already set the properties through properties window. You can adjust
the properties using the following syntax:

The control or the The value

object name The property

Example:
Write the following code in the appropriate event handler (Button1_Click) for button1

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

Label1.Text = "‫" جمهورية مصر العربية‬
End Sub

(53)
When the event occurs, formwindow appears, as shown in a figure (4-9):
Figure (4-9) the form window after the occurrence of click event

(54)
1) Complete the table with a number from 1 to 5 using the next screen to express
every number to what it refers to:

Number Indicate
(……..) The end of class
(……..) The place to write the codes of the class
(……..) The name of the file that saves the design of the form interface
(……..) The name of the file that saves the code
(……..) The start of the class

2) Complete the table using the next screen:

(55)
 No Indicates

1 …………………………………………………………………….
2 …………………………………………………………………….
3 …………………………………………………………………….
4 …………………………………………………………………….
5 …………………………………………………………………….

3) complete the table using the next screen :

Question indicates
1 The name of the solution is ……………………………….
2 The name of the project is………………………………….
3 We can enter the code window more than one way, through :
 Command …… in the shortcut menu …………
 function key …………….

4
The purpose of properties in the shortcut menu is
………………………………………………………..

4) Complete the table using the following screen :

1
3
2

(56)
Answer the questions using the following screen:
N indicates
1 ……………………………………………………………………
2 ……………………………………………………………………
3 ……………………………………………………………………

2 1

1- The number of forms is ……………

2- number (1) refers to ………………………………….
3- number (2) refers to ………………………………….
4- List three different control tools from the previous screen
 ……………..
 ……………..
 ……………..
5- The name of the class is ……………………..
5) Answer the question using the following screen :

(57)
 a- From the previous screen write 3 different events :
…………… …………… ……………
b- frmSquare refers to ………………….
c- The events in the window belong to the control …………………………………..
d- The name of the active tab in the window is ……………

6) Complete the table using the following screen :

5

4
2 3

NO. indicates
1 ………………………………………………………………………………
2 ………………………………………………………………………………
3 ………………………………………………………………………………
4 ………………………………………………………………………………
5 ………………………………………………………………………………
6 ………………………………………………………………………………

(58)
7) Explain the components of the general syntax to adjust the properties of
controls programmatically:
ControlName.Property = Value
..............................
.............................. ...............................
..............................
.............................. ...............................
..
..

8) Explain the following codes through your pervious study for the general syntax
to adjust the properties of control programmatically :
(A) Button2.Text = "END"
……………………………………………………………………….
(B) Label1.AutoSize = True
……………………………………………………………………….

(59)
 Prof. Al Gharib Zaher Ismail Prof. Mohamad Fahmi Tolba
Prof. and Chairman, Department of Educational Professor of Computing and Information
Technology Faculty of Computing and Information- Ein
Faculty of Education, Mansoura University Shams University

Dr Taher Abdelhamid Al Adly Dr Samir Hassan Mohammed

Head of Computer and Information Technology Education technology Doctorate
Department General Administration for Computer and
Center for Curriculum and Instructional Information Technology Development
Materials Development

Mr.Ahmad Abdallah Mansour

Department Director
General Administration for Computer and Information Technology Development

General Manager
Dr. Amani Korani Ibrahim General Administration for Computer and
Information Technology Development

Department Director
Mr. Ahmed Al Ansari Al Salamouni General Administration for Computer and
Information Technology Development

Department Director
Mr.Tamer Abdel Mohsen Mansour General Administration for Computer and
Information Technology Development

Department Director
Design and output General Administration for Computer and
Ms. Abeer Mohammed Anwar Information Technology Development

(60)
 Mr Ahmad Elshabrawy Abdelkhalek Tokhy
Curricula Expert
Centre For Curriculum & Instructional Materials Development

Mr Ibrahim Metwally Abd El Rahman

Prep school English language supervisor
Hadayk El Koba administration

Mr Hossam Abd Al Ghafar

Secondary school English language supervisor
Hadayk El Koba administration

Ahmad Abdallah Mansour

Department Director
General Administration for Computer & Information Technology Development

Amira Fawzy Ahmed

Head of Foreign Languages Department
Centre for Curriculum & Instructional Materials Development

(61)