Lecture [1]

Dr. Gehad Ismail Sayed

Google Classroom Code

l2socts
https://classroom.google.com/c/NTkyNDY2OD
QxMzM3?cjc=l2socts

2
Course Work Marking Schema
⚫ Two Assignments (15%)
⚫ The required tasks in the labs (5%)
⚫ Two Quizes (10%)
⚫ Midterm Exam (20%)

3
Topics to Be Covered
⚫ Event-Based Programming
⚫ Creating a Swing-Based Window
⚫ Advanced OOP Concepts
⚫ Common Programming Errors
⚫ How to Write a Clean Code

4
What is visual programming
language?
Any language that uses the graphics or blocks
that are already defined with the code and you
just need to use those blocks without worrying
about the lines of code is known as a visual
programming language.

5
Why we study visual
programming language?
⚫ Practice learning and using a large, complex API
⚫ Most modern application programs use sophisticated
graphics and have powerful graphical user interfaces
⚫ Spreadsheets
⚫ Word processing
⚫ Web browsers
⚫ Email programs
⚫ Its important to extend our knowledge from writing crude
console-based programs to portable graphical
applications

8
Why we study visual
programming language?
⚫ Today, the majority of the programming languages are
text-based

⚫ i.e. we have to write the lines of code to perform the specific task
like in C or C++ programming but in visual programming
language this task is replaced by graphics or blocks like
components then can be joined logically to perform the task

⚫ Visual Programming language lets the user think in a

logical manner unlike in regular programming language
the user has to think about that how he/she can explain
the program to the computer.

9
Examples of visual
programming languages
There are n numbers of visual programming languages and
the few which are in the top list is given below:
⚫ Scratch: With the help of this language users can create,
stories and games without writing any lines of code in this
you just have to create the logic and assemble the blocks.
⚫ Blockly: Used to create block-based programming
language and editors, and also to generate code from
blocks to javascript lua dart python and PHP, etc.
⚫ mBlock language: It is used in programming robots.

⚫ Bubble language: It is used to create web applications.

⚫ Minibloq language: It is used as a graphical programming

environment for Arduino. 10
Examples of visual
programming languages

11
Applications of Visual
Programming language
VPL can be used in multiple domains like multimedia,
educational purpose, video games, automation. Let’s see
them in brief:
⚫ Multimedia: VPL helps users create multimedia without
worrying about the real code or other complex features.
It narrows down to specific functions and with the help of
those functions, multimedia is created.
⚫ Educational Purpose: Scratch VPL, etc are used to help
students in their projects and make them familiar with the
coding.
⚫ VideoGames: VPL helps to create the videogames
without writing lines of codes Ex- Scratch VPL is used to12
make videogames.
Advantages of Visual
Programming Language
1. Easy to convert ideas into reality for example you don’t know
how to code so you can start with VPL (Visual Programming
Language). and then switch to actual coding
2. Visuals are easy to grasp i.e. to develop something in visual
programming language requires less efforts
3. It includes a variety of built in objects that are required while
creating something using VPL.
4. It is a beginner-friendly also anyone will be able to derive the
logic without worrying about writing lines of code
5. Adding a user-specific code is also available and simple as it
allows to create of blocks as per the convenience of the user

13
Disadvantages of Visual
Programming Language
1. These languages require more memory as they use
graphics, as a result, their execution is also slow and a
large amount of memory is occupied by them.
2. They can only work in an operating system like windows,
mac, or any other operating system which supports
graphics.
3. As the inbuilt functions are not sufficient so you have to
add your custom code as a result it is cumbersome.
4. Only limited functions are present in these languages.

14
Disadvantages of Visual
Programming Language
5. Adding our custom code as a block requires coding
knowledge or else you have to work with limited functions
which are provided with the language.
6. As a computer engineer, it is not a good idea to use VPL
as most of the tech giants like FAANG or other tech
companies work on textual languages like JAVA, HTML,
etc, rather than VPL.
7. For the long run VPL might not be that much useful as in
a regular language you can explore more in it but in VPL
at one point you will get bored by using the same it.

15
 Regular vs. Visual
Programming Languages
Regular Languages Visual Programming Language
1. It is a programming It is a programming language that uses
language that only graphics or blocks in place of text.
uses text.
2. Customization and There are not that much customizable as
flexible applications the blocks or graphics that contain the
can be created using codes are limited and after that, we need
regular languages to add our custom code as a block.
3. These are quite fast This is not fast and efficient as every
and efficient block has some code with it so it takes
time and also it has graphics with it.
16
 Regular vs. Visual
