1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya [email protected] /...

126
1 CENG CENG 217 217 Object Oriented Design Object Oriented Design Lecture Lecture 5 5 Doç. Dr. Halûk Gümüşkaya [email protected] / [email protected] http://www.gumuskaya.com Computing Engineering Department Fatih University Monday, June 27, 2022

Transcript of 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya [email protected] /...

Page 1: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

1

CENG CENG 217217 Object Oriented DesignObject Oriented Design Lecture Lecture 55

CENG CENG 217217 Object Oriented DesignObject Oriented Design Lecture Lecture 55

Doç. Dr. Halûk Gümüş[email protected] / [email protected]

http://www.gumuskaya.com

Computing Engineering DepartmentFatih University

Wednesday, April 19, 2023

Page 2: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

2

Patterns and GUI Programming

Page 3: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

3

1. The ITERATOR as a Pattern2. The Pattern Concept and Introduction to GoF Design

Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Lecture Outline

Page 4: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

4

List Iterators

LinkedList<String> list = . . .;ListIterator<String> iterator = list.listIterator();while (iterator.hasNext()){ String current = iterator.next(); . . .}

Why iterators?

Classical List Data Structure Traverse links directly Link currentLink = list.head;while (currentLink != null){ Object current = currentLink.data; currentLink = currentLink.next;}

Exposes implementation Error-prone

Page 5: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

5

High-Level View of Data Structures

Queue

Array with random access

List ???

Page 6: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

6

List with Cursor

for (list.reset(); list.hasNext(); list.next()){ Object x = list.get(); . . .}

Disadvantage: Only one cursor per list , debugging!!! Iterator is superior concept

Page 7: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

7

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Page 8: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

8

What is a Pattern? History: Architectural Patterns

• Current use comes from the work of the architect Christopher Alexander.

• Alexander studied ways to improve the process of designing buildings and urban areas.

• He formulated over 250 patterns for architectural designs.

C. Alexander et al., A Pattern Language: Towns, Buildings, Construction, Oxford University Press, 1977.

• Patterns can be applied to many different areas of human endeavor, including software development…

There are patterns of success, and patterns of failure…

Page 9: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

9

The Pattern Concept: Context, Problem and Solution

• “Each pattern is a three-part rule, which expresses a relation between a certain context, a problem and a solution.”

• Hence, the common definition of a pattern: “A solution to a problem in a context.”

• Each pattern has

• a short name

• a brief description of the context

• a lengthy description of the problem

• a prescription for the solution

Page 10: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

10

Short Passages Pattern

Context

"...Long, sterile corridors set the scene for everything bad about modern architecture..."

Problem

a lengthy description of the problem, including• a depressing picture • issues of light and furniture • research about patient

anxiety in hospitals • research that suggests that

corridors over 50 ft are considered uncomfortable

Page 11: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

11

Short Passages Pattern

Solution Keep passages short. Make them as much like rooms as possible,

with carpets or wood on the floor, furniture, bookshelves, beautiful windows. Make them generous in shape and always give them plenty of light; the best corridors and passages of all are those which have windows along an entire wall.

Page 12: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

12

Why Patterns?

• “Designing object-oriented software is hard and designing reusable object-oriented software is even harder.” - Erich Gamma

• Experienced designers reuse solutions that have worked in the past.

• Well-structured object-oriented systems have recurring patterns of classes and objects.

• Knowledge of the patterns that have worked in the past allows a designer to be more productive and the resulting designs to be more flexible and reusable.

Page 13: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

13

Benefits of Design Patterns

• Capture expertise and make it accessible to non-experts in a standard form

• Facilitate communication among developers by providing a common language

• Make it easier to reuse successful designs and avoid alternatives that diminish reusability

• Facilitate design modifications

• Improve design documentation

• Improve design understandability

Page 14: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

14

Drawbacks of Design Patterns

• Patterns do not lead to direct code reuse

• Patterns are deceptively simple

• Teams may suffer from pattern overload

• Patterns are validated by experience and discussion rather than by automated testing

• Integrating patterns into a software development process is a human-intensive activity

Page 15: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

15

Software Patterns History

• 1987 - Cunningham and Beck used Alexander’s ideas to develop a small pattern language for Smalltalk

• 1990 - The Gang of Four (Gamma, Helm, Johnson and Vlissides) begin work compiling a catalog of design patterns

• 1991 - Bruce Anderson gives first Patterns Workshop at OOPSLA

• 1993 - Kent Beck and Grady Booch sponsor the first meeting of what is now known as the Hillside Group

• 1994 - First Pattern Languages of Programs (PLoP) conference

• 1995 - The Gang of Four (GoF) publish the Design Patterns book

Page 16: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

16

GoF (Gang of Four) Design Patterns

• Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides (Gang of Four – GoF),

Design Patterns: Elements of Reusable Object-Oriented Software, Addison Wesley, 1995.

• There are 23 design patterns given in this book. They are classified into 3 purposes: Creational, Structural, and Behavioral.

Page 17: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

17

GoF Classification Of Design Patterns

Page 18: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

18

GoF Essential Elements Of Design Patterns

Page 19: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

19

GoF Pattern Template

Page 20: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

20

GoF Pattern Template (Continued)

Page 21: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

21

