Previously, we touched upon GUI in the section on what can be done with Python. For the sake of discussion, let’s revisit a few points.
GUI stands for Graphical User Interface. There is no alternative to GUI programming to simplify the tasks of a computer used by common people in daily life. For example, when we write in Microsoft Word, it has a user interface that makes it accessible to everyone. Similarly, the browser you are using to view this website has a specific interface. In this segment, we will learn how to create such user interfaces.
Python has many GUI libraries, with Tkinter being the most widely used. The best part is that it comes bundled with Python 3, so there’s no need for a separate installation.
Creating the First Window
Let’s see how to create a window. It’s very easy:
import tkinter # importing the tkinter
window = tkinter.Tk()
window.mainloop()
When you run this code, you will see an empty window like this:
Creating the first window using Tkinter in Python.
- In the first line, we import Tkinter, which means we are telling the program that we will use this module.
- In the third line, we create a window using the
Tk()
method. - In the fifth line, we use a loop.
mainloop()
is a special kind of function that keeps running indefinitely until the window is closed, making the window visible.
Tkinter Widget
Everything in Tkinter is a widget. All commonly used elements are stored as widgets. Let’s look at how to use each one of them.
button()
This widget is used to create a button in the window.
import tkinter
window = tkinter.Tk()
btn=tkinter.Button(window,text="Click Here")
btn.pack()
window.mainloop()
When you run this code, you will see a window with a button labeled “Click Here”:
A button named “Click Here” is created in the window. However, we haven’t specified what will happen when the button is clicked, so clicking it will not produce any result. The command
attribute is used to specify the action of a button click.
# This example is to work with tkinter button using python
import tkinter
window = tkinter.Tk()
btn=tkinter.Button(window,text="Click Here",command=window.destroy)
btn.pack()
window.mainloop()
When you run this code, clicking the button will close the window because we have used the built-in method destroy()
in the command
attribute to close the window.
Note that the pack()
method is used in the eighth line for alignment, in one word, for layout. Tkinter has three such methods for this purpose:
- pack(): Places the widgets in a single column sequentially.
- grid(): Converts the layout into a table-like grid and places the widgets in the grids.
- place(): Places the widgets in a specific position.
Moreover, each widget has various properties that can be used to create new designs easily. Let’s look at the properties of a button:
Name | Example | Description |
---|---|---|
activebackground | Any hexadecimal color value, e.g., #000000, or a direct color name, e.g., black, green, etc. | Used to define the background color when the button is active. |
activeforeground | Any hexadecimal color value, e.g., #000000, or a direct color name, e.g., black, green, etc. | Used to define the font color when the button is active. |
bd | Pixel value, e.g., any integer like 2, 5, 10, 20, etc. | Used to set the width or thickness of the border. |
bg | Any hexadecimal color value, e.g., #000000, or a direct color name, e.g., black, green, etc. | Used to set the background color of the button. |
command | Function name. | Used to call a function or callback function. |
fg | Any hexadecimal color value, e.g., #000000, or a direct color name, e.g., black, green, etc. | Used to set the font color of the button. |
font | Font name | Used to change the font of the button. |
height | Pixel value, e.g., any integer like 2, 5, 10, 20, etc. | Used to set the height of the button. |
image | Location or name of the image, e.g., file=”python.png” | Used to use an image on the button. |
justify | Three values: left, center, and right. | Used to specify the position of the button, i.e., whether it will be left, center, or right-aligned. |
padx | Pixel value, e.g., any integer like 2, 5, 10, 20, etc. | Used to provide padding to the left or right of the button. |
pady | Pixel value, e.g., any integer like 2, 5, 10, 20, etc. | Used to provide padding to the top or bottom of the button. |
relief | Values: flat, raised, sunken, groove, ridge | Used to design the border of the button. |
state | Default is active. If state=”disabled”, the button will appear inactive. | Used to determine whether the button will be active or inactive. |
underline | Default value is -1, the first character starts from 0. | Used to underline a character. |
width | Pixel value, e.g., any integer like 2, 5, 10, 20, etc. | Used to set the width of the button. |
wraplength | Pixel value, e.g., any integer like 2, 5, 10, 20, etc. | Used to set the width of the button. |