Programming Languages
Regular Languages Visual Programming Language
5. requires time to learn as any school student will be able to
the user has to get familiar grasp the VPL and create the
with the language syntax applications
then code in it
6. These require less memory This requires more memory as it has
as compared to VPL graphics so to store them more
memory is used.
7. These are quite fast as These are slow as compared to
compared to VPL as they regular languages as it has graphics.
don’t have graphics.
8. Examples: Javascript, C, Examples: Java Swing, Visual Basic,
C++, Java, Python Etc. Visual C#, Visual C++, Mblock,17
Blockly, Scratch Etc.
C/C++ vs. Java vs. VB.net/C#
GUIs
⚫ C/C++ GUI
⚫ C and C++ are interesting because they are commonly the go-to
language for graphics rendering.
⚫ However, this is not because they are easy to use in said
environments, but because of the fact that they are compiled.
⚫ The compilation into native machine code usually means they
outperform most other languages, which is very important if an
application (such as a game) requires high FPS.
⚫ While there are cross-platform GUI libraries available for C/C++,
they are not the easiest to use simply due to their complex nature
compared to other languages.
⚫ If speed is very important, you may want to consider using C/C++
in a graphical environment.
⚫ If, however, you only intend to use a few buttons, edit boxes, and
18

lists, this may not be the language for your project.

C/C++ vs. Java vs. VB.net/C#
GUIs
⚫ Java GUI
⚫ Since one of Java’s focuses is to be cross-platform, the GUI
packages available work on most Java-enabled devices. The two
main packages available for Java GUI applications are AWT (now
depreciated/not-recommended), and Swing.
⚫ Java also has libraries available for graphical routines, which
allows for both 2D and 3D rendering of graphics (one popular
example is Minecraft, which is a 3D-rendered voxel game written
in Java).
⚫ However, one disadvantage of Java as a graphical coding
environment is its speed, which is why there are very few 3D
games written in Java.
⚫ If your project needs to be cross-platform and moderate
processing power is required, Java would be a good choice of
19
language.
C/C++ vs. Java vs. VB.net/C#
GUIs
⚫ VB.net/C# GUI
⚫ Out of all the languages shown in this article, VB.net and C# in
conjunction with Visual Studio are the easiest languages to use
with graphical routines.
⚫ However, VB.net and C# do suffer from one massive drawback —
they are not cross-platform (Windows only). Both languages rely
on the .net framework to create graphical applications which is not
available on Mac, Linux, or Android.
⚫ However, there are some libraries that allow for cross-platform
form applications, such as Mono, but as a result, have less
functionality than what is provided by Windows.
⚫ If your project only needs to target Windows devices, VB.net and
C# are the languages of choice (assuming that you do not need to
do 2D/3D rendering).
20
Recap - OOP
What is Programming Paradigm?
⚫ Classification of programing languages based on its
characteristics.
⚫ There are a number of programming paradigms such as
procedural programming, Object-Oriented
programming, logical programming etc.
Recap - OOP
What is procedural oriented programing Paradigm?
⚫ Procedural oriented programing (POP) is a programming
paradigm that is based on subroutines or procedure,
namely functions.
⚫ They consist of sequential steps that perform some
specific tasks.
What is object oriented programing Paradigm?
⚫ Object-Oriented programing (OOP) is a way of computer
programming that is based on the idea of “objects” to
represent data and methods.
⚫ This approach is used to create reusable code instead of
redundant one.
 Recap - OOP
What is the difference between Procedural and Object
Oriented Programming?
Procedural OOP
Program is divided into small parts Program is divided into small parts
called functions. called objects.

It follows top down approach It follows bottom up approach

There is no access specifier in OOP have access specifiers like
procedural programming private, public, protected...
It does not have any proper way for It provides data hiding so it is more
hiding data so it is less secure. secure.
overloading is not possible overloading is possible
Examples: C, FORTRAN, Pascal Examples: C++, Java, Python, C#
Recap - OOP
Recap - OOP
Object-oriented programming has several advantages
over procedural programming:
⚫ OOP is faster and easier to execute

⚫ Problems can be divided into different parts making it

simple to solve
⚫ OOP provides a clear structure for the programs

⚫ OOP helps to keep the Java code DRY "Don't Repeat