GoF Pattern Template (Continued)

Page 22: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

22

GoF Notation

• The GoF book uses the Object Modeling Technique (OMT) notation for class and object diagrams:

Notational issues Attributes come after the Operations Associations are called acquaintances Multiplicities are shown as solid circles Inheritance shown as triangle Dashed line: Instantiation Association (Class can instantiate

objects of associated class) (In UML it denotes a dependency UML Note is called Dogear box (connected by dashed line to

class operation): Pseudo-code implementation of operation

Page 23: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

23

GoF Notation Example

Page 24: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

24

UML Notation for Design Patterns

• We will use UML in design patterns.

Page 25: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

25

Creational Patterns (5 patterns)

• Factory Method (OODP Chp10)

– Method in a derived class creates associates

• Abstract Factory

– Factory for building related objects

• Builder

– Factory for building complex objects incrementally

• Prototype

– Factory for cloning new instances from a prototype

• Singleton (OODP Chp10)

– Factory for a singular (sole) instance

Page 26: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

26

Structural Patterns (7 patterns)

• Adapter (OODP Chp10)

– Translator adapts a server interface for a client

• Bridge

– Abstraction for binding one of many implementations

• Composite (OODP Chp5)

– Structure for building recursive aggregations

• Decorator (OODP Chp5)

– Decorator extends an object transparently

• Facade

– Facade simplifies the interface for a subsystem

• Flyweight

– Many fine-grained objects shared efficiently

• Proxy (OODP Chp10)

– One object approximates another

Page 27: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

27

Behavioral Patterns (11 patterns)

• Chain of Responsibility

– Request delegated to the responsible service provider

• Command (OODP Chp10)

– Request as first-class object

• Interpreter

– Language interpreter for a small grammar

• Iterator (OODP Chp5)

– Aggregate elements are accessed sequentially

• Mediator

– Mediator coordinates interactions between its associates

• Memento

– Snapshot captures and restores object states privately

Page 28: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

28

Behavioral Patterns (continued)

• Observer (OODP Chp5)

– Dependents update automatically when a subject changes

• State

– Object whose behavior depends on its state

• Strategy (OODP Chp5)

– Abstraction for selecting one of many algorithms

• Template Method

– Algorithm with some steps supplied by a derived class

• Visitor (OODP Chp10)

– Operations applied to elements of an heterogeneous object

structure

Page 29: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

29

Relationships in GoF Patterns

Page 30: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

30

An Example: Iterator Pattern

Context

1. An aggregate object contains element objects

2. Clients need access to the element objects

3. The aggregate object should not expose its internal structure

4. Multiple clients may want independent access

Solution

1. Define an iterator that fetches one element at a time

2. Each iterator object keeps track of the position of the next element

3. If there are several aggregate/iterator variations, it is best if the aggregate and iterator classes realize common interface types. Then the client only needs to know the interface types, not the concrete classes.

Page 31: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

31

Iterator Pattern

Page 32: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

32

Iterator Pattern

Names in pattern are examples

Names differ in each occurrence of pattern

Name in Design Pattern Actual Name (linked lists)

Aggregate List

ConcreteAggregate LinkedList

Iterator ListIterator

ConcreteIterator anonymous class implementing ListIterator

createIterator() listIterator()

next() next()

isDone() opposite of hasNext()

currentItem() return value of hasNext()

Page 33: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

33

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Page 34: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

34

Model/View/Controller

Some programs have multiple editable views

Example: HTML Editor • WYSIWYG view• structure view • source view

Editing one view updates the other

Updates seem instantaneous

Page 35: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

35

HTML Editor: MS FrontPage WYSIWYG view

Page 36: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

36

MS FrontPage Source View

Page 37: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

37

MS FrontPage Structure (Navigation) View

Page 38: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

38

Windows

An example of MVC architecture: The “model” is the filename dp3.ppt. One “view” is a window titled CENG 534 Design Patterns, which displays the contents of a folder containing the file dp3.ppt. The other “view” is window called dp3.ppt Properties, which displays information related to the file. If the file name is changed, both views are updated by the “controller”.

Page 39: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

39

Model/View/Controller

Model: data structure, no visual representation

Views: visual representations

Controllers: user interaction

Views/controllers update model

Model tells views that data has changed

Views redraw themselves

MVC is an Architectural Pattern and is not a GoF Pattern. But it is based on the Observer (Model/View) GoF pattern.

Page 40: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

40

Observer Pattern

Model notifies views when something interesting happens Button notifies action listeners when something interesting

happens

Views attach themselves to model in order to be notified The View(s) display the Model and is notified (via a

subscribe/notify protocol) whenever the Model is changed. Action listeners attach themselves to button in order to be

notified

Generalize: Observers attach themselves to subject Observer is a behavioral GoF Pattern.

Page 41: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

41

Observer Pattern

Context

1. An object, called the subject, is source of events

2. One or more observer objects want to be notified when such an event occurs.

Solution

1. Define an observer interface type. All concrete observers implement it.

2. The subject maintains a collection of observers.

3. The subject supplies methods for attaching and detaching observers.

4. Whenever an event occurs, the subject notifies all observers.

Page 42: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

42

Observer Pattern

Java 1.1 introduced a new GUI event model based on the Observer Pattern

GUI components which can generate GUI events are called event sources.

Objects that want to be notified of GUI events are called event (action) listeners.

Event generation is also called firing the event. Comparison to the Observer Pattern:

Subject => event source (Example: JButton)Observer => Action ListenerConcreteObserver => Action Listener implementation

For an event listener to be notified of an event, it must first register with the event source.

Page 43: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

43

Names in Observer Pattern

Name in Design Pattern Actual Name (Swing buttons)

Subject JButton

Observer ActionListener

ConcreteObserver the class that implements the ActionListener interface type

attach() addActionListener()

notify() actionPerformed()

Page 44: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

44

Observer Pattern (From GoF Books)

Intent Define a one-to-many dependency between objects so that when one

object changes state, all its dependents are notified and updated automatically.

Also Known As Dependents, Publish-Subscribe, Model-View.

Motivation The need to maintain

consistency between related objects without making classes tightly coupled.

Page 45: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

45

Applicability

Use the Observer pattern in any of the following situations:

When an abstraction has two aspects, one dependent on the other. Encapsulating these aspects in separate objects lets you vary and reuse them independently.

When a change to one object requires changing others

When an object should be able to notify other objects without making assumptions about those objects

Page 46: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

46

Structure (given in GoF DP Book)

Page 47: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

47

The Elements of Observer Pattern

Participants Subject

• Keeps track of its observers• Provides an interface for attaching and detaching Observer objects

Observer• Defines an interface for update notification

ConcreteSubject• The object being observed• Stores state of interest to ConcreteObserver objects• Sends a notification to its observers when its state changes

ConcreteObserver• The observing object• Stores state that should stay consistent with the subject's• Implements the Observer update interface to keep its state consistent

with the subject's

Page 48: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

48

Consequences

Benefits Minimal coupling between the Subject and the Observer

• Can reuse subjects without reusing their observers and vice versa• Observers can be added without modifying the subject• All subject knows is its list of observers• Subject does not need to know the concrete class of an observer,

just that each observer implements the update interface• Subject and observer can belong to different abstraction layers

Support for event broadcasting• Subject sends notification to all subscribed observers• Observers can be added/removed at any time

Liabilities Possible cascading of notifications

• Observers are not necessarily aware of each other and must be careful about triggering updates

Simple update interface requires observers to deduce changed item

Page 49: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

49

Sample Code, Known Uses and Related Patterns

Sample Code We'll see some Java soon!

Known Uses Smalltalk Model/View/Controller user interface framework

• Model = Subject• View = Observer• Controller is whatever object changes the state of the subject

Related Patterns Mediator

• To encapsulate complex update semantics

Page 50: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

50

Using Design Patterns Templates in Together for Eclipse Architect 2006

Use Class By Templete or choose any class on the diagram and apply one of GoF Design Patterns:

Page 51: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

51

Select Template and Specify Parameters

Page 52: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

52

Observers and Observables Created by Together

Create Pattern Links: unchecked

Page 53: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

53

Observers and Observables Created by Together

Create Pattern Links: Checked

Page 54: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

54

Files Created by Together: Subject: Vehicle.java

import java.util.ArrayList;import java.util.Iterator;

/** * @role __Subject */

public class Vehicle {

private ArrayList observers;

/** * @link * @shapeType PatternLink * @pattern gof.Observer * @supplierRole Abstract Observer */ /* # private TrafficControl lnkTrafficControl; */

public void attach(TrafficControl observer) { observers.add(observer); }

public void detach(TrafficControl observer) { observers.remove(observer); }

public void notifyObservers() { Iterator it = observers.iterator(); while (it.hasNext()) { ((TrafficControl) it.next()).update(this); } }}

Page 55: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

55

Concrete Subjects: Car, Truck, and Van/** * Stores state of interest to ConcreteObserver objects. * Sends a notification to its observers when its state changes. */

public class Car extends Vehicle {}

/** * Stores state of interest to ConcreteObserver objects. * Sends a notification to its observers when its state changes. */

public class Truck extends Vehicle {}

/** * Stores state of interest to ConcreteObserver objects. * Sends a notification to its observers when its state changes. */

public class Van extends Vehicle {}

Page 56: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

56

Traffic Control Interface and Concrete Observers

/** * @role __Observer */

public interface TrafficControl {

/** * @link * @shapeType PatternLink * @pattern gof.Observer * @supplierRole Abstract Subject */ /*# private Vehicle lnkVehicle;*/

void update(Vehicle subject);}

/** * Implements the Observer updating interface to keep * its state consistent with the subject's. */

public class HighwayPatrol implements TrafficControl {

public void update(Vehicle subject) { //put your code here }}

/** * Implements the Observer updating interface to keep * its state consistent with the subject's. */

public class Sheriff implements TrafficControl {

public void update(Vehicle subject) { //put your code here }}

Page 57: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

57

Java Implementation of Observer Pattern

We could implement the Observer pattern “from scratch” in Java But Java provides the Observable/Observer classes as built-in

support for the Observer pattern The java.util.Observable class is the base Subject class.

Any class that wants to be observed extends this class.• Provides methods to add/delete observers• Provides methods to notify all observers• A subclass only needs to ensure that its observers are notified in

the appropriate mutators• Uses a Vector for storing the observer references

The java.util.Observer interface is the Observer interface. It must be implemented by any observer class.

Page 58: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

58

The java.util.Observable Class

public Observable()• Construct an Observable with zero Observers

public synchronized void addObserver(Observer o)• Adds an observer to the set of observers of this object

public synchronized void deleteObserver(Observer o)• Deletes an observer from the set of observers of this object

protected synchronized void setChanged()• Indicates that this object has changed

protected synchronized void clearChanged()• Indicates that this object has no longer changed, or that it has

already notified all of its observers of its most recent change. This method is called automatically by notifyObservers().

Page 59: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

59

The java.util.Observable Class

public synchronized boolean hasChanged()• Tests if this object has changed. Returns true if setChanged() has been

called more recently than clearChanged() on this object; false otherwise.

public void notifyObservers(Object arg)• If this object has changed, as indicated by the hasChanged() method,

then notify all of its observers and then call the clearChanged() method to indicate that this object has no longer changed. Each observer has its update() method called with two arguments: this observable object and the arg argument. The arg argument can be used to indicate which attribute of the observable object has changed.

public void notifyObservers()• Same as above, but the arg argument is set to null. That is, the observer

is given no indication what attribute of the observable object has changed.

Page 60: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

60

The java.util.Observer Interface

public abstract void update(Observable o, Object arg)• This method is called whenever the observed object is changed.

An application calls an observable object's notifyObservers method to have all the object's observers notified of the change.

• Parameters:

o - the observable object

arg - an argument passed to the notifyObservers method

Page 61: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

61

Observable/Observer Example

Page 62: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

62

ConcreteSubject.java

import java.util.Observable;

/** A subject to observe! */public class ConcreteSubject extends Observable { private String name; private float price;

public ConcreteSubject(String name, float price) { this.name = name; this.price = price; System.out.println("ConcreteSubject created: " + name + " at " + price); }

public String getName() { return name; }

public float getPrice() { return price; }

public void setName(String name) { this.name = name; setChanged(); notifyObservers(name); }

public void setPrice(float price) { this.price = price; setChanged(); notifyObservers(new Float(price)); }}

Page 63: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

63

Name and Price Observersimport java.util.Observer;import java.util.Observable;// An observer of name changes.public class NameObserver implements Observer { private String name;

public NameObserver() { name = null; System.out.println("NameObserver created: Name is " + name); }

public void update(Observable obj, Object arg) { if (arg instanceof String) { name = (String)arg; System.out.println("NameObserver: Name changed to " + name); } }}

import java.util.Observer;import java.util.Observable;

// An observer of price changes.public class PriceObserver implements Observer { private float price;

public PriceObserver() { price = 0; System.out.println("PriceObserver created: Price is " + price); }

public void update(Observable obj, Object arg) { if (arg instanceof Float) { price = ((Float)arg).floatValue(); System.out.println("PriceObserver: Price changed to " + price); } }}

Page 64: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

64

TestObservers.java

import java.util.Observer;import java.util.Observable;

// Test program for ConcreteSubject, NameObserver and PriceObserverpublic class TestObservers { public static void main(String args[]) {

// Create the Subject and Observers. ConcreteSubject s = new ConcreteSubject("Corn Pops", 1.29f); NameObserver nameObs = new NameObserver(); PriceObserver priceObs = new PriceObserver();

// Add those Observers! s.addObserver(nameObs); s.addObserver(priceObs);

// Make changes to the Subject. s.setName("Frosted Flakes"); s.setPrice(4.57f); s.setPrice(9.22f); s.setName("Surge Crispies"); }}

Page 65: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

65

A Simple MVC Example: CounterGuiimport java.awt.event.*;import java.awt.*;

public class CounterGui extends Frame { private int counter = 0; // Model! private TextField tf = new TextField(10); // View.

public CounterGui(String title) { super(title); Panel tfPanel = new Panel(); tf.setText("0"); tfPanel.add(tf); add("North", tfPanel); Panel buttonPanel = new Panel();

Button incButton = new Button("Increment"); incButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { counter++; tf.setText(counter + ""); } }); buttonPanel.add(incButton);

Button decButton = new Button("Decrement"); decButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { counter--; tf.setText(counter + ""); } }); buttonPanel.add(decButton);

Button exitButton = new Button("Exit"); exitButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.exit(0); } }); buttonPanel.add(exitButton);

