Lecture 5 Software Engineering and Design Design Patterns

Design Patterns

Elena Punskaya, elena.punskaya@eng.cam.ac.uk

1

Design Patterns
• Software systems can be very large and very complex.
However, we often find the same architectural structures
occurring repeatedly (with subtle variations), created in
response to commonly recurring problems. These solutions
can be identified and recorded as design patterns
• This course will look at a few of the most common design
patterns with two aims:
- To explain how to use these specific patterns in software designs and in communicating
about software that uses them
- To introduce the language of design patterns and illustrate the more general benefits
from thinking about software construction in this way

• A more comprehensive set can be found in
- Design Patterns: Elements of Reusable Object-Oriented
Software, Erich Gamma et al, Addison-Wesley –
AKA the “Gang of Four” (GoF) book

• which describes 23 design patterns in detail

© 2012 Elena Punskaya
2
Cambridge University Engineering Department

2

Why Patterns?
• While software projects are very diverse, conceptually, there
are many things that are commonly desired
• Can we have a notification when something specific happens?
• Yes, we can! – Observer
• Can we undo the last operation?
• Yes, we can! – Memento and Command
• Can we access all elements of a collection in a sequential
order?
• Yes, we can! – Iterator
• Can we build an effective system that allows us to display and
manipulate data?
• Indeed! – Model View Controller (MVC)
• All modern programming languages implement a lot of these
patterns in their API, e.g. Collections-Iterators

3

3

Structure of Patterns
• Each pattern could be described using a standard format.
• Motivation: outline some specific functionality that we would
like our software to provide.
• Solution options: explore some ways of providing this
functionality and discuss their limitations.
• Optimal solution: present a preferred solution based on a
design pattern.
• Code example: an example of what the design solution looks
like using any programming language.
• Design pattern: discuss the general principle underlying a
good solution and its applicability to other situations. Show
the generic design pattern using UML.
• Disadvantages: discuss the shortcomings of the design
pattern and why you might not want to use it for certain
cases.
• We are just familiarising ourselves so will use light version of
this approach! © 2012 Elena Punskaya
4

4

We want our drawing editor to support grouping and ungrouping
Composite
operations so that a number of shapes can be collected together
• Composite design single entity. used when we want to operate
and treated as a pattern is
on individual items and groups of those in a common way
•
Solution 1
Problem
- We want our drawing editor to support grouping and ungrouping operations so that a
number could add a group member ﬁeld and treated as a indicate which
We of shapes can be collected together into Shape to single entity.
group each shape belongs to (using the number -1 to indicate that
• Solution 1
the object is not in any group).
- We could add a group member field into Shape to indicate which group each shape
belongs to (using the number -1 to indicate that the object is not in any group)

Shape
-group_id: int -1 means not
+draw() in a group
+move()
+get_bbox(): BBox
• Pros – simple, Cons – cannot support nested groups
• Other options? A better approach is to introduce a new class
Pros: - to manage a group of shapes. This new class is a
ShapeGroup
simple
subclass of- Shape and so it preserves the standard Shape
Cons: cannot support nested groups
class interface
5

5

The ShapeGroup class provides a means by which several shapes
can be grouped together into a single entity which behaves in the
Composition
same way as a single shape.
• The ShapeGroup class provides a means by which several
shapes can be grouped together into a single entity which
Most of the ShapeGroup class methods are implemented simply
behavescalling the sameway as a singleof its constituent shapes.
by in the same function for each shape.
• Most of the ShapeGroup class is a only little more complicated
Computing the bounding box methods are implemented
simply by calling the same function for each of its constituent
and can be done in a similar manner.
shapes. Computing the bounding box is only a little bit more
complicated and can be done in a similar manner.
contents
Shape *
+draw()
+move()
+get_bbox(): BBox

Rectangle
ShapeGroup
+draw() for each c in contents{
Ellipse +move() c->draw();
+get_bbox(): BBox }
+add_shape()
+remove_shape()
Picture

find the min and max of x and y
Equation over all c in contents
6

6

Composition
• Composition of objects: each component can be a leaf or a
composite of other components that in turn can each be
either a leaf or a composite

4
!'()'%$%& 4
!"#$%& 5!$67.5'&-
!"#$%&'!()* ,-'/0$#(
+!$#%,-.,-'/0.'(.,-'/0$#(
1
....,-'/02!"#$%&'!()*
3
*$+, !'()'-#&$

!"#$%&'!()* !"#$%&'!()*

• Disadvantages
- The composite pattern is very powerful, but can sometimes be too general. For
example, it is difficult to restrict the objects which can be included in the composite
group.
- Since the Composite class usually has to be extended to provide access to the
individual group members (add/remove), client code must be able to distinguish
between composite objects and non-composite objects.
7

7

