1. CS 112 Introduction to Programming GUI Programming: Swing/Android Yang (Richard) Yang Computer Science Department Yale University 208A Watson, Phone: 432-6400 Email: yry@cs.yale.edu

2. 2 Admin  Project m Checkpoint due this coming Thursday m Final report due May 5  Optional assignment 2a/2b posted today m 2a is GUI programming, which we will cover today m 2b depends on using Google Cloud App Engine  Last class tournament day planning?

3. Recap: Polymorphism  polymorphism: Ability for the same code to be used with different types of objects and behave differently with each m Same reference points to different types of objects m The method used exists in all the objects m The method may behave differently

4. Recap: Polymorphism through Inheritance  Same reference that can point to different types of objects  A variable of type T can hold an object of class T or descendent of T, e.g., Employee emp = new Employee(“Ed”); emp = new Lawyer(“Larry”); emp = new LegalSecretary(“Lisa”);  The method used exists in pointed to object m If the method is defined in the base class  The method may behave differently m The child class can override the method

5. Recap: Polymorphic Arrays  A common usage of polymorphism is to define an array of a base type, but different entries refer to different types of objects m To handle a heterogeneous population of objects with uniformity, achieving generic programming

6. Polymorphic Array index0123 Critter[] critters = { new Ant(), new Cougar(), new Snake(), new Bulldog() }; while (true) for (i=0; i<critters.length; i++) pos = critters[i].getMove(); disp = critters[i].toString(); draw disp at pos Not dependent on any specific critters but only the generic Critter concept