add("South", buttonPanel);

addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } }); }

public static void main(String[] argv) { CounterGui cg = new CounterGui("CounterGui"); cg.setSize(300, 100); cg.setVisible(true); }}

Where is the controller in this example??

The controllers are the instances of the anonymous classes which handle the button presses.

Page 66: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

66

Account System based on MVC Architecture

from Advanced Java 2 Platform, How to Program, H. M. Deitel)

Page 67: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

67

The Class Diagrams of the Account System

Page 68: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

68

Sequence of Events

:Controller

:AccountTextView

:Model

2.User updates accounts

1. Views subscribe to event

3. Request account change in model

4. Notify subscribers5. Updated views

:AccountBarGrapView

:AssetPieChartView

Page 69: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

69

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Page 70: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

70

Layout Managers

User interfaces made up of components Components placed in containers Container needs to arrange components Swing doesn't use hard-coded pixel coordinates

Advantages: • Can switch "look and

feel" • Can internationalize

strings Layout manager controls

arrangement

Page 71: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

71

Using Predefined Layout Managers

There are several built-in layout managers in Java: FlowLayout: left to right, start new row when full BoxLayout: left to right or top to bottom BorderLayout: 5 areas, Center, North, South, East, West GridLayout: grid, all components have same size GridBagLayout: complex, like HTML table