Yourself", and makes the code easier to maintain,
modify and debug
⚫ OOP makes it possible to create full reusable
applications with less code and shorter development
time
Recap - OOP
Object-oriented programming has several advantages
over procedural programming:
⚫ Information Hiding
⚫ The problem: Client code has direct access to internal data
Recap - OOP
Object-oriented programming has several advantages
over procedural programming:
⚫ Information Hiding
⚫ The solution: Client code must use setters and getters to access
internal data
Recap - OOP Concepts
Recap - OOP Concepts
Access specifiers/Modifiers are reserved keyword that is
used to set the accessibility of the classes, methods and
other members of the class.
Access Level Modifiers
1. Public (accessible from any class)
2. Private (accessible within the class where defined)
3. Protected(accessible within the class and the derived
class)
4. Default or Package-Private (When no access specifier
is specified)
It means that the attributes/methods of a class can only
be accessed for all classes in the same package
Recap - OOP Concepts
Access Level Modifiers
Recap - OOP Concepts
Data Hiding
⚫ It is a software development technique
specifically used in OOP to hide internal object
details (data members).
⚫ It ensures exclusive data access to class
members and protects object integrity by
preventing unintended or intended changes.
Recap - OOP Concepts
Recap - OOP Concepts
⚫ The standard in OOP,
the access modifier
for data should be
private
⚫ And the access
modifier for the
methods should be
public.
Recap - OOP Concepts
Class
⚫ Collection of objects is called class.

⚫ It is a logical entity.

⚫ A class can also be defined as a blueprint or prototypes

or template from which objects are created.
⚫ Class doesn't consume any space.
Recap - OOP Concepts
Class
⚫ Is a user-defined type
⚫ Describes the data (attributes)
Members
⚫ Defines the behavior (methods)
⚫ Instances of a class are objects
Recap - OOP Concepts
Declaring Class
⚫ Syntax
<modifier>* class <class_name>{
<attribute_declaration>*
<constructor_declaration>*
<method_declaration>*
}
⚫ Example
Recap - OOP Concepts
Declaring Attributes
⚫ Syntax
<modifier>* <type> <attribute_name>[= <initial_value>];
⚫ Example
Recap - OOP Concepts
Declaring Methods
⚫ Syntax
<modifier>* <return_type> <method_name>( <argument>* ){
<statement>*
};
⚫ Example
Recap - OOP Concepts
Object
⚫ Any entity that has state and behavior is known as an
object. For example, a chair, pen, table, keyboard, bike,
etc. It can be physical or logical.
⚫ An Object can be defined as an instance of a class. An
object contains an address and takes up some space in
memory.
⚫ It is mainly consists of
1. Data/properties/attributes
2. Operations()/methods()/functions()/behaviors()
Recap - OOP Concepts
Accessing Object Members
⚫ Syntax
<object>.<member>
⚫ Examples
Recap - OOP Concepts
Example of OOP in game development
Recap - OOP Concepts
Encapsulation
Binding (or wrapping) code and data together into a single
unit are known as encapsulation. For example, a capsule, it
is wrapped with different medicines.
Recap - OOP Concepts
Inheritance
⚫ When one object acquires all the properties and
behaviors of a parent object, it is known as inheritance.
⚫ It provides code re-usability.

⚫ It is used to achieve runtime polymorphism.

Recap - OOP Concepts
Polymorphism
⚫ If one task is performed in different ways, it is known as
polymorphism.
⚫ For example: to convince the customer differently, to
draw something, for example, shape, triangle,
rectangle...
⚫ In Java, we use method

overloading and method

overriding to achieve polymorphism.
⚫ Another example can be to

speak something; for example,

a cat speaks meow, dog barks woof...
Recap - OOP Concepts
Abstraction
⚫ Data abstraction is the process of hiding certain details
and showing only essential information to the user.
⚫ For example phone call, we don't know the internal
processing.
⚫ In Java, we use abstract class and interface to achieve
abstraction.
Recap - OOP Concepts
What are the limitations of OOPs?
⚫ Requires intensive testing processes.
⚫ Solving problems takes more time as compared to Procedure
Oriented Programming.
⚫ The size of the programs created using this approach may become
larger than the programs written using the procedure-oriented
programming approach.
⚫ Software developed using this approach requires a substantial
amount of pre-work and planning.
⚫ OOP code is difficult to understand if you do not have the
corresponding class documentation.
⚫ In certain scenarios, these programs can consume a large amount
of memory.
⚫ Not suitable for small problems.
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ A UML Class Diagram in Software engineering is a static structure
that gives an overview of a software system by displaying classes,
attributes, operations, and their relationships between each other.
⚫ This Diagram includes the class name, attributes, and operation in
separate designated compartments. Person
Person
Attributes can be: + name : String
+ name : String
+ public # address : Address
# address : Address
# protected # birthdate : Date
# birthdate : Date
- private / age : Date
/ age : Date
/ derived - ssn : Id
- ssn : Id
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Dependencies
⚫ Generalizations
⚫ Associations
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Dependencies
⚫ A dependency indicates a semantic relationship between two
or more elements.
⚫ The dependency from CourseSchedule to Course exists
because Course is used in both the add and remove
operations of CourseSchedule.
CourseSchedule
Course
add(c : Course)
remove(c : Course)
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Generalizations
⚫ A generalization connects a subclass to its superclass.
⚫ It denotes an inheritance of attributes and behavior from the
superclass to the subclass and indicates a specialization in
the subclass of the more general superclass.
Person

