Graphical User Interface Programming. Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University

Transcription

1 Graphical User Interface Programming Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University 1

2 Objectives You will learn about: Graphical user interface (GUI) programming Specifically... For Java: The AWT/Swing GUI library For Python: The Tkinter GUI library 2

3 Objectives More specifically You will learn about: High-level GUI programming Programming with buttons, menus, text fields, You will not learn about: Low-level GUI programming Drawing lines, circles, rectangles, etc. See COS 126 3

4 Agenda Introduction Components/widgets Layout managers Event handling Dialogs Conclusion 4

5 GUI Pgmming in COS 333 Option 1: Run on CourseLab User 1 Local Computer X Window Server X Windows Firewall courselab01/02 App (User 1) User 2 Local Computer X Window Server X Windows App (User 2) 5

6 GUI Pgmming in COS 333 Option 1: Run on CourseLab Must install X Window System Server on local computer See instructions in the A Computing Environment for COS 333 Assignments document from 1 st lecture 6

7 GUI Pgmming in COS 333 Option 2: Run on your computer User 1 Local Computer App User 2 Local Computer App 7

8 GUI Pgmming in COS 333 Option 2: Run on your computer Must install Java (with AWT/Swing) or Python (with Tkinter) on your computer Caveats: Make sure you install proper version Java SE 8 or Python 2.7 Asgt 2 must work on CourseLab 8

9 Java AWT/Swing Brief History Abstract Window Toolkit (AWT) JDK 1.0 Delegates painting/behavior of each GUI component to the native GUI toolkit, e.g.: Mac: Cocoa MS Windows: Win32 API or Win64 API Linux: Xlib Library constrained to greatest common denominator approach Components could behave (somewhat) differently on different computers 9

10 Java AWT/Swing Brief History Swing J2SE 1.2 Built on top of AWT architecture Relies on underlying native GUI toolkit to paint windows Paints components itself onto blank windows Library not constrained to greatest common denominator Components do behave the same on any computer Bonus: Application/user can choose look-and-feel 10

11 AWT/Swing Window Structure JFrame JPanel JPanel JFrame contains JPanel(s) Each JPanel contains Component(s) 11

12 AWT/Swing Pgm Structure See HelloSwing.java Create class to implement Runnable Create run() method within class Create JFrame object within run() method Create JPanel object and add to JFrame object Create JLabel object and add to JPanel object 12

13 AWT/Swing Pgm Structure main() method: Creates new Runnable object Passes to EventQueue.invokeLater() EventQueue.invokeLater() method starts event loop in a new thread Generalizing Suggestion: accept as a pattern More details in Threads lecture 13

14 Python Tkinter Brief History Tcl Tk Very successful scripting language John Ousterhout (Stanford U.) Cross-platform GUI toolkit Developed for Tcl 14

15 Python Tkinter Brief History Tkinter Python interface to TK ( Tk interface ) Python wrapper around Tk The standard Python GUI library Distributed with Python Other Python GUI options are available 15

16 Toplevel Tkinter Window Structure Frame Frame Toplevel (optionally) contains Frame(s) Each Frame contains Widget(s) 16

17 Tkinter Program Structure See hellotkinter.py Tk constructor creates a Toplevel object (referenced by root) Create Label object and add to root object Don t really need Frame object root.mainloop() method call starts event handling loop Generalizing Suggestion: accept as a pattern 17

18 Agenda Introduction Components/widgets Layout managers Event handling Dialogs Conclusion 18

19 Swing Component Example See ComponentTest.java JFrame, JPanel JButton, JLabel, JTextField, JTextArea, JScrollPane, JScrollBar, JSlider, JCheckBox,ButtonGroup, JRadioButton, Border, JComboBox JMenuBar, JMenu, JMenuItem, JPopupMenu JToolBar Tool tips 19

20 Swing Components java.lang.object java.awt.component java.awt.container java.awt.window java.awt.frame javax.swing.jframe java.awt.dialog javax.swing.jdialog javax.swing.jcomponent javax.swing.jpanel javax.swing.jtextcomponent javax.swing.jtextfield javax.swing.jtextarea javax.swing.jlabel javax.swing.jscrollpane javax.swing.jscrollbar javax.swing.jslider javax.swing.jcombobox java.awt.abstractbutton javax.swing.jbutton javax.swing.jtogglebutton javax.swing.jradiobutton javax.swing.jmenuitem javax.swing.jmenu javax.swing.jmenubar 20