Page 72: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

72

Layout Managers

Page 73: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

73

Layout Managers

Set layout manager

JPanel keyPanel = new JPanel();

keyPanel.setLayout(new GridLayout(4, 3));

Add components

for (int i = 0; i < 12; i++)

keyPanel.add(button[i]);

Page 74: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

74

Voice Mail System GUI

Same backend as text-based system Only Telephone class changes Buttons for keypad Text areas for microphone, speaker

Page 75: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

75

Voice Mail System GUI

Arrange keys in panel with GridLayout:

JPanel keyPanel = new JPanel(); keyPanel.setLayout(new GridLayout(4, 3)); for (int i = 0; i < 12; i++) { JButton keyButton = new JButton(...);

keyPanel.add(keyButton); keyButton.addActionListener(...);}

Page 76: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

76

Voice Mail System GUI

Panel with BorderLayout for speaker

JPanel speakerPanel = new JPanel(); speakerPanel.setLayout(new BorderLayout()); speakerPanel.add(new JLabel("Speaker:"),

BorderLayout.NORTH);

speakerField = new JTextArea(10, 25); speakerPanel.add(speakerField, BorderLayout.CENTER);

Page 77: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

77

Voice Mail System GUI

Put speaker, keypads, and microphone panel into content pane Content pane already has BorderLayout Ch5/mailgui/Telephone.java

