1. CS 3331 1 GUI Frameworks CS 3331 Fall 2009

2. 2 CS 3331 Outline MVC Model GUI components (widgets) Layout managers Handling events

3. 3 CS 3331 MVC Model A way of cleanly breaking an application into three parts  Model for maintaining data,  View for displaying all or a portion of the data, and  Controller for handling events that affect the model or views. Model ControllerView

4. 4 CS 3331 Separating M from VC Controller changes model or view get data from model update view when data changes ViewModel

5. 5 CS 3331 Due to Separation … Multiple views and controllers for models gui.ppt change notification request & modification views model

6. 6 CS 3331 Due to Separation … (Cont.) New views and controllers can be added for the model. Changes in views are localized; such changes have minimal or no impact on the model.

7. 7 CS 3331 Outline  MVC Model GUI components (widgets) Layout managers Handling events

8. 8 CS 3331 Sample GUI Program Counter applet Increment 10 Value:

9. 9 CS 3331 Java GUI Frameworks GUI frameworks  Part of Java Foundation Class (JFC)  Abstract Window Toolkit (AWT) and Swing Framework classes  GUI components (or widgets)  Layout managers  Events and event listeners  Graphics and imaging classes

10. 10 CS 3331 AWT vs. Swing AWT  Heavyweight components  Associated with native components called peers  Same behaviour, but platform-dependent look  Package java.awt Swing  Lightweight components, i.e., no peer components  Same look and feel across platforms  Support pluggable look and feel  Package javax.swing

11. 11 CS 3331 AWT Components primitive container

12. 12 CS 3331 Swing Components Every widget is a container!

13. 13 CS 3331 Composite Design Pattern To allow clients to treat both single components and collections of components identically To define recursive data structures such as trees Client uses Leaf operation() Component operation() Composite operation() add(Component) remove(Component) *

14. 14 CS 3331 Exercise Design a class hierarchy to represent parse trees for: Expression ::= Literal | Expression “+” Expression

15. 15 CS 3331 Outline  MVC Model  GUI components (widgets) Layout managers Handling events

16. 16 CS 3331 Q: How to Layout Widgets? Three approaches  Manually specify absolute positions  Manually specify relative positions  Automate it What’re pros and cons?

17. 17 CS 3331 Layout Managers Associated with containers Automate the layout of elements  When elements are added to the container  When the window is resized automatically adjust the positions and sizes of the elements.

18. 18 CS 3331 Hierarchy of Layout Managers Q: Can you identify the design pattern used here?

