Hello #Phyton aficionados!
Today we are starting a new series of Python #GUI interfaces with #tkinter and #customtkinter to introduce the Graphical User Interfaces with Python Tkinter and CustomTkinter.
Python tutorials are everywhere. OOP programming as well as Web development lessons with Django are available from sources far more knowledgeable than me (I am talking about you Vinicius Ramos!).
But one thing I have noticed that isn't extensively taught or available is the development of user interfaces for computers (I mean the programs that can run on your desktop or laptop computer)
So to help the community, I decided to create a series of tutorials that will introduce and develop interfaces in a progressive way. Introducing diverse concepts focused on Tkinter GUIs development.
So, let's start with out first tutorial! To give a quick introduction: (not a complete one; for more details and in-depth information, please refer to the official Tkinter documentation), Tkinter is a tool/package that generates commands for creating and manipulating graphical interfaces. These commands will interact with the operating system to create the graphical interface.
Without going too deep, let's develop a simple window that says "Hello World!" (Following the official documentation beforementioned)
from tkinter import *
from tkinter import ttk
root = Tk()
frm = ttk.Frame(root, padding=10)
frm.grid()
ttk.Label(frm, text="Hello World!").grid(column=0, row=0)
root.mainloop()As we know, first we have to import the Tkinter module (or package), and also ttk which will give us a more modern look.
The second step is to create an instance of the Tk class (line 3).
Now that we have a class declared, the next step is to define a frame for our window and the Title (label).
Just like in an HTML code where we can organize items in a CSS-like grid format, here we will implement our frame (frm) in a grid format.
And finally, we will present the text "Hello World!" at position 0, 0 (initial) and on the last line, we will call our class to run in the mainloop().
And the final result is this little window with the text "Hello World".
But is that all?!?!?
No! Now we're getting to the good part!
Tkinter itself is a simple interface with a simple look, but the programmer Tom Schimansky took it a step further and created a customized Tkinter library that has a much more modern and user-friendly look.
So let's rebuild our program based on this CustomTkinter and explore the use of buttons in our program.
import customtkinter
customtkinter.set_appearance_mode("light") # Modes: "System" (standard), "Dark", "Light"
customtkinter.set_default_color_theme("blue") # Themes: "blue" (standard), "green", "dark-blue"
app = customtkinter.CTk()
app.geometry("300x100")
app.title("Hello World example")
frame_1 = customtkinter.CTkFrame(master=app)
frame_1.pack(pady=20, padx=60, fill="both", expand=True)
label_1 = customtkinter.CTkLabel(master=frame_1, text="Hello World", justify=customtkinter.CENTER)
label_1.pack(pady=10, padx=10)
app.mainloop()Here, the first step is to import CustomTkinter, then to choose between dark or light mode and also to define the appearance of details (such as buttons) with colors.
After the basic setup, we create an instance of the CustomTkinter class (very similar to what we did with traditional Tkinter).
Then we define the size of the window and the title (lines 7 and 8).
Now that we have the window and title defined, we proceed by creating a frame (to make it look nicer) with sizes dependent on the size of our window.
We also need to declare a Label with a text with the value "Hello World" and we're done.
Note that this text is declared inside frame_1 (we can have several frames and we have to specify in which frame a particular item is) and also note that we are justifying the text to the CENTER, but we will get a similar result with LEFT.
The final result is shown below.
But to give that last touch of customization to our program, let's explore the use of buttons!
Buttons are by far the most important tool for any program, and knowing how to use them to activate functions is the most fundamental part of any graphical interface.
So, let's make a button that will display the text "Hello World" in our frame_1.
The first step is to add a button to our window (and increase the overall size of the window to fit everything).
Then we add a button inside frame_1 that will trigger the button_callback() function.
Now let's define the button_callback() function, and the only thing it does is to display a text message ("Hello World") in frame_1.
So it's ideal and easier to already have a skeleton of a label (text) ready in the frame but declared as "", and after calling the button_callback() function, we change the text to the value of the function.
And there you have it, now we have completed the code so that the text appears after clicking the button.
And with that, we have concluded our introduction to Tkinter and CustomTkinter.
We covered the Labels text display, frames, arranging the items in the window and finally the use of buttons to trigger functions.
The complete code for this tutorial is here.
I am leaving to you the task to create a second frame with a second button that triggers another function!!!
If you liked this tutorial or have any question, please leave a comment!
I hope to see all of you in our next tutorial!
Comments