Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 0 COSC3311 – Software Design Decorator Pattern

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 1 Text, Scrollbars & Borders.

Department of Computer Science, York University Non-software analogy  Paintings can be hung on the wall with or without frames  Framing or matting are decorations for a painting  Frame, matting and painting form a single visual component that can be hung on the wall

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 3 Scrollbar example (cont.)  The motivating example of the Decorator pattern is a graphical user interface toolkit, that lets you add properties like borders or behaviors like scrolling to any user interface component by enclosing the component in another objects that add the border or the scroll capability.

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 4 A first design – static inheritance

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 5 A first design – proliferation problems

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 6 Key insight  Static inheritance requires creating a new class for each additional decorator  We want decorations to be lightweight – i.e. we want to be able to attach and detach decorators at run-time.  “pay as you go” approach – define a simple class (TEXT_VIEW) and add decorations incrementally.

Department of Computer Science, York University BORDER draw Key idea Object Oriented Software Construction 16/09/ :52 PM 7 SCROLL_BAR draw TEXT_VIEW draw

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 8 Decorator Pattern  “Attach additional responsibilities to an object dynamically”.  The enclosing object is called a decorator.  The decorator conforms to the interface of the component it decorates so that its presence is transparent to the component's clients. The decorator forwards requests to the component and may perform additional actions (such as drawing a border) before or after forwarding. Transparency allows you to nest decorators recursively, thereby allowing an unlimited number of added responsibilities.

Department of Computer Science, York University Decorator Pattern Object Oriented Software Construction 16/09/ :52 PM 9 draw* draw_scroll draw_border border_width:REAL draw+ -- component.draw

Department of Computer Science, York University ROOT_CLASS class ROOT_CLASS create make feature contents: VISUAL_COMPONENT -- The component to be drawn make local t : TEXT_VIEW s : SCROLL_DECORATOR b : BORDER_DECORATOR do create t.make("Here is a text") create s.make(t) create b.make(s,1) contents := b contents.draw -- Display text with decorations end – make end -- MAIN Object Oriented Software Construction 16/09/ :52 PM 10

Department of Computer Science, York University Decorator – Example  Compose a border decorator with a scroll decorator for text view. a_border_decorator component a_scroll_decorator component a_text_view

Department of Computer Science, York University BON dynamic diagram 1.Create a text view: ROOT_CLASS.make 2.Create a scroll bar: s.make(t) 3.s.component := t 3.Create a border decorator: b.make(s,1) 5. decorator_make(s) 6. b.component := s 7. b.width := 1 8. contents := b 9. Draw the text view with decorators: contents.draw 10. b.component.draw 11. s.component.draw 12. print text 13. draw_scroll_bar 14.draw_border Object Oriented Software Construction 16/09/ :52 PM 12 :ROOT_CLASS contents: VISUAL_COMPONENT t:TEXT_VIEW s:SCROLL_BAR component: VISUAL_COMPONENT b: BORDER_DECORATOR component: VISUAL_COMPONENT width: REAL text: STRING 1 3,9 2 5,

Department of Computer Science, York University Decorator – Example Diagram VISUAL_COMPONENT * draw * TEXT_VIEW + draw DECORATOR * component : VISUAL_COMPONENT SCROLL_DECORATOR + draw draw_scroll_bar BORDER_DECORATOR + draw border_width draw_border

Department of Computer Science, York University Decorator – General Structure COMPONENT * method * CONCRETE_COMPONENT + method DECORATOR * component : COMPONENT CONCRETE_DECORATOR_ A + method other_feature CONCRETE_DECORATOR_B + method another_feature

Department of Computer Science, York University Decorator – Implementation deferred class COMPONENT feature method deferred end class CONCRETE_COMP feature method do... end deferred class DECORATOR feature component : COMPONENT end class CONCRETE_DECORATOR feature method do pre_actions component.method post_actions end Recursively do method for next in chain

Department of Computer Science, York University UML class Diagram Object Oriented Software Construction 16/09/ :52 PM 16

Department of Computer Science, York University Trygve Reenskaug: Semantics of UML Collaboration 9/16/2015Slide 17 UML Message Sequence Diagram :ROOT:TEXT:DECORATOR create() fileStarted() run() read() readDone() write() writeDone() runCompleted() stop() fileStopped()

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 18 Consequences – Advantages  More flexibility than static inheritance – responsibilities can be added and removed at run- time  Easy to add a property twice – e.g. to give a TEXT_VIEW a double border, simply attach two BORDER_DECORATOR.  Avoids feature-laden classes high up the hierarchy. Instead of supporting all forseeable features in a complex class, functionality can be added in a lightweight way – pay as you go.

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 19 Consequences – Disadvantages  A decorator and its component are not identical – so cannot compare to the decorator which is just a transparent enclosure.  Changing the skin vs. changing the guts oUse strategy pattern if you need to change the guts.

Department of Computer Science, York University Object Oriented Software Construction 16/09/ :52 PM 20 Demo  Demo decorator.zip