19. 19 CS 3331 Using Layout Managers Method Description setLayout(lm) Set lm as the layout manager add(comp) Add a component add(comp, cst) Add a component with constraint public class CounterApplet extends Applet { public CounterApplet () { setLayout(new FlowLayout()); add(new JButton(“Increment")); add(new JButton(“Decrement”)); }

20. 20 CS 3331 Flow Layout width=400 height=50 width=100 height=120

21. 21 CS 3331 Flow Layout (Cont.) public class Flow extends Applet { public Flow () { setLayout(new FlowLayout()); add(new JButton("Java")); add(new JButton("C++")); add(new JButton("Perl")); add(new JButton("Ada")); add(new JButton("Smalltalk")); add(new JButton("Eiffel")); }

22. 22 CS 3331 Grid Layout 3x2 grid 1x0 grid 0x1 grid

23. 23 CS 3331 Grid Layout (Cont.) public class Grid extends Applet { public void init () { int row = 0; int col = 0; String att = getParameter("row"); if (att != null) { row = Integer.parseInt(att); } att = getParameter("col"); if (att != null) { col = Integer.parseInt(att); } if (row == 0 && col == 0) { row = 3; col = 2; } setLayout(new GridLayout(row, col)); add(new JButton("Java")); add(new JButton("C++")); add(new JButton("Perl")); add(new JButton("Ada")); add(new JButton("Smalltalk")); add(new JButton("Eiffel")); }

24. 24 CS 3331 Question Why compose the GUI in the init() method not in the constructor?

25. 25 CS 3331 Border Layout

26. 26 CS 3331 Border Layout (Cont.) public class Border extends Applet { public Border () { setLayout(new BorderLayout()); add(new JButton("North"), BorderLayout.NORTH); add(new JButton("South"), BorderLayout.SOUTH); add(new JButton("East"), BorderLayout.EAST); add(new JButton("West"), BorderLayout.WEST); add(new JButton("Center"), BorderLayout.CENTER); }

27. 27 CS 3331 Exercise Write an applet of the following layout. public class ClassRoom extends Applet { public ClassRoom () { setLayout(new BorderLayout()); // WRITE YOUR CODE HERE… }

28. 28 CS 3331 Outline  MVC Model  GUI components (widgets)  Layout managers Handling events

29. 29 CS 3331 Event Handling Mechanism to write control code Composed of:  Event  Event source  Event listener (or handler)

30. 30 CS 3331 Event Handling (Cont.) Event  A way for GUI components to communicate with the rest of application  Implemented as event classes (e.g., ActionEvent) Event source  Components generating events  Examples: buttons, check boxes, combo boxes, etc.

31. 31 CS 3331 Event Handling (Cont.) Event listener (or handler)  Objects that receives and processes events  Must implement an appropriate listener interface  Must inform the source its interest in handling a certain type of events (by registering)  May listen to several sources and different types of events

32. 32 CS 3331 Example // create a button JButton button = new JButton(“Increment”); // register an action listener button.addActionListener(new ButtonActionListener()); // Action listener class class ButtonActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { // handle the event e … System.out.println(“Increment button pressed!”); }

33. 33 CS 3331 How Does It Work? > h: ActionListenerb: JButtone: ActionEvent addActionListener(h) actionPerformed(e) getSource()

34. 34 CS 3331 Naming Convention For event XYZ …  Event class: XYZEvent  Listener interface: XYZListener  Adapter class: XYZAdapter  Registration method: addXYZListener()

35. 35 CS 3331 Events and Listeners Event Listener Adapter ActionEvent ActionListener ComponentEvent ComponentListenerComponentAdapter FocusEvent FocusListenerFocusAdapter KeyEvent KeyListenerKeyAdapter MouseEvent MouseListenerMouseAdapter MouseMotionListener MouseMotionAdapter WindowEvent WindowListenerWindowAdapter ItemEvent ItemListener TextEvent TextListener …

36. 36 CS 3331 Example: Resizing Component To prevent windows from being resized too small, use ComponentEvent and ComponentListener public class WinJava extends JFrame { public WinJava(String name) { super(name); // …. setResizable(true); addComponentListener(Util.createComponentListener(400, 300); } // … }

37. 37 CS 3331 Example (Cont.) public class Util { public static ComponentListener createComponentListener(int width, int height) { return new MyComponentListener(width, height); } private static class MyComponentListener extends ComponentAdapter { private int width, height; public MyComponentListener(int w, int h) { width = w; height = h; } public void componentResized(ComponentEvent e) { Component c = e.getComponent(); if (c.getWidth() < width || c.getHeight() < height) { c.setSize(Math.max(width, c.getWidth()), Math.max(height, c.getHeight())); } } // MyComponentListener }

38. 38 CS 3331 Using Anonymous Class // same code with anonymous class public class Util { public static ComponentListener createComponentListener( final int width, final int height) { return new ComponentAdapter() { public void componentResized(ComponentEvent e) { Component c = e.getComponent(); if (c.getWidth() < width || c.getHeight() < height) { c.setSize(Math.max(width, c.getWidth()), Math.max(height, c.getHeight())); } } // componentResized }; // ComponentAdapter } // createComponentListener }

39. 39 CS 3331 Exercise Write handler code by using anonymous class to print a goodbye message to System.out when the main window is closed. Hint: The WindowListener interface defines, among others, the method “void windowClosing(WindowEvent)”. public class WinJava extends JFrame { public WinJava(String name) { // …. // WRITE YOUR CODE HERE } // … }

40. 40 CS 3331 Exercise Extend the counter applet to change its button color when the mouse enters the button. Hints - The interface MouseListener declares, among others, void MouseEntered(MouseEvent) and void mouseExited(MouseEvent). - The method setBackground(Color) sets the background color of a widget. - The source (e.g., JButton) can be obtained from an event object by calling the method “Object getSource()”.

41. 41 CS 3331 Exercise (Cont.) public CounterApplet extends Applet { public CounterApplet() { // … JButton button = new JButton("Increment"); // WRITE YOUR CODE HERE! // … } // … }