21 Tkinter Widget Example See widgettest.py Label Button, Checkbutton, Radiobutton Entry Listbox Scale, Scrollbar Menu Text, ScrolledText Generalizing... 21

22 Tkinter Widgets object BaseWidget (and Pack, Grid, Place) Widget Label Button Checkbutton Radiobutton Entry Listbox Scale Scrollbar Text ScrolledText Menu Frame BaseWidget (and Wm) Toplevel 22

23 Tkinter Widgets Constructor arguments: First argument (usually) is parent Frame (or parent Toplevel) Subsequent arguments set properties Each widget has properties After construction, use widget['property'] to get or set a property 23

24 Agenda Introduction Components/widgets Layout managers Event handling Dialogs Conclusion 24

25 AWT Layout Manager Examples See FlowLayoutTest.java FlowLayout Flow is maintained as window resizes 25

26 AWT Layout Manager Examples See BorderLayoutTest.java BorderLayout North and south border: sizes are fixed vertically, expand horizontally East and west border: sizes are fixed horizontally, expand vertically Center expands both horizontally and vertically 26

27 AWT Layout Manager Examples See GridLayoutTest.java GridLayout Components arranged in 2-D grid 27

28 AWT Layout Managers And others; example... GridBagLayout The mother of all layout managers Horstmann Beyond COS 333 scope (Unnecessary for assignments) Generalizing... 28

29 AWT Layout Managers java.lang.object java.awt.flowlayout java.awt.borderlayout java.awt.gridlayout java.awt.gridbaglayout java.awt.boxlayout java.awt.cardlayout java.awt.grouplayout java.awt.overlaylayout java.awt.scrollpanelayout java.awt.springlayout java.awt.viewportlayout 29

30 Tkinter Layout Mgr Example See packertest.py Pack class, pack() method Widget inherits from Pack Can send pack() message to any Widget object to pack it within its parent Widget 30

31 Tkinter Layout Manager Pack layout manager Same functionality as AWT BorderLayout... North and south border: sizes (typically) are fixed vertically, expand horizontally East and west border: sizes (typically) are fixed horizontally, expand vertically Center (typically) expands both horizontally and vertically 31

32 Tkinter Layout Mgr Example See griddertest.py Grid class, grid() method Widget inherits from Grid Can send grid() message to any Widget object to grid it within its parent object 32

33 Tkinter Layout Manager Grid layout manager Same functionality as AWT GridLayout... Components arranged in 2-D grid 33

34 Tkinter Layout Manager And one more... Place Low-level layout manager Places widgets within parent exactly as the widget requires Used to implement custom layout managers Beyond the scope of COS 333 Generalizing... 34

35 Tkinter Layout Managers object Pack Grid Place 35

36 Agenda Introduction Components/widgets Layout managers Event handling Dialogs Conclusion 36

37 AWT Event Handling Example Show EventTest1.java JButton event handling Event handling for other components is similar Listener object must access panel Generalizing... 37

38 AWT Event Handling Problem Problem: Listener object often must access Components other than the one generating the event Awkward to pass Components to Listener constructor Solution: 38

39 AWT Event Handling Example See EventTest2.java ColorActionListener2 is an inner class Defined within EventTestRunnable2 ColorActionListener2 object can access fields of EventTestRunnable2 objects 39

40 Inner Class Commentary Inner class commentary: Q: Use inner classes? A: I vote yes Inner classes yield more succinct code Additional language complexity is minimal 40

41 Semantic events: AWT Event Handling Component AbstractButton JComboBox JTextField JScrollBar JSlider Listener Interface Its Methods ActionListener actionperformed() AdjustmentListener adjustmentvaluechanged() ChangeListener statechanged() Parameter Some of Its Methods ActionEvent getsource(), getactioncommand(), getmodifiers() AdjustmentEvent getsource(), getadjustable(), getvalue(), getadjustmenttype() ChangeEvent getsource() AbstactButton JComboBox ItemListener itemstatechanged() ItemEvent getsource(), getitem(), getstatechange(), getitemselectable() 41

