Download presentation
Presentation is loading. Please wait.
1
[Course Title] [Module Title] Introducing Design Patterns Through a Case Study Designing A Document Editor Instructor notes [Copy and paste this text box on notes pages for all slides] Daniel POP, Ph.D [Rev. # or date] – HP Restricted
2
The Plan Design Patterns: Elements of Reusable Object-Oriented Design
[Course Title] [Module Title] Review the Case Study in the book 7 Design Problems Discuss each design problem Review the solutions Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
3
Lexi Case Study Features
[Course Title] [Module Title] LEXI is a WYSIWYG document editor with the following features: Mix text and graphics in a variety of styles Pull-down menus Scrollbars Icons for jumping to a particular page [Rev. # or date] – HP Restricted
4
Seven Design Problems Document Structure Formatting
[Course Title] [Module Title] Document Structure How do we represent a document? Formatting How do we arrange text and graphics on the screen (or paper) Embellishing the user interface Supporting multiple look-and-feel standards Supporting multiple window systems User operations Spelling checking and hyphenation [Rev. # or date] – HP Restricted
5
Design Issue #1: Document Structure
[Course Title] [Module Title] Affects nearly every aspect of Lexi’s design What are the impacts of the structure we choose? What do we need to consider? [Rev. # or date] – HP Restricted
6
Design Issue #1: Document Structure
[Course Title] [Module Title] Documents are a combination of characters, lines, polygons, images etc. Often a user will want to deal with things at a higher level (ex. a picture or a row or column of a document) To make Lexi user-friendly, we need to allow the user to deal with these higher level constructs The internal representation of the document structure should match the physical structure Allow arrangement of text and graphics into lines, columns, tables, etc. Need to draw the document on the screen Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
7
Design Issue #1: Document Structure
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
8
Design Issue #1: Document Structure
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] Recursive Composition A method for representing a hierarchy of information A grouping of simple items to create a composite item Groupings of items can be a part of even higher level groups [Rev. # or date] – HP Restricted
9
Design Issue #1: Document Structure
[Course Title] [Module Title] Therefore… Objects need corresponding classes All of these classes need compatible interfaces so that allows us to handle them uniformly Meet the Glyph Responsibility Operations Appearance virtual void Draw(Window*) virtual void Bounds(Rect&) Hit Detection virtual bool Intersects(const Point&) Structure virtual boid Insert(Glyph*, int) virtual void Remove(Glyph*) virtual Glyph* Child(int) virutal Glyph* Parent() Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
10
Design Issue #1: Document Structure
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
11
Design Issue #1: Document Structure
[Course Title] [Module Title] Recursive Composition – It’s not just for documents Useful for any potentially complex, hierarchical structure The Composite pattern captures this design approach Intent: Compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
12
Design Issue #1: Document Structure The Composite Pattern
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] Defines behavior For the primitives Forwards requests to children Behavior for composites Stores Child components [Rev. # or date] – HP Restricted
13
Design Issue #1: Document Structure
[Course Title] [Module Title] How ‘deep’ do we go? Ideally, use objects to represent finer details (characters) to promote flexibility at finest levels of the application How to represent each character (its position, style etc) in an efficient way? Objects are often not used because of high costs in terms of memory allocation. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
14
Design Issue #1: Document Structure
[Course Title] [Module Title] Sharing objects Create a pool of objects that are (re)used in more than one place Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
15
Design Issue #1: Document Structure
[Course Title] [Module Title] Meet the Flyweight pattern that is a shared object that can be used in multiple contexts simultaneously Contexts is captured in the extrinsic state; flyweight stores only the intrinsic state Flyweight: character objects Intrinsic state: character code, Extrinsic state: coordinate position in the document, its typographic style etc (these can be determined from the text layout algorithms and formatting commands in effect wherever the character appears) Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
16
Design Issue #1: Document Structure
[Course Title] [Module Title] The Flyweight pattern Intent: Use sharing to support large numbers of fine-grained objects efficiently. Flyweight seeks to reduce intrinsic state of an object and externalize details in an extrinsic state. For LEXI, because the number of different character objects is far less than the number of characters in the document, the total number of objects is substantially less than what a naive implementation would use. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
17
Design Issue #1: Document Structure The Flyweight Pattern
[Course Title] [Module Title] Additional data necessary to perform an operation (extrinsic state) is sent as parameters Instructor notes [Copy and paste this text box on notes pages for all slides] Reduced intrinsic state with each object [Rev. # or date] – HP Restricted
18
Design Issue #1: Document Structure
[Course Title] [Module Title] Context for LEXI document structure can be stored as a map of typographic information, using B-tree data structure ( in a separate structure rather than store the font and type style with each character object. The map keeps track of runs of characters with the same typographic attributes. When a character draws itself, it receives its typographic attributes as a side-effect of the draw traversal. Because documents normally use just a few different fonts and styles, storing this information externally to each character object is far more efficient than storing it internally. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
19
Design Issue #1: Document Structure
[Course Title] [Module Title] How to efficiently handle large objects (for example images) within the document structure? The Proxy pattern addresses this issue. Object Diagram Instructor notes [Copy and paste this text box on notes pages for all slides] Pattern structure [Rev. # or date] – HP Restricted
20
Design Issue #1: Document Structure
[Course Title] [Module Title] To conclude the Design Issue #1: Several patterns Composite Flyweight Proxy …and advanced data structure B-tree were combined to achieve a flexible and effective representation of a complex document. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
21
Design Issue #2: Formatting
[Course Title] [Module Title] How to construct a particular physical structure And maintain separation of data and format Properly formatted document Some possible responsibilities: Break text into lines Break lines into columns Margin Widths Indentation Tabulation Single/Double Spacing Authors restrict the LEXI example to breaking glyphs into lines Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
22
Design Issue #2: Formatting
[Course Title] [Module Title] How should we approach formatting? What are some important trade-offs? Formatting quality vs. formatting speed Formatting speed vs. Storage requirements What are the design goals? Keep it well-contained Don’t spread it over many classes Independent of document structure Add a new glyph… not have to worry about changing format code Add new formatting algorithm – not have to change glyphs [Rev. # or date] – HP Restricted
23
Design Issue #2 Formatting
[Course Title] [Module Title] It will be complex… for sure Ideas… ideas… ideas… Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
24
Design Issue #2 Formatting
[Course Title] [Module Title] Needs to be easy to change the formatting algorithm If not at run-time, at least at compile-time We can make it independent, self contained and replaceable by putting it in its own class We can make it run-time replaceable by creating a class hierarchy for formatting algorithms Compositor Responsibility Operations What to format void SetComposition(Composition) When to format virtual void Compose() Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
25
Design Issue #2 Formatting
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] Composition object – when created contains the glyphs that determine content, but not structure (such as row, column) When Compose() is called, it iterates the glyphs and composes (formats) them. [Rev. # or date] – HP Restricted
26
Design Issue #2 Formatting
[Course Title] [Module Title] Rows and Columns are inserted by the compositor Why rows and columns? Inserted by the line-breaking algorithm Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
27
Design Issue #2 Formatting
[Course Title] [Module Title] Why do we need different Compositor’s? In the Example: SimpleCompositor might do a quick pass without regard for such esoterica as the document's "color." Good color means having an even distribution of text and whitespace. A TeXCompositor would implement the full TeX algorithm, which takes things like color into account in exchange for longer formatting times. Compositor-Composition class split ensures a strong separation between code that supports the document's physical structure and the code for different formatting algorithms We can change the line-breaking algorithm at run-time by adding a single SetCompositor operation to Composition's basic glyph interface. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
28
Design Issue #2 Formatting
[Course Title] [Module Title] Meet the Strategy pattern Intent: Encapsulating an algorithm in an object Key participants in the pattern are Strategy objects (Compositors) Context object (Composition) The key to using Strategy Interfaces for the strategy and the context that will support a range of algorithms Ideally we don’t want to change these interfaces to support a new algorithm Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
29
Design Issue #2 Formatting
[Course Title] [Module Title] A reflection before moving forward… Encapsulating an algorithm in an object is the intent of the Strategy pattern. Distributing an algorithm among several objects is the intent of the State pattern Actually not used in this case-study Related to Strategy though, sharing similar diagrams, but completely different semantic Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
30
Design Issue #3 Embellishing the user interface
[Course Title] [Module Title] Two ornaments (embellishments): a border around the text editing area scroll bars Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
31
Design Issue #3 Embellishing the User Interface
[Course Title] [Module Title] Basically, we want to extend the code to provide a Transparent Enclosure Transparent in that the page itself does not know anything about the changes – it behaves the same How should we do this? We could use Inheritance, how would that look? We have a Composition class… To add a Border we add a BorderedComposition class To add a Scroll bar we add a ScrollableComposition class What about both? BorderedScrollableComposition class? How could we do it with object composition instead? What object “has” what object? How do we make it extensible? Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
32
Design Issue #3 Embellishing the User Interface
[Course Title] [Module Title] Meet the Decorator pattern // Delegate it void MonoGlyph::Draw (Window* w) { _component->Draw(w); } // Do it void Border::Draw (Window* w) { MonoGlyph::Draw(w); DrawBorder(w); } Instructor notes [Copy and paste this text box on notes pages for all slides] Multiple decorations (ornaments)…. [Rev. # or date] – HP Restricted
33
Design Issue #3 Embellishing the User Interface
[Course Title] [Module Title] To conclude Design Issue #3: Adding additional functionalities (embellishments, ornaments) to a class can be either achieved either via inheritance (soon you will end-up with an unmanageable hierarchy) or, better, using object composition with the help of patterns like Decorator or Chain of Responsibility (for Chain of Responsibility see also Design Issue #6) Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
34
Design Issue #4 Supporting Multiple Look-and-Feel Standards
[Course Title] [Module Title] One major problem in portability… consider look-and-feel for Windows Max OS X KDE If re-targeting is too difficult (expensive), it won’t happen NOTE: Just one of the issues… Look-and-Feel … we deal with the Windowing system itself next We use an Abstract Factory Pattern This allows us to define the product type at compile time or run-time (based on environment or user input) Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
35
Design Issue #4 Supporting Multiple Look-and-Feel Standards
[Course Title] [Module Title] // Creating a scrollbar… ScrollBar* sb = guiFactory->CreateScrollBar(); Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
36
Design Issue #4 Supporting Multiple Look-and-Feel Standards
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
37
Design Issue #4 Supporting Multiple Look-and-Feel Standards
[Course Title] [Module Title] AbstractFactory classes are often implemented with Factory Method pattern, or Prototype pattern Because a concrete factory is often unique in the system, it is implemented often as a Singleton. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
38
Design Issue #5 Supporting Multiple Window Systems
[Course Title] [Module Title] What about the Windowing System itself? The APIs differ… not just the visual elements How do we make classes from different hierarchies comply to the same abstract type? Can we use Abstract Factory? Not easily… vendors already define class hierarchies We use Bridge pattern to define a uniform set of windowing abstractions (common interface) Hide the individual implementations Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
39
Design Issue #5 Supporting Multiple Window Systems
[Course Title] [Module Title] Common things a Window class must do (responsibilities) Provide operations for drawing basic geometric shapes Maximize/Minimize Resize (re)Draw contents on demand (when restored, overlapped, obscured, etc…) Two Possible Philosophies (Extremes) Intersection of functionality – Only define what is common to all Union of functionality – Incorporate capabilities of all systems Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
40
Design Issue #5 Supporting Multiple Window Systems
[Course Title] [Module Title] We adopt a hybrid Responsibility Operations window management virtual void Redraw() virtual void Raise() virtual void Lower() virtual void Maximize() virtual void Minimize() graphics virtual void DrawLine() virutal void DrawRect() virtual void DrawPolygon() Virtual void DrawText() Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
41
Design Issue #5 Supporting Multiple Window Systems
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
42
Design Issue #5 Supporting Multiple Window Systems
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
43
Design Issue #5 Supporting Multiple Window Systems
[Course Title] [Module Title] Bridge pattern is used up-front in a design to let abstractions and implementations vary independently. On the other hand, but similar to Bridge, the Adapter pattern is geared toward making unrelated classes work together. It is usually applied to systems after they're designed, during implementation phase. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
44
Design Issue #6 User Operations
[Course Title] [Module Title] Possible Operations Document operations: create, open, save, print a document Editing operations: select, copy, cut, paste, undo, redo Formatting operations: text formatting, character formatting etc Miscellaneous operations: context sensitive help We have different interfaces for these operations Different Look-and-Feel Different Windowing Systems Different Access Points (menu, shortcut key, context menu) We want independence from the UI UI triggers the action only, but what is done should not depend on the UI Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
45
Design Issue #6 User Operations
[Course Title] [Module Title] Other remarks: The operations are implemented in many different classes De-coupling: we want to access the functionality without adding dependency between the UI classes (i.e. object that issues the request) and all of the different classes involved (i.e. object that will perform the request) We also want to support undo and redo for some functionality We need to encapsulate the request using the Command Pattern Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
46
Design Issue #6 User Operations
[Course Title] [Module Title] Each MenuItem, ToolbarButton or KeyboardShortcut stores an appropriate command Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
47
Design Issue #6 User Operations
[Course Title] [Module Title] …and there is an entire hierarchy of specific commands, each class (command) being in charge with a specific user operation. Instructor notes [Copy and paste this text box on notes pages for all slides] Naturally, the same command object will be pointed out (shared) by different triggers, like menu items, toolbar buttons etc. Hence, no matter what triggers a user operation, the behavior is consistently the same. [Rev. # or date] – HP Restricted
48
Design Issue #6 User Operations
[Course Title] [Module Title] What about Undo? We add an Unexecute() method and keep a command history… …and a Memento will keep the state the command requires to undo (Unexecute) its effect. UNDO REDO Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
49
Design Issue #6 User Operations
[Course Title] [Module Title] How to handle context-sensitive Help? Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
50
Design Issue #6 User Operations
[Course Title] [Module Title] Chain of Responsibility pattern allows to handle a request by multiple hadlers. Intent: Avoids coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
51
Design Issue #6 User Operations
[Course Title] [Module Title] User operations are wired into the system by the help of various Behavioral patterns, like Command, Memento or Chain of Responsibility Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
52
Design Issue #7 Spell Check and Hyphenation
[Course Title] [Module Title] Similar constraints to formatting Need to support multiple algorithms We may want to add search grammar check word count Thesaurus Text to speech This is too much for any single pattern… There are actually two parts (1) Access the information (2) Do the analysis Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
53
Design Issue #7 Spell Check and Hyphenation – Accessing the Information
[Course Title] [Module Title] We can encapsulate access and traversal using the Iterator pattern Methods void First() void Next() bool IsDone() Glyph* GetCurrent() Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
54
Design Issue #7 Spell Check and Hyphenation – Accessing the Information
[Course Title] [Module Title] Sample code illustrating the usage of an iterator to do our analysis Glyph* root; Iterator* i = root->createPreOrderIterator(); for (i->First(); !i->IsDone(); i->Next()) { Glyph* current = i->GetCurrent(); // do some analysis } Examples of iterators: an int* is an iterator for int[] type. Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
55
Design Issue #7 Spell Check and Hyphenation – The Analysis
[Course Title] [Module Title] We don’t want our analysis in our iterator Iterators can be reused We don’t want analysis in our Glyph class Every time we add a new type of analysis… we have to change our glyph classes Therefore Analysis gets its own class(es) It will use the appropriate iterator Analyzer class accumulates data to analyze as it goes Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
56
Design Issue #7 Spell Check and Hyphenation – The Analysis
[Course Title] [Module Title] class SpellingChecker { public: void Check(Glyph* glyph); }; void SpellingChecker::Check (Glyph* glyph) Character* c; Row* r; Image* i; if (c = dynamic_cast<Character*>(glyph)) // analyze the character } else if (r = dynamic_cast<Row*>(glyph)) // prepare to analyze r's children else if (i = dynamic_cast<Image*>(glyph)) // do nothing Glyph* root; SpellingChecker checker; Iterator* i = root->createPreOrderIterator(); for (i->First();!i->IsDone(); i->Next()) { Glyph* current = i->GetCurrent(); checker.Check(current); } Instructor notes [Copy and paste this text box on notes pages for all slides] This is a start… but not what we want! [Rev. # or date] – HP Restricted
57
Design Issue #7 Spell Check and Hyphenation – The Analysis
[Course Title] [Module Title] Why don’t we want this? Difficult to extend: each time a new Glyph is introduced need to change SpellingCheck::Check Error prone: missing one type of Glyph Violates several OOD principles: OCP, DRY, SRP Usually, the usage of dynamic_cast denotes poor OO modeling We want to be better than this… Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
58
Design Issue #7 Spell Check and Hyphenation – The Analysis
[Course Title] [Module Title] …we will use the Visitor pattern class Visitor { public: virtual void visitCharacter(Character*) { } virtual void visitRow(Row*) { } virtual void visitImage(Image*) { } // ... and so forth }; Then, we specialize this superclass into SpellCheckingVisitor HyphenationVisitor and so on… There is an impact on Glyph hierarchy that need to be changed in order to accept visitors: within Glyph we define an operation void visitMe(Visitor& visitor) Character class would call visitor.visitCharacter(this) Row class would call visitor.visitRow(this) Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
59
Design Issue #7 Spell Check and Hyphenation – The Analysis
[Course Title] [Module Title] Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
60
Summary Covered patterns
[Course Title] [Module Title] Very good example: 18 out of 23 patterns (78%) described in Design Patterns: Elements of Reusable Object-Oriented Software were covered within this example: Structural: Composite, Flyweight, Proxy, Bridge, Adapter Behavioral: Strategy, State, Decorator, Template Method, Command, Memento, Iterator, Visitor, Chain of Responsibility Creational: Singleton, Abstract Factory, Factory Method, Prototype Instructor notes [Copy and paste this text box on notes pages for all slides] [Rev. # or date] – HP Restricted
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.