Page 78: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

78

Telephone.java (1)import java.awt.*;import java.awt.event.*;import javax.swing.*;// Presents a phone GUI for the voice mail system.public class Telephone{ // Constructs a telephone with a speaker, keypad, and microphone. public Telephone() { JPanel speakerPanel = new JPanel(); speakerPanel.setLayout(new BorderLayout()); speakerPanel.add(new JLabel("Speaker:"), BorderLayout.NORTH); speakerField = new JTextArea(10, 25); speakerPanel.add(speakerField, BorderLayout.CENTER);

String keyLabels = "123456789*0#"; JPanel keyPanel = new JPanel(); keyPanel.setLayout(new GridLayout(4, 3)); for (int i = 0; i < keyLabels.length(); i++) { final String label = keyLabels.substring(i, i + 1); JButton keyButton = new JButton(label); keyPanel.add(keyButton); keyButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { connect.dial(label); } }); } …..

Page 79: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

79

Telephone.java (2)

final JTextArea microphoneField = new JTextArea(10,25);

JButton speechButton = new JButton("Send speech"); speechButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { connect.record(microphoneField.getText()); microphoneField.setText(""); } });

JButton hangupButton = new JButton("Hangup"); hangupButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { connect.hangup(); } });

…..

Page 80: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

80

Telephone.java (3) JPanel buttonPanel = new JPanel(); buttonPanel.add(speechButton); buttonPanel.add(hangupButton);

JPanel microphonePanel = new JPanel(); microphonePanel.setLayout(new BorderLayout()); microphonePanel.add(new JLabel("Microphone:"), BorderLayout.NORTH); microphonePanel.add(microphoneField, BorderLayout.CENTER); microphonePanel.add(buttonPanel, BorderLayout.SOUTH);

JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.add(speakerPanel, BorderLayout.NORTH); frame.add(keyPanel, BorderLayout.CENTER); frame.add(microphonePanel, BorderLayout.SOUTH);

frame.pack(); frame.setVisible(true); }

// Give instructions to the mail system user. public void speak(String output) { speakerField.setText(output); }

public void run(Connection c) { connect = c; } private JTextArea speakerField; private Connection connect;}

Page 81: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

81

Implementing a Custom Layout Manager

It is not a difficult to write your own layout manager Form layout Odd-numbered components right aligned Even-numbered components left aligned Implement LayoutManager interface type

Page 82: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

82

The LayoutManager Interface Type

public interface LayoutManager { void layoutContainer(Container parent);

Dimension minimumLayoutSize(Container parent); Dimension preferredLayoutSize(Container parent); void addLayoutComponent(String name, Component comp); void removeLayoutComponent(Component comp);

}

Ch5/layout/FormLayout.java Ch5/layout/FormLayoutTester.java

Note: Can use GridBagLayout to achieve the same effect

Page 83: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

83

FormLayout.java (1)import java.awt.*;

