INTRODUCTION TO COMPUTING

ES1101
GUI Design- UNIT 5

Dr. Mamta Kayest

(13) Scroll bar
The scrollbar widget is used to scroll down the content. We can also create the horizontal scrollbars to the Entry
widget.
Syntax: w = Scrollbar(master, options)
Options:
• activebackground: This option is used to represent the background color of the widget when it has
the focus.
• bg: This option is used to represent the background color of the widget.
• bd: This option is used to represent the border width of the widget.
• command: This option can be set to the procedure associated with the list which can be called
each time when the scrollbar is moved.
• cursor: In this option, the mouse pointer is changed to the cursor type set to this option which can
be an arrow, dot, etc.
• elementborderwidth: This option is used to represent the border width around the arrow heads
and slider. The default value is -1.
• Highlightbackground: This option is used to focus highlighcolor when the widget doesn’t have the
focus.
• highlighcolor: This option is used to focus highlighcolor when the widget has the focus.
• highlightthickness: This option is used to represent the thickness of the focus highlight.
• jump: This option is used to control the behavior of the scroll jump. If it set to 1, then the callback
is called when the user releases the mouse button.
• orient: This option can be set to HORIZONTAL or VERTICAL depending upon the orientation of the
scrollbar.
• repeatdelay: This option tells the duration up to which the button is to be pressed before the slider
starts moving in that direction repeatedly. The default is 300 ms.
• repeatinterval: The default value of the repeat interval is 100.
• takefocus: You can tab the focus through a scrollbar widget
• troughcolor: This option is used to represent the color of the trough.
• width: This option is used to represent the width of the scrollbar.

Methods:
• get(): This method is used to returns the two numbers a and b which represents the current
position of the scrollbar.
• set(first, last): This method is used to connect the scrollbar to the other widget w. The
yscrollcommand or xscrollcommand of the other widget to this method.
from tkinter import *
win = Tk()
scrollbar = Scrollbar(win)
scrollbar.pack( side = RIGHT, fill = Y )
mylist = Listbox(win, yscrollcommand = scrollbar.set )
for line in range(1,100):
mylist.insert(END, "This is line number " + str(line))
mylist.pack( side = LEFT, fill = BOTH )
scrollbar.config( command = mylist.yview )
win.mainloop()
(14) Menu bar, menu button, option menu, separator

The goal of this widget is to allow us to create all kinds of menus that can be used
by our applications. The core functionality provides ways to create three menu
types: pop-up, toplevel and pull-down.

It is also possible to use other extended widgets to implement new types of

menus, such as the OptionMenu widget, which implements a special type that
generates a pop-up list of items within a selection.

Syntax
w = Menu ( master, option, ... )
 Options and Description
• activebackground :The background color that will appear on a choice when it is under the mouse.
• activeborderwidth: Specifies the width of a border drawn around a choice when it is under the mouse. Default
is 1 pixel.
• activeforeground: The foreground color that will appear on a choice when it is under the mouse.
• bg: The background color for choices not under the mouse.
• bd: The width of the border around all the choices. Default is 1.
• cursor: The cursor that appears when the mouse is over the choices, but only when the menu has been torn
off.
• disabledforeground : The color of the text for items whose state is DISABLED.
• font: The default font for textual choices.
• postcommand: You can set this option to a procedure, and that procedure will be called every time someone
brings up this menu.
• relief: The default 3-D effect for menus is relief=RAISED.
• image: To display an image on this menubutton.
• selectcolor: Specifies the color displayed in checkbuttons and radiobuttons when they are selected.
• tearoff: Normally, a menu can be torn off, the first position (position 0) in the list of choices is occupied by the
tear-off element, and the additional choices are added starting at position 1. If you set tearoff=0, the menu
will not have a tear-off feature, and choices will be added starting at position 0.
• title: Normally, the title of a tear-off menu window will be the same as the text of the menu button or cascade
that lead to this menu. If you want to change the title of that window, set the title option to that string.
Methods:
• add_command (options): Adds a menu item to the menu.
• add_radiobutton( options ): Creates a radio button menu item.
• add_checkbutton( options ): Creates a check button menu item.
• add_cascade(options) Creates a new hierarchical menu by associating a given menu to a parent menu
• add_separator() Adds a separator line to the menu.
• add( type, options ) Adds a specific type of menu item to the menu.
• delete( startindex [, endindex ]) Deletes the menu items ranging from startindex to endindex.
• entryconfig( index, options ) Allows you to modify a menu item, which is identified by the index, and change its
options.
• index(item) Returns the index number of the given menu item label.
• insert_separator ( index ) Insert a new separator at the position specified by index.
• invoke ( index ) Calls the command callback associated with the choice at position index. If a checkbutton, its state
is toggled between set and cleared; if a radiobutton, that choice is set.
• type ( index ) Returns the type of the choice specified by index: either "cascade", "checkbutton", "command",
"radiobutton", "separator", or "tearoff".
#Program to create menu bar with menu buttons, editmenu.add_separator()
option menus, and seperator editmenu.add_command(label="Cut", command=donothing)
editmenu.add_command(label="Copy", command=donothing)
from tkinter import *
editmenu.add_command(label="Paste", command=donothing)
root = Tk()
editmenu.add_command(label="Delete", command=donothing)
def donothing():
editmenu.add_command(label="Select All", command=donothing)
filewin = Toplevel(root)
menubar.add_cascade(label="Edit", menu=editmenu)
button = Button(filewin, text="Do nothing button")
button.pack() helpmenu = Menu(menubar, tearoff=0)