Student
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ If two classes in a model need to communicate with each
other, there must be link between them.
⚫ An association denotes that link.

One to One

Student Instructor

Both classes know

each others
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ We can indicate the multiplicity of an association by adding
multiplicity adornments to the line denoting the association.
⚫ The example indicates that a Student has one or more
Instructors:

Student Instructor
1..*
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ The example indicates that every Instructor has one or more
Students:

Student Instructor
1..*
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ We can also indicate the behavior of an object in an
association (i.e., the role of an object) using rolenames.
teaches learns from
Student Instructor
1..* 1..*
member of
1..* 1..*
Student Team
1 president of 1..*
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ Aggregation is a special type of association that models a
whole- part relationship between aggregate and its parts.
⚫ Aggregation indicates a relationship where the child can exist
separately from their parent class. Example: Automobile
(Parent) and Car (Child). So, If you delete the Automobile, the
child Car still exist.
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ Aggregation is a special type of association that models a
whole- part relationship between aggregate and its parts.
⚫ For example, the class college is made up of one or more
student. In aggregation, the college class will remain even if
the student is not available.

⚫ Class student is part-of class college

Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ The composition is a special type of aggregation which
denotes strong ownership between two classes when one
class is a part of another class.
⚫ Composition display relationship where the child will never
exist independent of the parent. Example: House (parent) and
Room (child). Rooms will never separate into a House.
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ There are three kinds of relationships in UML:
⚫ Associations
⚫ The composition is a special type of aggregation which
denotes strong ownership between two classes when one
class is a part of another class.
⚫ For example, if college is composed of class student. The
college could contain many students, while each student
belongs to only one college. So, if college is not functioning all
the students also removed.

⚫ The construction and destruction of student class depends on

college class.
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ Describing UML in Java
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ Describing UML in Java
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation Directed arrow means class book
knows class person, but class person
⚫ Describing UML in Java know nothing about class book
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ Describing UML in Java
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
If there is no arrowhead in a
Representation
connection, both classes know
⚫ Describing UML in Java about each other
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ Describing UML in Java
Recap - OOP Concepts
Unified Modeling Language (UML) - Graphical Class
Representation
⚫ Describing UML in Java
Recap - OOP Concepts
Recap - OOP Concepts
List what are the classes used to design a program for
a supermarket?
Recap - OOP Concepts
List what are the classes used to design a program for
a supermarket?
Recap - OOP Concepts
Represents the object related to the car class
Recap - OOP Concepts
Represents the object related to the car class
Recap - OOP Concepts
Represents the object related to the car class
Recap - OOP Concepts
Represents the object related to the car class
Recap - OOP Concepts
Represents the object related to the car class
Recap - OOP Concepts
Represents the object related to the car class
Recap - OOP Concepts
Represents the object related to the car class

We can set any attribute

with equality, so what is
the importance of using set
and get function?
Recap - OOP Concepts
Example: Describe the below UML diagram
Recap - OOP Concepts
Example: Describe the below UML diagram

Solution:
• 1 or more Pets associated with 1 PetOwner
• Each pet has exactly one PetOwner
Recap - OOP Concepts
Example: Describe the below UML diagram
Recap - OOP Concepts
Example: Describe the below UML diagram

Solution:
• 1 Bank associated with 0 or more Accounts
• Each Account is associated with exactly one bank
• Checking, Savings, and MoneyMarket are derived from
Account class
Recap - OOP Concepts
Example: Draw UML diagram for the below system
⚫ A bank system contains data on customers(identified by
name and address) and their accounts.
⚫ Each account has a balance and there are 2 type of
accounts: one for savings which offers an interest rate,
the other for investments, used to buy stocks.
⚫ Stocks are bought at a certain quantity for a certain price
(ticker) and the bank applies commission on stock
orders.
Recap - OOP Concepts
Solution:
Recap - OOP Concepts
Example: Consider the following class diagram, write true
or false of the following
Recap - OOP Concepts
Example: Consider the following class diagram, write true
or false of the following
1. The class Vehicle does not contain any attributes. ( )

2. The objects of class StationWagon do not have any

attributes. ( )
3. The diagram contains a mistake: the direction of the
arrows with empty arrowheads pointing at Vehicle and
Car should be reverse. ( )
4. SportsCar has a method called AddWheel(). ( )
Recap - OOP Concepts
Solution: Consider the following class diagram, write true
or false of the following
1. The class Vehicle does not contain any attributes. ( T )

2. The objects of class StationWagon do not have any

attributes. ( F )
3. The diagram contains a mistake: the direction of the
arrows with empty arrowheads pointing at Vehicle and
Car should be reverse. ( F )
4. SportsCar has a method called AddWheel(). ( F )
87