1. CS 112 Introduction to Programming GUI Programming; Web as UI; Class Wrap Yang (Richard) Yang Computer Science Department Yale University 208A Watson, Phone: 432-6400 Email: yry@cs.yale.edu

2. 2 Outline  Admin and recap  Swing/Android GUI o Display o User interaction  Web app using Google App Engine  Wrap up

3. 3 Admin  Project o Checkpoint due tomorrow (Thursday)  No class on Friday o Hack day  Bulldog tournament o May 6 2:00 – 2:30 pm

4. 4 Recap: GUI Programming Framework  Display: how to create and layout GUI components o Key concepts: specific display components (also called views); containers/layout managers; composite layout managers; override paintComponent methods to customize look  User interaction: how to specify user action on a GUI component o Each display component (view) has a polymorphic reference to point to the object (called listener) which has methods to handle a given set of events

5. Recap: GUI Display Framework Display Composite (Layout M.) Display Composite (Layout M.) Display Display Composite (Layout M.) Display

6. Display Component 2 6 Recap: GUI Event Handling Framework  GUI manager receives event and dispatches to the display over which the event happens  Display is provided by framework, but behavior should be provided by app => display has polymorphic reference to a listener => app provides the listener object Display Component 1 listener reference Obj 1Obj 2 listener reference

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

8. 8 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), e.g., o Mouse enter o Mouse move o Mouse exit o Mouse pressed o Mouse dragged o Mouse clicked

9. 9 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 an app can select the types (categories) of events to which it wants to respond. component MouseMouse Motion Key Touch

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

11. 11 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)

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

13. Display Component 2 13 Listeners and Event Types Display Component 1 MouseMotion Listener reference Obj 2 Obj 3 Mouse Listener reference MouseMotion Listener reference Mouse Listener reference Obj 1

14. Example Swing GUI App: RubberBand 14 public RubberLinesPanel() { addMouseListener(this); // for MousePressed addMouseMotionListener(this); // for MouseDragged setBackground(Color.black); setPreferredSize(new Dimension(600, 400)); } // implement methods defined in MouseListener // implement methods defined in MouseMotionListener

15. Recap: GUI Programming Framework Display Composite (Layout M.) Display Composite (Layout M.) Display Display Composite (Layout M.) Display Event Handler

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

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

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

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

20. 20 Putting it All 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

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

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

23. Example: Android Button Set listener: 23 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); } … }

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

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

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

27. Summary: Swing/Android GUI  GUI programming may look daunting initially, but the basic concepts, as we have covered, are quite simple, and relatively clean 27 Display Composite (Layout M.) Display Composite (Layout M.) Display Display Composite (Layout M.) Display Event Handler

28. 28 Outline  Admin and recap  Swing/Android GUI o Display o User interaction  Web app

29. 29 Web as GUI App  One can view each Web site as a GUI app o Display: how to create and layout GUI components o User interaction: how to specify user action on a GUI component

30. Swing Display: Java Programming 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); }

31. Android Display: XML Description 31

32. Web Display  HTML page describes the display m which one is it more similar, swing or Android? 32

33. 33 Outline  Admin and recap  Swing/Android GUI o Display o User interaction  Web app o Display  User interaction

34. 34 Web app User Interaction  Two approaches o Client side (Browser) using Javascript o Please read Javascript slides and examples o Server side (our focus this class)

35. 35 Web App--Server Side: Motivating Example (OPS2b) Madlib (template): One of the most characters in fiction is named "Tarzan of the." Tarzan was raised by a/an and lives in the jungle in the heart of darkest. He spends most of his time eating and swinging from tree to. Whenever he gets angry, he beats on his chest and says, " !" This is his war cry. Tarzan always dresses in shorts made from the skin of a/an and his best friend is a/an chimpanzee named Cheetah. He is supposed to be able to speak to elephants and. In the movies, Tarzan is played by.