This is also sometimes known as the Model-View-Controller (MVC)
pattern. The key idea is that it separates the model (or docu-
Observer
ment (or colour)) from the user interface display of that state.
The model only needs to know that it has a set of observers, not
• Allows multiple objects each maintain a consistent view on the
the details of to observer.
state of the object of interest
observers
Subject * Observer
+Attach(o:Observer) +Update()
+Detach(o:Observer)
+Notify()

for each o in observers {
o->Update();
}

subject
ConcreteSubject 1 ConcreteObserver
+subjectstate: +Update()
+GetState()
+SetState()

• Applies virtually everywhere: s = subject->GetState();
display(s);
- your Twitter followers are your observers
- when you type a search term on Google website, it is observing each keystroke as you
Disadvantages
type and tries to provide a match dynamically
- a camera on the phone can notify your app when amount of computational over-
This pattern can lead to a large a snapshot is available
- a multi-window (multi-view) example consider maintain a synchronisedbar in the
head. For application can gradually moving a slider view
colour selector example. This will generate several set colour
calls to the ColourHandler which in turn will generate 2012 Elena Punskaya
© n times
8
that many update calls to the n colour selectors.
8

Observer
• Disadvantages
• This pattern could lead to a large amount of computational
overhead if not safe-guarded, in particular, if a rate of
notifications is high and the reaction to those updates is a
heavy-load operation.
• For example, consider an augmented reality mobile app
- it requests the camera for a real-time snapshots, when the snapshot is ready, the app
can analyse it – a heavy operation, involving image processing, Internet access and
update of the user interface
- however, while we analysing the snapshot 1, a snapshot 2 can be available already
- need to make sure we ignore “snapshot ready” notifications while analysing

www.layar.com © 2012 Elena Punskaya
9

9

10 year retrospective
• Erich Gamma, a co-author of the “original” (published in
1994) book on Design Patterns – one of the “Gang of Four”
• Interviewed in 2004 to reflect on 10 years of Design Patterns
- Source: http://www.artima.com/lejava/articles/gammadp.html

Erich Gamma: I think patterns as a whole can help people learn object-oriented thinking:
how you can leverage polymorphism, design for composition, delegation, balance
responsibilities, and provide pluggable behavior. Patterns go beyond applying objects to
some graphical shape example, with a shape class hierarchy and some polymorphic draw
method. You really learn about polymorphism when you've understood the patterns. So
patterns are good for learning OO and design in general.

Erich Gamma: One comment I saw in a news group just after patterns started to become
more popular was someone claiming that in a particular program they tried to use all 23
GoF patterns. They said they had failed, because they were only able to use 20. They
hoped the client would call them again to come back again so maybe they could squeeze in
the other 3.

Trying to use all the patterns is a bad thing, because you will end up with synthetic
designs—speculative designs that have flexibility that no one needs. These days software is
too complex. We can't afford to speculate what else it should do. We need to really focus on
what it needs. That's why I like refactoring to patterns. People should learn that when they
have a particular kind of problem or code smell, as people call it these days, they can go to
their patterns toolbox to find a solution.
10

10

Suppose our drawing editor allows us to include many sorts of
shapesDesign Patterns (I) Decorator 3
including rectangles, ellipses, text, equations, pictures etc.
Decorator Pattern
• Decorator Pattern allows to add functionality without
Shape
changing the original class
Problem +draw()
• Problem +move()
Suppose our drawing editor allows us to include many sorts of
+fill()
- Suppose our drawing includingallows usellipses, text, equations, pictures etc.
shapes editor rectangles, to include many sorts of shapes including
rectangles, ellipses, text, equations, pictures etc.
Shape
Rectangle Ellipse Text Equation Picture
+draw()
+move()
+fill()

Now we want to introduce a facility into the editor to allow frames
to be added to arbitrary objects. For example we might want to
put a picture frame around an image, or we might want to frame
- Now we want to introduce a facility into the editor to allow frames to be added to
arbitrary objects. For or some text might wantbox.
an equation example we in a simple to put a picture frame around an image,
Now we want to introduce a facility into the editor to allow frames
or we might want be added to an equation orFor example we might want to
to
to frame arbitrary objects. some text in a simple box
put a pictureSection 1 around an image, or we might want to frame
frame Section 1
an equation or is text insidetext in a simple box.text inside a
This
some a This is
text box that is going text box that is going
to get very full after a to get very full after a
while. I am then while. I am then
going to make the text going to make the text
so smallSection 1 can
that you Section 1 that you can
so small
hardly see it. Really it hardly see it. Really it
This is text inside a This is text inside a
would have box that is going
text
been would have been
text box that is going
better toto get very some a
paste in full after to better to paste in some
get very full after a
real text.
while. I am then while. text.then
real I am
going to make the text going to make the text
so small that you can so small that you can
Text
hardly see it. Really it
would have been
hardly see it. Really it
Text in a frame
would have been
better to paste in some better to paste in some © 2012 Elena Punskaya
real text. real text. 11
Text Text in a frame
11

