GUI Programming

In

Python

using

tkinter
Introduction:
• A graphical user interface is an application that has buttons, windows, and lots of other
component (widgets or windowing objects) that the user can use to interact with application.
e.g. Calculator
• These windowing objects can be text labels, buttons, list boxes, etc. These individual little GUI
components are known as widgets.
• Python provide a library tkinter (Tea-Kay-inter) for developing GUI (Graphical User Interface). It is
Python's standard GUI (Graphical User Interface) package. It is the most commonly used tool kit
for GUI Programming in Python
• A tkinter window application can be created by using the following steps.
1. Import the tkinter module.
import tkinter or from tkinter import *
2. Create the main application window using Tk() method
w= tkinter.Tk() or w=Tk()
3. Add the widgets like Labels, Entry, Buttons, Frames, etc. into created the window.
4. Call mainloop() method to run application it is the main event loop so that the actions can
take place on the user's computer screen.
w.mainloop()
Example: tkndemo.py
Import tkinter
top=tkinter.Tk() #creating the application main window.
top.title("Welcome") #title of main window
top.geometry("400x300") #size of main window
top.mainloop() #calling the event main loop
Output:
Title of window

Main Window of size

(400x300)
• Tkinter also offers access to the geometric configuration of the Widgets which can
organize the widgets in the parent windows. Following geometry methods-
1. pack() method: The pack() method is used to organize components or widgets in
main window. Syntax: widget.pack(options)
where value of options is side: it represents the side to which the widget is
to be placed on the window. Side may be LEFT or RIGHT or TOP (default ) or
BOTTOM. e.g. widget.pack(side=LEFT)
2. grid() method: The grid() method organizes the widgets in the tabular form. We can specify
the rows and columns as the options in the method call. This is a more organized way to
place the widgets to the python application. Syntax: widget.grid(options)
where value of options are-
i) column: The column number in which the widget is to be placed. The Left most
column is represented by 0.
ii) padx, pady: It represents the number of pixels to pad the widget outside the
widget's border.
iii) row: The row number in which the widget is to be placed. The top most row is
represented by 0. e.g. widgets.grid(row=1,column=0,pady=10,padx=5)
3. place() method: The place() method organizes the widgets to the specific x and
y coordinates. Syntax: widget.place(x,y) where x, y: refers to the horizontal and
vertical offset in the pixels. e.g. widget.place(x=100, y=50)
• Tkinter widgets or components: Tkinter supports various widgets or components to build
GUI application in python.
Widget Description

Button Creates various buttons in Python Application.

Checkbutton Select one or more options from multiple options.(Checkbox)

Entry Allows the user to enter single line of text(Textbox)

Frame Acts like a container which can be used to hold the other widgets

Label Used to display on editable text on window

Listbox Display the list items, The user can choose one or more items.

Radiobutton Select one option from multiple options.

Text Allows the user to enter single or multiple line of text(Text area)

Scale Creates the graphical slider, the user can slide through the range of values

Toplevel Used to create and display the top-level windows(Open a new window)
 Button Widget in tkinter: The Button is used to add various kinds of buttons to the python application. We
can also associate a method or function with a button which is called when the button is pressed.
Syntax: b=Button(parent,options)
The options are-
i. activebackground: It represents the background of the button when it is active.
ii. activeforeground: It represents the font color of the button when it is active.
iii. bd: It represents the border width in pixels.
iv. bg: It represents the background color of the button.
v. command: It is set to the function call which is scheduled when the
function is called.
vi. text: It is set to the text displayed on the button.
vii. fg: Foreground color of the button.
viii. height: The height of the button.
ix. padx: Additional padding to the button in the horizontal direction.
x. pady: Additional padding to the button in the vertical direction
xi. width:The width of the button.
e.g. from tkinter import*
w=Tk()
w.geometry("200x150")
b=Button(w,text="Click",bg="pink",fg="white",width=10,height=1,activebackground="yellow")
b.pack()
w.mainloop()
 Checkbutton Widget in tkinter: The Checkbutton is used to display the Check Button on the window. The Check
button is mostly used to provide many choices to the user among which, the user needs to choose the one. It
generally implements many of many selections.
Syntax: cb= Checkbutton (parent, options)
The options are-
i. activebackground: It represents the background of the Checkbutton when it is active.
ii. activeforeground: It re presents the font color of the Checkbutton when when it is active.
iii. bd: It represents the border width in pixels.
iv. bg: It represents the background color of the Checkbutton.
v. command: Set to the function call.
vi. text: It is set to the text displayed on the Checkbutton.
vii. fg: Foreground color of the Checkbutton.
viii. height: The height of the Checkbutton.
ix. padx: Additional padding to the Checkbutton in the horizontal direction.
x. pady: Additional padding to the Checkbutton in the vertical direction.
xi. width: The width of the Checkbutton.
e.g. from tkinter import*
w=Tk()
w.geometry("200x150")
b1=Checkbutton(w,text="B.Tech",bg="pink",fg="white",width=10,height=1,activebackground="yellow")
b2=Checkbutton(w,text="MCA",bg="pink",fg="white",width=10,height=1,activebackground="yellow")
b1.grid(row=0,column=0,pady=10,padx=10)
b2.grid(row=1,column=0)
w.mainloop()
 Entry Widget in tkinter: The Entry widget is used to provide the single line text box to the user to accept