7. Polymorphic Array public class Staff { private Employee[] staffList; public Staff() { staffList = new Employee[4]; staffList[0] = new Lawyer("Lisa"); staffList[1] = new Secretary("Sally"); staffList[2] = new Marketer("Mike"); staffList[3] = new LegalSecretary("Lynne"); } public void payday() { for (int count = 0; count < staffList.length; count++) { System.out.printf("%-10s:", staffList[count].name()); System.out.printf("$%.2f\n", staffList[count].pay()); System.out.println("-----------------------------------"); } Works on any mix of Employee objects

8. Recap: Polymorphism through Interface  Same reference points to different types of objects  A variable of interface type T can point to any object implementing T, e.g., Movable mobj = new Bicycle(); mobj.move(); mobj = new Animal(); mobj.move();  The method used exists in pointed to object m If the method is defined in the interface and the object implements the interface  The method may behave differently m The class implements the interface provides its own definition of the method

9. Summary: General Programming  When defining a class or method (e.g., sorting), think about the essential (most general) properties/behaviors of the objects you require  Implement the class/method for the most general properties so that your design is the most general ! 9

10. 10 Outline  Admin and recap  GUI design overview

11. 11 GUI Overview  Standard Java provides a GUI framework (called Swing) to support the development of GUI applications  Android adapts the standard GUI framework to support the development of Android applications  GUI systems can be diverse, complex  The ease of developing GUI applications using a GUI framework is the key to its success  We will see both Swing and Android, to illustrate the common and evolving design decisions.

12.  Discussion: Common issues in designing a GUI framework? 12 GUI Programming Framework Goals

13. 13 GUI Programming Framework Goals  Display: how to create and layout GUI components  User interaction: how to specify user action on a GUI component

14. 14 Outline  Admin and recap  Interface  Examples: GUI design o Overview  Display

15. 15 Design for Display  Problem: Re-usability  Basic idea o Design a large number of standard GUI display/view components

16. Swing: JButton, JLabel The most common component— a button is a clickable onscreen region that the user interacts with to perform a single command A text label is simply a string of text displayed on screen in a graphical program. Labels often give infor- mation or describe other components  public JButton(String text) public JLabel(String text) Creates a new button / label with the given string as its text.  public String getText() Returns the text showing on the button / label.  public void setText(String text) Sets button / label's text to be the given string.

17. Swing: JTextField, JTextArea A text field is like a label, except that the text in it can be edited and modified by the user. Text fields are commonly used for user input, where the user types information in the field and the program reads it A text area is a multi-line text field  public JTextField(int columns)  public JTextArea(int lines, int columns) Creates a new text field the given number of columns (letters) wide.  public String getText() Returns the text currently in the field.  public void setText(String text) Sets field's text to be the given string.

18. Swing: JFileChooser A special dialog box that allows the user to select one or more files/folders  public JFileChooser()  public JFileChooser(String currentDir)  public int showOpenDialog(Component parent)  public int showSaveDialog(Component parent)  public File getSelectedFile()  public static int APPROVE_OPTION, CANCEL_OPTION Possible result values from showXxxDialog(..). JFileChooser chooser = new JFileChooser(); int result = chooser.showSaveDialog(this); if (result == JFileChooser.APPROVE_OPTION) this.saveData(chooser.getSelectedFile().getName());

19. Swing: JColorChooser Another special dialog that lets the user pick from a palette of colors  public JColorChooser()  public JColorChooser(Color initial)  public Color showDialog( Component parent, String title, Color initialColor) m returns null if user chose Cancel option

20. Android 20

21. 21 Design for Display  Problem: o A GUI app often uses multiple components and a major work is to layout the components  Basic idea o Allow a GUI component to be a container:  One can add components to a container o A container has a layout manager to manage how components in it are arranged.

22. Containers  container: An object that holds components; it also governs their positions, sizes, and resizing behavior.  Containers have the following public methods:  public void add(Component comp) public void add(Component comp, Object info) Adds a component to the container, possibly giving extra information about where to place it.  public void remove(Component comp) Removes the given component from the container.  public void setLayout(LayoutManager mgr) Uses the given layout manager to position the components in the container.  public void validate() You should call this if you change the contents of a container that is already on the screen, to make it re-do its layout.

23. 23 Standard Swing GUI Class Hierarchy (A Very Small Subset) Component Container JComponent JPanelJAbstractButton JButtonJToggleButton JCheckBoxJRadioBox Window Frame JFrame Typically used as top-level standalone container in Swing GUI app. Android is called Activity

24. A frame is a graphical window that can be used to hold other components  public JFrame() public JFrame(String title) Creates a frame with an optional title.  public void setTitle(String text) Puts the given text in the frame ’ s title bar.  public void setDefaultCloseOperation(int op) Makes the frame perform the given action when it closes. Common value: JFrame.EXIT_ON_CLOSE  NOTE: Call setVisible(true) to make a frame appear on screen after creating it. JFrame

25. JFrame Example  A simple program that creates and shows a JFrame : import java.awt.*; import javax.swing.*; public class SimpleFrame { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setForeground(Color.WHITE); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(300, 120)); frame.setTitle("A frame"); frame.setVisible(true); }  Graphical output:

26. 26 Design for Display  Problem: o How does a programmer specify where each component sits in the container, how big each component should be, and what the component should do if the window is resized/moved/maximized/etc?  Basic idea: o Layout managers, which define templates

27.  Here are several common Java layout managers: Layout managers

28. Preferred size  Swing component objects each have a certain size they would "like" to be--just large enough to fit their contents (text, icons, etc.)  This is called the preferred size of the component  Some types of layout managers (e.g. FlowLayout ) choose to size the components inside them to the preferred size; others (e.g. BorderLayout, GridLayout ) disregard the preferred size and use some other scheme Buttons at preferred size: Not preferred size:

29. FlowLayout public FlowLayout()  treats container as a left-to-right, top-to-bottom "page" or "paragraph"  components are given their preferred size both horizontally and vertically  components are positioned in order added  if too long, components wrap around to next line Container panel = new JPanel(new FlowLayout()); panel.add(new JButton("Button 1") );

30. FlowLayout example import java.awt.*; import javax.swing.*; public class FlowLayoutExample { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(320, 75)); frame.setTitle("Flow layout"); frame.setLayout(new FlowLayout()); frame.add(new JLabel("Type your ZIP Code: ")); frame.add(new JTextField(5)); frame.add(new JButton("Submit")); frame.setVisible(true); }

31. GridLayout public GridLayout(int rows, int columns)  treats container as a grid of equally-sized rows and columns  components are given equal horizontal / vertical size, disregarding preferred size

