Visual Programming Notes
Visual Programming Notes
A lot of people think that computer CPU is a very intelligent thing, which in actual fact it is
a dumb and inanimate object that can do nothing without human assistance. The
microchips of a CPU can only understand two distinct electrical states, namely, the on
and off states, or 0 and 1 codes in the binary system. So, the CPU only understands a
combinations of 0 and 1 codes, a language which we called machine language. Machine
language is extremely difficult to learn and it is not for us laymen to master it easily.
Fortunately , we have many smart programmers who wrote interpreters and compilers
that can translate human language-like programs such as BASIC into machine language
so that the computer can carry out the instructions entered by the users. Machine
language is known as the primitive language while Interpreters and compilers like Visual
Basic are called high-level language. Some of the high level computer languages beside
Visual Basic are Fortran, Cobol, Java, C, C++, Turbo Pascal, and etc
Visual Programming provides the user with an interface that is intuitive and easy to use. In
developing such an interface, the programmer needs to use the user friendly features like
windows, forms, menus, buttons, and list boxes and so on.
A visual programming environment provides all the features that are required to develop a
graphical user interface as ready-to-user components. The programmer does not have to write
code to create and display commonly used user-friendly components each time around.
In visual programming, when a certain component or feature as button is needed, then the
programmer just need to drag-and-drop the ready-to-use component from the toolbar to the Form
window. They can simply add more, resize, move and rename the component for programmers
ease. Typically a mouse is used to select and place the necessary component. Thus, the visual
programming environment is also called a point and click environment.
Visual programming enables attaching the same codes for the similar kinds of components. For
example in calculator, using of control arrays of components to handle the click event of the
digits.
1
Some popular visual programming tools are:
Visual Basic
PowerBuilder
Delpi
Visual C++
Developer 2000
VISUAL BASIC is a high level, VISUAL and events driven Programming Language
Visual Basic is the most widely used programming language for creating Windows applications
and games. Why? Because it's easy to learn, and doesn't require you to memorize difficult
commands like other programming languages.
Visual Basic suit more for application developing than for Games developing.
You can create sophisticated games using Visual Basic, But
If you want to make a really advanced professional game like Quake 2,
You may choose other language (like C++), that would be much more
harder to program with.
However, Visual Basic will be probably powerful enough to suit all your application
and games programming needs.
1. Visual development of graphical user interface which are easy to use and easy to learn.
2. Eliminates the tradition of writing of code to display the required components.
3. Facilitates to use the ready to use components. The programmer picks up the required
components from this list to display it.
2
4. The component can be moved, resized and even deleted, if so required.
5. There is no restriction on the number of controls that can be placed on a form.
6. The interface components provided by the visual programming environment have some code
built into them to handle events generated during the run state.
7. Because Visual Basic is so popular, There are many good resources (Books,
Web sites, News groups and more) that can help you learn the language.
You can find the answers to your programming problems much more easily
than other programming languages.
8. You can find many tools (Sharewares and Freewares) on the internet that will
Spare you some programming time.
For example, if you want to ping a user over the internet in your program,
Instead of writing the ping function yourself, you can download a control
that does it, and use it in your program.
Compare to other languages, Visual Basic have the widest variety of tools
that you can download on the internet and use in your programs.
When visual programming makes it very simple to create complex user interfaces, it suffers from
some disadvantages:
1. As the name implies, the entire process of developing an application using a visual development
environment is visual. Thus, the development environment in itself is highly graphical in nature
and therefore requires more memory.
2. Computer supporting the video graphics system with high performance is required.
o Larger capacity hard disk.
o More RAM.
o Faster Processor.
3. Visual programming can be done only with GUI operating systems as Windows.
4. Visual Basic is powerful language, but it's not suit for programming really
sophisticated games.
HARDWARE:
3
Hardware Requirements
TERMS…..
Getting Started
Note that all the images in this tutorial taken from Visual Basic version 6.0.
If you using other version of Visual Basic, the images that you will see may
be a little different.
Run the Visual Basic program. The first thing you see is:
Figure 1
4
Here you choose what is the kind of the program you want to create.
For creating a simple Visual Basic program, choose the Standard EXE,
and press the Open Button.
(If Figure 1 is not the first thing you see when you run Visual Basic,
choose from the Visual Basic menu File->New Project (Figure 2))
Figure 2
5
After you've clicked the Open button, you will see:
Figure 3
6
Getting Started (Continue)
Look at the form with the title bar Form1.
This is how your program will look like.
Everything you will place on this form will appear in your program.
As you can see, your form is currently empty.
You didn't program anything yet, but lets run the program!
Figure 4
Figure 5
7
You can move the form, minimize and maximize it.
To stop the program from running, you can click on the Stop button
in the Toolbar (Figure 6), or click the form's X button (Figure 7).
It's very recommended that you will always close your programs using the
form's X button instead of the Visual Basic Stop button.
It's like shutting Windows From the Start button, instead of Pressing
the Power button.
Figure 6
Figure 7
To see the form properties, select from the menu View->Properties Window (Figure 8).
Figure 8
8
The properties window looks like this:
Figure 9
9
In the red circle you can see the component name:
These are the properties of a Form, and the form's name is Form1.
The column marked by the blue circle contains the form's properties names:
The form has Name property, Appearance property AutoRedraw property, and more.
The column marked by the black circle contains the form's properties values:
The form's Name is Form1, The form's Appearance property is 1 - 3D, and so on.
To change the Caption property, simply click on the Caption property in the
form's properties names column (Figure 10).
Figure 10
Figure 11
10
Now run the program using the Play button (Figure 4).
You will see that the text on the form's Title bar is Hello (Figure 12).
Figure 12
Figure 13
11
And you will see the Toolbox (Figure 14):
Figure 14
12
Now lets add a button to your form.
Buttons in Visual Basic called "Command Buttons".
To add a button, click on the Command Button icon in the Toolbox (Figure 15).
Figure 15
As results, the Command Button icon will look pressed (Figure 16).
Figure 16
13
Now click on the form with the left mouse button, and hold the button
down while moving the cursor.
You will see a rectangle.
Release the mouse button, and in the place of the rectangle you
will see a button (Figure 17).
Figure 17
Figure 18
14
The Command Button's Properties window (Figure 19):
Figure 19
As you can see, In the top of the properties window, right under the title bar,
appears "Command1 CommandButton".
Command1 - because it's the name of this specific Command Button (look
at the name property).
15
Note that two components can't have the same name.
If you will add another Command Button to your form, its name will
be "Command2" by default.
If you want you can change the Name of any component, by simply
changing the component's Name property.
Change the Command Button's BackColor property to blue (or other color).
The change won't take affect, untill you will set the Command Button's Style
property to 1 -Graphical.
You can now play a little bit with the Command Button's properties,
this is the best way to learn what every property does.
You can also add other controls from the Toolbox to your form,
And play around with their properties.
Figure 20
16
The Code Window opened with the Form_Load event.
The Form_Load event occurs when the form is loaded, and this happening
when you start the program.
So the code that you will enter to the Form_Load event will be launched
when the program is being started.
MsgBox "Hello"
Insert the line MsgBox "Hello" to the Form_Load event (Figure 21).
Figure 21
17
Now run your program using the Play button.
When the program is started, a message box with the
text "Hello" is appear (Figure 22).
Figure 22
More Events
The Form has more events besides the Form_Load event.
How can you find them?
Click on the Drop-Down List that found in the upper left corner of
the Code Window, where appears right now the text "Form" (Figure 23).
Figure 23
18
You will see a list of the components that found in your program.
You have 1 command button with the name "Command1" and 1 Form.
Here you select which component's event you want to program.
We want to program a form's event, so select "Form" from the list (Figure 23).
Figure 24
19
and this happening when you close the program (Using the form's X button (Figure 7)).
So the code that you will write in the Form_Unload event will be launched
when you close the program.
MsgBox "GoodBye"
After you inserted this line to the Click event the Click event should look like this:
20
End Sub
As you can see, the Command Button's Click event called "Command1_Click",
because the name of the specific Command Button that we program
its Click event is "Command1".
If we had program the Click event of a Command Button with the
name "BlahBlah7", the Click event would be called "BlahBlah7_Click".
Every component has its own unique events, therefore if you had
5 Command Buttons on your form, every one of them has its
own unique Click event.
Print "Hello"
Figure 25
21
Add another Command Button to your form.
The New Command Button's name is "Command2" by default (Figure 26)
Figure 26
After you've done so, your code should look like this:
22
Run the program.
When you are clicking on Command1 Button, the text "This is Command1"
appears on the form, and when you are clicking on Command2 Button,
the text "This is Command2" appears on the form.
You can store in Integer variable the number 0 or the number 375 or
the number -46, but you can't store the number 4.5 (Because of the .5)
or the number 100,000 (Because It's bigger than 32767) or the
number -50,042 (Because it's smaller than -32,768)
23
To Declare (=create) Integer variable simply write:
Dim = Declare
MyTest = the name of the new variable
As Integer = The new variable type will be Integer.
MyTest = 10
The line above will insert the number 10 into the MyTest variable.
Now the MyTest variable stores the Number 10, but how
can you access this value from your program?
You can do that using the variable name. Example:
Print MyTest
Print MyTest
and
Print "MyTest"
Where you putting a text inside quotes (Like in the bottom line),
Visual Basic treat it as a Text, and will print it As-Is.
The Print "MyTest" Line will print MyTest on the form.
Where you putting a text Without quotes (Like in the upper line),
Visual Basic treat it as a variable name, and will print the value that found
in the variable.
24
The Print MyTest Line will print the value that found in
the MyTest variable, therefore it will print 10 on the form.
0
20
Blah
30
Why is that?
Lets pass over the code line after line:
Print Blah
Will print the Value that found in the Blah variable.
But there is nothing in the Blah variable!
The Blah variable has just been declared, and we
didn't put inside it any value yet.
The default value of any integer variable is 0.
When you write :
Dim Blah As Integer
25
It's like you've written:
Dim Blah As Integer
Blah = 0
Blah = 10
Now the Blah variable holds the number 10
Blah = 20
Now the Blah variable holds the number 20
What's happened to the 10 that was inside it?
It has been deleted!
A variable can holds only one value, and when
you put in it a value, the old value is being immediately deleted.
Blah = 20
and
Blah = 10
Blah = 20
There is no differents!
In both cases the Blah variable will hold the number 20
Print Blah
Will print the value that found right now
in the Blah variable - 20
Blah = 30
Now the Blah variable holds the number 30
Print "Blah"
Will print the Text that found between the quotes - Blah
Print Blah
26
Will print the value that found right now
in the Blah variable - 30
5
2+3
5
2
3
6
Why is that?
Lets pass over the code line after line:
Blah = 2
Now Blah holds the value 2
Print 2 + 3
When you execute command (the Print command in the case)
27
on expression, Visual Basic will evaluate the expression first,
and then will execute the command on the evaluation result.
Print Blah + 3
Now the expression is Blah + 3.
when a variable is found inside expression, it's being
replaced with its value.
In this case the value of the variable Blah is 2.
So the Blah in the expression is being replaced with 2.
After the replacement the new command is Print 2 + 3
As we saw earlier, after executing this command
the value 5 will be printed on the form.
Print Blah
Will replace the Blah with its value.
Because the Blah value is 2, After the replacement
the new command will be Print 2
After executing this command, the value 2
will be printed on the form.
Blah = Blah + 1
The line above simply says:
Put in the Blah variable, the value of the expression Blah + 1
The computer is first evaluate the expression Blah + 1
Blah is being replaced with its value: 2.
After the replacement the computer evaluates the expression 2 + 1.
The expression value is 3.
28
So now, after the "Blah + 1" expression evaluation,
the command is: Blah = 3
As you know by now, this command will
put the value 3 in the Blah variable.
Summary:
After executing the command Blah = Blah + 1,
the value 3 will be inserted into the Blah variable.
Print Blah
Will replace the Blah variable with its value: 3.
So the command that will be eventually executed is Print 3
Print Blah
Will replace the Blah variable with its value: 6.
So the command that will be eventually executed is Print 6
+ Plus
- Minus
* Multiply
/ Division
( Openning parenthesis
) Closing parenthesis
^ Power
29
The order of the operators are like in math:
First "(" and ")" , then "^", then "*" and "/", and at last "+" and "-"
For example:
2 + 3 * 4 is equal to 14
(2 + 3) * 4 is equal to 20
Answer:
The Integer variable can't store a number with fraction,
So the computer will round the 4.8 to 5, and will
Insert 5 to the ABC variable.
So the Command Print ABC will print 5 on the form.
30
and 4.94065645841247E-324 to 1.79769313486232E308 for positive values
Why would I use Byte variable that can store Integer numbers
between 0 to 255, while I can use Integer variable that can store
numbers between -32,768 to 32,767?
The Answer is: Because the Byte variable is taking less memory.
For example:
Answer:
31
kuku
Hello!!!
Why is that? Lets pass over the code line after line:
kuku = "Hello!!!"
Now the kuku variable holds the text Hello!!!
Print "kuku"
Everything that found inside quotes is being treated as text String,
So it will print kuku on the form.
The computer Is NOT associate the text "kuku" with
the variable kuku, because of the quotes.
Print kuku
Will replace the kuku with its value (Hello!!!),
and after the replacement will execute the new command Print "Hello!!!"
The code below will print Hello !!! world on the form.
The expression gogo + " !!! " + popo is equal to
Hello + " !!! " + world and that's equal to "Hello !!! world"
So eventually, the command that will be executed is gogo = "Hello !!! world”
32
Scope of Variables
Insert two Command Buttons to your form (with
the names Command1 and Command2),
and Add the following code to your program:
For Example:
33
So if you want that a specific variable will be "exist" in
your whole program, no matter from which sub you call it,
what can you do?
The Answer is in the next page...
Figure 1
After you've done so, your code should look like this:
34
Private Sub Command2_Click()
MsgBox gogo
End Sub
The Rules:
35
2)The Name Must begin with a letter: You can't
use the names: 2abc, 3, 2345, _aba
4)You can't call your variable with a name that is a Visual Basic
Command or Function (these names are been called "saved names").
For example you can't use the name Print, because there is
command in Visual Basic that called Print (which we used pretty much
in this tutorial).
You can know easily if a name is a saved name by typing it anywhere
in your code. All the saved names are being painted with blue color.
Few examples for saved names: Print, Sub, End, MsgBox
36
Private Sub Command1_KeyDown(KeyCode As Integer, Shift As Integer)
Print "KeyDown"
End Sub
Run the program, and click the button with the mouse.
Nothing has happened.
It's because the KeyDown, Key_Press, and KeyUp events are
being executed Only when you press a key on the keyboard.
Now press any key on the keyboard, hold it down for few seconds,
and then release it.
Your form will look like this:
Figure 1
37
Lets see:
The first event that been executed is the KeyDown event,
because "KeyDown" was the first text that been printed on the form.
When you release the key, the KeyUp event is being executed once.
38
What is the (KeyAscii As Integer) ?
It's a parameter that been passed to the KeyPress event.
Notice that the KeyAscii values of "A" and "a" are differents.
Every characters has its own KeyAscii value,
and 2 characters that are the same letter, but have different case,
have different KeyAscii value.
Print Asc("b")
39
Will print on the form the Ascii value of the character "b".
Print Chr(98)
Will print on the form the character that its Ascii value is 98.
Every Sub can get no parameters (like the Click event), can get
one parameter (like the KeyPress event) or can get more than
one parameter.
These keys don't have Ascii value, but they have KeyCode value.
40
For example, the KeyCode value of the Ctrl Key is 17.
If the user has pressed the Alt key and the Shift key together,
the Shift value will be 4 (for the Alt key) + 1 (for the Shift key) = 5
Examples:
The KeyUp event's parameters are the same as the KeyDown event's parameters.
41
Print "MouseDown"
End Sub
Click on one of the mouse buttons when the mouse is over the button,
and hold the button down.
The MouseDown event is being executed.
Release the button, and the MouseUp event is being executed.
42
right one.
Print X, Y
Figure 2
Figure 3
43
Enabled - Setting this property to "False" will make
the button be gray, and the user will no be able to press on it (Figure 4).
Figure 4
Figure 5
44
Picture - The Picture that appear on the button (Figure 6).
This property and all the following Picture related properties will
take affect only after you will set the
Button's Style property to 1 - Graphical
Figure 6
MousePointer - Choose here the mouse pointer (Arrow, Hourglass, and more)
when it will be over the button.
If you will set the property to be 99-Custom,
The mouse pointer will be the icon that you will select in the MouseIcon property.
45
Caption - The text that appear in the Form's title bar,
and in the taskbar.
Icon - The Icon that appear in the form's title bar (Figure 7)
and in the Task bar (Figure 8).
Figure 7
Figure 8
Figure 9
46
The title bar Minimize Button.
47
To allow the Form's Key events be executed,
set the KeyPreview property to "True".
TheControlName.ThePropertyName = TheNewPropertyValue
Command1.Caption = "Hello"
This code will do exactly the same as the code line above it.
Note that MyVar is without quotes, because it's variable.
48
exactly the same:
Form1.Caption = "Hello"
Command1.Visible = False
Form1.Enabled = True
0 - Standard
1 - Graphical
Command1.Style = 1
Form1.WindowState = 2
49
to the Picture property of Command Button with the name "MyButton"
MyButton.Picture = LoadPicture("d:\games\toto.ico")
Command1.BackColor = &H000000FF&
Figure 10
Figure 11
50
Select your desirable color (Figure 12).
Figure 12
The color value will be displayed in the BackColor Property cell (Figure 13).
Figure 13
51
a little bit about Constants.
All of this in the next page...
Command1.BackColor = &H000000FF&
Command1.BackColor = vbRed
And so on...
52
For example, the following code is NOT allowed:
vbBlue = 5
Piano = "gggg"
53
To do this, you have to use conditional statement because
the code you will execute (let the user in or end the program) is
depend on what is the password that the user has entered.
Boolean Variables
As we learnt, String variables store text, and
Integer Variables Store numbers.
Boolean variable stores one of the following constant values:
"True", or "False".
For example:
Boolean Expressions
Boolean expression is like a question that
the answer to it is "True" or "False"
For example:
Is 4 Plus 6 is 10? True
Is 2 bigger than 4? False
54
Dim ABC As Boolean
ABC = (3 > 4)
Print ABC
= Equal to
<> Not Equal to
> Greater than
< Smaller than
>= Greater than or Equal to
<= Smaller than or Equal to
55
InputBox
In the next examples we want to receive a value
from the user when the program is running.
To do so we will use the InputBox command.
Example:
Put 1 Command button on your form and
enter the following code to its click event:
Figure 1
Conditional Statements
The syntax of the conditional statement:
56
If (boolean expression) Then
The code to execute if the boolean expression is equal to True
Else
The code to execute if the boolean expression is equal to False
End If
57
If this boolean expression's value is False, and this
happens when the Password variable value is NOT "let me in",
the code that will be executed is the code that located between
the Else and the End If (MsgBox "Incorrect Password!")
58
Put the following code in your Form_Load event:
59
and (Password = "sam sent me") is False.
Figure 2
True Or False
True
60
UserName = InputBox("Please enter the user name")
Password = InputBox("Please enter the password")
If (Password = "let me in") And (UserName = "elvis") Then
MsgBox "The login is correct!"
Else
MsgBox "Incorrect Login!"
End
End If
Before we continue,
I'll mention that you don't have to include
"Else" in the "If" statement.
For example:
61
because there is no "Else".
Figure 3
Not False
True
In conclusion,
The code above will display a message box
with the text "Incorrect Password!" ONLY if
the password is different from "let me in"
For example:
62
Figure 5
False Or True
True
For example:
Figure 6
False
Figure 7
Not False
63
True
A Teaser:
What will be printed on the form after
executing the following code?
Answer:
64
Dim Number As Integer
Number = InputBox("Please enter your age")
If (Number > 50) Then
MsgBox "you are older than 50"
ElseIf (Number < 20) Then
MsgBox "you are younger than 20"
Else
MsgBox "your age is between 20 and 50"
End If
You can use more than one "ElseIf" in your "If Statement",
For example:
65
ElseIf (Name = "john") Then
MsgBox "your name is john"
ElseIf (Name = "steve") Then
MsgBox "your name is steve"
Else
MsgBox "I don't know you"
End If
66
The "Select Case" syntax is very simple:
It Begins with:
Select Case VariableName
67
This condition will be executed ONLY if none
of the conditions above was executed.
After all of the conditions, the statement closed with End Select
68