a value from the user. We can use the Entry widget to accept the text strings from the user.
Syntax: e= Entry(parent, options)
The options are-
i. bd: It represents the border width in pixels.
ii. bg: It represents the background color of the Entry.
iii. show: It is used to show the entry text of some other type instead of the string. For example, the password is
type during stars(*).
iv. fg: Fore ground color of the Entry.
v. width: The width of the Entry.
e.g. from tkinterimport *top=Tk()
top.geometry("300x200")
enty0= Entry(top,width="30")
enty0.place(x=50,y=40)
enty1= Entry(top,bg="yellow")
enty1.place(x=50,y=70)
enty2=Entry(top,fg="red",show="*")
enty2.place(x=50,y=100)
top.mainloop()
 Frame Widget in tkinter: Frame widget is used to organize the group of widgets. It acts like a
container which can be used to hold the other widgets. The rectangular areas of the screen
are used to organize the widgets to the python application.
Syntax: name= Frame (parent, bd, bg,width,height)
 Label Widget in Tkinter: The Label is used to specify the container box where we can place
the text or images. Syntax: name= Label(parent,options=bd,bg,text,fg,height,image,padx,pady,width)
 Listbox Widget in tkinter: The List box widget is used to display the list items to the user.
We can place only text items in the Listbox. The user can choose one or more items
from the list. Syntax: name= Listbox(parent,options=bd,bg,fg,width,height)
insert() method is associated with the Listbox to insert list item to list box at specified index.
Syntax: Listbox.insert(index, item)

 Radiobutton Widget in Tkinter: The Radiobutton widget is used to select one option among multiple options.
Syntax: name= Radiobutton(parent, options)
The options are- activebackground, activeforeground, bd , bg, command, text, fg, height, padx, pady, width and
Variable: It is used to keep track of the user's choices. It is shared among all the radio buttons.
Value: It is used to assign a value.
e.g. rb =Radiobutton(top, text="Green",variable=radio,value="2")
 Text Widget in Tkinter: The Text widget allows the user to enter multiple lines of text.
Syntax: name= Text(parent, options=bd,bg,show,fg,width,height)

 ScaleWidget in Tkinter: The Scale widget is used to implement the graphical slider to the python application
so that the user can slide through the range of values shown on the slider and select the one among them
Syntax: name= Scale(parent,options)
The options are activebackground, bd, bg, command, fg and
i. From: It is used to represent one end of the widget range.

ii. to: It represents a float or integer value that specifies the other end of the
range represented by the scale.
iii. orient: It can be set to horizontal or vertical depending upon the type of the
scale.
e.g scale= Scale(top,from_=100,to= 1000,orient=HORIZONTAL)

 Toplevel Widget in Tkinter: The Top level widget is used to create and display the top level windows which
are directly managed by the window manager.
Syntax: name=Toplevel(options=bd,bg,fg,width,height)
 e.g.
from tkinter import*
top=Tk()
top.geometry("300x200")
def fun():
chld =Toplevel(top)
chld.mainloop()
btn1 = Button(top,text= "Open",width=10,command=fun)
btn1.place(x=50,y=50)
top.mainloop()

Question- Design a calculator with the following buttons and functionalities like addition, subtraction, multiplication, division
and clear.
Ans:-
from tkinter import *
w=Tk()
w.geometry("260x260")
w.title("Calculator")
f1=Frame(w)
f2=Frame(w)
f3=Frame(w)
t=Entry(f1,width=40)
t.pack()
one=Button(f2,text="1",bg="pink",fg="white",width=10)
two=Button(f2,text="2",bg="pink",fg="white",width=10)
three=Button(f2,text="3",bg="pink",fg="white",width=10)
four=Button(f2,text="4",bg="pink",fg="white",width=10)
five=Button(f2,text="5",bg="pink",fg="white",width=10)
six=Button(f2,text="6",bg="pink",fg="white",width=10)
seven=Button(f2,text="7",bg="pink",fg="white",width=10)
eight=Button(f2,text="8",bg="pink",fg="white",width=10)
nine=Button(f2,text="9",bg="pink",fg="white",width=10)
zero=Button(f2,text="0",bg="pink",fg="white",width=10)
plus=Button(f2,text="+",bg="pink",fg="white",width=10)
minus=Button(f2,text="-",bg="pink",fg="white",width=10)
divide=Button(f2,text="/",bg="pink",fg="white",width=10)
multi=Button(f2,text="*",bg="pink",fg="white",width=10)
equal=Button(f2,text="=",bg="pink",fg="white",width=10)
clear=Button(f2,text="clear",bg="pink",fg="white",width=10)
one.grid(row=0,column=0,pady=1,padx=2)
two.grid(row=0,column=1,pady=1,padx=2)
three.grid(row=0,column=2,pady=1,padx=2)
four.grid(row=1,column=0,pady=1,padx=2)
five.grid(row=1,column=1,pady=1,padx=2)
six.grid(row=1,column=2,pady=1,padx=2)
seven.grid(row=2,column=0,pady=1,padx=2)
eight.grid(row=2,column=1,pady=1,padx=2)
nine.grid(row=2,column=2,pady=1,padx=2)
zero.grid(row=3,column=1,pady=1,padx=2)
plus.grid(row=4,column=0,pady=1,padx=2)
minus.grid(row=4,column=1,pady=1,padx=2)
multi.grid(row=4,column=2,pady=1,padx=2)
divide.grid(row=5,column=0,pady=1,padx=2)
equal.grid(row=5,column=1,pady=1,padx=2)
clear.grid(row=5,column=2,pady=1,padx=2)
f1.grid(row=2,pady=10)
f2.grid(row=4)
w.mainloop()