/** A layout manager that lays out components along a central axis*/public class FormLayout implements LayoutManager{ public Dimension preferredLayoutSize(Container parent) { Component[] components = parent.getComponents(); left = 0; right = 0; height = 0; for (int i = 0; i < components.length; i += 2) { Component cleft = components[i]; Component cright = components[i + 1];

Dimension dleft = cleft.getPreferredSize(); Dimension dright = cright.getPreferredSize(); left = Math.max(left, dleft.width); right = Math.max(right, dright.width); height = height + Math.max(dleft.height, dright.height); } return new Dimension(left + GAP + right, height); } public Dimension minimumLayoutSize(Container parent) { return preferredLayoutSize(parent); }

…..

Page 84: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

84

FormLayout.java (2)

public void layoutContainer(Container parent) { preferredLayoutSize(parent); // Sets left, right Component[] components = parent.getComponents(); Insets insets = parent.getInsets(); int xcenter = insets.left + left; int y = insets.top;

for (int i = 0; i < components.length; i += 2) { Component cleft = components[i]; Component cright = components[i + 1];

Dimension dleft = cleft.getPreferredSize(); Dimension dright = cright.getPreferredSize(); int height = Math.max(dleft.height, dright.height); cleft.setBounds(xcenter - dleft.width, y + (height - dleft.height) / 2, dleft.width, dleft.height);

cright.setBounds(xcenter + GAP, y + (height - dright.height) / 2, dright.width, dright.height); y += height; } }

public void addLayoutComponent(String name, Component comp) {}

public void removeLayoutComponent(Component comp) {}

private int left; private int right; private int height; private static final int GAP = 6;}

Page 85: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

85

FormLayoutTester.javaimport java.awt.*;import javax.swing.*;

public class FormLayoutTester{ public static void main(String[] args) { JFrame frame = new JFrame(); frame.setLayout(new FormLayout());

frame.add(new JLabel("Name")); frame.add(new JTextField(15));

frame.add(new JLabel("Address")); frame.add(new JTextField(20));

frame.add(new JLabel("City")); frame.add(new JTextField(10));

frame.add(new JLabel("State")); frame.add(new JTextField(2));

frame.add(new JLabel("ZIP")); frame.add(new JTextField(5));

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); }}

Page 86: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

86

Strategy Pattern

Pluggable strategy for layout management Layout manager object responsible for executing concrete

strategy Generalizes to Strategy Design Pattern The strategy pattern applies whenever you want to allow a

client to support an algorithm. It is a behavioral pattern for selecting one of many algorithms

Page 87: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

87

Strategy Pattern

Solution

1. Define an interface type that is an abstraction for the algorithm

2. Actual strategy classes realize this interface type.

3. Clients can supply strategy objects

4. Whenever the algorithm needs to be executed, the context class calls the appropriate methods of the strategy object

Context

1. A class can benefit from different variants for an algorithm

2. Clients sometimes want to replace standard algorithms with custom versions

Page 88: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

88

Strategy Pattern Example: Layout Management

Name in Design Pattern Actual Name (layout management)

Context Container

Strategy LayoutManager

ConcreteStrategy a layout manager such as BorderLayout

doWork() a method such as layoutContainer

The relationships between the names in the Strategy Pattern and the layout management manifestation:

Page 89: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

89

Strategy Pattern Example: Sorting

Name in Design Pattern Actual Name (sorting)

Context Collections

Strategy Comparator

ConcreteStrategy a class that implements Comparator

Other manifestation: Comparators

Comparator<Country> comp = new CountryComparatorByName();Collections.sort(countries, comp);

Page 90: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

90

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Page 91: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

91

Containers and Components

Containers collect GUI components Sometimes, want to add a container to another container Container should be a component Composite design pattern Composite method typically invoke component methods E.g. Container.getPreferredSize invokes getPreferredSize of components

It is a structural pattern for building recursive aggregations

Page 92: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

92

Composite Pattern

Context

1. Primitive objects can be combined to composite objects

2. Clients treat a composite object as a primitive object

Solution

1. Define an interface type that is an abstraction for the primitive objects

2. Composite object collects primitive objects

3. Composite and primitive classes implement same interface type.

4. When implementing a method from the interface type, the composite class applies the method to its primitive objects and combines the results

Page 93: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

93

Composite Pattern Example in Java

Name in Design Pattern Actual Name (AWT components)

Primitive Component

Composite Container

Leaf a component without children (e.g. JButton)

method() a method of Component (e.g.getPreferredSize)

Page 94: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

94

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern7. How to Recognize Patterns

8. Putting Patterns to Work

Page 95: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

95

Scroll Bars

Scroll bars can be attached to components Approach #1: Component class can turn on scroll bars Approach #2: Scroll bars can surround component

JScrollPane pane = new JScrollPane(component);

Swing uses approach #2 JScrollPane is again a component It is a structural pattern for extending an object transparently

Page 96: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

96

Decorator Pattern - Context

Context

1. Component objects can be decorated (visually or behaviorally enhanced)

2. The decorated object can be used in the same way as the undecorated object

3. The component class does not want to take on the responsibility of the decoration

4. There may be an open-ended set of possible decorations

Page 97: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

97

Decorator Pattern - Solution

Solution

1. Define an interface type that is an abstraction for the component

2. Concrete component classes realize this interface type.

3. Decorator classes also realize this interface type.

4. A decorator object manages the component object that it decorates

5. When implementing a method from the component interface type, the decorator class applies the method to the decorated component and combines the result with the effect of the decoration.

Page 98: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

98

Decorator Pattern Example: Scroll Bars

Name in Design Pattern Actual Name (scroll bars)

Component Component

ConcreteComponent JTextArea

Decorator JScrollPane

method() a method of Component (e.g. paint)

Page 99: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

