Chapter 9 GUI Programming Using Tkinter. Copyright 2012 by Pearson Education, Inc. All Rights Reserved.

Transcription

1 Chapter 9 GUI Programming Using Tkinter 1

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

3 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). 3

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

5 Processing Events window.mainloop() # Create an event loop The statement creates an event loop. The event loop processes the events continuously. Start Event Loop Event to Process? false Yes Request to Terminate? Terminate Yes No Process ProcessButtonEvent 5

6 The Widget Classes Widget Class Button Checkbutton Radiobutton Entry Frame Menu Menubutton Label Message Text Scale Canvas Toplevel Description A simple button, used to execute a command. Clicking a check button toggles between the values. Clicking a radio button sets the variable to that value, and clears all other radio buttons associated with the same variable. A text entry field, a.k.a a text field or a text box. A container widget for containing other widgets. A menu pane, used to implement pull down and popup menus. A menu button, used to implement pull down menus. Displays a text or an image. Displays a text. Similar to the label widget, but can automatically wrap text to a given width or aspect ratio. Formatted text display. Allows you to display and edit text with various styles and attributes. Also supports embedded images and windows. Allows you to set a numerical value by dragging a "slider". Structured graphics, used to draw graphs and plots, create graphics editors, and to implement custom widgets. A container widget displayed as a separate, top-level window. 6

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

8 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. 8

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

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

11 Widget Demo WidgetsDemo 11

12 Canvas 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. x (0, 0) X Axis Y Axis y Y Axis (x, y) Python Coordinate System Conventional Coordinate System (0, 0) X Axis 12

13 Canvas Demo CanvasDemo 13

14 Drawing Methods (x1, y1 ) (x1, y1) (x1, y1) (x2, y2) (x2, y2) (x2, y2 ) canvas.create_rectangle(x1, y1, x2, y2) canvas.create_oval(x1, y1, x2, y2) canvas.create_arc(x1, y1, x2, y2, start, extent) (x1, y1) (x1, y1) (x2, y2) AB CDE (x2, y2) (x3, y3) (x, y) canvas.create_line(x1, y1, x2, y2) canvas.create_oval(x1, y1, x2, y2, x3, y3) canvas.create_text(x, y, text = "AB CDE") 14

15 Grid Manager Pack Manager Place Manager Geometry Managers 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. 15

16 Grid Managers GridManagerDemo 16

17 Pack Managers PackManagerDemo1 PackManagerDemo2 17

18 Place Managers PlaceManagerDemo 18

19 Case Study: Loan Calculator label label label label label entry entry entry label label button LoanCalculator 19

20 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. 20

21 Image Example ImageDemo 21

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

23 Popup Menus PopupMenuDemo 23

24 Mouse and Key Events widget.bind(event, handler) def popup(event): menu.post(event.x_root, event.y_root) 24

25 Events Event <Button-i> <Bi-Motion> Description 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. 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> <Triple-Button-i> <Enter> <Leave> <Return> <Key> <Shift-A> An event occurs, when a mouse button is double-clicked. An event occurs, when a mouse button is triple-clicked. An event occurs, when a mouse pointer enters the widget. An event occurs, when a mouse pointer leaves the widget. 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. An event occurs, when a key is pressed. An event occurs, when the Shift+A keys are pressed. You use Alt, Shift, and Control to combine with other keys. 25

26 Event Properties Event widget x and y Description The widget object that fires this event. 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 char keysym keycode The button number (1, 2, 3), indicating which mouse button was clicked. The char entered from the keyboard for key events. The key symbol for the key entered from the keyboard for key events. The key code for the key entered from the keyboard for key events. 26

27 Mouse Key Event Demo MouseKeyEventDemo 27

28 Control Circle Demo ControlCircle 28

29 Animations AnimationDemo 29

30 Control Animations ControlAnimation 30

31 Scrollbar ScrollText 31

32 Standard Dialogs DialogDemo 32