42 Low-level events: AWT Event Handling Component Listener Interface Its Methods Parameter Some of its Methods Component FocusListener focusgained() focuslost() FocusEvent getsource(), istemporary() Component KeyListener keypressed() keyreleased() keytyped() KeyEvent getsource(), getkeychar(), getkeycode(), isaltdown(), iscontroldown(), ismetadown(), isshiftdown(), getkeymodifierstext(), getkeytext(), isactionkey() Component MouseListener mousepressed() mousereleased() mouseentered() mouseexited() mouseclicked() MouseEvent getsource(), getmodifiers(), isaltdown(), iscontroldown(), ismetadown(), isshiftdown(), getclickcount(), getx(), gety(), getpoint(), translatepoint() Component MouseMotionListener mousedragged() mousemoved() MouseEvent getsource() 42

43 Low-level events: AWT Event Handling Component Component Window Window Window Listener Interface Its Methods MouseWheelListener mousewheelmoved() WindowListener windowclosing() windowopening() windowopened() windowiconified() windowdeiconified() windowclosed() windowactivated() windowdeactivated() WindowFocusListener windowgainedfocus() windowlostfocus() WindowStateListener windowstatechanged() Parameter Some of its Methods MouseWheelEvent getsource(), getwheelrotation(), getscrollamount() WindowEvent getsource(), getcomponent(), getwindow() WindowEvent getsource(), getcomponent(), getwindow() WindowEvent getsource(), getoldstate(), getnewstate() 43

44 AWT Event Handling Example See EventTestAll.java AWT informs JComponent and Window objects of many events 44

45 Tkinter Event Handling Example See eventtest1.py Set command property of each Button object Function callback mechanism Click on button => call registered command function global statement Defines root variable to be global Callback functions can access root variable 45

46 Tkinter Event Handling Problem Problem: Callback functions often must access widgets Very poor style to use global variables Solution: 46

47 Tkinter Event Handling Example See eventtest2.py Inner function definitions In spirit, similar to Java s inner class definition Inner function can access variables that are local to containing function/method 47

48 Tkinter Event Handling Example See eventtesteach.py Common patterns, per Widget Generalizing... Three non-disjoint mechanisms 48

49 Tkinter Event Handling Command mechanism For Button, Radiobutton, Checkbutton, Menu Define zero-arg callback function Assign callback function to Widget command property Similar to Java Swing semantic event handling 49

50 Tkinter Event Handling Variable object mechanism For Checkbutton, Radiobutton, Entry, Scale Define Tkinter variable object IntVar, DoubleVar, StringVar Assign Tkinter variable object to Widget via variable or textvariable property User affects Widget => affects variable obj Program affects variable obj => affects Widget No Java Swing equivalent 50

51 Tkinter Event Handling Bind mechanism For any Widget Define callback function with event as param Send bind() message to Widget object with event pattern and callback function as args Similar to Java Swing low-level event handling 51

52 Tkinter Event Patterns First argument to bind() specifies an event pattern '<MODIFIER-MODIFIER-TYPE-DETAIL>' MODIFIER: Control, Alt, Double, Triple, Button1, B1, Button2, B2, Button3, B3, Button4, B4, Button5, B5 M, Mod1, M1, Mod2, M2, Mod3, M3, Mod4, M4, Mod5, M5, Shift, Lock, Meta, TYPE: KeyPress, Key, KeyRelease, ButtonPress, Button, ButtonRelease, Motion, Enter, Leave, FocusIn, FocusOut, Destroy, MouseWheel, Activate, Map, Expose, Circulate, Property, Colormap, Gravity, Reparent, Configure, Unmap, Deactivate, Visibility DETAIL: For KeyPress, Key, KeyRelease: the Keysym For ButtonPress, Button, ButtonRelease: the button number 52

53 Tkinter Event Patterns Keysym a, b, 0, 1, F1, F2, Left, Right, Up, Down, End, Home, Insert, Print, Tab, Escape, Return, Caps_Lock, Num_Lock, Scroll_Lock space, less Button Number (MS Windows and Linux) 1 (the primary/left mouse button) 2 (the scroll wheel mouse button) 3 (the secondary/right mouse button) Button Number (Mac) 1 (the primary/left mouse button) 2 (the secondary/right mouse button) 3 (the scroll wheel mouse button) 53