36. 36 Web App--Server Side: Motivating Example Welcome to the game of Mad Libs. I will ask you to provide several words and phrases to fill in a mad lib story. The result will be displayed to you. Template file? tarzan.txt Please input an adjective: silly Please input a plural noun: apples Please input a noun: frisbee Please input an adjective: hungry Please input a place: New Haven, CT Please input a plural noun: bees Please input a noun: umbrella Please input a funny noise: burp Please input an adjective: shiny Please input a noun: jelly donut Please input an adjective: beautiful Please input a plural noun: spoons Please input a person's name: Keanu Reeves Commandline Madlib (interaction): Your mad-lib has been created: One of the most silly characters in fiction is named "Tarzan of the apples." Tarzan was raised by a/an frisbee and lives in the hungry jungle in the heart of darkest New Haven, CT. He spends most of his time eating bees and swinging from tree to umbrella. Whenever he gets angry, he beats on his chest and says, " burp !" This is his war cry. Tarzan always dresses in shiny shorts made from the skin of a/an jelly donut and his best friend is a/an beautiful chimpanzee named Cheetah. He is supposed to be able to speak to elephants and spoons. In the movies, Tarzan is played by Keanu Reeves. pseudo code?

37. Cmdline Madlib Pseudo Code Display welcome message Ask user to choose story template Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Web presents a different medium to deliver app. The unit of interaction is Web page. Q: what Web pages? http://mrt-cs112-0.appspot.com/

38. Webpage-Based Programming  One way to think about each Web page is to think it as an object: it is constructed with given input parameters  A Web page may collect input from user and then create another Web page (object)--browsing P1 input P2 input P3 input

39. Input to Create Each Page? Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: None Input Chosen template Who collect? Input User input for each token Chosen Template Who collect? P1 P2 P3

40. Server-side Page Creation input parameter created html page Q: What is the mechanism in Web to collect user input?

41. HTML Form  Form http://www.teaching-materials.org/htmlcss/lesson3/slides.html

42. HTML Form  A form gives instruction to the browser on m inputs to be collected from user m URL (program) to be invoked when sending to server http://www.teaching-materials.org/htmlcss/lesson3/slides.html Step 1: Please pick an input story template: Program to be invoked An input item to be collected How input is transported to server: get/post Invisible on page. Used to pass internal data

43. Form Input Type http://www.teaching-materials.org/htmlcss/lesson3/slides.html   Thin Thick Cheese

44. Web Execution Flow: Client Side  After user clicks submit on a form, browser m encodes each input in a format = m requests page with URL: ? = & = http://www.bing.com/search?q=yale

45. Web Execution Flow: Server Side  Web server receives the request for the URL, finds the application for the URL, and passes the values of the parameters to the application  The application retrieves the parameters, generates a Web page, and sends the page back to the browser to display

46. Google App Engine 46  A platform to simplify the development and hosting of Web applications m Simplified deployment Load balancing Automatic scaling m Useful high-level services and APIs

47. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display web.xml: User defines URL mapping

48. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display Define Servlet class: conduct common processing steps; app overrides key step ( doGet/doPost ) to define app-specific behavior

49. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display Define HttpServletRequest class to allow simple methods to retrieve parameter, e.g., getParameter(“name”)

50. Discussion: What GAE can do to allow simple, flexible server-side app programming?  Client browser m After user clicks submit on a form, browser encodes each input in a format = requests page with URL: ? = & =  Web server m receives the request for the URL, m finds the application for the URL, and m passes the values of the parameters to the application. m the application retrieves the request parameters, generates a response Web page back to the browser to display Define HttpServletResponse class to allow simple methods to write response (not worry about sending across network), e.g., getWriter().println( “ Hello”)

51. Example Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: None index.html (see Note)

52. web.xml 52 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5”> index.html

53. Example Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: Chosen template CreateMadlibServlet.java

54. web.xml  Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL 54 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> CreateMadlibServlet madlibs.CreateMadlibServlet CreateMadlibServlet /create index.html