32. GridLayout example import java.awt.*; import javax.swing.*; public class GridLayoutExample { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(300, 120)); frame.setTitle("The grid"); // 2 rows, 3 columns frame.setLayout(new GridLayout(2, 3)); for (int i = 1; i <= 6; i++) { JButton button = new JButton(); button.setText("Button " + i); frame.add(button); } frame.setVisible(true); }

33. BorderLayout public BorderLayout()  divides container into five regions: NORTH, SOUTH, WEST, EAST, CENTER  NORTH and SOUTH regions expand to fill region horizontally, and use preferred size vertically  WEST and EAST regions expand to fill region vertically, and use preferred size horizontally  CENTER uses all space not occupied by others Container panel = new JPanel(new BorderLayout()); panel.add(new JButton("Button 1 (NORTH)", BorderLayout.NORTH );

34. BorderLayout example import java.awt.*; import javax.swing.*; public class BorderLayoutExample { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(210, 200)); frame.setTitle("Run for the border"); frame.setLayout(new BorderLayout()); frame.add(new JButton("north"), BorderLayout.NORTH); frame.add(new JButton("south"), BorderLayout.SOUTH); frame.add(new JButton("west"), BorderLayout.WEST); frame.add(new JButton("east"), BorderLayout.EAST); frame.add(new JButton("center"), BorderLayout.CENTER); frame.setVisible(true); }

35. BoxLayout Box.createHorizontalBox() Box.createVerticalBox()  aligns components in container in a single row or column  components use preferred sizes and align based on their preferred alignment  preferred way to construct a container with box layout: Box.createHorizontalBox(); or Box.createVerticalBox ();

36. Complex layouts  Can you create a layout like this, using one preceding layout manager?

37.  Create container within container  Each container has a different layout, and by combining the layouts, more complex / powerful layout can be achieved  In Swing, we typically use JPanel as container to form container hierarchy:  public JPanel() Constructs a panel with a default flow layout.  public JPanel(LayoutManager mgr) Constructs a panel that uses the given layout manager. Solution: composite layout

38. Composite layout example import java.awt.*; import javax.swing.*; public class TelephonePad { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(250, 200)); frame.setTitle("Telephone"); frame.setLayout(new BorderLayout()); JPanel centerPanel = new JPanel(new GridLayout(4, 3)); for (int i = 1; i <= 9; i++) { centerPanel.add(new JButton("" + i)); } centerPanel.add(new JButton("*")); centerPanel.add(new JButton("0")); centerPanel.add(new JButton("#")); frame.add(centerPanel, BorderLayout.CENTER); JPanel southPanel = new JPanel(new FlowLayout()); southPanel.add(new JLabel("Number to dial: ")); southPanel.add(new JTextField(10)); frame.add(southPanel, BorderLayout.SOUTH); frame.setVisible(true); } }

39. GUI App Key Entities Display Composite (Layout M.) Display Composite (Layout M.) Display Display Composite (Layout M.) Display Event Handler

40. 40 Design for Display  Problem: extensibility o Allow flexible extension (i.e., creation of new types of display components)  Basic idea o Allow app to override draw method to generate new visual display

41. 41 Class Hierarchy (A Very Small Subset) JComponent JPanelJAbstractButtonJLabelJTextComponent JButtonJToggleButton JCheckBoxJRadioBox JTextField paintComponent() To create a new visual component, extends JComponent and overrides paintComponent() JPasswordField JTextArea

42. 42 Display Extension Example  FaceViewer.java, FaceComponent.java m Extends JButton to customize its look

43. 43 Android Simplification  Restructure layout managers, such as:  You may want to check out more dynamic layout such as ListView http://developer.android.com/guide/topics/ui/declaring-layout.html

44. Android: Allow the layout specification to be declarative 44

45.  Layout m LetterGame/app/src/main/ res/layout/activity_main.xml 45 Example: LetterGame

46. 46 Outline  Admin and recap  Interface  Examples: GUI design o Overview o Display o User interaction

