CMPE 246 (3) Computer Engineering

Design Studio
Dr. Ling Bai
[email protected]
IEEE Member, ACM Member
Faculty of Applied Science | School of Engineering
The University of British Columbia, Okanagan Campus
1137 Alumni Avenue, Kelowna BC, V1V 1V7 Canada
Instructor Name: Ling Bai

Instructor Contact Information: [email protected]

Office Hours: By appointment

Please click on the link to book a 15-minutes
appointment during office hours ( EME 3280,
Friday, 2:30pm-4:30pm). You may book multiple
time slots if needed. If none of the available
times work for you, please feel free to email me.
[email protected]
Appointment booking link:
https://lingbai.youcanbook.me

2
Lecture 11

3
1- Start
Useful: you can use the module on Canvas; or ues these link
https://design-patterns-101.vercel.app/
https://refactoring.guru/design-patterns/catalog

4
1- Start
Don't be intimidated by the numerous names of design patterns; they are simply
a sense you develop while programming.

Think of them as helpers that guide how you think about and organize your code.

As you gain experience, you can use these patterns to improve the quality of your
code, making it more maintainable and efficient.

You don't need to memorize these structure diagrams rigidly; this section in
course is about helping you develop that sense.
5
2- Design Patterns

6
2- Design Patterns
A. Creational Patterns

Creational design patterns provide various object creation mechanisms, which

increase flexibility and reuse of existing code.

7
2- Design Patterns
B. Structural Patterns

Structural patterns address how to assemble classes and objects to form

larger structures and provide new functionality.

8
2- Design Patterns
C. Behavioral Patterns

Behavioral patterns identify and address communication and responsibilities

between objects.

9
3- Design Methods
A. Creational Patterns
5 design methods: Factory, Abstract Factory, Builder, Prototype, and Singleton.

10
3- Design Methods
B. Structural Patterns
7 methods: Adapter, Bridge, Composite, Decorator, Facade, Flyweight, and
Proxy.

11
3- Design Methods
C. Behavioral Patterns
10 methods: Chain of Responsibility, Command, Iterator, Mediator, Memento,
Observer, State, Strategy, Template Method, and Visitor .

12
3- Design Methods
C. Behavioral Patterns
a. Chain of Responsibility
Chain of Responsibility (CoR, also known as Chain of Command) lets you
pass requests along a chain of handlers.
The CoR is essentially a linear search for an object that can handle a
particular request.

13
3- Design Methods
C. Behavioral Patterns
a. Chain of Responsibility
Imagine that you’re working on an online ordering system. You want to
restrict access to the system so only authenticated users can create
orders.

14
The request must pass a series of checks before the ordering system itself can handle it.
3- Design Methods
C. Behavioral Patterns
a. Chain of Responsibility
Chain of Responsibility relies on transforming particular behaviors into
stand-alone objects called handlers.

Handlers are lined up one by one, forming a chain. 15

3- Design Methods
C. Behavioral Patterns
a. Chain of Responsibility

16
A call to tech support can go through multiple operators.
3- Design Methods
C. Behavioral Patterns
a. Chain of Responsibility
Structure

17
3- Design Methods
C. Behavioral Patterns
b. Command
Command turns a request into a stand-alone object that contains all
information about the request.

18
3- Design Methods
C. Behavioral Patterns
b. Command
Imagine that you’re working on a new text-editor app. Your current task is
to create a toolbar with a bunch of buttons for various operations of the
editor.

Lots of button 19

subclasses.
3- Design Methods
C. Behavioral Patterns
b. Command
Commands become a convenient middle layer.

20
3- Design Methods
C. Behavioral Patterns
b. Command

21
Making an order in a restaurant.
3- Design Methods
C. Behavioral Patterns
b. Command

22
3- Design Methods
C. Behavioral Patterns
c. Iterator
The Iterator lets you sequentially traverse elements of a collection without
exposing its underlying representation (data structures...)

23
3- Design Methods
C. Behavioral Patterns
c. Iterator
Collections are one of the most used data types in programming.

Various types of collections.

The same collection

can be traversed in
several different
ways.

24
3- Design Methods
C. Behavioral Patterns
c. Iterator
The main idea of the Iterator is to
extract the traversal behavior of a
collection into a separate object
called an iterator.

25
3- Design Methods
C. Behavioral Patterns
c. Iterator
Structure

26
3- Design Methods
C. Behavioral Patterns
d. Mediator
The Mediator (also known as Intermediary or Controller) reduces
chaotic dependencies between objects.