55. Example Display welcome message Ask user to choose story template file Process given template file foreach token in template file ask user input store token -> user input mapping Display story for each line for each word in line if word is token print user input else print word as it is Input: User input for each token/template DisplayMadlibServlet.java

56. web.xml  Allow a WebApp developer to declare the applications (servlets), and which servlet will serve which URL 56 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> CreateMadlibServlet madlibs.CreateMadlibServlet DisplayMadlibServlet madlibs.DisplayMadlibServlet CreateMadlibServlet /create DisplayMadlibServlet /display index.html

57. 57 First-Day Class: Topics of CS 112  program problem solving techniques: m how to model real world and manage complexity, e.g., structural programming: top- down vs. bottom-up vs. stepwise refinement recursive programming object-oriented programming: abstraction and modularization event-driven programming m how to solve a problem efficiently, elegantly m debugging: figure out why the computer did not do what you wanted  good programming style, e.g., m robust, efficient program, readable code; documentation  use important libraries and data structures, e.g., m Multimedia, GUI, Android, Google App Engine, thread  programming tools m Java/Javascript/Web programming language and supporting tools Intended mainly as your first programming course ! The goals of cs112 are to learn

58. First-Day Class: Should you Take this Course? m “I have to take this class.” m “Computers and robots are going to take over the world. I want to befriend them so that my life will be spared.” m “I know that 65% of us will have to talk to software developers on a regular basis in whatever profession I choose after I graduate, I need to communicate with them.” m “I like to solve problems.” m “I like to learn new perspectives on how to solve problems.” m …  Answer: Yes

59. Turing Test  Perhaps the “smartest” program is one that can pass Turing Test m 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.” 59

60. Potential Next Steps  Consider programming as a basic tool  The smartness still comes from the programmers and computer science still has a long way to go 60

61. 61

62. Eliza  Eliza. [Weizenbaum 1966] m Program imitates Rogerian psychiatrist. m Works by generating scripted responses to keywords. 62 http://www.csee.umbc.edu/courses/331/papers/eliza.html

63. 63 … key: perhaps decomp: * reasmb: You don't seem quite certain. reasmb: Why the uncertain tone ? reasmb: Can't you be more positive ? reasmb: You aren't sure ? reasmb: Don't you know ? key: francais decomp: * reasmb: goto xforeign reasmb: I told you before, I don't understand French. key: sorry decomp: * reasmb: Please don't apologise. reasmb: Apologies are not necessary. reasmb: I've told you that apologies are not required. key: apologise decomp: * reasmb: goto sorry … Eliza Pattern Matching Rules

64. Strong AI Can a machine be intelligent? 64

65. Chinese Room Experiment (Searle 1980) Imagine that: m You don't understand Chinese. m You're alone in a room that has paper slots labeled "input" and "output." m You have a big book of Chinese writing. m You have English instructions (but no translations) that tell you what to write on your output paper in response to various inputs. 65

66. Chinese Room Experiment (Searle 1980) And then: m Chinese speakers outside the room pass in pieces of paper with Chinese writing. They know these are questions (but you don't). m You consult your manual of instructions, figure out the proper Chinese response, copy it down, and pass it out. 66 http://www.mind.ilstu.edu/curriculum/searle_chinese_room/searle_chinese_room.php

67. Chinese Room Experiment (Searle 1980)  Q. The folks outside think you understand Chinese. Do you?  Q. If a computer did the same, would it understand Chinese? 67

68. Chinese Room Experiment Weak AI. Can machines be programmed to exhibit intelligent behavior? A. Surely true: Deep Blue, Chinook, TD-Gammon, Watson, … Strong AI. Can machines can be programmed to possess intelligence? Searle. Chinese Room is absolute refutation of strong AI. But… many disagree! An interesting question, but... either way, limitless possibilities remain for applications of computer science. 68 “ The question of whether a computer can think is no more interesting than the question of whether a submarine can swim. ” – Edsger Dijkstra