1. COMPSA Exam Prep Session by Paul Allison On: April 8th from 1:30-3:00 Location TBA Winter 2016CISC101 - Prof. McLeod1

2. Today… Continue GUI with Tkinter: –Labels –Using the grid manager –Widget properties and how to change them –Buttons –Getting a button to do something. Winter 2016CISC101 - Prof. McLeod2

3. 3 Using the tkinter Module First you must import the tkinter module: import tkinter Or: from tkinter import * If this does not work, then you may have to install the module – but, for Windows Python installs, it should already be there. Winter 2016

4. CISC101 - Prof. McLeod4 Using tkinter, Cont. Create your main window (or “root” window) using: top_window = tkinter.Tk() Then start the main loop using: tkinter.mainloop() (This assumes you used the first import statement.) Winter 2016

5. CISC101 - Prof. McLeod5 Using tkinter, Cont. The first line: top_window = tkinter.Tk() invokes the constructor method for the Tk object and now top_window is an object of this type. The main loop is the main “listener” loop for the window – it will wait very patiently for the user to do something! See Window1.py. Note functionality built into even this simple window! Winter 2016

6. CISC101 - Prof. McLeod6 Add a Label See Window2.py: helloWorldLabel = tkinter.Label(top, text="HelloWorld!") helloWorldLabel.pack() The pack() is invoked to place the label into the first available position in the window. Pretty small font – see Window3.py How can we get away from this top-down stacking of widgets in the window? Winter 2016

7. CISC101 - Prof. McLeod7 Using Frames See Window4.py Create a Frame, add labels to the Frame, pack the labels and specify a relative position in the Frame, then pack the Frame. Winter 2016

8. So Far… Can change the window title. Add labels. Customize the font of the label. Use frames. But, using the packer makes for some pretty ugly designs!! CISC101 - Prof. McLeod8Winter 2016

9. CISC101 - Prof. McLeod9 The Grid Manager The “packer” is very simple but just jams stuff in from top to bottom. You must use frames to get more than one widget in a row. The Grid manager is an alternative that is just a bit harder to use. You specify a row and column position instead. Do not mix the packer and grid together – use one or the other! Winter 2016

10. CISC101 - Prof. McLeod10 The Grid Manager, Cont. Grid method syntax:.grid(row=?, column=?, rowspan=?, columnspan=?, sticky="news", ipadx=?, ipady=?, padx=?, pady=?) "news" is North, East, West, and/or South. row, column positions and rowspan, columnspan are ints. Other “pad” dimensions are in pixels. Winter 2016

11. CISC101 - Prof. McLeod11 The Grid Manager, Cont. See Window5.py Note how the columns and rows are sized to the width and height of the largest widget in that row or column. Widgets are centre-aligned by default – change this using the sticky option. They can span multiple rows and columns – use rowspan or columnspan (or both!). Add extra “padding” using padx and pady. Winter 2016

12. CISC101 - Prof. McLeod12 Widget Options or “Properties” Before we go too much further: widget_name.keys() gives you a list of dictionary keys, each of which is an option or “property” that can be changed for that widget. Any set of these keys can be set when you create the widget. widget_name.configure() (no parameters) gives you a list of the keys and their values (a dictionary). Winter 2016

13. CISC101 - Prof. McLeod13 Widget Options, Cont. widget_name.cget(option) gives the value of the specified option as a string. widget_name.configure(option=?, option=?, …) allows you to change as many options as you want all at once. Winter 2016

14. Widget Properties, Cont. While many properties are common to every widget a few are unique for a particular widget type. All of the label properties: CISC101 - Prof. McLeod14Winter 2016

15. activebackground : SystemButtonFace activeforeground : SystemButtonText anchor : center background : SystemButtonFace bd : 2 bg : SystemButtonFace bitmap : borderwidth : 2 compound : none cursor : disabledforeground : SystemDisabledText fg : SystemButtonText font : Times 20 bold foreground : SystemButtonText height : 0 highlightbackground : SystemButtonFace highlightcolor : SystemWindowFrame CISC101 - Prof. McLeod15 highlightthickness : 0 image : justify : center padx : 1 pady : 1 relief : flat state : normal takefocus : 0 text : Hello textvariable : underline : -1 width : 0 wraplength : 0 Label Properties and Default Values Winter 2016

16. Widget Properties, Cont. The property values that start with System… are determined by your OS preference settings. Most properties will remain at their default values – you only change the ones you want to change. For a reference on tkinter, see: http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/index.html CISC101 - Prof. McLeod16Winter 2016

17. Getting/Setting Widget Properties Use the cget method along with the property name to get the current property value: testLabel.cget("text") Or, you can treat the widget variable as a dictionary: testLabel["text"] CISC101 - Prof. McLeod17Winter 2016

18. Getting/Setting Widget Properties, Cont. Use the configure method to set the property value: testLabel.configure(text="Hello") Or: testLabel.config(text="Hello") Or, use it as a dictionary again: testLabel["text"] = "Hello" CISC101 - Prof. McLeod18Winter 2016

19. Demo Program See LabelProperties.py Using the “gridder” instead of the “packer”. Explores: –the basic form –widget properties, especially for a Label –using and configuring the grid –padding, anchoring, spacing, colours, cursors, fonts, an image in a widget, borders, backgrounds, … –the use of a LabelFrame widget Winter 2016CISC101 - Prof. McLeod19

20. Named Colours See http://wiki.tcl.tk/37701 Lots of them! Also see “Widget Styling” in “Tkinter docs from effbot”: http://effbot.org/tkinterbook/tkinter-widget- styling.htm You can use a colour chooser dialog to allow the user to set colours (remember the “spiral” demo?) Winter 2016CISC101 - Prof. McLeod20

21. Widgets The most common widgets in windows are buttons, labels and entry (or text) boxes. You can build some very functional GUI windows with just these components. So far we have just covered labels. Not very “interactive” windows! Yet! CISC101 - Prof. McLeod21Winter 2016

22. CISC101 - Prof. McLeod22 Button Widget A button allows the user to initiate some event, most often to invoke some function in your program. Syntax: button = Tkinter.Button(master, text=?, command=?) master is the window’s name. This parameter must be present when you create any widget. Winter 2016

23. CISC101 - Prof. McLeod23 Button Widget, Cont. See Window6.py. Note that the command option is given the name of a function, not as a string and it cannot have brackets or parameters. Why are top and testLabel global variables? That window re-sizing thing is really annoying! How to fix it? Winter 2016

24. CISC101 - Prof. McLeod24 Grid Manager Methods Use the columnconfigure() or rowconfigure() methods on the master (“top” in our demos): columnconfigure(column, option=value,...) Options include: minsize, pad and weight. Winter 2016

25. A Button See ButtonDemo.py: –Binding a function call to a button event. –Binding a keypress event to the window. –Jazzing up the button. Note that the function call (the “handler”) for the button click cannot take any arguments and cannot return anything. The keypress binding can only have the event object. See the help docs for all the event members that you can use. Winter 2016CISC101 - Prof. McLeod25