99

Decorator Pattern Example: Streams

InputStreamReader reader = new InputStreamReader(System.in); BufferedReader console = new BufferedReader(reader);

BufferedReader takes a Reader and adds buffering Result is another Reader: Decorator pattern Many other decorators in stream library, e.g. PrintWriter

Name in Design Pattern Actual Name (input streams)

Component Reader

ConcreteComponent InputStreamReader

Decorator BufferedReader

method() read

Page 100: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

100

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Page 101: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

101

How to Recognize Patterns

Look at the intent of the pattern E.g. COMPOSITE has different intent than DECORATOR Remember common uses (e.g. STRATEGY for layout

managers) Not everything that is strategic is an example of STRATEGY

pattern

Use context and solution as "litmus test"

Page 102: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

102

Litmus Test

Add border to Swing component

Border b = new EtchedBorder();

component.setBorder(b);

Undeniably decorative Is it an example of DECORATOR?

Page 103: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

103

Litmus Test

1. Component objects can be decorated (visually or behaviorally enhanced) PASS

2. The decorated object can be used in the same way as the undecorated object PASS

3. The component class does not want to take on the responsibility of the decoration FAIL--the component class has setBorder method

4. There may be an open-ended set of possible decorations

Page 104: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

104

1. The ITERATOR as a Pattern

2. The Pattern Concept and Introduction to GoF Design Patterns

3. The OBSERVER Pattern

4. Layout Managers and the STRATEGY Pattern

5. Components, Containers, and the COMPOSITE Pattern

6. Scroll Bars and the DECORATOR Pattern

7. How to Recognize Patterns

8. Putting Patterns to Work

Page 105: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

105

Putting Patterns to Work

Invoice contains line items Line item has description, price Interface type LineItem: Ch5/invoice/LineItem.java Product is a concrete class that implements this interface: Ch5/invoice/Product.java

Page 106: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

106

LineItem.java and Product.java/** A line item in an invoice.*/public interface LineItem{ /** Gets the price of this line item. @return the price */ double getPrice(); /** Gets the description of this line item. @return the description */ String toString();}

/** A product with a price and description.*/public class Product implements LineItem{ /** Constructs a product. @param description the description @param price the price */ public Product(String description, double price) { this.description = description; this.price = price; } public double getPrice() { return price; } public String toString() { return description; } private String description; private double price;}

Page 107: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

107

Bundles

Bundle = set of related items with description+price E.g. stereo system with tuner, amplifier, CD player + speakers A bundle has line items A bundle is a line item COMPOSITE pattern Ch5/invoice/Bundle.java (look at getPrice)

Page 108: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

108

Bundle.javaimport java.util.*;

// A bundle of line items that is again a line item.public class Bundle implements LineItem{ // Constructs a bundle with no items. public Bundle() { items = new ArrayList<LineItem>(); } /** Adds an item to the bundle. @param item the item to add */ public void add(LineItem item) { items.add(item); }

public double getPrice() { double price = 0; for (LineItem item : items) price += item.getPrice(); return price; }

public String toString() { String description = "Bundle: "; for (int i = 0; i < items.size(); i++) { if (i > 0) description += ", "; description += items.get(i).toString(); } return description; }

private ArrayList<LineItem> items;}

Page 109: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

109

Discounted Items

Store may give discount for an item Discounted item is again an item DECORATOR pattern Ch5/invoice/DiscountedItem.java (look at getPrice) Alternative design: add discount to LineItem

Page 110: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

110

DiscountedItem.java/** A decorator for an item that applies a discount.*/public class DiscountedItem implements LineItem{ /** Constructs a discounted item. @param item the item to be discounted @param discount the discount percentage */ public DiscountedItem(LineItem item, double discount) { this.item = item; this.discount = discount; }

public double getPrice() { return item.getPrice() * (1 - discount / 100); }

public String toString() { return item.toString() + " (Discount " + discount + "%)"; }

private LineItem item; private double discount;}

Page 111: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

111

Model/View Separation

GUI has commands to add items to invoice GUI displays invoice Decouple input from display Display wants to know when invoice is modified Display doesn't care which command modified invoice OBSERVER pattern

Page 112: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

112

Change Listeners

Use standard ChangeListener interface type

public interface ChangeListener

{

void stateChanged(ChangeEvent event);

}

Invoice collects ArrayList of change listeners When the invoice changes, it notifies all listeners:

ChangeEvent event = new ChangeEvent(this);

for (ChangeListener listener : listeners)

listener.stateChanged(event);

Page 113: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

113

Change Listeners

Display adds itself as a change listener to the invoice Display updates itself when invoice object changes state

final Invoice invoice = new Invoice();final JTextArea textArea = new JTextArea(20, 40);ChangeListener listener = new

ChangeListener() { public void stateChanged(ChangeEvent event)

{ textArea.setText(...); } };

Page 114: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

114

Observing the Invoice

Page 115: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

115

Iterating Through Invoice Items

Invoice collect line items Clients need to iterate over line items Don't want to expose ArrayList May change (e.g. if storing invoices in database) ITERATOR pattern

Page 116: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

116

Iterators

Use standard Iterator interface type

public interface Iterator<LineItem>

{ boolean hasNext();

LineItem next();

void remove();

}

