CSE 219 Patterns in Programming More Design Patterns

Reading Assignment Why Software Fails from IEEE Spectrum: – Software Hall of Shame –

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 Strings public 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 Object public 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

ControllerModelView updateData notify return repaint

MVC Architecture ModelView 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 Model public class TemperatureModel extends Observable { private double temperatureF = 32.0; public double getF(){return temperatureF;} public double getC(){return (temperatureF ) * 5.0 / 9.0;} public void setF(double tempF) {temperatureF = tempF; setChanged(); notifyObservers(); } public void setC(double tempC) {temperatureF = tempC*9.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 Node model.insertNodeInto(… // Remove Node model.removeNodeFromParent(… // Change Node model.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 LayoutManager s 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