CS 112 Introduction to Programming Swing/Android GUI Programming Yang (Richard) Yang Computer Science Department Yale University 308A Watson, Phone:

2 Admin  Merge tournament and project demo m Change Friday’s class -> a Hack Day A deck of slides on Strong/Weak AI m Apr. 30: 11:30-1 pm required attendance: a fair trade

Recap: Servlet and JSP  A basic concept of Web programming is that the unit of user interaction is Web page m A form on a page defines the program to be invoked and the set of parameters to be collected and sent to the specified program; the program returns a Web page  Servlet is a programming framework for designing Web backend m One customizes the behavior of Servlet by overriding methods doGet/doPost  JSP provides a syntax sugar for Servlet programming m You may checkout PHP

4 Outline  Admin and recap  GUI design overview

5 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.

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

7  Display: how to create and layout GUI components  User interaction: how to specify user action on a GUI component

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

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

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.

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.

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());

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

Android 14

15 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: o One can add components to a container o A container has a layout manager to manage how components in it are arranged.

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.

17 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

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

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:

20 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

 Here are several common Java layout managers: Layout managers

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:

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") );

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); }

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

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); }

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 );

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); }

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 ();

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

 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

GUI App Key Entities Display Composite Displa y Composite Displa y Display Composite Displa y

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); }

34 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

35 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

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

37 Android Simplification  Restructure layout managers, such as:  You may want to check out more dynamic layout such as ListView

Android: Allow the layout specification to be declarative 38

39 Example: LetterGame

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

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

42 Design Decision: Partition Event Types  Since many types of events can happen and a component may not be interested in all of them, 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

43 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.

44 Java GUI Event Handling Steps  If a component wants to respond to a given category of events, 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

45 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

46 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)

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

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

Event Handler Display Composite Displa y Composite Displa y Display Composite Displa y Event Handle r

Example Swing GUI App: RubberBand 50

51 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

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

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

54 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

55 Handling Events: 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

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

57 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.

Example: Android Button Set listener: 58 public class HangmanActivity extends Activity implements OnClickListener { private Button ba; private int count; private TextView 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); } … }

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

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 60

Example: LetterGame 61

Summary  Java Swing/Android introduces many programming features to make GUI programming easy/extensible  The programming may look daunting initially, but the basic concepts, as we have already studied, are quite simple 62

Example: Eliza 63

Turing Test Can a machine appear intelligent? If so, how could we tell? 64

Turing Test  Judge types questions to both. m Computer claims to be human. m So does human.  Pass. If judge cannot tell which entity is human, we say computer has passed the test and is "intelligent.”  Prediction [Turing]: Computer would pass test by

Example: Swing Eliza 66

Backup Slides 67

GUI App Key Entities Display Composite Displa y Composite Displa y Display Composite Displa y Event Handle r

69 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

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.

Additional components

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

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

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)

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) ;

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

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

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