CSE 219 Patterns in Programming

More Design Patterns

Reading Assignment• Why Software Fails from IEEE Spectrum:

– http://www.spectrum.ieee.org/sep05/1685

• Software Hall of Shame– http://www.spectrum.ieee.org/sep05/1685/failt1

GUIs & Patterns• Patterns are commonly used throughout GUI

packages– wide use of interfaces– Command Pattern - Event Programming for simple

GUI controls– Observer Pattern - Event Handling for complex GUI

controls (MVC)– Strategy Pattern for Layout Management

Command Abstraction• For many GUIs, a single function may be triggered by

many means (e.g., keystroke, menu, button, etc…)• Try to link all similar events to the same listener• The information concerning the command can be

abstracted to a separate command object• Two Common Java Approaches:

1. Specify a String for each command– have listener respond to each command differently

2. Make an Action object for each command• make each command a listener for the events that trigger it

• Both techniques:– ensure commands are handled in a uniform way

– require access to the necessary GUI controls to effect change

Example• Suppose I wanted to create a simple GUI:– 1 colored panel

– 2 buttons, yellow & red

– 2 menu items, yellow & red

– clicking on the buttons or menu items changes the color of the panel

• Since the buttons & the menu items both perform the same function, they should be tied to the same commands– I could even add popup

menu items

First Approach – Command Stringspublic class ColorCommandFrame1 extends JFrame

implements ActionListener { private Toolkit tk = Toolkit.getDefaultToolkit(); private ImageIcon yellowIcon

= new ImageIcon(tk.getImage("yellow_bullet.bmp")); private ImageIcon redIcon

= new ImageIcon(tk.getImage("red_bullet.bmp"));

private JPanel coloredPanel = new JPanel(); private JButton yellowButton = new JButton(yellowIcon); private JButton redButton = new JButton(redIcon); private JMenuBar menuBar = new JMenuBar(); private JMenu colorMenu = new JMenu("Color"); private JMenuItem yellowMenuItem = new JMenuItem(yellowIcon); private JMenuItem redMenuItem = new JMenuItem(redIcon);

private JPopupMenu popupMenu = new JPopupMenu(); private JMenuItem yellowPopupItem = new JMenuItem(yellowIcon); private JMenuItem redPopupItem = new JMenuItem(redIcon);

private static final String YELLOW_COMMAND = "YELLOW_COMMAND"; private static final String RED_COMMAND = "RED_COMMAND";

public ColorCommandFrame1() { super("ColorCommandFrame1"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setExtendedState(JFrame.MAXIMIZED_BOTH); initButtons(); initPopupMenu(); initMenu(); } private void initButtons() { yellowButton.setActionCommand(YELLOW_COMMAND); redButton.setActionCommand(RED_COMMAND); yellowButton.addActionListener(this); redButton.addActionListener(this); coloredPanel.add(yellowButton); coloredPanel.add(redButton); Container contentPane = getContentPane(); contentPane.add(coloredPanel); }

private void initPopupMenu() { yellowPopupItem.setActionCommand(YELLOW_COMMAND); redPopupItem.setActionCommand(RED_COMMAND); yellowPopupItem.addActionListener(this); redPopupItem.addActionListener(this); popupMenu.add(yellowPopupItem); popupMenu.add(redPopupItem);

coloredPanel.addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent e) { maybeShowPopup(e); } public void mouseReleased(MouseEvent e) { maybeShowPopup(e); } private void maybeShowPopup(MouseEvent e) { if (e.isPopupTrigger()) { popupMenu.show(e.getComponent(), e.getX(), e.getY()); } } }); }

private void initMenu() {

yellowMenuItem.setActionCommand(YELLOW_COMMAND); redMenuItem.setActionCommand(RED_COMMAND); yellowMenuItem.addActionListener(this); redMenuItem.addActionListener(this); colorMenu.add(yellowMenuItem); colorMenu.add(redMenuItem); menuBar.add(colorMenu); setJMenuBar(menuBar); }

public void actionPerformed(ActionEvent ae) { String command = ae.getActionCommand();

if (command.equals(YELLOW_COMMAND)) coloredPanel.setBackground(Color.YELLOW); else if (command.equals(RED_COMMAND)) coloredPanel.setBackground(Color.RED);

}}

