![Page 1: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/1.jpg)
An Introduction to Tkinter
Bruno Dufour &Wen Hsin Chang
Friday, September 7th, 2001
![Page 2: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/2.jpg)
What is Tkinter ?
Tkinter is an open source, portable graphical user interface (GUI) toolkit designed for use in Python scripts.Tkinter is a python interface for the Tk GUI toolkit (originally developed for the Tcllanguage)
![Page 3: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/3.jpg)
Advantages offered by Tkinter
Layered implementationAccessibilityPortabilityAvailability
![Page 4: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/4.jpg)
Drawback of Tkinter
Due to the layered approach used in its implementation, execution speed becomes a concern.
![Page 5: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/5.jpg)
The smallest Tkinter program…
from Tkinter import *root = Tk( )root.title("A simple application")root.mainloop( )
![Page 6: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/6.jpg)
… and its ouput
Microsoft Windows 2000 Red Hat Linux 7.1 running KDE 2.0
![Page 7: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/7.jpg)
Widgets and Tkinter
Tkinter’s components are called WidgetsWidgets are equivalents to OOP’s objects or componentsAll widgets inherit from the Widget class
![Page 8: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/8.jpg)
Widget Options
Options are attributes of the widget. Not all widgets have the same attributes. Some which are common to all widgets such as ‘text’, specifying the text to be displayed, or ‘Padx’, which specifies the space between itself and its neighbor widget. Other options like ‘wrap’ for a text widget or ‘orient’ for a scrollbar widget are widget specific.
![Page 9: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/9.jpg)
Widget Methods
Methods are mostly widget specific, meaning some widgets such as scrollbar or list box have their own methods to help the user exploits widgets’ full functionalities. Methods that is common to all widgets are methods such as ‘Configure( )’ or ‘Keys( )’
![Page 10: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/10.jpg)
Widget Manipulation
Widget manipulation is done via optionsOptions can be set at creation time or later on by calling the configure( ) method on the widget, with a list of valid widget option IDs and their respective values
![Page 11: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/11.jpg)
Widget Types
ToplevelFrameLabelButtonEntryRadiobuttonCheckbutton
MenuMessageTextScrollbarListboxScaleCanvas
![Page 12: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/12.jpg)
What widgets look like…
Microsoft Windows 2000
![Page 13: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/13.jpg)
… on different Operating Systems
Red Hat Linux 7.1 running KDE 2.0
![Page 14: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/14.jpg)
Screen Layout in Tkinter
Fonts: specified using a n-tuple(family, size, option1, option2, …)
Colors: specified using color names (“red”, “blue”, “peachpuff”, etc.) or RGB values in the form (hexadecimal)
#RGB#RRGGBB#RRRRGGGGBBBB
![Page 15: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/15.jpg)
Tkinter variables
Variables can be used as widget options to hold values associated with them (eg. the value option for Radiobuttons)Tkinter provides a way for the widget to adjust to a change in the value of such a variableThis is not possible using standard variables
![Page 16: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/16.jpg)
The need for Tkinter variables
Tkinter provides the Variable (abstract) class.The Variable class provides the possibility of associating a callback method with a variableThus, one could respond to a change in the value of such variables
![Page 17: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/17.jpg)
Methods of the Variable class
Private Methods:__init__(self, master=None)__del__(self)__str__(self)
Public Methodsset(self, value)trace(self, mode, callback)Trace_vdelete(self, mode, cbname)Trace_vinfo(self)
![Page 18: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/18.jpg)
Particularities of Tkinter variables
The Variable class does not implement the get( ) method (only a base class)The set( ) method does not do any type checking (do not expect to catch a type conversion error in a try..except construct)The get( ) method will fail if an erroneous data type has been stored in the variable
![Page 19: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/19.jpg)
Subclasses of Variable
Variable
StringVar IntVar DoubleVarBooleanVar
Always use one of the subclasses of Variable itself to manipulate data
![Page 20: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/20.jpg)
Geometry management in Tkinter
Geometry management consists of widget placement and sizing of the screenGeometry management increases the portability of the GUI toolkit.Tkinter provides 3 geometry managers: Pack, Grid and Place.
![Page 21: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/21.jpg)
The Pack geometry manager
Quickest and most common way to design interfacesPositioning is done relative to the container widgets (top, bottom, left, right)Widgets are packed from edge to center of the container, using space left available by previous pack operations.
![Page 22: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/22.jpg)
Options to the pack( ) method
N / S / E / W / NW / SW / NE / SE / NS / EW / NSEW / CENTER
anchor
Integer valuesipadx, ipady
Integer valuespadx, pady
Widgetin_(‘in’)
TOP / BOTTOM / RIGHT / LEFTside
NONE / X / Y / BOTHfill
YES / NOexpandPossible ValuesOption
![Page 23: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/23.jpg)
Methods provided by the Packer
Returns a list of widget IDs, in the packing order, which are slaves of the master widget.
pack_slaves( )
Returns a dictionary containing the current options.
pack_info( )
The widget is no longer managed by the Packer, but is not destroyed.
pack_forget( )
Packs the widget with the specified options.
pack(option=value,…),pack_configure(option=value,…)
EffectMethod
![Page 24: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/24.jpg)
The Grid geometry manager
Used for more complex layoutsAllows the container to be divided in rows and columns Similar to HTML’s Table (columnspan + rowspan)Using the Packer, one would have to use multiple frames to achieve the same effect
![Page 25: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/25.jpg)
Options to the grid( ) method
N / S / E / W / NW / SW / NE / SE / NS / EW / NSEW (Note: Default is to center widgets *)
sticky
Integer valuesipadx, ipady
Integer valuespadx, pady
Widgetin_(‘in’)
Positive integer valuesrowspan, columnspan
Positive integer valuesrow, columnPossible ValuesOption
* CENTER is not supported with the sticky option
![Page 26: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/26.jpg)
Methods provided by the Grid
Returns the size of the grid, in the form of a tuple (column, row)
grid_size( )
Returns a tuple (column, row) which represents the cell in the grid that is closest to the point (x, y).
grid_location(x, y)
Returns a list of widget IDs which are slaves of the master widget.
grid_slaves( )
Returns a dictionary containing the current options.
grid_info( )
The widget is no longer managed by the Grid, but is not destroyed.
grid_forget( ), grid_remove( )
Places the widget in a grid, using the specified options.
grid(option=value,…),grid_configure(option=value,…)
EffectMethod
![Page 27: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/27.jpg)
Special notes about the Grid
Empty rows and columns are not displayed by the grid geometry manager, even if a minimum size is specified.The grid manager cannot be used in combination with the pack manager, as this results in an infinite negociation loop.
![Page 28: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/28.jpg)
The Place geometry manager
Most powerful managerAllows exact placement of widgets in a containerAllows placement of widgets using either exact coordinates, or as a percentage relative to the size of the master window (expressed as a float in the range [0.0, 1.0]).The same holds for the widget size.
![Page 29: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/29.jpg)
Options to the place( ) method
Integer valuesx, y
Integer valueswidth, height
Float [0.0, 1.0]relx, rely
Float [0.0, 1.0] relwidth, relheight
Widgetin_(‘in’)
INSIDE / OUTSIDEbordermode
N / NE / E / SE / SW / W / NW / CENTER anchorPossible ValuesOption
![Page 30: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/30.jpg)
Event Handling in Tkinter
Easy, convenient and flexibleAllows callback functions to be associated with any event for any widgetEvent descriptors are used to identify events
![Page 31: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/31.jpg)
Event Descriptors
String representation of eventsUsed for binding callbacks to eventsGeneral form: <Modifier- Type - Qualifier>Not all 3 sections are required for an event descriptor to be valid (the type alone often suffices).
![Page 32: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/32.jpg)
Event Types in Tkinter
Tkinter can handle the following event types:Keyboard events: KeyPress, KeyReleaseMouse events: ButtonPress, ButtonRelease, Motion, Enter, Leave, MouseWheelWindow events: Visibility, Unmap, Map, Expose, FocusIn, FocusOut, Circulate, Colourmap, Gravity, Reparent, Property, Destroy, Activate, Deactivate
![Page 33: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/33.jpg)
Event Qualifiers
Can be either:Mouse button index (1 to 5)Keysym: the name of a particular key (eg: “backslash”, “backspace”)
A type does not have to be specified when a qualifier is used (can still be done though)
![Page 34: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/34.jpg)
Event Modifiers
Possible Modifiers:Control, Shift, Alt, Meta: Modifier keysB1 to B5: Mouse button modifiersDouble, Triple: Repetition modifiersAny: specifies to execute the callback regardless of the modifiers
Any number of modifiers can be specifiedOrder of modifiers is irrelevant (eg: <Control-Alt-Shift-A>)
![Page 35: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/35.jpg)
Event Attributes
Time at which the event occurred. Under Microsoft Windows®, this is the value returned by theGetTickCount( ) API function.
timestate of the event as a numberstatekeycode of the pressed key (KeyPress, KeyRelease) keycodeHeight / width of the exposed window (Configure, Expose) height / width
boolean which indicates whether the window has the focus (Enter, Leave)
focus
number of the mouse button pressed (ButtonPress, ButtonRelease)(1=LEFT, 2=CENTER, 3=RIGHT, etc.)
numSerial # of the eventserial
DescriptionAttribute
![Page 36: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/36.jpg)
Event Attributes (cont.)
delta of wheel movement (MouseWheel)deltawidget for which the event occurred widgettype of the event as a number typekeysym of the event as a number (KeyPress, KeyRelease) keysym_num
keysym of the the event as a string (KeyPress, KeyRelease)
keysympressed character (as a char) (KeyPress, KeyRelease)charx / y-position of the mouse on the screen relative to the rootx_root / y_rootx / y – position of the mouse relative to the widgetx / y
DescriptionAttribute
![Page 37: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/37.jpg)
Binding callbacks to Events
3 method calls:bind(): can be called on any widget, and in particular a Toplevel widgetbind_class(): used internally in order to provide standard bindings for Tkinter widgets. Can be avoided by subclassing strategy.bind_all(): binds events to the whole application
![Page 38: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/38.jpg)
Callbacks and events
Tkinter always uses the most specific event descriptor for a given event and a given widgetCallbacks for the 4 different levels of Tkinter’sevent handling will be called in sequence, starting with the widget level, then the Toplevel, the class and then the Application.If, at any given level, one wants to stop the propagation of the event, simply return “break” in the callback associated with this event.
![Page 39: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/39.jpg)
The Canvas widget
Provides basic drawing facilities, as well as advanced drawing featuresDrawing is done by creating canvas itemsItems are not widgets, even though they are handled in a similar wayEach item receives a unique ID upon creationEach item is enclosed in its bounding box specified by a top-left corner and a lower-right corner
![Page 40: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/40.jpg)
Items supported by the Canvas
Arc: arc, chord, piesliceBitmapImageLineOval: circle or ellipse
PolygonRectangleTextWindow: used to place other widgetson the canvas (egbuttons)
![Page 41: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/41.jpg)
Tkinter Canvas Options
Distancexscrollincrement, yscrollincrementFunctionxscrollcommand, yscrollcommandList of 4 coordinatesscrollregionBooleanconfineFloatcloseenough
Possible ValuesOption
![Page 42: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/42.jpg)
Manipulating Items
Item creation functions (create_line( ), create_oval( ), etc.) all return the item ID of the newly created canvas itemThe itemconfigure( ) method is used to configure canvas items after their creation
(See Tkinter documentation or Online Presentation for more information)
![Page 43: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/43.jpg)
Tkinter coordinate systems
2 coordinate systems:Canvas coordinate system: origin at the top-left corner of the canvas (may not be visible)Window coordinate system: origin at the top-left corner of the visible portion of the canvas
Event objects use the Window coord. sys.canvasx( ) and canvasy( ) methods can convert coords to Canvas coord. sys.
![Page 44: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/44.jpg)
Canvas and Tags
Tags are strings that can be associated with any canvas itemMore than one item can have the same tag, and a single item can have multiple tagsThis allows to create groups of itemsCanvas items can be interchangeably referenced by ID (integers) or tags.
![Page 45: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/45.jpg)
Canvas and Tags (cont.)
What happens to function which only take one item as parameter?Tkinter provides a very good approach: the first (lowest) item in the display list that matches the tag is usedBinding can also be done on canvas items by using the tag_bind( ) and tag_unbind( ) functions
![Page 46: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/46.jpg)
Special Tags
CURRENT (“current”): the item that is currently situated under the mouse cursor is automatically assigned the CURRENT tag. (Note: don’t use this tag manually!!)ALL (“all”): this special tag matches all items in the canvas
![Page 47: An Introduction to Tkinter - McGill University](https://reader030.vdocuments.mx/reader030/viewer/2022012805/61bd332461276e740b1054b3/html5/thumbnails/47.jpg)
To obtain more information:
Presentation web site: http://pages.infinit.net/bdufou1/Official Python website: http://www.python.org/John E. Grayson. Python and Tkinterprogramming. Manning, 2000.