Graphical User Interface

Programming Copyright © 2017 by

Robert M. Dondero, Ph.D. Princeton University

1

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

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

Agenda

•  Introduction •  Components/widgets •  Layout managers •  Event handling •  Dialogs •  Conclusion

4

GUI Pgmming in COS 333 Option 1: Run on CourseLab

User 1 Local Computer

X Window Server

User 2 Local Computer

X Window Server

courselab01/02

App (User 1)

App (User 2)

X Windows

X Windows

Firewall

5

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 1st lecture

6

GUI Pgmming in COS 333 Option 2: Run on your computer

User 1 Local Computer

App

User 2 Local Computer

App

7

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

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

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

JFrame JPanel

JPanel

AWT/Swing Window Structure

11

JFrame contains JPanel(s) Each JPanel contains Component(s)

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

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

Python Tkinter Brief History

•  Tcl – Very successful

scripting language – John Ousterhout

(Stanford U.) •  Tk

– Cross-platform GUI toolkit – Developed for Tcl

14

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 – http://wiki.python.org/moin/GuiProgramming

15

Toplevel

Frame

Frame Tkinter Window Structure

16

Toplevel (optionally) contains Frame(s) Each Frame contains Widget(s)

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

Agenda

•  Introduction •  Components/widgets •  Layout managers •  Event handling •  Dialogs •  Conclusion

18

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

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

Swing Components

20

Tkinter Widget Example

•  See widgettest.py – Label – Button, Checkbutton, Radiobutton – Entry – Listbox – Scale, Scrollbar – Menu – Text, ScrolledText

•  Generalizing...

21

object BaseWidget (and Pack, Grid, Place) Widget Label Button Checkbutton Radiobutton Entry Listbox Scale

Scrollbar Text ScrolledText Menu Frame BaseWidget (and Wm) Toplevel

Tkinter Widgets

22

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

Agenda

•  Introduction •  Components/widgets •  Layout managers •  Event handling •  Dialogs •  Conclusion

24

AWT Layout Manager Examples

•  See FlowLayoutTest.java – FlowLayout – Flow is maintained as window resizes

25

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

AWT Layout Manager Examples

•  See GridLayoutTest.java – GridLayout – Components arranged in 2-D grid

27

AWT Layout Managers

•  And others; example... •  GridBagLayout

–  “The mother of all layout managers” – Horstmann

– Beyond COS 333 scope –  (Unnecessary for assignments)

•  Generalizing...

28

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

AWT Layout Managers

29

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

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

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

Tkinter Layout Manager

•  Grid layout manager – Same functionality as AWT GridLayout... – Components arranged in 2-D grid

33

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

object Pack Grid Place

Tkinter Layout Managers

35

Agenda

•  Introduction •  Components/widgets •  Layout managers •  Event handling •  Dialogs •  Conclusion

36

AWT Event Handling Example

•  Show EventTest1.java – JButton event handling – Event handling for other components is similar – Listener object must access panel

•  Generalizing...

37

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

AWT Event Handling Example

•  See EventTest2.java – ColorActionListener2 is an inner class

•  Defined within EventTestRunnable2 •  ColorActionListener2 object can access

fields of EventTestRunnable2 objects

39

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

Component Listener Interface Its Methods

Parameter Some of Its Methods

AbstractButton JComboBox JTextField

ActionListener actionPerformed()

ActionEvent getSource(), getActionCommand(), getModifiers()

JScrollBar AdjustmentListener adjustmentValueChanged()

AdjustmentEvent getSource(), getAdjustable(), getValue(), getAdjustmentType()

JSlider ChangeListener stateChanged()

ChangeEvent getSource()

AbstactButton JComboBox

ItemListener itemStateChanged()

ItemEvent

getSource(), getItem(), getStateChange(), getItemSelectable()

Semantic events:

AWT Event Handling

41

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

Low-level events:

AWT Event Handling

42

Component Listener Interface Its Methods

Parameter Some of its Methods

Component MouseWheelListener mouseWheelMoved()

MouseWheelEvent getSource(), getWheelRotation(), getScrollAmount()

Window WindowListener windowClosing() windowOpening() windowOpened() windowIconified() windowDeiconified() windowClosed() windowActivated() windowDeactivated()

WindowEvent getSource(), getComponent(), getWindow()

Window WindowFocusListener windowGainedFocus() windowLostFocus()

WindowEvent getSource(), getComponent(), getWindow()

Window WindowStateListener windowStateChanged()

