problem solving - المناهج...

i

INDEX

Content

Page

Chapter I :Problem Solving 1

Problem Solving. 2

Problem Solving Stages. 2

Flowchart. 4

Simple Flowchart. 5

The use of Branching (Decision) in Flowcharts. 10

The use of Loop in Flowcharts. 15

Questions. 21

Chapter II :Introduction to Visual Basic .Net 25

Visual Basic.Net Programming. 26

.NET framework. 29

Main elements of (IDE) screen. 29

Create a New Project. 33

Add a new Form to the Project. 35

Save the (Project) in one of the storage devices. 36

Add a new (Project) to the (Solution). 37

Questions. 39

Chapter III :Controls 43

Form: 44

o Setting the properties(Name),(Text). 45

o Setting the properties ، (BackColor), (RightToLeft) ,

(RightToLeftLayout) ,(MaximizeBox) ,(MinimizeBox) , (ControlBox) ,(FormBorderStyle).

47

o Setting the properties (ShowInTaskbar), (StartPosition), (WindowState).

52

Button: 55

o Draw a Command Button on the (Form). 55

o Setting the properties ( Location),( Size). 56

o Setting the properties (ForeColor) , (Font),

(BackColor). 58

ii

INDEX

Content

Page

Label: 59

o Setting the properties (AutoSize) , (BorderStyle). 59

Textbox: 61

o Setting the properties (MaxLength), (PasswordChar),

(MultiLine). 61

ListBox: 63

o Setting the properties (Items),(SelectionMode),(Sorted).

63

ComboBox: 65

o Setting the properties (AutoCompleteMode),

(AutoCompleteSource). 65

GroupBox. 67

RadioButton. 68

CheckBox. 71

Questions. 72

Chapter IV:Code Window 75

Code Window. 76

Event Handler. 77

Setting the (Properties) programmatically. 83

Questions. 86

Sample Test (1). 89

Sample Test (2). 92

Sample Test (3). 94

Problem Solving [

By the end of this chapter, student will be able to:

Define the problem

Identify the problem solving stages

Write steps that solve the problem “Algorithm”

Draw flowcharts

Problem Solving [


Define the problem

Identify the problem solving stages

Write steps that solve the problem “Algorithm”

Draw flowcharts

(2)

Problem Solving Chapter one

In your daily life, you may face problems through various activities. A problem means

an objective or an output that we have to achieve, for example preparing a meal is

considered a problem, and we have to follow consecutive steps sequentially to attain

the required objective and get the meal.

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, taking into consideration that any

mistake happens by doing any procedure before the other, results in an unsuitable

and undesirable cake.

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: Performing step-by-step instructions (Algorithm) to solve a

Problem

The problem is defined as the objective or the specific output that we want to attain; through a sequence of steps and activities and, specific input.

Algorithm is defined as a group of logically arranged procedures to be executed to attain a goal or precise output, out of specific inputs.

(3)


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ī”.The

algorithm is represented by drawing “Flowcharts” that will be explained later in this

chapter.

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 can’t detect errors unless we begin entering data to

the program with previously known results; to compare the results of the current

program to those of the well-known results; therefore we check the errors and debug

them.

Fifth: Program Documentation

All steps taken for solving the problem that include: given Input, output, plan for

solving the problem, drawn flowchart, programming language used for coding and,

instructions, date of last modification of the program and, people who contribute to

the program development process, to have the program documented to go back for

feedback and correction.

The documentation is beneficial when more than one person participate in writing or

modifying the program.

(4)


Flowchart promotes understanding of a problem and shows what tasks should be

performed when writing program codes; and so coding becomes an easy task for a

programmer. A Flowchart explains the program to others, and that it is also

considered a convenient tool for documenting a program especially if it is

complicated.

Most Flowcharts are drawn using standards (commonly used) symbols that have

specific meanings. Special symbols can also be used for exceptional cases.

The most commonly used symbols are as follows:

Table (1-1) Common symbols for Flowcharts

symbol Significance

(Terminal)

( Input/Output)

(Process)

(Decision)

(Flow Lines)

Flowchart is a diagram that uses standard graphical symbols; to illustrate the sequence of steps required for solving a problem or specific question.

(5)


We will demonstrate problem solving steps (Algorithm) using flowcharts, through the

following progressive examples:

First: Define the problem Output: The sum of two numbers Input: The first number is “A “and the second number is “B” Solution: C =A+B where the result is C

Table (1-2) Algorithm and Flowchart to add two numbers

Third :Flowchart Second :Algorithm

1 Start

2 Enter the number A and the

number B

3 Performing the sum of the two

numbers using this equation

C=A+B, the output is C

4 Print C

5 End

Start

Enter A and B

C=A+b

Output C

End

(6)


1-The flowchart should start with the Start symbol and end with the

End symbol.

2-A,B,C are variable names .A 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 the 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”.

7-Note that Lines with arrows (flow lines) are from top to bottom and show the exact order of an Algorithm.

First: Define the problem Output: The average of three numbers. Input: The number X, the number Y, and the number Z. Solution: Average =(X+Y+Z)/3 and, Product= X*Y*Z.

(7)


Table (1-3) Algorithm and Flowchart to compute the average and Product of three

numbers

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

1- The expression on the left side 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 expression on the right side of the equation may contain values or

arithmetic expressions that have one or more variables (inputs).


1 Start

2 Read the values of X,Y,Z

3 Average =(X+Y+Z)/3 and

Product= X*Y*Z

4 Print the Average and the

Product

5 End

Read

X,Y,Z

Print average ,

product

average=(x+y+z)/3 product=x*y*z

End

Start

(8)


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 reflect and indicate the content of

the variables .

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


1 Start

2 Enter value of X

3 Calculate Y =(3*X+2)

4 Output value of Y

5 End

Write down the Algorithm, and draw a flowchart to compute the area and the perimeter of a rectangle ,whose length and width are known , bearing in mind that the equation of the area is : Area =L*W and that of the Perimeter is: Perimeter =2*(L+W).

Start

Input X

Print Y

Y=3*X+2

End

(9)


First: Define the problem

Output:

Input:

Solution :


Write down the Algorithm, and draw a flowchart to calculate the area of a circle whose radius “R” is known, bearing in mind that the equation of the area is: Area =3.14*R*R.

Write down the Algorithm, and draw a flowchart to calculate the number of years, bearing in mind that the number of months is known.

(10)


Most problems include a decision point, such as yes/no question, where two

possible answers are available a “yes” and a “no”, in a flowchart the decision

point has two paths (branches), each presents one of the possible answers, you

can also find more than two answers.

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.

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


1 Start

2 Enter the values of X

3 If X> =50 then

3-1 Print “ ناجح ”

4 End

The execution of step (3-1) will be done only when the value of x is greater than

or equal 50 (the result of the condition is True), then it passes to step (4);

otherwise when the value of x is less than 50 (the result of the condition is False),

then the execution is transferred to step 4 directly.

Start

Enter X

X>=50 ناجحPrint

End

(11)


First: Define the problem Output: print the result of dividing two numbers “R” or print the word .”غير معرف“Input: the dividend is “num1”, and the divisor is “num2”. Solution: if num2=0 then print “غير معرف”, otherwise print the result of

the division “R”.


1 Start

2 Enter the dividend num1

3 Enter the divisor num2

4 If num2 =0 then

4-1 Print “غير معرف”

4-2 Go to step 7

5 R=num1/num2

6 Print R

7 End

Table (1-6) Algorithm and Flowchart to print the division of two numbers

Start

Enter num1

Num2=0

Enter num2

R=num1/num2

print

”غير معرف“

End

Print R

(12)


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.

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


1 Start

2 Enter N

3 If N is divisible by 2 without

remainder then

3-1 Print “ لرقم زوجيا ”

4 Else

4-1 Print “ الرقم فردى ”

5 End

Start

Get N

N divisible

by 2

الرقم فردى الرقم زوجي

End

1. Step (4) is a decision (presented by a diamond) it is a comparison that

evaluates this question (is num2=0?) If the result is Yes then the word “ غير

will be printed (this; according to mathematical rules); then the“ معرف

execution will be transferred to step (7) to end the program and prevent

the execution of any division.

2. If the result of the question in (step 4) is No, 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 out “greater than zero” – “less than zero “- “equal zero”. Input: degree Celsius “D”. Solution: the temperature degree entered will be compared to zero.


1 Start

2 Enter D (temperature

degree)

3 If D=o then

3-1 Print “Equal zero”

4 Else

4-1 if D<0 then

4-1-1 Print “Below zero”

4-2 Else

4-2-1 Print “Above zero”

5 End

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

In this example unlike the previous ones, there are two cases for the condition,

the case when the condition is true (step 3-1); the output will be to print out

“Even”, the case when the condition is false (step 4-1); the output will be to print

out “Odd”.

Start

Get D

D =0 Print

Equal 0

End

D<0

Print

Below 0

Print

Above 0

(14)


First: Define the problem

Output: print out “the largest number is …...? “– “the smaller number is ...…? “

Input: X, Y. Solution:


Modified Flowchart Flowchart

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

Start

Input R

Print A

A= 3.14 * R * R

End

Write down the Algorithm, and draw a flowchart to enter two numbers, then Print “the largest is …? “and, “the smallest number is…? “.

The following flowchart is used to calculate the Area of a circle whose radius “R”. Repeat drawing the Flowchart so that it displays the message “not allowed “and exits from the program (When the value of “R” is negative).

(15)


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


1 Start

2 M=1

3 If M<=3 then

3-1 Print M

3-2 M=M+1

3-3 Go To step(3)

4 End

Start

M<=3

M=1

Print M

End

M=M+1

1-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).

2- The following figure is the same flowchart drawn above but in a different

way, so it does not matter the figure drawn, what really matters is the sequence of steps.

(16)


Figure (1-1) Flowchart to print the numbers from 1 to 3

value of M Result Step There is No variable 1-Start

1 2-M=1

1 3-If M<=3 (True)

1 1 3-1 Print M

2 3-2 M=M+1

2 3-3 Go to step (3)

2 3-If M<=3 (True)

2 2 3-1 Print M

3 3-2 M=M+1


3 3-If M<=3 (True)

3 3 3-1 Print M

4 3-2 M=M+1


4 3-If M<=3 (False)

4 4-End

Table (1-11) Tracking the variables and the corresponding result of exercise (1-8)

Start

M<=3

M=1

Print M

End

M=M+1

You can track the progress of the solution steps and follow each step of

the code as shown in table (1-11).

1

2

3

(17)


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

Table (1-12) 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).