27
3- Design Methods
C. Behavioral Patterns
d. Mediator
Imagine you want to develop a dialog for creating and editing customer
profiles. It consists of various form controls.

28
Relations between elements of the user interface can become chaotic as the application evolves.
3- Design Methods
C. Behavioral Patterns
d. Mediator
The Mediator suggests that you should cease all direct communication
between the components which you want to make independent of each
other.

29
3- Design Methods
C. Behavioral Patterns
d. Mediator

Aircraft pilots don’t talk to each other directly when deciding who gets to land their
plane next. All communication goes through the control tower. 30
3- Design Methods
C. Behavioral Patterns
d. Mediator
Structure

31
3- Design Methods
C. Behavioral Patterns
e. Memento
The Memento (also known as Snapshot) provides the ability to save and
restore an object to its previous state.

32
3- Design Methods
C. Behavioral Patterns
e. Memento
Imagine that you’re creating a text editor app. You decided to let users
undo any operations carried out on the text.

33
3- Design Methods
C. Behavioral Patterns
e. Memento
In Memento, we can create a separate history class to act as the
caretaker.

34
3- Design Methods
C. Behavioral Patterns
e. Memento
Structure

35
3- Design Methods
C. Behavioral Patterns
f. Observer
Observer lets you define a subscription mechanism to notify multiple
objects about any events that happen to the object they’re observing.

36
3- Design Methods
C. Behavioral Patterns
f. Observer
Imagine that you have two types of objects: a Customer and a Store.

The customer could visit

the store every day and 37
check product availability.
3- Design Methods
C. Behavioral Patterns
f. Observer
The Observer pattern suggests that you add a subscription mechanism
to the publisher class.

38
3- Design Methods
C. Behavioral Patterns
f. Observer

If you subscribe to the new offer, you no longer need to go to

the store to check if the offer is available. 39
3- Design Methods
C. Behavioral Patterns
f. Structure

40
3- Design Methods
C. Behavioral Patterns
g. State
State lets an object alter its behavior when its internal state changes. It
appears as if the object changed its class.

41
3- Design Methods
C. Behavioral Patterns
g. State
Imagine that we have a Document class. A document can be in one of
three states: Draft, Moderation and Published.

Possible states and transitions of a

document object. 42
3- Design Methods
C. Behavioral Patterns
g. State
The State suggests that you create new classes for all possible states of
an object.

43
3- Design Methods
C. Behavioral Patterns
g. Structure

44
3- Design Methods
C. Behavioral Patterns
h. Strategy
Strategy lets you define a family of algorithms, put each of them into a
separate class, and make their objects interchangeable.

45
3- Design Methods
C. Behavioral Patterns
h. Strategy
Imagine you decided to create a navigation app for casual travelers.

The code of the navigator became bloated.

46
3- Design Methods
C. Behavioral Patterns
h. Strategy
The Strategy suggests that you take a class that does something specific in a
lot of different ways and extract all of these algorithms into separate classes
called strategies.

47
3- Design Methods
C. Behavioral Patterns
h. Strategy
Structure

48
3- Design Methods
C. Behavioral Patterns
i. Template Method
Template Method defines the skeleton of an algorithm in the superclass
but lets subclasses override specific steps of the algorithm without
changing its structure.

49
3- Design Methods
C. Behavioral Patterns
i. Template Method
Imagine that you’re creating a data mining application that analyzes
corporate documents.

50
3- Design Methods
C. Behavioral Patterns
i. Template Method
The Template Method suggests that you break down an algorithm into a
series of steps, turn these steps into methods, and put a series of calls
inside a single template method.

51
3- Design Methods
C. Behavioral Patterns
i. Template Method
Structure

52
3- Design Methods
C. Behavioral Patterns
j. Visitor
Visitor lets you separate algorithms from the objects on which they
operate.

53
3- Design Methods
C. Behavioral Patterns
j. Visitor
Imagine that your team develops an app which works with geographic
information.

54
3- Design Methods
C. Behavioral Patterns
j. Visitor
The Visitor suggests that you place the new behavior into a separate
class called visitor

55
3- Design Methods
C. Behavioral Patterns
j. Visitor

56
3- Design Methods
C. Behavioral Patterns
j. Visitor
Structure

57
Next

!!!Please join the proposal session and team session, where you will
form groups and discuss any design-related advanced projects ideas.
We will release some ideas and collaboration tools for teamwork project, and
will emphasiz the scoring criteria based on syllabus.

58
 Dr. Ling Bai
(email: [email protected])