Design Patterns and Graphical User Interfaces Horstmann 5.3-5.4.1, 5.4.3-5.5 Design patterns • Design Patterns • Model-View-Controller and Observer • Composite • Strategy Design patterns • For each design pattern – Prototypical example – Context, problem – Solution, decoupling/interface – UML diagram • Patterns – Iterator, observer, strategy, composite, decorator Design patterns • Design Patterns • Model-View-Controller and Observer • Composite • Strategy Model/View/Controller Extra/changed view transparent to content 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 Model/View/Controller 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 Observer Pattern Observer Pattern JButton ActionListener addActionListener() actionPerformed() anonymous QUIZ Display Components MVC and observer pattern Button Components a) MVC: Which interpretations are reasonable? 1. 2. 3. 4. 5. 6. 7. 8. 9. a b c a+b a+c b+c a+b+c None I dont’t know 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: A Button is a Subject A Listener attached to a button is an Observer Design patterns • Design Patterns • Model-View-Controller and Observer • Composite • Strategy GUI: components and containers textfield component 3 button components label component frame container with 5 components (textfield, 3 buttons, label) 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 Layout Managers 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); BorderLayout 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); 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 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 Composite Pattern Component JButton getPreferredSize() JPanel Compound statement Example { a = { b a } d = 4; = a+2; = 2*a; QUIZ Composite pattern Compound statement Atomic statement a-b; } class Compound: Does UML and code realize composite design pattern? private ArrayList<Atomic> statements; 1. 2. 3. 4. 5. Yes, both UML and code Only UML Only code Neither UML nor code I don’t know public void execute() { for (Atomic s: statements) s.execute(); } Design patterns • Design Patterns • Model-View-Controller and Observer • Composite • Strategy Example: sorting • Sort by name – – – – AntiChrist, 108 min Gran Torino, 116 min Mænd der hader kvinder, 155 min Slumdog Millionaire, 120 min • Sort by duration – – – – AntiChrist, 108 min Gran Torino, 116 min Slumdog Millionaire, 120 min Mænd der hader kvinder, 155 min Comparable interface type • Collections has static sort method. For a being an array list Collections.sort(a); • Objects in list must implement the Comparable interface type public interface Comparable<T> { int compareTo(T other); } • object1.compareTo(object2) returns – Negative number if object1 less than object2 – 0 if objects identical – Positive number if object1 greater than object2 • How can we sort Films by both name and length? • Can't implement Comparable twice! dIntProg Comparator interface type • Comparator interface type gives added flexibility public interface Comparator<T> { int compare(T object1, T object2); } • Comparator object is a function object • Pass comparator object to sort: Collections.sort(list, comp); Strategy ArrayList<Film> films = . . . ; Comparator<Film> comp1 = new NameComp(); Collections.sort(films, comp1); Comparator<Film> comp2 = new LenghtComp(); Collections.sort(films, comp2); public class NameComp implements Comparator<Film> { public int compare(Film f1, Film f2) { return f1.getName().compareTo(f2.getName()); }} public class LengthComp implements Comparator<Film> { public int compare(Film f1, Film f2) { return f1.getLenght()-f2.getLength(); }} Strategy Pattern • Pluggable strategy for comparison • Comparator object responsible for executing concrete strategy • Generalizes to Strategy Design Pattern 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 Strategy Pattern Strategy Pattern Comparator Collections Compare() NameComparator LengthComparator anonymous Strategy Pattern Container LayoutManager layoutContainer() BorderLayout QUIZ Example Strategy pattern SimpleHyphenator: Træ-kvinden bevægede lampe-tarmen AdvancedHyphenator: Træk-vinden bevægede lampet-armen A Which versions of Page class use strategy pattern? 1. A 2. B B 3. A,B 4. None 5. I don’t know public class Page { public setUp() { Hyphenator h = new SimpleHyphenator(); … h.hyphenate(…) … } } public class Page { private Hyphenator h; public Page(Hyphenator hyp) {h=hyp; } public setUp() { … h.hyphenate(…) … } }