1 Start

2 J=1

3 If J <=12 then

3-1 Print J*3

3-2 J=J+1

3-3 Go To step(3)

4 End

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 a counter; as it causes the steps (3-1) and (3-2) and (3-3) to

be repeated for a defined number of times (3 times).

Start

J <=12

J=1

Print J*3

End

j=j+1

Track the values of the variable (J), and the printed value on executing every step in the previous exercise (write down in your notebook). What is the value of the variable (J), when the result of the condition is “False”, and the loop ends?

(18)


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

Second :Algorithm Third :Flowchart

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

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

Write down the Algorithm, and draw a flowchart to print out even numbers from 1 to 10.

(19)


Algorithm Flowchart

1 Start

2 N=1

3 Sum=0

4 Sum =Sum + N

5 N=N+1

6 If N>3 Then

6-1 Print Sum

7 Else

7-1 Go to step (4)

8 End

Table (1-14) Algorithm and flowchart to print the sum of integer numbers from 1 to 3

Start

End

N=1

Sum=0

Sum=Sum+N

N=N+1

N>3

Print Sum

(20)


You can track the values of variables as shown in table (1-15)

Result Value of M Value of N Step

No variable No variable 1-Start

No variable 1 2-N=1

0 1 3-Sum=0

1 1 4-Sum=Sum+N

1 2 5-N=N+1

1 2 6-if N>3 (False)

1 2 7-1 Go To step (4)

3 2 4-Sum=Sum+N

3 3 5-N=N+1

3 3 6-if N>3 (False)

3 3 7-1 Go To step (4)

6 3 4-Sum=Sum+N

6 4 5-N=N+1

6 4 6-if N>3 (True)

6 6 4 6-1 Print Sum Table (1-15) tracking the values of variables and corresponding results of exercise (1-10)

Variable N is considered a Counter, while variable Sum is an accumulating

variable.

After executing the previous activity, draw the flowchart in your notebook; to print out the sum of even numbers instead of the odd ones.

Draw the Flowchart of the previous exercise in your notebook, after modifying it; to print out the sum of odd numbers from 1 to 10.

(21)


