Chapter 9 GUI Programming Using Tkinter - W3 … · Chapter 9 GUI Programming Using Tkinter ... To use labels, entries, ... Getting started with Tkinter with a simple example

© Copyright 2012 by Pearson Education, Inc. All Rights Reserved. 1

Chapter 9 GUI Programming Using Tkinter


Motivations

Tkinter is not only a useful tool for developing GUI projects, but also a valuable pedagogical tool for learning object-oriented programming.


Objectives ✦  To create a simple GUI application using Tkinter (§9.2). ✦  To process events using callback functions bound to widget’s command option (§9.3). ✦  To use a variety of widget classes to create widgets (§9.4). ✦  To use labels, entries, buttons, check buttons, radio buttons, messages, and texts to create graphical

user interfaces (§9.4). ✦  To draw lines, rectangles, ovals, polygons, and arcs and display strings in a canvas (§9.5). ✦  To encapsulate data fields to make classes easy to maintain (§9.5). ✦  To layout widgets in a container using the geometry managers (§9.6). ✦  To pack widgets side-by-side or a top of each other using the pack manager (§9.6.1). ✦  To layout widgets in a grid using the grid manager (§9.6.2). ✦  To place widgets in absolute locations using the manager (§9.6.3). ✦  To use containers to group widgets to achieve desired layout (§9.7). ✦  To use images in widgets (§9.8). ✦  To create applications using menus (§9.9). ✦  To create applications using popup menus (§9.10). ✦  To bind mouse and key event on a widget to a callback function for processing events (§9.11). ✦  To develop animations (§9.12). ✦  To use scrollbars to scroll contents in a Text widget (§9.13). ✦  To use standard dialog boxes for display messages and receive input (§9.14).


Getting Started with Tkinter Getting started with Tkinter with a simple example.

SimpleGUI Run


Processing Events window.mainloop() # Create an event loop The statement creates an event loop. The event loop processes the events continuously.

ProcessButtonEvent

Run

Event to Process?

Yes

false

Start Event Loop

Request to Terminate?

Process

Yes

No

Terminate


The Widget Classes Widget Class Description

Button A simple button, used to execute a command. Checkbutton Clicking a check button toggles between the values. Radiobutton Clicking a radio button sets the variable to that value,

and clears all other radio buttons associated with the same variable.

Entry A text entry field, a.k.a a text field or a text box. Frame A container widget for containing other widgets. Menu A menu pane, used to implement pull down and popup menus. Menubutton A menu button, used to implement pull down menus. Label Displays a text or an image. Message Displays a text. Similar to the label widget, but can

automatically wrap text to a given width or aspect ratio. Text Formatted text display. Allows you to display and edit

text with various styles and attributes. Also supports embedded images and windows.

Scale Allows you to set a numerical value by dragging a

"slider". Canvas Structured graphics, used to draw graphs and plots,

create graphics editors, and to implement custom widgets. Toplevel A container widget displayed as a separate, top-level

window.


Color and Font To specify a color, you can either use a color name such as red, yellow, green, blue, white, black, purple, etc, or explicitly specify the red, green, and blue (RGB) color components using a string #RRGGBB, where RR, GG, BB are hexadecimal representations of the red, green and blue values, respectively.

"Times 10 bold" "Helvetica 10 bold italic" "Courier New 20 bold italic" "Courier New 20 bold italic over strike underline"


Text Formatting The text in a label and a button is centered by default. You can change it by using the justify option with values LEFT, CENTER, or RIGHT. You can also display the text in multiple lines by inserting the newline character \n to separate texts.


Mouse Cursor You can set a mouse cursor by using the cursor option with values such as "arrow" (default), "circle", "cross" "plus", etc.