54 Tkinter Event Pattern Examples widget.bind('<button>', f) Call f() when user clicks a mouse button widget.bind('<key>', f) Call f() when user types a key widget.bind('<double-button-1>, f) Call f() when user double clicks the left mouse button widget.bind('<control-key-a>', f) Call f() when user types Ctrl-a 54

55 Tkinter Event Handling Example See eventtestall.py Tkinter informs Widget objects of many events 55

56 Agenda Introduction Components/widgets Layout managers Event handling Dialogs Conclusion 56

57 Swing Dialogs See OptionPaneMessageTest.java JOptionPane See OptionPaneConfirmTest.java JOptionPane See OptionPaneOptionTest.java JOptionPane See OptionPaneInputTest.java JOptionPane 57

58 Swing Dialogs See FileChooserTest.java JFileChooser See ColorChooserTest.java JColorChooser Generalizing... 58

59 Swing Dialogs java.lang.object java.awt.component java.awt.container java.awt.window java.awt.frame javax.swing.jframe java.awt.dialog javax.swing.jdialog javax.swing.jcomponent javax.swing.jpanel javax.swing.jtextcomponent javax.swing.jtextfield javax.swing.jtextarea javax.swing.jlabel javax.swing.jscrollpane javax.swing.jscrollbar javax.swing.jslider javax.swing.jcombobox java.awt.abstractbutton javax.swing.jbutton javax.swing.jtogglebutton javax.swing.jradiobutton javax.swing.jmenuitem javax.swing.jmenu javax.swing.jmenubar javax.swing.joptionpane javax.swing.jfilechooser javax.swing.jcolorchooser 59

60 Tkinter Dialogs See messageboxtest.py tkmessagebox module See simpledialogtest.py tksimpledialog module See filedialogtest.py tkfiledialog module See colorchoosertest.py tkcolorchooser module 60

61 Tkinter Dialogs Generalizing: tkmessagebox module askokcancel() askquestion() askretrycancel() askyesno() showerror() showinfo() showwarning() tksimpledialog askfloat() askinteger() askstring() tkfiledialog module askdirectory() askopenfilename() askopenfilenames() asksaveasfilename() tkcolorchooser module askcolor() 61

62 Agenda Introduction Components/widgets Layout managers Event handling Dialogs Conclusion 62

63 AWT/Swing Example See ColorDisplayer.java Slightly larger and more realistic Multiple interacting components Note: Components Layout (and resizing behavior) Event handling 63

64 AWT/Swing Example ColorDisplayer.java component composition hierarchy: frame (uses BorderLayout) colorpanel controlpanel (uses BorderLayout) labelpanel (uses GridLayout) redlabel greenlabel bluelabel sliderpanel (uses GridLayout) redslider greenslider blueslider textfieldpanel (uses GridLayout) redtextfield greentextfield bluetextfield 64

65 Tkinter Example See colordisplayer.py Slightly larger and more realistic Multiple interacting widgets Note: Widgets Layout (and resizing behavior) Event handling 65

66 Tkinter Example colordisplayer.py widget composition hierarchy: root (uses Pack) colorframe controlframe (uses Grid) redlabel greenlabel bluelabel redscale greenscale bluescale redentry greenentry blueentry 66

67 Getting More Info: AWT/Swing Javadocs java/awt/package-summary.html javax/swing/package-summary.html Horstmann book Additional resources referenced in Topics web page 67

68 Getting More Info: Tkinter $ python >>> from Tkinter import * >>> from ScrolledText import * >>> help(toplevel) >>> help(widget) >>> help(button) >>> help(scrolledtext) >>> help(event)... Additional resources referenced in Topics web page 68

69 Summary We have covered: Graphical user interface (GUI) programming Specifically... For Java: The AWT/Swing GUI library For Python: The Tkinter GUI library 69

70 Summary For each: Introduction Components Layout managers Event handling Dialogs Conclusion 70

71 Summary Not covered... Low-level drawing For Java: the Java 2D library For Python: the Canvas class 71

72 Appendix 1: Graphical User Interfaces in C 72

73 GUIs in C For C/Unix/Linux... The X-Window GUI library X-Window server runs on local computer X-Window client runs on server computer See srcs/helloxsrc.html Use -lx11 option to build Explicit coding of event loop 73

74 GUIs in C Higher level GUI modules exist For example... GTK+ See 74

75 Appendix 2: Bad GUIs 75

76 Bad GUIs Some collected by Prof. Kernighan... 76

77 Bad GUIs 77

78 Bad GUIs 78

79 Bad GUIs 79

80 Bad GUIs 80

81 Bad GUIs 81

82 Bad GUIs 82

83 Bad GUIs 83

84 Bad GUIs The Interface Hall of Shame mode=original Some from that website 84

85 Bad GUIs 85

86 Bad GUIs 86

87 Bad GUIs 87

88 Bad GUIs 88

89 Bad GUIs 89