Second Approach – Action Objectpublic class ColorCommandFrame2 extends JFrame {

private Toolkit tk = Toolkit.getDefaultToolkit();

private ImageIcon yellowIcon

= new ImageIcon(tk.getImage("yellow_bullet.png"));

private ImageIcon redIcon

= new ImageIcon(tk.getImage("red_bullet.png"));

private JPanel coloredPanel = new JPanel();

private Action yellowAction = new YellowAction("Yellow", yellowIcon);

private Action redAction = new RedAction ("Red", redIcon);

private JButton redActionButton = new JButton(redAction);

private JButton yellowActionButton = new JButton(yellowAction);

private JMenuBar menuBar = new JMenuBar();

private JMenu colorMenu = new JMenu("Color");

private JMenuItem yellowMenuItem = new JMenuItem(yellowAction);

private JMenuItem redMenuItem = new JMenuItem(redAction);

private JPopupMenu popupMenu = new JPopupMenu();

private JMenuItem yellowPopupItem = new JMenuItem(yellowAction);

private JMenuItem redPopupItem = new JMenuItem(redAction);

public ColorCommandFrame2() {

super("ColorCommandFrame2 - Action Object");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

setExtendedState(JFrame.MAXIMIZED_BOTH);

initButtons();

initPopupMenu();

initMenu();

}

private void initButtons() {

coloredPanel.add(yellowActionButton);

coloredPanel.add(redActionButton);

Container contentPane = getContentPane();

contentPane.add(coloredPanel);

}

private void initPopupMenu() {

popupMenu.add(yellowPopupItem);

popupMenu.add(redPopupItem);

coloredPanel.addMouseListener(new MouseAdapter() {

public void mousePressed(MouseEvent e) {

maybeShowPopup(e);

}

public void mouseReleased(MouseEvent e) {

maybeShowPopup(e);

}

private void maybeShowPopup(MouseEvent e) {

if (e.isPopupTrigger()) {

popupMenu.show(e.getComponent(), e.getX(), e.getY());

}

}

});

}

private void initMenu() { colorMenu.add(yellowMenuItem);

colorMenu.add(redMenuItem);

menuBar.add(colorMenu);

setJMenuBar(menuBar);

}

public class YellowAction extends AbstractAction {

public YellowAction(String text, ImageIcon icon) {

super(text, icon);

}

public void actionPerformed(ActionEvent e) {

coloredPanel.setBackground(Color.YELLOW);

}

}

public class RedAction extends AbstractAction {

public RedAction(String text, ImageIcon icon){

super(text, icon);

}

public void actionPerformed(ActionEvent e) {

coloredPanel.setBackground(Color.RED);

}

}

More Complex Controls• Controls like tables, trees, lists, combo boxes

may contain much data as well as functionality

• For controls like these, data is managed separate from the view

• What type of design pattern could we use?– many similar types of software problems– solution: Observer pattern – MVC

• Must be used for GUI controls when contents change

• Ex: combo box for browser address bar– ability to add more addresses

Observer Pattern (MVC)• Model

– data structure, no visual representation– notifies views when something interesting happens

• Views– visual representations– views attach themselves to model in order to be notified

• Controllers– handling of events– listeners that are attached to view in order to be notified of user

interaction (or otherwise)• MVC Interaction

– controller updates model– model tells view that data has changed– view redrawn

Controller Model View

updateData

notify

return

return

repaint

MVC Architecture

Model View

Controller

The model passes its data to the view

for rendering

The view determines which events are passed to the controller

The controller updates the model based on events

received

Example of a Temperature Modelpublic class TemperatureModel extends Observable

{

private double temperatureF = 32.0;

public double getF(){return temperatureF;}

public double getC(){return (temperatureF - 32.0) * 5.0 / 9.0;}

public void setF(double tempF)

{ temperatureF = tempF;

setChanged();

notifyObservers();

}

public void setC(double tempC)

{ temperatureF = tempC*9.0/5.0 + 32.0;

setChanged();

notifyObservers();

}

}

Common Model Interfaces

• BoundedRangeModel for JSlider, JProgressBar, JScrollBar

• ComboBoxModel for JComboBox• ListModel for JList• TableModel for JTable• TreeModel for JTree

Trees• Used to display a hierarchical structure

– File structure, browsing history, etc…

Editing

• To edit the tree, you must go through the model:JTree tree = new JTree(…TreeModel model = tree.getModel();

// Insert Nodemodel.insertNodeInto(…

// Remove Nodemodel.removeNodeFromParent(…

// Change Nodemodel.nodeChanged(…

// UPDATING THE MODEL WILL NOW AUTOMATICALLY UPDATE THE// VIEW (JTree) THANKS TO MVC!

Layout Managers• A layout manager uses an algorithm to position and size

GUI components for a given container– When the user resizes the container, the layout manager

automatically reflows the components to fill the available space

• LayoutManager– An interface in the Java class library

– Describes how a Container and a layout manager communicate.

– It describes several methods which: • Handle resizing

• Handle components added to or removed from the container.

• Size and position the components it manages.

Strategy Pattern• Place essential steps for an algorithm in a strategy interface

– different methods represent different parts of the algorithm – classes implementing this interface customize methods

• LayoutManagers use this pattern– you may use a pre-existing LayoutManager– you may create your own LayoutManager

• define a class that implements LayoutManager• Define abstract methods from LayoutManager interface

however you want your manager to behave– addLayoutComponent– layoutContainer– minimumLayoutSize– preferredLayoutSize– removeLayoutComponent

• you may use to setLayout for Java Components to use your layout• Java Components use LayoutManager methods to draw themselves