Change Properties widgetName["propertyName] = newPropertyValue

btShowOrHide = Button(window, text = "Show", bg = "white") btShowOrHide["text"] = "Hide" btShowOrHide["bg"] = "red" btShowOrHide["fg"] = "#AB84F9" # Change fg color to #AB84F9 btShowOrHide["cursor"] = "plus" # Change mouse cursor to plus


Widget Demo

WidgetsDemo Run


Canvas

(0, 0) X Axis

Y Axis

(x, y)

x

y

Python Coordinate System

X Axis Conventional Coordinate System

(0, 0)

Y Axis

Canvas can be used to display shapes. You can use the method such as create_rectangle, create_oval, create_arc, create_polygon, and create_line to draw a rectangle, oval, arc, polygon, and line on a canvas.


Canvas Demo

CanvasDemo Run


Drawing Methods (x1 , y1 )

(x2, y2)

canvas.create_rectangle(x1, y1, x2, y2)

(x1, y1)

(x2, y2)

canvas.create_oval(x1, y1, x2, y2)

(x1, y1)

(x2 , y2 )

canvas.create_arc(x1, y1, x2, y2, start , extent)

canvas.create_line(x1, y1, x2, y2)

canvas.create_oval(x1, y1, x2, y2, x3, y3)

(x, y)

canvas.create_text(x, y, text = "ABCDE")

(x1, y1) (x2, y2)

(x1, y1)

(x3, y3)

(x2, y2) ABCDE


Geometry Managers Grid Manager Pack Manager Place Manager Since each manager has its own style of placing

the widget, it is not a good practice to mix the managers for the widgets in the same container. You can use a frame as a subcontainer to achieve desired layout.


Grid Managers

GridManagerDemo Run


Pack Managers

PackManagerDemo2 Run

PackManagerDemo1 Run


Place Managers

PlaceManagerDemo Run


Case Study: Loan Calculator

LoanCalculator Run

equivalent

label

label

label

label

entry

entry

entry

label

label

label

button


Display Images You can add an image in a label, button, check

button, and radio button. To create an image, use the PhotoImage class as follows:

photo = PhotoImage(file = imagefilename) The image file must be GIF. You can use a

conversion utility to convert image files in other format into GIF.


Image Example

ImageDemo Run


Menus Tkinter provides a comprehensive solution for building graphical user interfaces.

MenuDemo Run


Popup Menus

PopupMenuDemo Run


Mouse and Key Events

widget.bind(event, handler) def popup(event): menu.post(event.x_root, event.y_root)


Events Event Description

<Button-i> Button-1, Button-2, and Button-3 are for left, middle, or right buttons. When a mouse button is pressed over the widget, Tkinter automatically grabs the mouse pointer location. ButtonPressed-i is synonymous to Button-i.

<Bi-Motion> An event occurs, when a mouse button is moved while being

held down on the widget. <ButtonReleased-i> An event occurs, when a mouse button is released. <Double-Button-i> An event occurs, when a mouse button is double-clicked. <Triple-Button-i> An event occurs, when a mouse button is triple-clicked. <Enter> An event occurs, when a mouse pointer enters the widget. <Leave> An event occurs, when a mouse pointer leaves the widget. <Return> An event occurs, when the Enter key is pressed. You can

bind any key such as <A>, <B>, <Up>, <Down>, <Left>, <Right> in the keyboard with an event.

<Key> An event occurs, when a key is pressed. <Shift-A> An event occurs, when the Shift+A keys are pressed. You

use Alt, Shift, and Control to combine with other keys.


Event Properties Event Description

widget The widget object that fires this event. x and y The current mouse location in the widget pixels. x__root and y_root The current mouse position relative to the upper left

corner of the screen, in pixels. num The button number (1, 2, 3), indicating which mouse

button was clicked. char The char entered from the keyboard for key events. keysym The key symbol for the key entered from the keyboard for

key events. keycode The key code for the key entered from the keyboard for

key events.


Mouse Key Event Demo

MouseKeyEventDemo Run


Control Circle Demo

ControlCircle Run


Animations

AnimationDemo Run


Control Animations

ControlAnimation Run


Scrollbar

ScrollText Run


Standard Dialogs

DialogDemo Run

Documents

Chapter 9 GUI Programming Using Tkinter - W3 … · Chapter 9 GUI Programming Using Tkinter ... To use labels, entries, ... Getting started with Tkinter with a simple example