Upload
vanmien
View
326
Download
1
Embed Size (px)
Citation preview
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