Design patterns Design Patterns and Graphical p User Interfaces Horstmann 5-5.4.1, 5.4.3-5.7 • Design Patterns • • • • • Iterator Model-View-Controller Model View Controller and Observer Strategy Composite Decorator Design patterns • For each design pattern – Prototypical example – Context, problem – Solution, Solution decoupling/interface – UML diagram • Patterns – Iterator, observer, strategy, composite, decorator Design patterns • Design Patterns • Iterator • • • • Model View Controller and Observer Model-View-Controller Strategy Composite Decorator Example: Example: accessing elements in an ArrayList Accessing elements in arbitrary container ArrayList<String> filmList = new ArrayList<String>(); filmList.add(”E.T.”); filmList.add(”Gran Torino”); • Printing all elements for (String film : filmList) System.out.println(film); • Printing all elements using iterator Iterator<String> iter = filmList.iterator(); while (iter.hasNext()) System.out.println(iter.next()); public Class FilmCatalogue { private String[] films = {”Dogville”,”Chinatown”}; public String get(int i) {return films[i];} public int size() {return films.length;} } • Uses encapsulation: YES • Fully decoupled: NO – Only ”manual” printing of elements in a FilmCatalogue object possible – very inefficient if array representation changed to linked lists 1 2 3 4 5 6 ... • Printing all elements ”manually” for (int i=0; i< filmList.size(); i++) System.out.println(filmList.get(i)); E.T. Gran T. E.T. Gran T. 1 Example: Better: decoupling with iterator: accessing elements in iterable FilmCatalogue FilmCatalogue filmList = new ArrayList<String>(); filmList.add(”E.T.”); filmList.add(”Gran Torino”); FilmCatalogue filmList = new FilmCatalogue(); • Printing all elements public class FilmCatalogue p g implements p Iterable<String> g { public Iterator<String> iterator() { return new Iterator<String>() { private int position = 0; public boolean hasNext() {return position<films.length;} public String next() { if (hasNext()) return films[position++]; else return null; } ... }; } ... } for (String film : filmList) System.out.println(film); • Printing all elements using iterator Iterator<String> iter = filmList.iterator(); while (iter.hasNext()) System.out.println(iter.next()); • Printing all elements ”manually” for (int i=0; i< filmList.size(); i++) System.out.println(filmList.get(i)); Iterator Pattern Iterator Pattern Context • An aggregate object contains element objects • Clients need access to the element objects • The aggregate object should not expose its internal structure • Multiple M lti l clients li t may wantt iindependent d d t access Solution • Define an iterator that fetches one element at a time • Each iterator object keeps track of the position of the next element • If there are several aggregate/iterator variations, it is best if the aggregate and iterator classes realize common interface types. Iterator Pattern EXAMPLE Library myLib = new Library(...); Iterable <String> Iterator <String> iterator() next() ! hasNext() next() t() FilmCatalogue anonymous QUIZ Which of the code pieces obey the iterator pattern in the UML diagram ? 1.None 2.A only 3.B only 4.C only 5.D only 6.Two of A,B,C,D 7.Three of A,B,C,D 8.All of A,B,C,D 9.I don’t know A for (Book text : myLib) System.out.println(text); B Iterator<Book> iter = myLib.iterator(); while (iter.hasNext()) System.out.println(iter.next()); C Book[] list = myLib.getBooks(); for (int i=0; i< list.length; i++) System.out.println(list[i]); D for (Book text : myLib.getBooks()) System.out.println(text); 2 Design patterns Model/View/Controller Extra/changed view transparent to content • Design Patterns • Iterator • Model Model-View-Controller View Controller and Observer • Strategy • Composite • Decorator Model/View/Controller 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 Button / Listener • recall old example helloButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { textField.setText("Hello, World"); } } ); 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 • Action listeners attach themselves to button in order to be notified • Generalize: Observers attach themselves to subject 3 Observer Pattern Observer Pattern JButton ActionListener addActionListener() actionPerformed() anonymous Design patterns Display Components Button Components QUIZ Which interpretations are reasonable? 1.None 2.a 3.b 4.c 5.a+b 6.a+c 7.b+c 8.a+b+c 9.I dont’t know a) MVC: Frame is Model Display Components are Views Buttons are Controllers b) MVC: Model is not visible, but contains a number Display Components are Views Listeners attached to Buttons are Controllers c) Observer: • Design Patterns • Iterator • Model-View-Controller and Observer • Strategy • Composite • Decorator A Button is a Subject A Listener attached to a button is an Observer Layout Managers GUI: components and containers textfield component 3 button components label component frame container with 5 components (textfield, 3 buttons, label) • • • • • User interfaces made up of components Components placed in containers Container needs to arrange components Swing doesn doesn'tt use hard-coded pixel coordinates Advantages: – Can switch "look and feel" – Can internationalize strings • Layout manager controls arrangement 4 Layout Managers Example JPanel decDisplay = new JPanel(); final JTextField digits = new JTextField(“98",15); decDisplay.add(new JLabel("Decimal:")); decDisplay.add(digits); JPanel Default : FlowLayout JPanel display = new JPanel(); display.setLayout(new BorderLayout()); display.add(decDisplay, BorderLayout.NORTH); display.add(binDisplay, BorderLayout.SOUTH); Layout Managers Example JPanel keyboard = new JPanel(); keyboard.setLayout(new GridLayout(2,2)); keyboard.add(new JButton("0")); keyboard.add(new JButton("inc")); keyboard.add(new JButton("1")); keyboard.add(new JButton("dec")); GridLayout JFrame Default : BorderLayout JFrame f = new JFrame(); f.add(display,BorderLayout.NORTH); f.add(keyboard,BorderLayout.CENTER); BorderLayout Strategy Pattern • Pluggable strategy for layout management • Layout manager object responsible for executing concrete strategy • Generalizes G li tto Strategy St t Design D i Pattern P tt • Other manifestation: Comparators Comparator comp = new CountryComparatorByName(); Collections.sort(countries, comp); Strategy Pattern Context • A class can benefit from different variants for an algorithm • Clients sometimes want to replace standard algorithms with custom versions Solution • Define an interface type that is an abstraction for the algorithm • Actual strategy classes realize this interface type. • Clients can supply strategy objects • Whenever the algorithm needs to be executed, the context class calls the appropriate methods of the strategy object 5 Strategy Pattern Strategy Pattern Comparator Collections Compare() anonymous Strategy Pattern LayoutManager Container layoutContainer() QUIZ Which versions of Graph class use strategy pattern? BorderLayout Design patterns • • • • Design Patterns Iterator Model-View-Controller and Observer Strategy • Composite • Decorator 1. None 2. A 3. B 4. A,B 5.I don’t know public class Graph { private Function f = new Logarithm(); A public draw() { plot(1,f.evaluate(1)); … } } public class Graph { private Function f; public Graph(Function fun) { f=fun; } B public draw() { plot(1,f.evaluate(1)); … } } 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 6 Composite Pattern Composite Pattern Context • Primitive objects can be combined to composite objects • Clients treat a composite object as a primitive object Solution • Define an interface type that is an abstraction for the primitive objects • Composite object collects primitive objects • Composite and primitive classes implement same interface type. • When implementing a method from the interface type, the composite class applies the method to its primitive objects and combines the results Composite Pattern Component JButton getPreferredSize() JPanel QUIZ Does UML and code for paint methods realize composite design pattern? 1.Yes, both UML and code 2.Only UML 3.Only code 4.Neither UML nor code 5.I don’t know Design patterns • • • • • Design Patterns Iterator Model-View-Controller and Observer Strategy Composite • Decorator class Rectangle: public void paint(Graphics2D g) { g.draw(. . .); } class Composite: private ArrayList<Rectangle> cubes; public void paint(Graphics2D g) { for (Rectangle r: cubes) r.paint(g); } 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 7 Decorator Pattern Decorator Pattern Context • Component objects can be decorated (visually or behaviorally enhanced) • The decorated object can be used in the same way as the undecorated object • The component class does not want to take on the responsibility of the decoration open-ended ended set of possible decorations • There may be an open Solution • Define an interface type that is an abstraction for the component • Concrete component classes realize this interface type. • Decorator classes also realize this interface type. • A decorator object manages the component object that it decorates • 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. Decorator Pattern JComponent JTextArea paintComponent() JScrollPane QUIZ Does UML and code for paint methods realize decorator design pattern? 1.Yes, both UML and code 2.Only UML 3.Only code 4.Neither UML nor code 5.I don’t know class Rectangle: public void paint(Graphics2D g) { g.draw(. . .); } class Decor: private Cubism cube; public void paint(Graphics2D g) { g.draw(new Rectangle2D(. . .)); g.draw(... cube ...); } 8