First: State whether the following statements are true () or false (X)

) ( 1- Flowcharts use symbols and lines with arrows to represent an Algorithm

) ( 2- You can use any Geometric shape to represent Algorithms when drawing flowcharts

() 3- Flowcharts can be drawn using software only and can’t be drawn on paper

) ( 4- The symbol …………….is used to represent both the start and the end

) ( 5- The rectangle symbol represents only one processing operation

) ( 6- The flow of steps will always be from top to bottom or from left to right.

) ( 7- The symbol …………….is used when a question has more than one alternative

) ( 8- Two paths (lines)should come out from the diamond … ………..symbol

) ( 9- The line with an arrow (flow line) should be from left to right or from top to bottom.

) ( 10- The (Algorithm) is the first stage of Problem Solving

Second: Inside each symbol of the following Flowcharts write the appropriate instructions. 1- The Figure shows a flow chart for calculating the area and circumference for a

circle ,given: the radius of the circle R

A= 3.14 * R * R C= 2 * 3.14 * R

START

END

OUTPUT A OUTPUT C

READ R

(22)


2- The Figure shows a flowchart that calculates the interest value for the balance

(with fixed interest rate)

3- The Figure shows a flow chart for calculating the division of two numbers

Interest=balance*rate

END

Read name , balance , rate

Output name,balance,interest

START

Read number1

is number2=0

Print "not defined"

Start

End

Read number2

Output the result

result=number1/number2

Yes

No

(23)


4- The Figure shows a flow chart to find the maximum number among two numbers .In the case of equality output the message "equal"

5- The Figure shows a flow chart that will print even integer numbers from 1 and 10 .

IS A=B

IS A > B

Output "equal"

Read A,B

Output B

N=N+2

N>10

Sum=0

Sum=Sum+N

Print Sum

N=2

YES NO

Output A

YES

NO

Start

End

start

end

Yes

No

(24)


Introduction to Visual Basic.NET


Identify the essence of Visual Basic .NET

Identify the basic components of the IDE screen

Create a new project

Add a new Form to the (Project)

Save the project

Add a new project to the solution

(26)

Visual Basic.NET

Chapter Two

After studying the Problem solving technique, and learning how to develop

logical steps to solve problems, in this chapter you will start working with Visual

Basic.Net Language, and you will be able to convert the solution steps of a

problem to program codes that can be executed.

Visual Basic .NET is just one of the languages in Visual Studio .NET package that

includes other languages, such as C# and J#.

Visual Basic .NET is an object-oriented language that develops event driven

Windows and Web applications.

A Computer executes only commands written in machine language. As for

programmers; they can’t write in machine language, so they use programming

languages to write programs in English; then comes the role of the compiler

(found in the language) that translates program’ instructions from English to

machine language; for a Computer to understand.

Is a set of rules, symbols and special words you can use to write instructions and construct a computer program; according to the programming language used. Instructions will be translated to machine language for being executed.

(27)

Visual Basic.NET

Chapter Two

A Windows-based application has a Graphical User Interface (GUI) and appears

in a window .Sure you used many Windows-based applications, like Paint ,

Notepad ,Calculator ,Internet browser ... Etc. Notice that all Windows

applications have a graphical interface (a window) that share some common

characteristics: such as “Window style, Maximize button, Minimize button and,

saving or opening files ... Etc..

Figure (2-1) Examples of Windows applications

When using windows applications, like the calculator ; you do an action (event)

like pressing a plus (+) sign or an equal (=) sign in the application or from the

keyboard, then a specified task will be executed ;so writing programs using

programming languages (as mentioned before) is important for responding to

certain event.

In Visual Basic.Net everything depend on Objects (like: Button, Textbox,

ComboBox); which have the following attributes:

1- Properties that describe the Object

2- Events that occur to objects

3- Methods that present actions to be performed on objects ; causing

certain behavior on the objects ;the Object (Textbox );the Method

(28)

Visual Basic.NET

Chapter Two

1. The (Class) implies a definition for the (Object). 2. The (Object) exists only when an instance of the class is

created 3. You can create as many objects you need from a class. 4. A place in the memory is reserved for each object in Visual

Basic.NET when it is created.

invoked on it is: Copy (which is responsible for copying selected text in the

clipboard).

The calculator, is an application where we find many buttons; each button

presents an (Object) it has (Properties) like: width, height, text labeled,

background color ….etc., and has events like: (Click) that occurs when the user

clicks the mouse on a specified button on the calculator, which in turn invokes

certain action; if the same event (click) is done on other objects (buttons) it may

cause different actions.

This means that all buttons have the same properties with different data values,

and then appear with different shapes. The same event (click) if occurred on

each button in the calculator will cause different actions, which vary from one

button to another, although all buttons are derived from the same (Class).

From the above we conclude that:

An (Object) is the basic constructive element in Object Oriented Programming; it

is created from a defined class.

A (Class) is the blueprint/ plan / template, from which the individual objects, are

created. It is the blueprint that describes the details which any object takes (its

Properties, Methods and, Events); that are all derived from the (Class).

(29)

Visual Basic.NET

Chapter Two

The .NET Framework is like the central nervous system for all Visual Studio.Net

applications; it is a platform that enables you to:

1- Develop applications like (Desktop applications) - (Web applications) – (Mobile applications).

2- Provide a development environment for running all applications.

The Framework is composed of:

The execution engine (CLR) Common Language Runtime

The .NET class libraries (System Class Libraries)

(Compilers)

Other elements

The .NET Framework is used in the development, design and execution of .NET

applications. The .NET Framework can be installed for free on operating systems

(and is available with many versions).

The term (IDE) refers to Integrated Development Environment

Visual Studio .NET provides an environment known as (IDE) that enables the

developer to do as much as possible with visual tools, to quickly design

applications (Windows applications) - (Web applications) – (Mobile

applications).as shown in figure (2-2).

Figure (2-2) (IDE) screen

(30)

Visual Basic.NET

Chapter Two

The form is the window (visible interface) of the application; what users will see

and work with when they run this application .A form is the container upon

which controls (CommandButton –Textbox- Label..etc) are placed as shown in

figure(2-3).

Figure (2-3) A Form before and after placing controls

The Toolbox contains controls (objects) that the programmer can place on the

form, these controls are available in tabs (categories)

as shown in figure (2-4); notice that a (+) sign is

displayed with each tab, when we click on it ,the tab

expands and a set of controls will be displayed.

You can display all the (Controls), by choosing (All

Windows Forms) Tab or category.

From these categories we also have

(Common Controls)

(Menus & Toolbars)

Figure (2-4) the Toolbox

A Form after placing controls on

it and adjusting some of their

properties.

A blank Form before placing

any controls on it

(31)

Visual Basic.NET

Chapter Two

A set of controls (icons) expands in each tab (category) as shown in figure (2-5)

Figure (2-5) Controls in different tabs (categories)

Table (2-1) some of the (Common Controls)

Control م Control م

1 Button 6 ComboBox

2 TextBox 7 CheckBox

3 Label 8 RadioButton

4 ListBox 9

(32)

Visual Basic.NET

Chapter Two

In (IDE) screen, displayed properties differ upon the selected element.

Each control from the above has properties . A Properties window lists the

property settings for the selected Form or control and permits changes to each

setting to be made. as shown in figure (2-6).

Figure (2-6) (Properties window)

The Solution explorer window contains a list of items of the current solution ;and

may contain one or multiple projects .It also displays a hierarchical list of all the

components, ( files and folders) organized by project, as shown in figure (2-7).

(33)

Visual Basic.NET

Chapter Two

Figure (2-7) (Solution Explorer) window

With your teacher’s assisstance open the (Visual Studio),available on your

computer.

Type the name of the (Visual Studio) opened on the screen.

..........................................................................

From (File) menu choose (New Project) .

A new window is displayed as shown in figure (2-8).

Figure (2-8) New Project Window

First Project

Second Project

Solution name

Files and

folders of the

second Project

Files and

folders of the

first Project

1

2

(34)

Visual Basic.NET

Chapter Two

The numbers shown in figure (2-8) indicate:

(1) The chosen template (Windows Forms Application).

(2) The place for typing Project’s name.

Type the project name (MyFirstProject) than click (OK) as shown in figure (2-9) .

Figure (2-9) New Project Window

When clicking the (OK) button ,the (IDE) window appears as shown in figure (2-10).

Figure (2-10) (IDE) Window

1

2

3 4

(35)

Visual Basic.NET

Chapter Two


(1) The Form window

(2) The Solution Explorer Window

(3) The Properties window

(4) The Toolbox window

From the (Project) menu choose (Add Windows form) to create a new Form as

shown in fig(2-11).

Figure (2-11) (Project) Menu

The window (Add New Item) is displayed as shown in figure (2-12).

Figure (2-12) (Add New Item) Window

1

2

3

(36)

Visual Basic.NET

Chapter Two


(1) The Project name given to the project; to which the new (Form) will be

added.

(2) The template used to create the (Form).

(3) The suggested file name of the (Form) (that you can change if you wish );

(4) Press the (Add) button, a new window Form will be added as shown in

figure (2-13).

Figure (2-13) Adding a new (Form)


(1) The window Form (Form2).

(2) The file name assigned to (Form2) inside the (Solution Explorer).

When you create a new Project, a copy of the project is

saved in the memory; to save it on one of the storage

devices, do the following:

Choose (File) menu then select (Save All) as shown in

figure (2-14).

Figure (2-14) Saving the Project

1

2

(37)

Visual Basic.NET

Chapter Two

The shown window will be displayed figure (2-15)

Figure (2-15) Save Project window


(1) The Project name given to the project when created (as you

learned earlier in this chapter), you can change it if you wish.

(2) The Solution name that will include; the Project you want to save,

(you can change Solution name if you wish).

(3) The Browse button; to explore storage devices available on your

computer.

(4) With your teacher’s help, choose the storage device you prefer for

saving your Project, then press the (Save) button for the (Project)

to be saved.

Choose (File) menu then select (Add)

then (New Project) as shown in figure (2-

16).

Figure (2-16) Adding a new Project

1

2

3

4

(38)

Visual Basic.NET

Chapter Two

With your teacher’s help, give this name (MySecondProject) to your new Project.

The (Solution Explorer) window becomes as shown in figure (2-17).

Figure (2-17) The new Project is displayed in the (Solution Explorer) The numbers shown in figure (2-17) indicate:

(1) The Solution name

(2) The first project name

(3) The second Project name

1

2

3

(39)

Visual Basic.NET

Chapter Two

First: Write in the table below what the following numbers indicate

Indicates Number ......................................................... 1

......................................................... 2

......................................................... 3

......................................................... 4

1

2

3 4

(40)

Visual Basic.NET

Chapter Two

Second: In the following (Add New Item) window, what the following numbers indicate?


......................................................... 2

......................................................... 3

1

2 3

(41)

Visual Basic.NET

Chapter Two

Third: Refer to the following figure then, explain what the following numbers indicate?

What is the benefit of this window? ………………………………………………….. Number 1 indicates: ………………………………………………….. Number 2 indicates: ………………………………………………….. Number 3 indicates: …………………………………………………..

Fourth: In the displayed (Solution Explorer) window what the following numbers indicate?

Indicates Number .................................................... 1

.................................................... 2

.................................................... 3

.................................................... 4

1 2

3 4

1

2 3

(42)

Visual Basic.NET

Chapter Two

Fifth: Complete the sentences with the following:

Object - Class –Visual Studio – .NET framework – Programming language

– Form

1- ……………………………….. is used in the development, and design of (Desktop application) - (Web application) – (Mobile application).

2- Through ………………………………, Instructions, and commands are written according to certain rules; and then translated to machine language.

3- ………………………………..provides an environment , that enables developers to design and execute (.NET applications).

4- ………………………………..is defined as: The basic constructive element in Object Oriented Programming; it is created from a defined class.

5- The blueprint, from which the individual objects are created; is called ………………………………..

Controls


Recognize the (Properties Window)

Adjust the properties assigned to Controls

Choose the appropriate Property

Choose the proper value for the Property

Differentiate between controls’ Properties

(44)

Visual Basic.NET

Chapter Three

There are many properties assigned to the form as shown in figure (3-1).

Figure (3-1) (Properties window) of the Form

1. Some properties (such as: Text – Name – Forecolor – BackColor – RightToLeft….….etc.) are common to most controls.

2. Some properties will not be applied to controls placed on a form; unless we set other properties to these controls like :(RightToLeft ) and ( RightToLeftLayout).

3. Controls placed on a form will have, by default, some of the properties as the form. We can say that controls inherit some of the form’s properties e.g. (Font) and (ForeColor).

4.

(45)

Visual Basic.NET

Chapter Three

1. The column to the left is the properties list, such as Property (Text).

2. The column to the right is the setting list, which provides the current value assigned to the property; such as (Form1).

1. Create a new project and name it (SquareArea).

2. Select the Form window (Form1) and activate its Properties window, then:

- Change the value of the (Name ) Property to (frmSquare) as shown in figure (3-2).

-

Figure (3-2) Setting the property (Name)

- Change the value of the (Text )Property to (“ مربع مساحة" ) as shown in figure (3-3).

Figure (3-3) Setting the property (Text)

Value Property

(46)

Visual Basic.NET

Chapter Three

- The Form window will be displayed as shown in figure (3-4).

After setting the previous two

properties

Before setting the previous two

properties

Figure shows only the value of property (Text) and does not show the value of

the property (Name); used when writing the code. Figure (3-4) Form window before and after setting the property (Text), (Name)

1. The value of (Text) property is displayed as text in the title bar of the Form (frmSquare).

2. The default values of the properties (Text) and (Name) are (Form1); which means they are the same.

3. The name of the (Form) is (frmSquare), earlier it was (Form1).

(47)

Visual Basic.NET

Chapter Three

1. To Set the(BackColor) property for the Form (frmSquare)

- Select the (BackColor ) property and set its value to

(DarkSeaGreen) as shown in figure (3-5).

Figure (3-5) Setting the property (BackColor)

The Background color of the Form becomes (DarkSeaGreen ) as shown in figure (3-6).

Figure (3-6) the Form window after setting the (BackColor) property

2. To adjust the writing direction Property for the Form (frmSquare).

- Set the value of the Property (RightToLeft ) to “Yes” as shown in figure (3-7).

Figure (3-7) Setting the property (RightToLeft)

(48)

Visual Basic.NET

Chapter Three

The text shown on the Form is displayed from right to left (see figure (3-8)).

Figure (3-8) the Form window after setting the (RightToLeft) property

3. To adjust the Layout direction Property for the Form (frmSquare).

- Set the value of the Property (RightToLeftLayout) to “True”

as shown in figure (3-9).

Figure (3-9) Setting the property (RightToLeftLayout) The Layout direction of the Form will be from right to left as shown in figure (3-10).

Figure (3-10) the Form window after setting the (RightToLeftLayout) property

(49)

Visual Basic.NET

Chapter Three

4. To hide the minimize and maximize buttons for the Form (frmSquare ).

- Select the properties ( MaximizeBox, MinimizeBox ) and set their values to

(False) as shown in figure (3-11).

Figure (3-11) Setting the (MinimizeBox ) and (MaximizeBox ) properties

The Minimize and Maximize buttons are hidden from the Form as shown in figure (3-12).

Figure (3-12) the Form window after hiding the (MinimizeBox ) and (MaximizeBox ) buttons

5. To hide the Control Box for the Form (frmSquare ).

The property (RightToLeftLayout) will not be active, unless the property value of (RightToLeft) is (Yes).

Note that the

Maximize and

Minimize buttons do

not exist

(50)

Visual Basic.NET

Chapter Three

Note that the

form’s title bar

and borders

disappear

- Select the property (ControlBox) and set its value to (False) as shown in

figure (3-13).

Figure (3-13) setting the (ControlBox) property

The ControlBox is hidden as shown in figure (3-14).

Figure (3-14) the Form window after hiding the ControlBox.

6. To hide the Border for the Form (frmSquare ).

- Select the property (FormBorderStyle) and set its value to (None) as shown

in figure (3-15).

Figure (3-15) setting the (FormBorderStyle) property

The Form window became without borders (Borderless window) as shown in figure (3-16).

Figure (3-16) the Form window after hiding its Borders

(51)

Visual Basic.NET

Chapter Three

With your teacher’s help

- Set the value of property (FormBorderStyle) to (Sizable).

- Display the (Minimize) button, the (Maximize) button and (ControlBox) on the title

bar.

Figure (3-17) the (Start Debugging) icon on the Standard Toolbar

The Property (FormBorderStyle) takes many values .The value (Sizable) makes it possible to control the Form’ size; through its borders.

When you adjust any Property of the properties stated before; its effect is shown on the Form immediately.

There are some properties, where their effects on the Form or on other controls will be active, only if you start running the program (Run mode) or at the (Start Debugging mode).

You can initiate the (Start Debugging mode) by clicking on the (Start Debugging) icon on the Standard Toolbar as shown in figure (3-17).

(52)

Visual Basic.NET

Chapter Three

See the (IDE) screens before and after clicking on the (Start Debugging) icon as shown in figure (3-18).

Click on the (Start Debugging) icon.

Figure (3-18) the Form in Design mode and Run mode

The Form window in the (Design mode)

The Form window in the (Run mode)

(53)

Visual Basic.NET

Chapter Three

Figure (3-19) (Stop Debugging) icon in the Standard Toolbar

7. To enable or disable the Form’s icon to be displayed in the Taskbar and to

adjust the Position of the Form when displayed on the screen; we adjust the

shown properties of the Form (frmSquare) to (False) and (CenterScreen) see

figure (3-20).

Figure (3-20) setting the (ShowInTaskbar) and (StartPosition) Properties

- Press (F5) button from the keyboard to start the Debugging.

8. To adjust the state of the Form’s window (frmSquare).

- Select the value (Maximized) as shown in figure (3-21).

Figure (3-21) setting the (WindowState) Property

- Choose the (Debug) menu then select (Start Debugging) to start debugging.

You can stop the (Debugging) by clicking on (Stop Debugging) icon as shown in figure (3-19).

1. The Form appears in the center of the screen, also the Form icon does not appear in the taskbar.

2. The effect of both (ShowInTaskbar ) and (StartPosition ) properties will not be active unless we start debugging the program.

(54)

Visual Basic.NET

Chapter Three

1. The Form’s window is displayed in full screen. 2. The effect of the Property (WindowState) is active only when you start

debugging the program.

From the above, we conclude that the properties assigned to the Form are as shown in Table (3-1).

Function Property No. Name of the Form used in the code. Name 1

Text appearing on the title bar of the Form. Text

2

The Border outline of the Form’s window. FormBorderStyle

3

The background color of the Form’s window. BackColor 4

Determine the size of the window on the screen,

whether maximized or minimized or normal. WindowState 5

Enable or disable (hide) the Control box appearance

in the window. ControlBox 6

Enable or disable (hide) the appearance of the

Minimize Button in the window. MinimizeBox 7

Enable or disable (hide) the appearance of the

Maximize Button in the window. MaximizeBox 8

Enable or disable (hide) the appearance of the Form

icon on the (TaskBar). ShowInTaskbar 9

Locate the Form’s window on the screen. StartPosition 10

Determine whether the Layout direction of (Controls)

on the (Form) is from right to left. RightToLeftLayout 11

Determine whether the writing direction of (Controls)

on the (Form) is from right to left ;such as the text

direction in the (TextBox) .

RightToLeft 12

Table (3-1) Form’s Properties

(55)

Visual Basic.NET

Chapter Three

Double-Click

A Button is one of the (Controls) that can be drawn on the (Form) .A user will use a button by clicking on it to perform a specific task.

- Create a new (Project) and set up the (Form) as shown in figure (3-22).

Figure (3-22) the (Form)

1. To place a Command Button on the form; in design mode. Move the mouse

pointer to the Toolbox and double-click the Button icon as shown in the figure

(3-23).

Figure (3-23) the Command Button in the Toolbox

- The Button is displayed on the Form as shown in figure (3-24).

Figure (3-24) the Command Button (Button1) displayed on the (Form)

(56)

Visual Basic.NET

Chapter Three

We will adjust the Controls’ locations found on the Form ,by setting the Properties (Location) and (Size) for these Controls. In the Properties window, using the mouse pointer, you can select these Properties, and change their setting values.

2. Activate the Command Button (Buttton1) by clicking it.

3. Place the mouse pointer in the center of the (Button). Drag the (Button) to the

middle of the (Form) as shown in figure (3-25) and figure (3-26).

Figure (3-25) Location of the (Button) before clicking and dragging

Eight boxes (sizing handles) are shown at the Borders and corners of the (Button).

This means; the possibility of changing the size of the (Button) on the (Form). Place the mouse pointer on one of the eight boxes. Hold down the left mouse button and Drag the mouse in the direction of either arrowhead. Release (Drop) the mouse button when the desired size is reached.

To Move the (Button): place the mouse pointer inside the (Button) and hold down the left mouse button. Drag the (Button) to the desired. position and then Drop the mouse button.

Note the value of the (Location) property; it specifies the position of the Button on the (Form).

(57)

Visual Basic.NET

Chapter Three

Figure (3-26) Location of the (Button) after clicking and dragging

4. Place the mouse pointer on one of the boxes (sizing handles). Drag and Drop

the mouse until the desired size is reached as shown in figure (3-27) and figure

(3-28).

Figure (3-27) the Size of the (Button) before clicking and dragging one of the (Sizing handles)

Note the new value of (Location) property; it specifies the new position of the Button on the (Form) window.

Note the value of the (Size) property; it specifies the size of the Button on the (Form) before sizing

(58)

Visual Basic.NET

Chapter Three

Figure (3-28) the size of the (Button) after clicking and dragging.

5. With the help of your teacher, adjust the following properties

for (Button1) as shown in figure (3-29).

Figure (3-29) setting the properties (Backcolor ) , ( Font ) and (ForeColor) for ( Button1)

After adjusting the previous (Properties) for (Button1); the background color becomes yellow, the text appearing on the button is " أحسب " , the foreground color is blue and, the Font ‘style and size have been chosen as shown in figure (3-30).

Figure (3-30) the Command Button (Button1) after changing its Properties.

Note the value of the (Size) property; it specifies the size of the Button on the (Form) after sizing

(59)

Visual Basic.NET

Chapter Three

From the above mentioned figure, it is clear that, there are many (Properties) assigned to the control (Button) as shown in Table (3-2).

Function Property No.

The text on the (Button). Text 1

The foreground color for the text on the (Button) or its (Font

color). ForeColor 2

The background color for the (Button);(background color). BackColor 3

The text’s (Font, Size and Style) on the (Button). Font 4

The location of the (Button) on the Form’s window. Location 5

The height and width of the (Button) on the Form’s window. Size 6

Table (3-2) Some of the Command Button‘s Properties

A Label is a control used to provide the user with information. It appears as a heading or title within a form; to let the user know the form’s content. Label controls cannot be changed; users cannot type in (any text) during the run-time.

1. On the previous Form, place

the control (label1).

2. Adjust its properties as shown in table (3-3) ,you can

ask your teacher for help.

Value Property lblResult Name

Text "النتيجة:"

Choose your favorite color ForeColor

Choose your favorite color BackColor

Choose the font’s type, style, and

size you prefer. Font

False AutoSize

FixedSingle BorderStyle

Table (3-3) some of the Label‘s Properties.

(60)

Visual Basic.NET

Chapter Three

3. Change the size of the control (label1) by clicking and dragging one of the

sizing handles, so it becomes as shown in figure (3-31).

Figure (3-31) sizing the control (label1).

It becomes clear from the above that there are many (Properties) assigned to the control (Label) as shown in Table (3-4).


Specifies whether the size of the control (Label) is

automatically adjusted by text written AutoSize 1

Specifies the border style of the control (Label) BorderStyle 2

Table (3-4) some of the Label‘s Properties

If the AutoSize property is set to False, you can manually adjust the size of the label.

If the AutoSize property is set to True, the label size is automatically adjusted to fit the text displayed on the label.

(61)

Visual Basic.NET

Chapter Three

A TextBox control can be used for both entering data and displaying results.

1. Create a new project so that the Form’s window will be as shown in figure (3-32).

Figure (3-32) the required Form’s window to be designed

2. In the TextBox (TextBox1) set the value of (MaxLength) property to (30) ,

where the user can enter the “Name”; and cannot type more than 30

characters; see the following setting :

The control (Label) has a set of properties like (Name - Text - Font – ForeColor – BackColor – Visible – Size – Location – RightToLeft – Image); you can deal with as you learned earlier in this chapter.

TextBox1

TextBox2

TextBox3

The controls

(Label)

The control

(Label)

The Command

button (Button)

(62)

Visual Basic.NET

Chapter Three

Text written is less than 30 characters

Characters are replaced with the symbol (*)

Writing on several lines

value Property

30 MaxLength

3. In the TextBox (TextBox2) set the value of (PasswordChar) property to (*) ,

where the user can enter the “Password” ;that appears in form of (*) as

follows :

4. In the TextBox (TextBox3) set the value of (MultiLine) property to (True) ,

where user can enter the “Notes” in multiple lines as follows :

value Property

True MultiLine

The Form’s window appears as follows during the run-time; it displays data entered by the user as shown in figure (3-33).

Figure (3-33) Form window after entering required data

It becomes clear from the above that the control (TextBox) has special (Properties) as shown in Table (3-5).

value Property

* PasswordChar

(63)

Visual Basic.NET

Chapter Three


Specifies the maximum number of characters that

user can write in the (TextBox) . MaxLength 1

Specifies the symbol that will be displayed instead of

the text written; as example: creating a Password. PasswordChar 2

Determines whether the (TextBox) control allows

multiple lines. MultiLine 3

Table (3-5) some of the TextBox’s Properties

A Listbox control is used for displaying a list of items.

1. Based on what you have learned; create a new project so that the form‘s

window contains a (Button) and, a (ListBox)


Figure (3-34) the Form window after inserting a (ListBox).

The control (TextBox) has a set of properties like (Name - Text - Font – ForeColor – Visible – Size – Location – RightToLeft – Enabled); you can deal with as you learned earlier in this chapter.

(64)

Visual Basic.NET

Chapter Three

2. Adjust the (ListBox) Properties as shown in table (3-6).

Value Property

عمرو

رامي

ياسمين

سمر

Items

MultiExtended SelectionMode

True Sorted

Table (3-6) setting some of the ListBox’s Properties

When we adjust the property (Items) the following (Editor Box) will be displayed as shown in figure (3-35).

Figure (3-35) the items written in the (ListBox)

So, the form’s window appears in run-time as shown in figure (3-36).

Figure (3-36) (ListBox) as it appears in the run-time mode

Note that each item in the

(ListBox) is written in a separate

line

Names have been arranged alphabetically

You can select more than

one item

(65)

Visual Basic.NET

Chapter Three

It becomes clear from the above that the control (ListBox) has special (Properties) as shown in Table (3-7).


Presents a set of items displayed in the (ListBox) Items 1

Specify whether the items are arranged or not Sorted 2

Determine whether it is possible to select one or more

item displayed in the (ListBox). SelectionMode 3

Table (3-7) some of the ListBox’s Properties

A ComboBox control displays a drop-down list from which one item can be selected.

1. Create a new project so that the form’s window contains two (Label) controls

and one (ComboBox) control as shown in figure (3-37).

Figure (3-37) (ComboBox) control

The control (ListBox) has a set of properties like ( Name – Visible – Size – RightToLeft – ForeColor- Font -BorderStyle ); you can deal with as you have learned earlier in this chapter.

ComboBox1

(66)

Visual Basic.NET

Chapter Three

2. Adjust the properties of the (ComboBox) as shown in table (3-8) ,you can

ask your teacher for help.

Value Property

" موريتانيا المغرب الجزائر تونس ليبيا الصومال اريتريا جيبوتي السودان مصر"

Note that :each country name ,should be written in a separate

line

Items

Suggest AutoCompleteMode

ListItems AutoCompleteSource

Table (3-8) setting ComboBox’s Properties

So, the Form window appears in run-time as shown in figure (3-38).

Figure (3-38) (ComboBox) control in the run-time mode

It becomes clear from the above mentioned figure that the control (ComboBox) has many (Properties) as shown in Table (3-9).


Presents the items in the (ComboBox) Items 1

The maintained source of items used for automatic

completion of input string. AutoCompleteSource 2

The input string or (prefix being entered) that will be

compared to the prefixes of all strings in a maintained

source; upon which the automatic completion will be

done.

AutoCompleteMode 3

Table (3-9) some of the ComboBox’s Properties

Note that when start

typing “ال“all the

proposed countries that

begin with “ال“ are

displayed

(67)

Visual Basic.NET

Chapter Three

A (GroupBox) control is used to group other controls of same function together on the Form window.

There are many properties for the (GroupBox) control.

1. With your teacher’s help, construct a (GroupBox) control using the following

properties as shown in table (3-10) to obtain the Form shown in figure (3-39).

value Property No.

Text 1 النوع

Choose your favorite

color ForeColor 2

Yes RightToLeft 3

Table (3-10) setting the GroupBox’s Properties

The control (ComboBox) has a set of properties like ( Name – Visible – Size – Location – RightToLeft – ForeColor- Font -BorderStyle –Items ) you can deal with as you have learned earlier in this chapter.

(68)

Visual Basic.NET

Chapter Three

The GroupBox after setting its

properties. The GroupBox before setting its

properties.

Figure (3-39) (GroupBox) control before and after setting its properties

A (RadioButton) is used to select one option from a group of mutually exclusive options.

1. Create a new project so that the Form’s window will be as shown in figure (3-40).

1. The control (GroupBox) has a set of properties like ( Name – Visible – Size – Location – RightToLeft – ForeColor- Font) you can deal with as you have learned earlier in this chapter.

2. The property (BackgroundImage) is used to display the image in the background of the control (GroupBox). Start setting this property with your teacher’s help.

(69)

Visual Basic.NET

Chapter Three

Figure (3-40) A set of (RadioButton)

With your teacher’s help, set RadioButton’s properties as follows:

value Property

True Checked

Figure (3-41) Choosing one of the (RadioButton)

A set of

(RadioButton)

where the

property (Text)

have been

adjusted as

The effect of many (Properties) is not shown during design mode, but in run-time mode as shown in figure (3-41).

Note that the (RadioButton1)

is the one active

The previous figure asks the user to choose the Gender, and the Scientific

Degree as well; but one (RadioButton) control doesn’t allow this. To solve the

problem, we set two (GroupBox) controls; the first one contains the Gender

while the second one contains the Scientific Degree by dragging (RadioButtons),

each one in its group; as shown in figure (3-42).

(70)

Visual Basic.NET

Chapter Three

Figure (3-42) Choosing one (RadioButton) from each (GroupBox)

From the previously mentioned figure it is clear that there are many (Properties) assigned to the (RadioButton) as shown in Table (3-11).


Indicates if the (RadioButton) has been selected or

not Checked 1

The text displayed on the (RadioButton) Text 2

Table (3-11) some of the (RadioButton) Properties

In design mode two (GroupBox)

are drawn on the Form then each

(RadioButton) is dragged to its

corresponding Group

Other (RadioButton) can

be selected

The control (RadioButton) has a set of properties like ( Name – Visible – Size – Location – RightToLeft – ForeColor- Font) you can deal with as you have learned earlier in this chapter

(71)

Visual Basic.NET

Chapter Three

A (CheckBox) control is used to select one or more options.

1. Create a new project so that the form’s window will be


Figure (3-43) a set of (CheckBox)

So, the form’s window appears in run-time as shown in figure (3-44).

Figure (3-44) a set of (CheckBox)

The control (CheckBox) has a set of properties like ( Name – Visible – Size – Text – Checked – Font – ForeColor– RightToLeft -Location) you can deal with as you have learned earlier in this chapter

A set of (CheckBox),

where the property

(Text) for each one is

adjusted

You can select more than

one item

(72)

Visual Basic.NET

Chapter Three

First :State whether the following statements are true (T) or false (F):

) ( 1. Some (Properties) are not effective unless other (Properties) are adjusted first

) ( 2. When you create a new (Project) a (Form) window is added to work with.

) ( 3. There are no common (Properties) between one (Control) and another.

) ( 4. A value should be assigned to any (Property).

) ( 5. You can modify the value of a property assigned to a (Control) through the (Toolbox)

) ( 6. The value of the (Property) Size is 98;108 means that the width is 108 and, the height is 98

) ( 7. Radio Buttons are used when the user has the possibility to choose more than one alternative.

) ( 8. User can not choose any item in the control (CheckBox)

(73)

Visual Basic.NET

Chapter Three

Second: choose the correct answer: 1. To provide the possibility to choose one and only one item use the control:

A.RadioButton B-Checkbox C - GroupBox D-ListBox

2. To allow the selection of one or more items choose the control:

A.RadioButton B-Checkbox C-GroupBox D- ComboBox

3. You can choose more than one item if you use:

A-ListBox B- ComboBox C-GroupBox D-RadioButton

4. The Solution Explorer window contains:

A-(Properties) B (Controls) C-Projects D-All of the above

5. The project can run in test mode by pressing (……) From the keyboard

A-F2 B-F4 C-F8 D-F5

(74)

Visual Basic.NET

Chapter Three

Third: Type the names of the Controls displayed on the shown Form window:

Fourth

1. Write the name of the (Property) that enables you to control the size of the Control (Label) using mouse pointer.

2. Write the name of the (Property) that makes the writing direction from right to left.

3. Write the name of two (Properties) that have no effect unless you initiate the (Start Debugging).

(Control) No.

1

2 3

4

5

6

Code Window


Work with the (Code window )

Define the (Event Handler)

Adjust Controls’ Properties programmatically

(76)

Visual Basic.NET

Chapter Four

Through the Code window; we can write instructions and codes using (Visual

Basic .Net) language “Language under study”.

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)

Figure (4-1) (Code Window)


(1) Name of the file where codes are saved.

(2) Name of the file where the Form window 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.

2

3

1

4 5

(77)

Visual Basic.NET

Chapter Four

Identify the Code Window and Event Handler 1. With the help of your teacher, create a (Project) named (Shapes) and

save it with a solution name (Geometric), then set up a (Form) of name

(frmSquare); with the controls displayed as shown in figure (4-2).

Figure (4-2) The Form window of the new (Project)

Steps mentioned above are done without adjusting the property (Name); for all Controls drawn on the (Form).

Figure (4-3) The Title Bar shows the Solution name

The Title Bar of the (IDE) window appears as shown in figure (4-3):

2 1

(78)

Visual Basic.NET

Chapter Four


(1) The Solution name.

(2) (Visual Studio) version used.

2. In the (Solution Explorer) window, right click the file (Form1.vb) and,

select (View Code) from the context menu as shown in figure (4-4).

Figure (4-4) to display the Code Window

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

Figure (4-5) the Code Window


(1) A drop-down menu of (Class Names), which refers to the names of

controls placed on the Form.

(2) A drop-down menu of (Method Names) or events; associated with

the Class selected from the (Class Names) menu.

Project name

From the context menu choose (View Code)

1 2

(79)

Visual Basic.NET

Chapter Four

Perform the following steps

3. Open the drop-down (Class) menu and note that the default names of

the controls are listed as shown in figure (4-6).

Figure (4-6) listing Control names in the Code Window

4. When you select (Button1) from the Class menu, open the drop-down

(Methods) menu; it displays the events associated with (Button1) as

shown in figure (4-7).

Figure (4-7) choose the required event from the drop-down menu

Choose the event (Click)

(80)

Visual Basic.NET

Chapter Four

Figure (4-8) (Event Handler)

The numbers shown in figure (4-8) indicate: (1) The procedure name composed of (object name, event name)

(2) End of procedure

(3) What causes the call of the procedure (event occurrence).

(4) Between the two lines shown; you can write statements or codes

that will be executed after invoking the procedure.

(5) The declaration of the Class (frmSquare)

(6) The end of the Class

Event handler is the procedure (called into action) when an event occurs as shown in figure (4-8):

6

1 2 3

4

5

(81)

Visual Basic.NET

Chapter Four

Adjust the property (Name) for the following controls as shown in table

(4-1); ask your teacher for help.

Value of the

property (Name) Control No.

lbl_Title Label1 1

Btn_Text Button1 2

Btn_ForeColor Button2 3

Btn_Font Button3 4

Btn_Visible Button4 5

Btn_End Button5 6

Table (4-1) After setting the properties, choose the (View) menu then select (Code).

Open the drop-down (Class) menu and note that the displayed names of the

controls have been changed as shown in figure (4-9).

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

(82)

Visual Basic.NET

Chapter Four

1. Create a new (Project) and set the (Form) as shown in figure (4-10)

Figure (4-10) required Form window 2. Set the property (Name) for the Form (Form2) to (frmAdjustProperties).

3. Set the value of the property (Name) for the controls as follows in table (4-

2).

Value of the property

(Name) Control No.

lbl_Title Label1 1

Btn_Text Button1 2

Btn_ForeColor Button2 3

Btn_Font Button3 4

Btn_Visible Button4 5

Btn_End Button5 6

Table (4-2) the value of the property (Name) for the controls

(83)

Visual Basic.NET

Chapter Four

Figure (4-11) the (Event Handler) related to the Button


(1) The Procedure Name is (btn_Text_Click); the control name is

(btn_Text), and the event name is (Click).

(2) Between the two lines shown; you can write statements or codes.

If you double-click the Button named (Text); the (Code window) opens with the corresponding (Event Handler) of the active Button as shown in figure (4-11)

2 1

Setting the (Properties) programmatically

The control or the

object name

The property

The value

(84)

Visual Basic.NET

Chapter Four

With the help of your teacher do the following:

Insert the (Click )event handler of the Button (btn_Text )

Adjust the property (Text ) for the Label (lbl_Title ) to be :

“ مصر العربية جمهورية “

The following statement is written

4. With your teacher help do the following:

Insert the (Click )event handler for the Button (btn_ForeColor)

Set the value of the property (ForeColor) for (lbl_Title ) to

(Blue)


5. With your teacher’s help do the following:

Insert the (Click )event handler for the Button (btn_Font )

Adjust the property (Font) for (lbl_Title ) to become:

(font type) = Arial and, (font size) =30


6. With your teacher help do the following:

Insert the (Click )event handler for the Button (btn_Visible)

Set the value of property (Visible) for (lbl_Title ) to (False)


lbl_Title.Text= " العربية مصر جمهورية "

lbl_Title.ForeColor=Color.Blue

lbl_Title.Font= New Font("arial", 30)

lbl_Title.Visible = False

(85)

Visual Basic.NET

Chapter Four

7. To end the procedure insert the (Click) event handler for the Button (btnEnd)

and type the command (End) .when we terminate writing all (Event

Handlers).The (Code Window) becomes as show in figure (4-12).

Figure (4-12) the (Code Window) with all (Event Handlers)

The values assigned to properties may have several types: 1. The abstract value; e.g. Property (Text). 2. The logical value; e.g. Property (Visible). 3. The value selected from a list; e.g. Property (ForeColor). 4. The value formed from creating an (Object); e.g. Property (Font). 5. The value of the result of arithmetic expression (will be studied

later). 6. The value of a Variable or Property.

(86)

Visual Basic.NET

Chapter Four

1. In the shown figure what the following numbers indicate?

2. In the following Form perform the following:

Type the appropriate lines of code for each Button so that when you click any (Button); it changes the background color for the (Label) to the corresponding color written on the button. Take in consideration that the property (Name) of the Label is (label1)

Indicate Number ......................................................... 1

......................................................... 2

......................................................... 3

4

2

3

1

4

(87)

Visual Basic.NET

Chapter Four

3. Type the appropriate lines of code ,and use the Property (Visible) to show or hide the label (label1)

4. You have several properties for the control (textbox1) change

it to the values shown (by writing the corresponding lines of code)

......................................................... Red Button

......................................................... Green Button

......................................................... Blue Button

......................................................... Show (label1)

......................................................... Hide(label1)

Lines of code Value Property. True

multiline

Type : Andalus

Size:20 font

Blue forecolor

True backcolor

(88)

Visual Basic.NET

Chapter Four

klنميسبلسيبل

( 89 )

Sample Tests

Sample Test (1)

First :State whether the following statements are true (T) or false (F): ) ( 1. The symbol is used to present the start or the end (Terminal)

) ( 2. The rectangle symbol represents only one processing

) ( 3. The flow of steps will always be from top to bottom or from left to

right.

) ( 4. When adjusting any Property from the Properties window; its

effect is shown on the Form immediately

) ( 5. When Setting a (Property) programmatically, its value appears on

the right side of the assignment statement:

Second: Underline the correct answer(between brackets)

1- A diagram that uses graphical symbols to illustrate the sequence of steps for

solving a problem

(Flowchart - Problem Solving - algorithm)

2- Which of the following symbols describe the decision-making processes in

flowcharts

( - - )

3- The procedure called into action when an event occurs

(Function – Event Handler - Event )

4- When creating a new Project ;a (Form) appears with a name :

(Label1-Form1-Listbox1)

5- To control the size of the control (Label) using the mouse pointer ; you have

to adjust the property

(BorderStyle-AutoSize-Location)


( 90 )

Sample Tests

Third: In the following table; type the number in front of each command that refers to its correct place in the “Flowchart” to determine if the input number is (even or odd) .

) ( Res = N mod 2

) ( 0 Is res

) ( Output

"number is odd"

) ( Output

"number is even"

) ( Input number N

Start

End

YES

NO

1

3

2

4 5


( 91 )

Sample Tests

Fourth: In the displayed (IDE) window, what do the following numbers indicate?


......................................................... 2

......................................................... 3

4

1

2

3 4


( 92 )

Sample Tests

Sample Test (2) First :State whether the following statements are true (T) or false (F):

) ( 1. To draw “Flowcharts” you can use any Geometric shape for

representing solution steps

) ( 2. At least two paths (branches)must come out from this shape

………..

) ( 3. The first stage of problem solving is the Algorithm

) ( 4. To open the (Code Window) of a Form press (F7)

) ( 5. The list of properties displayed in (Properties window) differ

from the selected element

Second: Underline the correct answer(between brackets)

1. The objective or the specific output that we want to attain

) Problem - Problem Solving - Algorithm (

2. Which of the following express the processing operation

( - - )

3. To set the Background color of the Form we use the property:

) ForColor-BackColor-Color (

4. Which of the following Properties their effects are active ; only

when(StartDebugging)

) ShowInTaskbar-Font-Text (

5. It is the blueprint, from which the individual objects, are created

)Object-Function-Class(


( 93 )

Sample Tests

Third: Draw a flowchart for the Algorithm shown in the table


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 4

5- End

What is the purpose of the previous Algorithm? -------------------------

---------------------------------------------------------

Fourth: In the displayed (IDE) window, what do the following numbers indicate?

Fifth

Type the appropriate lines of code to adjust the property (Text ) for the control (Label1) to the value ” العربيةتحيا جمهورية مصر ”


......................................................... 2

2 1


( 94 )

Sample Tests

Sample Test (3) First :State whether the following statements are true (T) or false (F):

) ( 1. Flowchart uses graphic symbols and lines to represent

Problem solving steps.

) ( 2. The symbol used to output more than one result on the

screen or the printer is …………

) ( 3. The flow of steps will always be from top to bottom or

from left to right

) ( 4. The value assigned to a property can be changed only from

the Properties window

) ( 5. When saving a Project for the first time,the Solution name

appears the same as the project name

Second: Underline the correct answer(between brackets) 1. In the following formula C = A + B; C represent

)Stored value – Variable ( 2. Iterations and branching can be represented through

)Flowchart - Algorithm - Problem Solving( 3. The first stage of solving Problem

(Solution steps - Define the Problem - Determine the input) 4. Integrated Development Environment means

)IPO-IDE-ERD ( 5. The Event Handler consists of:

(Name of the control – The name of the event – Name of the control

and name of the event )


( 95 )

Sample Tests

Third: Draw a flowchart for the Algorithm shown in the table


1 Start

2 Sum=0

3 Enter value

4 If value= -1 then

4-1 Print Sum

5 Else

5-1 Sum=Sum+value

5-2 Go To 3

6- End

What is the purpose of the previous solution steps ? ----------------------------------------------------------------------------------

Fourth: For each of the following Event Handlers ,write the event name,and the control name.

Event Control No. 1

2

problem solving - المناهج...

Documents