47. 47 GUI Manager  Maintains a collection (think an array) of GUI components (i.e., Critters)  Manages display complexities such as which part is visible, which part is not, …  Manages user interaction complexities such as user clicks, move over components

48. 48 User Interaction  GUI framework (manager) identifies the component (view) over which a user-interaction event happens component MouseMouse Motion Key Touch

49. Display Component 49 GUI Event Handling Framework and Polymorphism  To allow an app to customize behavior, a display component needs to have a mechanism for the app to provide the method to be invoked. Display Component listener reference App 1App 2 listener reference

50. 50 Events and Listeners Event source Listener This listener object waits for and responds to an event Event

51. 51 Design Decision: Partition Event Types  Problem: many types of events can happen, and a component may not be interested in all of them, but for completeness, the listener needs to implement all methods (callbacks)  Solution: classify events into different categories so that a component can select the types (categories) of events to which it wants to respond. component MouseMouse Motion Key Touch

52. 52 Example : MouseEvent  Some methods in the MouseEvent class Point getPoint (); returns the location of this mouse event int getX (); returns the x coordinate of the location of this mouse event. int getY (); returns the y coordinate of the location of this mouse event. int getClickCount (); returns the number of quick, consecutive clicks represented by this mouse event.

53. 53 MouseListener Interface  Methods in the MouseListener interface: void mousePressed (MouseEvent event); called when the mouse button is pressed down. void mouseReleased (MouseEvent event); called when the mouse button is released. void mouseClicked (MouseEvent event); called if the mouse button is pressed & released at the same location. void mouseEntered (MouseEvent event); called when the mouse pointer passes into a component void mouseExited (MouseEvent event); called when the mouse pointer passes out of a component

54. 54 MouseMotionListener  Methods in the MouseMotionListener interface: void mouseDragged (MouseEvent event); called when the mouse button is pressed on a component and then dragged void mouseMoved (MouseEvent event); called when the mouse button has been moved on a component (with no buttons down)

55. 55 Java GUI Event Handling Steps  If a component wants to respond to a given category events (e.g., events defined in MouseListener), the component should have a delegate (listener object) for that category of events  When an event of that category happened, the GUI manager will invoke the method of the listener object o the listener provides callback  To make sure that an installed listener object can handle a category of events, it should implement the listener interface for that category of event

56. Installing a Listener  If an object implements a listener interface for a given category of events, it can be installed as the listener object for the category of events 56 public class RubberLinesPanel implements MouseListener, MouseMotionListener { public RuberLinesPanel() { addMouseListener( this ); addMouseMotionListener( this ); … } public void mousePressed(MouseEvent e) {…} // all methods defined in interfaces }

57. Summary: Framework w/ Event Handler Display Composite (Layout M.) Display Composite (Layout M.) Display Display Composite (Layout M.) Display Event Handler

58. Example Swing GUI App: RubberBand 58

59. 59 Extension: Event Preprocessing o A component can define logic (think of a method) to map some raw events to more component-meaningful (semantic) events o E.g., allows a button component to map a mouse click, key press or touch to a "meaningful” event such as "button pressed“ o Such events are called ActionEvent in Swing component ActionMouseMouse Motion Key

60. 60 ActionListener  Methods in the ActionListener interface: // part of Java; you don't write this public interface ActionListener { public void actionPerformed(ActionEvent event); }

61. Installing an Action Listener 61 JButton button = new JButton(“click”); ActionListener listener = new MyListener(); button.addActionListener(listener); public class MyListener implements ActionListener { public void actionPerformed(ActionEvent ae) {…} }

62. 62 Example: ActionEvent  Some methods in the ActionEvent class String getActionCommand (); returns the command strings int getModifiers (); returns the modifier keys held down during this action event. long getWhen (); returns the timestamp of when this event occurred. component ActionMouse Mouse Motion Key

63. 63 Putting it Together: Example  For example, after a user clicks on top of a button component,  if the button component has a Mouse listener object, its mousePressed method will be automatically called  the mouse event is also translated to an ActionEvent object  if the button has a listener object for ActionEvent, the method actionPerformed of the listener object is automatically invoked

64. Example: Swing InvestmentViewer  Add a button so that each time the user clicks on the button, $10 is added to the bank account 64 See BankAccount.java; InvestmentFrame.java; InvestmentMain.java

65. 65 Android’s Event Listener Interfaces  Android defines a set of event listener interfaces, e.g., m View.OnClickerListener m View.OnLongClickListener m View.OnFocusChangeListener m View.OnKeyListener m View.OnTouchListener  Method in Android’s OnClickListener interface: void onClick(View v); called when the view v has been clicked. http://developer.android.com/reference/android/view/View.OnClickListener.html http://developer.android.com/guide/topics/ui/ui-events.html

66. Example: Android Button Set listener: 66 public class HangmanActivity extends Activity implements OnClickListener { private Button ba; private int count; private TextView displayWord; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hangman); ba = (Button)findViewById(R.id.ba); ba.setOnClickListener(this); count = 0; displayWord = (TextView)findViewById(R.id.displayWord); } … }