WindowEvent getSource(), getOldState(), getNewState()

Low-level events:

AWT Event Handling

43

AWT Event Handling Example

•  See EventTestAll.java – AWT informs JComponent and Window

objects of many events

44

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

Tkinter Event Handling Problem

•  Problem: – Callback functions often must access widgets – Very poor style to use global variables

•  Solution: …

46

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

Tkinter Event Handling Example

•  See eventtesteach.py – Common patterns, per Widget

•  Generalizing... – Three non-disjoint mechanisms

48

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

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

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

'<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

First argument to bind() specifies an event pattern

Tkinter Event Patterns

52

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)

Tkinter Event Patterns

53

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

Tkinter Event Handling Example

•  See eventtestall.py – Tkinter informs Widget objects of many

events

55

Agenda

•  Introduction •  Components/widgets •  Layout managers •  Event handling •  Dialogs •  Conclusion

56

Swing Dialogs

•  See OptionPaneMessageTest.java – JOptionPane

•  See OptionPaneConfirmTest.java – JOptionPane

•  See OptionPaneOptionTest.java – JOptionPane

•  See OptionPaneInputTest.java – JOptionPane

57

Swing Dialogs

•  See FileChooserTest.java – JFileChooser

•  See ColorChooserTest.java – JColorChooser

•  Generalizing...

58

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

Swing Dialogs

59

Tkinter Dialogs

•  See messageboxtest.py – tkMessageBox module

•  See simpledialogtest.py – tkSimpleDialog module

•  See filedialogtest.py – tkFileDialog module

•  See colorchoosertest.py – tkColorChooser module

60

tkMessageBox module askokcancel() askquestion() askretrycancel() askyesno() showerror() showinfo() showwarning()

tkSimpleDialog askfloat() askinteger() askstring()

tkFileDialog module askdirectory() askopenfilename() askopenfilenames() asksaveasfilename()

tkColorChooser module askcolor()

Generalizing:

Tkinter Dialogs

61

Agenda

•  Introduction •  Components/widgets •  Layout managers •  Event handling •  Dialogs •  Conclusion

62

AWT/Swing Example

•  See ColorDisplayer.java – Slightly larger and more realistic – Multiple interacting components – Note:

•  Components •  Layout (and resizing behavior) •  Event handling

63

AWT/Swing Example

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

ColorDisplayer.java component composition hierarchy:

Tkinter Example

•  See colordisplayer.py – Slightly larger and more realistic – Multiple interacting widgets – Note:

•  Widgets •  Layout (and resizing behavior) •  Event handling

65

Tkinter Example

root (uses Pack) colorFrame controlFrame (uses Grid) redLabel greenLabel blueLabel redScale greenScale blueScale redEntry greenEntry blueEntry

66

colordisplayer.py widget composition hierarchy:

Getting More Info: AWT/Swing

•  Javadocs – https://docs.oracle.com/javase/7/docs/api/

java/awt/package-summary.html – https://docs.oracle.com/javase/7/docs/api/

javax/swing/package-summary.html •  Horstmann book •  Additional resources referenced in Topics

web page

67

$ python >>> from Tkinter import * >>> from ScrolledText import * >>> help(Toplevel) >>> help(Widget) >>> help(Button) >>> help(ScrolledText) >>> help(Event) ...

Getting More Info: Tkinter

68

Additional resources referenced in Topics web page

Summary

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

69

Summary

•  For each: –  Introduction – Components – Layout managers – Event handling – Dialogs – Conclusion

70

Summary

•  Not covered... •  Low-level drawing

– For Java: the Java 2D library – For Python: the Canvas class

71

Appendix 1: Graphical User Interfaces in C

72

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 http://www.paulgriffiths.net/program/c/srcs/helloxsrc.html – Use -lX11 option to build – Explicit coding of event loop

73

GUIs in C

•  Higher level GUI modules exist •  For example... •  GTK+

– See http://www.gtk.org/

74

Appendix 2: Bad GUIs

75

Bad GUIs

•  Some collected by Prof. Kernighan...

76

Bad GUIs

77

Bad GUIs

78

Bad GUIs

79

Bad GUIs

80

Bad GUIs

81

Bad GUIs

82

Bad GUIs

83

Bad GUIs

•  The Interface Hall of Shame – http://hallofshame.gp.co.at/index.php?

mode=original •  Some from that website…

84

Bad GUIs

85

Bad GUIs

86

Bad GUIs

87

Bad GUIs

88

Bad GUIs

89