Design Patterns and Graphical User Interfaces

1
Design Patterns and Graphical User Interfaces

• Horstmann 5-5.4.1, 5.4.3-5.7

2
Design patterns

• Design Patterns
• Iterator
• Model-View-Controller and Observer
• Strategy
• Composite
• Decorator

3
Design patterns

• For each design pattern
• Prototypical example
• Context, problem
• Solution, decoupling/interface
• UML diagram
• Patterns
• Iterator, observer, strategy, composite,
  decorator

4
Design patterns

• Design Patterns
• Iterator
• Model-View-Controller and Observer
• Strategy
• Composite
• Decorator

5
Example accessing elements in an ArrayList

• ArrayListltStringgt filmList new
  ArrayListltStringgt()
• filmList.add(E.T.) filmList.add(Gran
  Torino)
• Printing all elements
• for (String film filmList) System.out.println(fi
  lm)
• Printing all elements using iterator
• IteratorltStringgt iter filmList.iterator()
• while (iter.hasNext()) System.out.println(iter.nex
  t())
• Printing all elements manually
• for (int i0 ilt filmList.size() i)
• System.out.println(filmList.get(i))

6
Example Accessing elements in arbitrary
container

• public Class FilmCatalogue
• private String films Dogville,Chinatown
  
• public String get(int i) return filmsi
• 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

7
Better decoupling with iterator

• public class FilmCatalogue implements
  IterableltStringgt
• public IteratorltStringgt iterator()
• return new IteratorltStringgt()
• private int position 0
• public boolean hasNext() return
  positionltfilms.length
• public String next()
• if (hasNext()) return filmsposition
• else return null
• ... ...

8
Example accessing elements in iterable
FilmCatalogue

• FilmCatalogue filmList new ArrayListltStringgt()
• filmList.add(E.T.) filmList.add(Gran
  Torino)
• FilmCatalogue filmList new FilmCatalogue()
• Printing all elements
• for (String film filmList) System.out.println(fi
  lm)
• Printing all elements using iterator
• IteratorltStringgt iter filmList.iterator()
• while (iter.hasNext()) System.out.println(iter.nex
  t())
• Printing all elements manually
• for (int i0 ilt filmList.size() i)
• System.out.println(filmList.get(i))

9
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 clients may want independent 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.

10
Iterator Pattern
11
Iterator Pattern
EXAMPLE
Iterator ltStringgt
Iterable ltStringgt
next() ! hasNext() next()
iterator()
FilmCatalogue
anonymous
12
QUIZ

• public Class FilmCatalogue
• private ArrayListltStringgt films . . .
• public IteratorltStringgt iterator()
• return films.iterator()
• public Class FilmCatalogue
• private LinkedListltStringgt films . . .
• public IteratorltStringgt iterator()
• return films.iterator()
• public Class FilmCatalogue
• private String films . . .
• public IteratorltStringgt iterator()
• return new IteratorltStringgt() . . .

• Which of a,b,c fits iterator pattern?
• None
• a
• b
• c
• ab
• ac
• bc
• abc

13
Design patterns

• Design Patterns
• Iterator
• Model-View-Controller and Observer
• Strategy
• Composite
• Decorator

14
Model/View/Controller
Extra/changed view transparent to content
15
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

16
Model/View/Controller
17
Button / Listener

• recall old example
• helloButton.addActionListener(newActionListener()
  
• public void actionPerformed(ActionEvent
  event)
• textField.setText("Hello, World")
• )

18
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

19
Observer Pattern
20
Observer Pattern
JButton
ActionListener
addActionListener()
actionPerformed()
anonymous
21
QUIZ
Display Components
Button Components

• MVC
• Frame is Model
• Display Components are Views
• Buttons are Controllers
• MVC
• Model is not visible, but contains a number
• Display Components are Views
• Listeners attached to Buttons are Controllers
• Observer
• A Button is a Subject
• A Listener attached to a button is an Observer

• Which interpretations are reasonable?
• None
• a
• b
• c
• ab
• ac
• bc
• abc

22
Design patterns

• Design Patterns
• Iterator
• Model-View-Controller and Observer
• Strategy
• Composite
• Decorator

23
GUI components and containers
3 button components
textfield component
label component
frame container with 5 components (textfield, 3
buttons, label)
24
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

25
Layout Managers
26
Layout Managers
27
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
28
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)

29
Strategy Pattern

• Pluggable strategy for layout management
• Layout manager object responsible for executing
  concrete strategy
• Generalizes to Strategy Design Pattern
• Other manifestation Comparators
• Comparator comp new CountryComparatorByName()
  Collections.sort(countries, comp)

30
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

31
Strategy Pattern
32
Strategy Pattern
Comparator
Collections
Compare()
anonymous
33
Strategy Pattern
LayoutManager
Container
layoutContainer()
BorderLayout
34
QUIZ

• public class Game
• Robot r new Aggressor()
• public Game()
• r.activate()
• public class Game
• public Game(Robot r)
• r.activate()

• Which versions of Game class use strategy
  pattern?
• None
• a
• b
• a, b

35
Design patterns

• Design Patterns
• Iterator
• Model-View-Controller and Observer
• Strategy
• Composite
• Decorator

36
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

37
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

38
Composite Pattern
39
Composite Pattern
Component
JButton
getPreferredSize()
JPanel
40
QUIZ

• class Rectangle
• public void paint(Graphics2D g)
• g.draw(. . .)
• class Composite
• private ArrayListltRectanglegt cubes
• public void paint(Graphics2D g)
• for (Rectangle r cubes)
• r.paint(g)

• Does UML and code for paint methods realize
  composite design pattern?
• Yes, both UML and code
• Only UML
• Only code
• Neither UML nor code

41
Design patterns

• Design Patterns
• Iterator
• Model-View-Controller and Observer
• Strategy
• Composite
• Decorator

42
Scroll Bars

• Scroll bars can be attached to components
• Approach 1 Component class can turn on scroll
  bars
• Approach 2 Scroll bars can surround
  componentJScrollPane pane new
  JScrollPane(component)
• Swing uses approach 2
• JScrollPane is again a component

43
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
• There may be an open-ended set of possible
  decorations
• 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.

44
Decorator Pattern
45
Decorator Pattern
JComponent
JTextArea
paintComponent()
JScrollPane
46
QUIZ

• 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 ...)

• Does UML and code for paint methods realize
  decorator design pattern?
• Yes, both UML and code
• Only UML
• Only code
• Neither UML nor code