4 Engineering Part IIA: 3F6 - Software Engineering and Design

Solution 1 Decorator
• Solution 1 want to be able to add frames to objects of all types, we
Since we
- Since we want to be able to add framesShape class to types, we could add an
could add an attribute into the to objects of all specify the type
attribute into the Shape class to specify the type of frame the object has (if any)
of frame the object has (if any).
Shape
-frame_type: int
+draw()
+move()
+fill()

• Pros: Pros: - simpleadequate for casewhere we only only want to
simple and and adequate for case where we
add one special attribute to shapes
want to add one special attribute to shapes
• Cons:Cons: code can become clumsy since, for attribute data
the - wastes storage since all objects contain all example, the
draw method woulditself will become switch for each of the
- the code need a case clumsy since, for example,
possible frame types
the draw method will need to have a case switch
for each ofswitch(frame_type) { types
the possible frame
case NONE: break;
case SIMPLE_FRAME:
void Shape::draw() {
draw_simple_frame();
switch(frame_type) {
break;
case NONE:
...
} break;
case SIMPLE_FRAME: 12
draw_simple_frame(); 12

Design Patterns (I) 5

Solution 2
Decorator
An alternative would be to derive new classes such as Fr Rectangle,
• Solution 2 Fr Picture, Fr Equation etc. to provide framed versions of each
- An alternative shape class: to derive new classes such as Fr Rectangle, Fr Picture, Fr
would be
Equation etc. to provide framed versions of each shape class
Shape
+draw()
+move()
+fill()


Fr_Rectangle Fr_Ellipse Fr_Text Fr_Equation Fr_Picture

• Pros: framing can be restricted to particular shapes, efficient
use of storages since frame data is only allocated when
Pros: - framing can be restricted to particular shapes
actually needed - eﬃcient use of storage since frame data is
only allocated when actually needed
• Cons: huge proliferation in classes, hard to turn decorations
Cons: - huge proliferation in classes
on and off at runtime turn decorations on and oﬀ at run-time
- hard to
• Note that the framed versions inherit exactly the same inter-
Note that the framed versions will will inherit exactly the same
interface asface as their parents. This as it is essential that any client
their parents, is important since it is essential that
using any shape object shape object sees an identical interface.
any client using any sees an identical interface

13

13

Good Solution
Decorator
A much better way to solve this problem is to add a single new
• Optimal solution Shape called FramedShape. Each FramedShape will
subclass of
- A much better way pointer to a Shape objectto add a single new subclass of Shape called
have a to solve this problem is which is the shape contained
FramedShape. the frame.
in Each FramedShape will have a pointer to a Shape object which is the
shape contained in the frame
Shape

+draw()
+ contents
+move()
1
+fill()

Rectangle FramedShape
-frame_type: int
Ellipse +draw()
+move()
+fill()
Text
-draw_frame()

Equation
contents->draw();
Picture draw_frame();

- The addition of this extra class allows us to frame any kind of shape, simply by creating
a FramedShape object and making its contents point to the Shape object that we want
to frame The addition of this extra class allows us to frame any kind of
- We can evenshape, simply by creating a FramedShape object and making its
create a frame around a FramedShape!
contents point to the Shape object that we want to frame. © 2012 Elena Punskaya 14

We can even create a frame around a FramedShape (see example 14

Design Patterns (I) Decorator 7

• Example of This software architecture will giveat runtime structures
the object structure rise to run-time
similar to that shown in the following object diagram:
- Note, Picture p1 has a double frame

adrawing: DrawingEditor

my_shapes[]

r1: Rectangle

p1: Picture
contents
f1: FramedShape p2: Picture

e1: Ellipse
contents
f2: FramedShape q1: Equation

q2: Equation
contents
f3: FramedShape f4: FramedShape

contents
p1: Picture

15
Note that the picture p1 is embedded in two frames.

15

Decorator
Design Patterns (I)

we can derive a number of classes from the Decorator class
• Decorator Pattern provides
handle these separate kinds of added functionality.
a way of adding optional Client
functionality (“decoration”)
to all classes in a hierarchy
without changing the code
component
Component 1
for either the base class or +Operation()

any of the subclasses ComponentType1
+Operation()
Decorator
- Using this pattern, multiple
+Operation()
decorations can be applied to an ComponentType2
object, e.g. we can add a picture +Operation()
frame and scrollbars (in either order)
component->Operation();
to a picture in the drawing editor. If ConcreteDecoratorA
there are several different kinds of -Added_State:
decoration that we want to be able to +Operation()
use, we can derive a number of ConcreteDecoratorB
classes from the Decorator class to -Added_State:
handle these separate kinds of added +Operation() Decorator::Operation();
+AddedBehaviour()
functionality AddedBehaviour();

Disadvantages

If there are not too many kinds of added functionality 16 th
© 2012 Elena Punskaya and
appear fairly commonly, it may be more convenient to use s 16

Decorator
• Disadvantages
• If there are not too many kinds of added functionality and
they appear fairly commonly, it may be more convenient to
use solution 1
• The decorator pattern can make it hard to resolve the identity
of the objects we are dealing with since the decorator is a
distinct object from the component it decorates. In a running
system, this can result in long chains of small objects that
point to each other, making the software hard to debug
• Consider

ScrollableShape FramedShape ShapeWithShadow ShapeWithReflection ShapeWithTransparency

• Not every feature should become a decorator class!
17

17

Memento
• Memento Pattern allows us to track the state of the object
externally, without knowing all details of that state
• Problem
- A drawing editor is not very useful if it does not support Undo/Redo functionality

• Solution 1
- each action makes a copy of the object before applying changes and saves it
- when Undo is called, the editor substitutes the current reference to the object with a
reference to the previously saved copy of the object
- e.g. before calling ChangeColour(Red) the editor makes a copy of the Shape as
ShapeBeforeTheColourChange, then to Undo, it will “forget” the reference to the Shape
and instead change it to the ShapeBeforeTheColourChange
- What about Redo?

• Pros: the history is maintained without knowing what
changed inside the object
• Cons: expensive – each action makes a full copy of the whole
object

18

18

Memento
• Optimal solution
- encapsulate the change into an object of the dedicated class – Memento
- make the Editor to request a Memento from the Shape before applying any changes
- make the Shape responsible for creating and restoring “Mementos”

Shape Memento *
createMemento getColour Editor
setMemento creates setColour keeps history

aCircle aMemento theEditor

createMemento

create

setColour(currentColour)

setColour(newColour)

setMemento

getColour undo

19

19

Memento
• Memento Design pattern allows to capture and externalise
object’s internal state without breaking encapsulation

Originator Memento *
createMemento getState Caretaker
setMemento creates setState history

- Using this pattern, the Caretaker decides when to request a Memento from the
Originator
- the Originator knows what data should be saved for restoring its State later and can
create a Memento and return it to the Caretaker
- the Caretaker can keep an ordered history of Mementos

• Disadvantages
- Originator’s state could include a lot of data (probably, the overall design needs a
review)
- When managing a multiple number of Originators, need to maintain which Memento is
for which Originator
- Both can lead to performance degrading, consider:
‣ Adobe Photoshop can support up to 1000 history states (Undo’s) but limits it to 20(!) states by default
‣ Before Photoshop v.5.0 (1998) only a single level of Undo was available
20

20

Design Patterns Summary
• When thinking of ways of implementing functionality, it helps
to check whether other designers/developers have already
come across a similar problem? If yes, then maybe there is
already a “recommended” way of solving it
• Don’t re-invent the wheel – use established patterns
• Helps to keep the implementation design (code) extensible
(“design for change”) and easy to understand
• There are many sources to get familiar with patterns and
concrete implementations in specific languages/application
types:

• However, using patterns != good design
- it is NOT about “we implemented 15 patterns in our app, it must be good” or “this is a
simple problem, but I am sure I can make it more complicated and then use design
patterns to solve it – everyone will see then how clever I am”
21

21

“Am I Bothered?”
• Job listings that mention “design patterns”

jobserve.co.uk careers.stackoverflow.com

• 5,430 on Jobserve and 462 on Stackoverflow

22

22

Writing Good Code in C++
• Bjarne Stroustrup, Distinguished University Professor, Texas
A&M University; Visiting Professor, Cambridge University
• Wednesday 15 February 2012, 16:00-17:30
• Lecture Theatre 1, Computer Laboratory.
• Bjarne Stroustrup is the designer and original implementer of
C++
• Details and registration:
http://talks.cam.ac.uk/talk/index/35847
Abstract: We know how to write bad code: Litter our programs with casts, macros,
pointers, naked new and deletes, and complicated control structures. Alternatively (or in
addition), obscure every design decision in a mess of deeply nested abstractions using the
latest object-oriented programming and generic programming tricks. For good measure,
complicate our algorithms with interesting special cases. Such code is incomprehensible,
unmaintainable, usually inefficient, and not uncommon.
But how do we write good code? What principles, techniques, and idioms can we exploit to
make it easier to produce quality code? I will make an argument for type-rich interfaces,
compact data structures, integrated resource management and error handling, and highly-
structured algorithmic code. I will illustrate my ideas and motivate my guidelines with a few
idiomatic code examples..

23

23

Lecture 5 Software Engineering and Design Design Patterns

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Lecture 5 Software Engineering and Design Design Patterns (20)

More from op205 (20)

Recently uploaded (20)

Lecture 5 Software Engineering and Design Design Patterns