67. Example: Android Button Handler: 67 @Override public void onClick(View arg0) { if (arg0 == ba) { count ++; displayWord.setText("a count: " + count); }

68. Android Simplification You can simplify by setting the onClick() property in the UI design, and Android will then generate an anonymous class with the onClick() method for you automatically 68

69. Example: LetterGame  Listener m LetterGame/app/src/main/ java/com/example/yry/lettergame/MainActivit y.java 69

70. Summary  Java Swing and Android introduce many programming features to make GUI programming easy/extensible  GUI programming may look daunting initially, but the basic concepts, as we have studied, are quite simple, and clean 70

71. Backup Slides 71

72. Onscreen GUI elements  Most GUIs are not composed of option panes; they are too limited. Instead, complex GUIs contain the following elements: m frame: A graphical window on the screen. m components: GUI widgets such as buttons or text fields. m containers: Logical groups of components.

73. Additional components

74. A check box is a toggleable button with two states: checked and unchecked A radio button is a button that can be selected; usually part of a group of mutually-exclusive radio buttons (1 selectable at a time)  public JCheckBox / JRadioButton(String text) public JCheckBox(String text, boolean isChecked) Creates checked/unchecked check box with given text.  public boolean isSelected() Returns true if check box is checked.  public void setSelected(boolean selected) Sets box to be checked/unchecked. JCheckBox, JRadioButton

75. ButtonGroup A logical group of radio buttons that ensures that only one is selected at a time  public ButtonGroup()  public void add(JRadioButton button)  The ButtonGroup is not a graphical component, just a logical group; the RadioButton s themselves are added to the container, not the ButtonGroup

76. ImageIcon Allows you to put a picture on a button, label or other component  public class ImageIcon implements Icon m public ImageIcon(String filename) m public ImageIcon(URL address)  in JButton, JRadioButton, JCheckBox, JLabel, etc...  constructor that takes an Icon m public void setIcon(Icon) m public void setSelectedIcon(Icon) m public void setRolloverIcon(Icon)

77. JScrollPane A special container that holds a component, using scrollbars to allow that component to be seen  public JScrollPane(Component comp) Wraps the given component with scrollbars.  After constructing the scroll pane, add the scroll pane to the container, not the original component. frame.add(new JScrollPane(area), BorderLayout.CENTER) ;

78. The top-level container that holds menus; can be attached to a frame  public JMenuBar()  public void add(JMenu menu) Usage: in JFrame, the following method exists: m public void setJMenuBar(JMenuBar bar) JMenuBar

79. A menu to hold menu items; menus can contain other menus  public JMenu(String text)  public void add(JMenuItem item)  public void addSeparator()  public void setMnemonic(int mnemonic) JMenu

80. An entry in a frame's Menu bar, which can be clicked to perform commands  public JMenuItem(String text)  public JMenuItem(String text, Icon icon)  public JMenuItem(String text, int mnemonic)  public void addActionListener( ActionListener al)  public void setAccelerator( KeyStroke ks )  public void setEnabled(boolean b)  public void setMnemonic(int mnemonic) JMenuItem