remove is "optional operation" (see ch. 8) implement to throw UnsupportedException implement hasNext/next manually to show inner workings Ch5/invoice/Invoice.java

Page 117: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

117

Invoice.java (1)import java.util.*;import javax.swing.event.*;

// An invoice for a sale, consisting of line items.public class Invoice{ // Constructs a blank invoice. public Invoice() { items = new ArrayList<LineItem>(); listeners = new ArrayList<ChangeListener>(); }

/** Adds an item to the invoice. @param item the item to add */ public void addItem(LineItem item) { items.add(item); // Notify all observers of the change to the invoice ChangeEvent event = new ChangeEvent(this); for (ChangeListener listener : listeners) listener.stateChanged(event); } /** Adds a change listener to the invoice. @param listener the change listener to add */ public void addChangeListener(ChangeListener listener) { listeners.add(listener); } ….

Page 118: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

118

Invoice.java (2) /** Gets an iterator that iterates through the items. @return an iterator for the items */ public Iterator<LineItem> getItems() { return new Iterator<LineItem>() { public boolean hasNext() { return current < items.size(); }

public LineItem next() { return items.get(current++); }

public void remove() { throw new UnsupportedOperationException(); } private int current = 0; }; }

public String format(InvoiceFormatter formatter) { String r = formatter.formatHeader(); Iterator<LineItem>iter = getItems(); while (iter.hasNext()) r += formatter.formatLineItem(iter.next()); return r + formatter.formatFooter(); }

private ArrayList<LineItem> items; private ArrayList<ChangeListener> listeners;}

Page 119: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

119

Formatting Invoices

Simple format: dump into text area May not be good enough, E.g. HTML tags for display in browser Want to allow for multiple formatting algorithms STRATEGY pattern

Page 120: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

120

InvoiceFormatter.java/** This interface describes the tasks that an invoice formatter needs to carry out.*/public interface InvoiceFormatter{ /** Formats the header of the invoice. @return the invoice header */ String formatHeader();

/** Formats a line item of the invoice. @return the formatted line item */ String formatLineItem(LineItem item);

/** Formats the footer of the invoice. @return the invoice footer */ String formatFooter();}

Page 121: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

121

SimpleFormatter.java/** A simple invoice formatter.*/public class SimpleFormatter implements InvoiceFormatter{ public String formatHeader() { total = 0; return " I N V O I C E\n\n\n"; }

public String formatLineItem(LineItem item) { total += item.getPrice(); return (String.format( "%s: $%.2f\n",item.toString(),item.getPrice())); }

public String formatFooter() { return (String.format("\n\nTOTAL DUE: $%.2f\n", total)); }

private double total;}

Page 122: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

122

InvoiceTester.java (1)import java.awt.*;import java.awt.event.*;import javax.swing.*;import javax.swing.event.*;

// A program that tests the invoice classes.public class InvoiceTester{ public static void main(String[] args) { final Invoice invoice = new Invoice(); final InvoiceFormatter formatter = new SimpleFormatter(); // This text area will contain the formatted invoice final JTextArea textArea = new JTextArea(20, 40);

// When the invoice changes, update the text area ChangeListener listener = new ChangeListener() { public void stateChanged(ChangeEvent event) { textArea.setText(invoice.format(formatter)); } }; invoice.addChangeListener(listener); // Add line items to a combo box final JComboBox combo = new JComboBox(); Product hammer = new Product("Hammer", 19.95); Product nails = new Product("Assorted nails", 9.95); combo.addItem(hammer); Bundle bundle = new Bundle(); bundle.add(hammer); bundle.add(nails); combo.addItem(new DiscountedItem(bundle, 10)); …

Page 123: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

123

InvoiceTester.java

// Make a button for adding the currently selected // item to the invoice JButton addButton = new JButton("Add"); addButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { LineItem item = (LineItem) combo.getSelectedItem(); invoice.addItem(item); } });

// Put the combo box and the add button into a panel JPanel panel = new JPanel(); panel.add(combo); panel.add(addButton);

// Add the text area and panel to the content pane JFrame frame = new JFrame(); frame.add(new JScrollPane(textArea), BorderLayout.CENTER); frame.add(panel, BorderLayout.SOUTH); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); }}

Page 124: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

124

Formatting Invoices

Page 125: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

125

Formatting Invoices

Page 126: 1 CENG 217 Object Oriented Design Lecture 5 Doç. Dr. Halûk Gümüşkaya haluk@gumuskaya.com / haluk@fatih.edu.tr  Computing Engineering.

126

References

• This lecture is mainly based on the book Object Oriented Design and Patterns [1].

• There are also some slides adapted from various resources and my own slides. They are cited below:

Main Resources:

1. C. Horstmann, Object Oriented Design and Patterns (OODP), 2nd Edition,, John Wiley, ISBN: 0-471-74487-5, 2005.

2. E. Gamma, R. Helm, R. Johnson, J. Vlissides, Design Patterns, Elements of Reusable Object-Oriented Software, Addison-Wesley, 1995.

3. Lecture notes of CENG 535/410 Design Patterns course at Fatih University: http://www.fatih.edu.tr/~haluk/Teaching/Fatih/2003%20Fall/ceng%20534/ceng534-2003.htm