Please follow the steps in the attached document to play with Tkinter. There is no single way to complete this assignment, just have fun with it and submit what you create based on these steps or anything you come up with that is GUI
Create your first GUI application First, we will import Tkinter package and create a window and set its title: 1 2 3 4 5 6 7 from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") window.mainloop() The result will be like this: Awesome!! Our application just works. The last line which calls mainloop function, this function calls the endless loop of the window, so the window will wait for any user interaction till we close it. If you forget to call the mainloop function, nothing will appear to the user. Create a label widget To add a label to our previous example, we will create a label using the label class like this: lbl = Label(window, text="Hello") Then we will set its position on the form using the grid function and give it the location like this: lbl.grid(column=0, row=0) So the complete code will be like this: 1 2 3 4 5 6 7 8 9 10 11 from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") lbl = Label(window, text="Hello") lbl.grid(column=0, row=0) window.mainloop() And this is the result: Without calling the grid function for the label, it won’t show up. Set label font size You can set the label font so you can make it bigger and maybe bold. You can also change the font style. To do so, you can pass the font parameter like this: lbl = Label(window, text="Hello", font=("Arial Bold", 50)) Note that the font parameter can be passed to any widget to change its font not labels only. Great, but the window is so small, we can even see the title, what about setting the window size? Setting window size We can set the default window size using geometry function like this: window.geometry('350x200') The above line sets the window width to 350 pixels and the height to 200 pixels. Let’s try adding more GUI widgets like buttons and see how to handle button click event. Adding a button widget Let’s start by adding the button to the window, the button is created and added to the window the same as the label: 1 2 3 btn = Button(window, text="Click Me") btn.grid(column=1, row=0) So our window will be like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') lbl = Label(window, text="Hello") lbl.grid(column=0, row=0) btn = Button(window, text="Click Me") btn.grid(column=1, row=0) window.mainloop() The result looks like this: Note that we place the button on the second column of the window which is 1. If you forget and place the button on the same column which is 0, it will show the button only, since the button will be on the top of the label. Change button foreground and background colors You can change foreground for a button or any other widget using fg property. Also, you can change the background color for any widget using bg property. btn = Button(window, text="Click Me", bg="orange", fg="red") Now, if you tried to click on the button, nothing happens because the click event of the button isn’t written yet. Handle button click event First, we will write the function that we need to execute when the button is clicked: 1 2 3 def clicked(): lbl.configure(text="Button was clicked !!") Then we will wire it with the button by specifying the function like this: btn = Button(window, text=“Click Me”, command=clicked) Note that, we typed clicked only not clicked() with parentheses. Now the full code will be like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') lbl = Label(window, text="Hello") lbl.grid(column=0, row=0) def clicked(): lbl.configure(text="Button was clicked !!") btn = Button(window, text="Click Me", command=clicked) btn.grid(column=1, row=0) window.mainloop() And when we click the button, the result as expected: Cool!! Get input using Entry class (Tkinter textbox) In the previous Python GUI examples, we saw how to add simple widgets, now let’s try getting the user input using Tkinter Entry class (Tkinter textbox). You can create a textbox using Tkinter Entry class like this: txt = Entry(window,width=10) Then you can add it to the window using grid function as usual So our window will be like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') lbl = Label(window, text="Hello") lbl.grid(column=0, row=0) txt = Entry(window,width=10) txt.grid(column=1, row=0) def clicked(): lbl.configure(text="Button was clicked !!") btn = Button(window, text="Click Me", command=clicked) btn.grid(column=2, row=0) window.mainloop() And the result will be like this: Now, if you click the button, it will show the same old message, what about showing the entered text on the Entry widget? First, you can get entry text using get function. So we can write this code to our clicked function like this: 1 2 3 4 5 def clicked(): res = "Welcome to " + txt.get() lbl.configure(text= res) If you click the button and there is a text on the entry widget, it will show “Welcome to” concatenated with the entered text. And this is the complete code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 from tkinter import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') lbl = Label(window, text="Hello") lbl.grid(column=0, row=0) txt = Entry(window,width=10) txt.grid(column=1, row=0) def clicked(): res = "Welcome to " + txt.get() lbl.configure(text= res) btn = Button(window, text="Click Me", command=clicked) btn.grid(column=2, row=0) window.mainloop() Run the above code and check the result: Awesome!! Every time we run the code, we need to click on the entry widget to set focus to write the text, what about setting the focus automatically? Set focus to entry widget That’s super easy, all we need to do is to call focus function like this: txt.focus() And when you run your code, you will notice that the entry widget has the focus so you can write your text right away. Disable entry widget To disable entry widget, you can set the state property to disabled: txt = Entry(window,width=10, state='disabled') Now, you won’t be able to enter any text. Add a combobox widget To add a combobox widget, you can use the Combobox class from ttk library like this: 1 2 3 from tkinter.ttk import * combo = Combobox(window) Then you can add your values to the combobox. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 from tkinter import * from tkinter.ttk import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') combo = Combobox(window) combo['values']= (1, 2, 3, 4, 5, "Text") combo.current(1) #set the selected item combo.grid(column=0, row=0) window.mainloop() As you can see, we add the combobox items using the tuple. To set the selected item, you can pass the index of the desired item to the current function. To get the select item, you can use the get function like this: combo.get() Add a Checkbutton widget (Tkinter checkbox) To create a checkbutton widget, you can use Checkbutton class like this: chk = Checkbutton(window, text='Choose') Also, you can set the checked state by passing the check value to the Checkbutton like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 from tkinter import * from tkinter.ttk import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') chk_state = BooleanVar() chk_state.set(True) #set check state chk = Checkbutton(window, text='Choose', var=chk_state) chk.grid(column=0, row=0) window.mainloop() Check the result: Set check state of a Checkbutton Here we create a variable of type BooleanVar which is not a standard Python variable, it’s a Tkinter variable, and then we pass it to the Checkbutton class to set the check state as the highlighted line in the above example. You can set the Boolean value to false to make it unchecked. Also, you can use IntVar instead of BooleanVar and set the value to 0 or 1. 1 2 3 4 5 chk_state = IntVar() chk_state.set(0) #uncheck chk_state.set(1) #check These examples give the same result as the BooleanVar. Add radio buttons widgets To add radio buttons, simply you can use RadioButton class like this: rad1 = Radiobutton(window,text='First', value=1) Note that you should set the value for every radio button with a different value, otherwise, they won’t work. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 from tkinter import * from tkinter.ttk import * window = Tk() window.title("Welcome to LikeGeeks app") window.geometry('350x200') rad1 = Radiobutton(window,text='First', value=1) rad2 = Radiobutton(window,text='Second', value=2) rad3 = Radiobutton(window,text='Third', value=3) rad1.grid(column=0, row=0) rad2.grid(column=1, row=0) rad3.grid(column=2, row=0) window.mainloop() The result of the above code looks like this: Also, you can set the command of any of these radio buttons to a specific function, so if the user clicks on any one of them, it runs the function code. This is an example: 1 2 3 4 5 rad1 = Radiobutton(window,text='First', value=1, command=clicked) def clicked(): # Do what you need Pretty simple!! Get radio button value (selected radio button) To get the currently selected radio button or the radio button value, you can pass the variable parameter to the radio buttons and later you can get its value. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 from tkinter import * from tkinter.ttk import * window = Tk() window.title("Welcome to LikeGeeks app") selected = IntVar() rad1 = Radiobutton(window,text='First', value=1, variable=selected) rad2 = Radiobutton(window,text='Second', value=2, variable=selected) rad3 = Radiobutton(window,text='Third', value=3, variable=selected) def clicked(): print(selected.get()) btn = Button(window, text="Click Me", command=clicked) rad1.grid(column=0, row=0) rad2.grid(column=1, row=0) rad3.grid(column=2, row=0) btn.grid(column=3, row=0) window.mainloop() Every time you select a radio button, the value of the variable will be changed to the value of the selected radio button.