menubar = Menu(root) helpmenu.add_command(label="Help Index", command=donothing)

filemenu = Menu(menubar, tearoff=0) helpmenu.add_command(label="About...", command=donothing)
filemenu.add_command(label="New", command=donothing) menubar.add_cascade(label="Help", menu=helpmenu)
filemenu.add_command(label="Open", command=donothing) root.config(menu=menubar)
filemenu.add_command(label="Save", command=donothing) root.mainloop()
filemenu.add_command(label="Save as...", command=donothing)
filemenu.add_command(label="Close", command=root.destroy)
filemenu.add_separator()
filemenu.add_command(label="Exit", command=root.quit)
menubar.add_cascade(label="File", menu=filemenu)
editmenu = Menu(menubar, tearoff=0)
editmenu.add_command(label="Undo", command=donothing)
(15) TreeView
• A Treeview widget allows you to display data in both tabular and
hierarchical structures.
• Python Tkinter Treeview is derived from tkinter.ttk module.
• It can be used to build user interfaces similar to the tree display you'd find
in file managers like the macOS Finder or Windows Explorer. As with most
Tk widgets, it offers incredible flexibility so it can be customized to suit a
wide range of situations.
• To create a new TreeView widget, the syntax is :

tree = ttk.Treeview(master, columns)

 # Defining heading
from tkinter import ttk
treev['show'] = 'headings'
from tkinter import *
treev.column("1", width = 90, anchor ='c')
# Creating tkinter window
treev.column("2", width = 90, anchor ='se')
window = Tk()
treev.column("3", width = 90, anchor ='se')
treev = ttk.Treeview(window, selectmode ='browse')
# Assigning the heading names to the respective columns
# Calling pack method w.r.to treeview
treev.heading("1", text ="Name")
treev.pack(side ='right')
treev.heading("2", text ="Sex")
# Constructing vertical scrollbar
treev.heading("3", text ="Age")
# with treeview
# Inserting the items and their features to the columns built
verscrlbar = ttk.Scrollbar(window,
treev.insert("", 'end', text ="L1",
orient ="vertical",
values =("Nidhi", "F", "25"))
command = treev.yview)
treev.insert("", 'end', text ="L2",
# Calling pack method w.r.to vertical
values =("Nisha", "F", "23"))
# scrollbar
treev.insert("", 'end', text ="L3",
verscrlbar.pack(side ='right', fill ='x')
values =("Preeti", "F", "27"))
# Configuring treeview
treev.insert("", 'end', text ="L4",
treev.configure(xscrollcommand = verscrlbar.set)
values =("Rahul", "M", "20"))
# Defining number of columns
treev.insert("", 'end', text ="L5",
treev["columns"] = ("1", "2", "3")
values =("Sonu", "F", "18"))
window.mainloop()
 treeview.pack()
# Python program to illustrate the usage of treeview.insert('', '0', 'item1',
hierarchical treeview in python GUI text ='Courses available')
# application using tkinter treeview.insert('item1', '1', 'item2',
text ='Computer Science')
# Importing tkinter treeview.insert('item1', '2', 'item3',
from tkinter import * text ='MBA')
treeview.insert('item1', '3', 'item4',
# Importing ttk from tkinter
text ='CIVIL')
from tkinter import ttk treeview.insert('item2', 'end', 'Algorithm',
# Creating app window text ='Algorithm')
treeview.insert('item2', 'end', 'Data structure',
win = Tk()
text ='Data structure')
# Defining title of the app treeview.insert('item3', 'end', 'Busins',
text ='Business mgt')
win.title("COURSES AVAILABLE")
treeview.insert('item3', 'end', 'core',
# Defining label of the app and calling a geometry text ='MBA Core subject')
# management method i.e, pack in order to organize treeview.insert('item4', 'end', 'struc',
text ='Structures')
# widgets in form of blocks before locating them
treeview.insert('item4', 'end', 'CE',
# in the parent widget text ='Concrete Engineering')
ttk.Label(win, text ="Treeview(hierarchical)").pack() treeview.move('item2', 'item1', 'end')
treeview.move('item3', 'item1', 'end')
treeview = ttk.Treeview(win) treeview.move('item4', 'item1', 'end')
win.mainloop()
(16) Photo Image
• Image can be added with the help of photoImage() method.
• This is a Tkinter method which means you don’t have to import any
other module in order to use it.
• We can add image to other widgets using photoimage()
from tkinter import *
win=Tk()
photo=PhotoImage( file =“img.png")
photoimage1 = photo.subsample(5, 5)
bt1=Button(win, text = 'Click Me !',
image = photoimage1, compound =
RIGHT)
bt1.pack(side = BOTTOM)
photo2=PhotoImage( file ="img2.png")
photoimage2 = photo2.subsample(3, 3)
lb1=Label(win, text = 'Label', image =
photoimage2, compound= LEFT)
lb1.pack(side=TOP)
win.mainloop()