Python'da Tkinter ile GUI'ye Giriş

Widget'lar

Widget'lar, ruh olarak HTML'deki elementlere benzer. Tkinter'da farklı türde ögeler için farklı türde widget'lar bulacaksınız. Bunlar standart GUI öğeleridir ve kullanıcılara düğmeler, metin, menüler ve metin kutuları gibi denetimler sağlar.

Tkinter'daki tüm bu widget'ları bir örnekle birlikte anlayalım (Kaynak).

• Button: Button widget'ının aç/kapa özelliği vardır. Bir kullanıcı düğmeye tıkladığında, Tkinter'da bir olay tetiklenir.

  Sözdizimi: button_widget = tk.Button(widget, option=placeholder); burada widget, üst pencere/çerçeve için argümandır; option ise ön plan ve arka plan rengi, yazı tipi, komut (fonksiyon çağrısı için), görsel, düğmenin yüksekliği ve genişliği gibi çeşitli değerler alabilen bir yer tutucudur.

• Canvas: Canvas, GUI'nizde şekiller çizmek için kullanılır ve çeşitli çizim yöntemlerini destekler.

  Sözdizimi: canvas_widget = tk.Canvas(widget, option=placeholder); burada widget, üst pencere/çerçeve için parametredir; option ise kenarlık genişliği, arka plan rengi, widget'ın yüksekliği ve genişliği gibi çeşitli değerler alabilen bir yer tutucudur.

• Checkbutton: Checkbutton, açık-kapalı veya doğru-yanlış durumunu kaydeder. Aynı anda birden fazla seçeneği seçmenize ve hatta işaretsiz bırakmanıza olanak tanır.

  Sözdizimi: checkbutton_widget = tk.CheckButton(widget, option=placeholder); burada widget, üst pencere/çerçeve için parametredir; option ise başlık, metin, widget imleç altındayken arka plan ve ön plan rengi, yazı tipi, görsel vb. gibi çeşitli değerler alabilen bir yer tutucudur.

• Entry: Entry widget'ı, giriş alanları oluşturmak veya GUI içinde kullanıcıdan metin girişi almak için kullanılır.

  Sözdizimi: entry_widget = tk.Entry(widget, option=placeholder); burada widget, üst pencere/çerçeve için parametredir; option ise kenarlık genişliği, arka plan rengi, düğmenin genişliği ve yüksekliği vb. gibi çeşitli değerler alabilen bir yer tutucudur.

• Frame: Frame, Tkinter'da widget'ları gruplamak ve düzgün şekilde organize etmek için kapsayıcı olarak kullanılır.

  Sözdizimi: frame_widget = tk.Frame(widget, option=placeholder); burada widget, üst pencere/çerçeve için parametredir; option ise kenarlık genişliği, widget'ın yüksekliği ve genişliği, highlightcolor (widget odakta olduğunda renk) gibi çeşitli değerler alabilen bir yer tutucudur.

• Label: Label, metin, görsel vb. tek satırlık widget'lar oluşturmak için kullanılır.

  Sözdizimi: label_widget = tk.Label(widget, option=placeholder); burada widget, üst pencere/çerçeve için parametredir; option ise düğmenin yazı tipi, arka plan rengi, görsel, düğmenin genişliği ve yüksekliği gibi çeşitli değerler alabilen bir yer tutucudur.

Tüm widget'ların tam listesini resmi Python belgelendirmesinde bulabilirsiniz.

Geometri Yönetimi

Tkinter'daki tüm widget'ların bazı geometri ölçümleri vardır. Bu ölçümler, widget'ları üst çerçeveler veya üst widget alanı genelinde düzenlemenize olanak tanır.

Geometri yönetimi sınıflarından biri olan pack(), zaten burada ele alındı.

Bu amaçla, Tkinter size üç ana geometri yöneticisi sınıfı sunar:

• pack(): Widget'ları blok düzeninde organize eder ve mevcut genişliğin tamamını kaplar. Pencerede widget'ları göstermenin geleneksel bir yöntemidir.
  
  
• grid(): Widget'ları tablo benzeri bir yapıda düzenler. Bu eğitimin ilerleyen kısımlarında bunu ayrıntılı olarak öğreneceksiniz.
  
  
• place(): Amacı, widget'ları üst widget içinde kullanıcı tarafından belirtilen belirli bir konuma yerleştirmektir.

Yerleşimi ve Widget'ları Düzenleme

Bu bölümde, hem geometry hem de widgets kullanacak ve Tkinter'ın sihrini göreceksiniz.

window içinde yerleşimi düzenlemek için bir Frame widget sınıfı kullanacaksınız. Frame'in nasıl çalıştığını görmek için basit bir program oluşturalım.

• pack sınıfının yardımıyla üst ve alt olmak üzere iki çerçeve tanımlayacaksınız. Frame sınıfı, pencereler arasında bir bölme oluşturmaya yardımcı olur. Temelde tek bir pencere, Frame biçiminde üst ve alt olarak iki kez çoğaltılır.

• Son olarak, pencerede her çerçeve için ikişer tane olmak üzere dört düğme oluşturacaksınız. Düğmelerinizi parametre olarak istediğiniz gibi adlandırabilir ve renklendirebilirsiniz.

import tkinter

# Let's create the Tkinter window.
window = tkinter.Tk()
window.title("GUI")

# You will first create a division with the help of Frame class and align them on TOP and BOTTOM with pack() method.
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")

# Once the frames are created then you are all set to add widgets in both the frames.
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack() #'fg or foreground' is for coloring the contents (buttons)

btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()

btn3 = tkinter.Button(bottom_frame, text = "Button3", fg = "purple").pack(side = "left") #'side' is used to left or right align the widgets

btn4 = tkinter.Button(bottom_frame, text = "Button4", fg = "orange").pack(side = "left")

window.mainloop()

Yukarıdaki kodu çalıştıralım ve çıktıyı görelim.

Grid

Frame gibi, grid de widget'ları düzenlemenin başka bir yoludur. Matris satır-sütun kavramını kullanır. Aşağıdaki diyagramın yardımıyla grid sınıfı ile satır-sütun fikri arasında bazı benzetmeler yapalım.

Grid esas olarak row ve column olmak üzere iki parametre alır. Yukarıdaki şekilde gösterildiği gibi, 00'ın ilk düğmeye, 01'in ikincisine karşılık geldiğini hayal edin. İki düğmeyi yan yana yerleştirmek için grid, sırasıyla 00 ve 01 olarak satır ve sütun parametrelerini alacaktır.

grid sınıfının nasıl çalıştığını anlamak için checkbutton kullanalım. İki checkbutton tanımlayacak ve her iki düğme için de bazı metinler belirteceksiniz. Checkbutton'ların durumu, onvalue ve offvalue ile belirlenecek; checkbutton'ın mevcut durumu ise ayrı bir değişkende saklanacak olan IntVar() tarafından izlenecektir. offvalue=1 ve onvalue=0 olduğunda ilgili checkbutton işaretlenecektir.

Şimdi grid sınıfına gelirsek, row parametresini ileteceksiniz; row=0 ise düğme ilk satıra, row=1 ise ikinci satıra konumlanacaktır.

import tkinter
from tkinter import *
top = tkinter.Tk()
CheckVar1 = IntVar()
CheckVar2 = IntVar()
tkinter.Checkbutton(top, text = "Machine Learning",variable = CheckVar1,onvalue = 1, offvalue=0).grid(row=0,sticky=W)
tkinter.Checkbutton(top, text = "Deep Learning", variable = CheckVar2, onvalue = 0, offvalue =1).grid(row=1,sticky=W)
top.mainloop()

Bu kodu çalıştıralım ve çıktıyı görelim.

grid'i anlamak için bir başka örnek daha verelim. Bu örnekte, row'un yanı sıra bir parametre olarak column da ileteceksiniz.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# You will create two text labels namely 'username' and 'password' and and two input labels for them

tkinter.Label(window, text = "Username").grid(row = 0) #'username' is placed on position 00 (row - 0 and column - 0)

# 'Entry' class is used to display the input-field for 'username' text label
tkinter.Entry(window).grid(row = 0, column = 1) # first input-field is placed on position 01 (row - 0 and column - 1)

tkinter.Label(window, text = "Password").grid(row = 1) #'password' is placed on position 10 (row - 1 and column - 0)

tkinter.Entry(window).grid(row = 1, column = 1) #second input-field is placed on position 11 (row - 1 and column - 1)

# 'Checkbutton' class is for creating a checkbutton which will take a 'columnspan' of width two (covers two columns)
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2)                 

window.mainloop()

Yukarıdaki kodun çıktısına bakalım!

Harika değil mi? Ne kadar basitti ve HTML ile yazılmış olana neredeyse birebir benziyor.

Binding veya Komut Fonksiyonları

Binding veya Komut fonksiyonları, bir olay meydana geldiğinde veya tetiklendiğinde çağrılan fonksiyonlardır.

Binding fonksiyonlarını anlamak için bir örnek yapalım.

Tıklandığında DataCamp_Tutorial adlı bir fonksiyonu çağıran bir düğme tanımlayacaksınız. Ayrıca, DataCamp_Tutorial fonksiyonu Tkinter ile GUI! metnine sahip yeni bir etiket oluşturacaktır.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# creating a function called DataCamp_Tutorial()
def DataCamp_Tutorial():
    tkinter.Label(window, text = "GUI with Tkinter!").pack()

tkinter.Button(window, text = "Click Me!", command = DataCamp_Tutorial).pack()
window.mainloop()

Kodu çalıştıralım ve çıktıyı gözlemleyelim.

Binding fonksiyonlarını fare tıklamasıyla çağırmanın yanı sıra, olaylar fare hareketi, fare üzerine gelme, tıklama, kaydırma vb. ile de tetiklenebilir.

Şimdi size yukarıdakiyle aynı işlevselliği sağlayan bind fonksiyonuna bakalım.

Bind Yöntemi ile Fare Tıklama Olayı

Bind yöntemi, fare tıklama olaylarını uygulamak için oldukça basit bir yaklaşım sunar. Bind yöntemiyle kutudan çıktığı gibi kullanılabilen üç ön tanımlı fonksiyona bakalım.

Tıklama olayları üç türdür: leftClick, middleClick ve rightClick.

• <Button-1> parametresi sol tıklama olayıdır; yani sol düğmeye tıkladığınızda, bind yöntemi ikinci parametre olarak belirtilen fonksiyonu çağırır.
  
  
• <Button-2> orta tıklama için
  
  
• <Button-3> sağ tıklama için

Şimdi, meydana gelen olaya bağlı olarak belirli bir fonksiyonu nasıl çağıracağınızı öğreneceksiniz.

• Aşağıdaki programı çalıştırın ve belirli bir fonksiyonu çağırmak için sol, orta ve sağ düğmelere tıklayın.
  
  
• Bu fonksiyon, belirtilen metinle yeni bir etiket oluşturacaktır.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

#You will create three different functions for three different events
def left_click(event):
    tkinter.Label(window, text = "Left Click!").pack()

def middle_click(event):
    tkinter.Label(window, text = "Middle Click!").pack()

def right_click(event):
    tkinter.Label(window, text = "Right Click!").pack()

window.bind("<Button-1>", left_click)
window.bind("<Button-2>", middle_click)
window.bind("<Button-3>", right_click)

window.mainloop()

Kaynak

Yukarıdaki kodu çalıştıralım.

Uyarı Kutuları

Tkinter'da messagebox yöntemini kullanarak uyarı kutuları oluşturabilirsiniz. messasgebox yöntemiyle sorular da oluşturabilirsiniz.

Burada basit bir uyarı kutusu ve bir soru oluşturacaksınız. Uyarı üretmek için messagebox fonksiyonu showinfo'yu kullanacaksınız. Bir soru oluşturmak için askquestion yöntemini kullanacak ve soruya verilen yanıta göre GUI üzerinde bir Label çıktısı üreteceksiniz.

import tkinter
import tkinter.messagebox

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# Let's create a alert box with 'messagebox' function
tkinter.messagebox.showinfo("Alert Message", "This is just a alert message!")

# Let's also create a question for the user and based upon the response [Yes or No Question] display a message.
response = tkinter.messagebox.askquestion("Tricky Question", "Do you love Deep Learning?")

# A basic 'if/else' block where if user clicks on 'Yes' then it returns 1 else it returns 0. For each response you will display a message with the help of 'Label' method.
if response == 1:
    tkinter.Label(window, text = "Yes, offcourse I love Deep Learning!").pack()
else:
    tkinter.Label(window, text = "No, I don't love Deep Learning!").pack()

window.mainloop()

Yukarıdaki kodu hızlıca çalıştıralım ve çıktıyı görelim.

Görselleri İşleme

Buraya kadar takip edebildiyseniz, GUI'ye görsel ve simge eklemek çocuk oyuncağı olmalı. Tek yapmanız gereken Tkinter'ın PhotoImage yöntemini kullanmak ve ona file_path'i parametre olarak vermektir.

Öyleyse daha fazla beklemeden, GUI üzerinde bir görsel görüntülemek için hızlıca bir kod yazalım.

import tkinter

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# In order to display the image in a GUI, you will use the 'PhotoImage' method of Tkinter. It will an image from the directory (specified path) and store the image in a variable.
icon = tkinter.PhotoImage(file = "CNN.png")

# Finally, to display the image you will make use of the 'Label' method and pass the 'image' variriable as a parameter and use the pack() method to display inside the GUI.
label = tkinter.Label(window, image = icon)
label.pack()

window.mainloop()

Buraya kadar takip edebildiyseniz harika iş çıkardınız!

Bonus olarak, şimdiye kadar edindiğiniz tüm bilgileri kullanarak bir Hesap Makinesi oluşturacaksınız. Bu eğitimi müthiş bir notla bitirelim.

Tkinter ile Hesap Makinesi Oluşturma

Her GUI uygulaması iki adımdan oluşur.

• Kullanıcı Arayüzü Oluşturma
  
  
• GUI'ye işlevsellik ekleme

Hesap makinesini oluşturmaya başlayalım. Kodun çoğu kendini açıklar nitelikte ve bazı satırlar açıklamalarla yorumlanmıştır.

from tkinter import *

# Let's create the Tkinter window
window = Tk()

# Then, you will define the size of the window in width(312) and height(324) using the 'geometry' method
window.geometry("312x324")

# In order to prevent the window from getting resized you will call 'resizable' method on the window
window.resizable(0, 0)

#Finally, define the title of the window
window.title("Calcualtor")


# Let's now define the required functions for the Calculator to function properly.

# 1. First is the button click 'btn_click' function which will continuously update the input field whenever a number is entered or any button is pressed it will act as a button click update.
def btn_click(item):
    global expression
    expression = expression + str(item)
    input_text.set(expression)

# 2. Second is the button clear 'btn_clear' function clears the input field or previous calculations using the button "C"
def btn_clear():
    global expression
    expression = ""
    input_text.set("")

# 3. Third and the final function is button equal ("=") 'btn_equal' function which will calculate the expression present in input field. For example: User clicks button 2, + and 3 then clicks "=" will result in an output 5.
def btn_equal():
    global expression
    result = str(eval(expression)) # 'eval' function is used for evaluating the string expressions directly
    # you can also implement your own function to evalute the expression istead of 'eval' function
    input_text.set(result)
    expression = ""

expression = ""
# In order to get the instance of the input field 'StringVar()' is used
input_text = StringVar()

# Once all the functions are defined then comes the main section where you will start defining the structure of the calculator inside the GUI.

# The first thing is to create a frame for the input field
input_frame = Frame(window, width = 312, height = 50, bd = 0, highlightbackground = "black", highlightcolor = "black", highlightthickness = 1)
input_frame.pack(side = TOP)


# Then you will create an input field inside the 'Frame' that was created in the previous step. Here the digits or the output will be displayed as 'right' aligned
input_field = Entry(input_frame, font = ('arial', 18, 'bold'), textvariable = input_text, width = 50, bg = "#eee", bd = 0, justify = RIGHT)
input_field.grid(row = 0, column = 0)
input_field.pack(ipady = 10) # 'ipady' is an internal padding to increase the height of input field


# Once you have the input field defined then you need a separate frame which will incorporate all the buttons inside it below the 'input field'
btns_frame = Frame(window, width = 312, height = 272.5, bg = "grey")
btns_frame.pack()


# The first row will comprise of the buttons 'Clear (C)' and 'Divide (/)'
clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
divide = Button(btns_frame, text = "", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("")).grid(row = 0, column = 3, padx = 1, pady = 1)


# The second row will comprise of the buttons '7', '8', '9' and 'Multiply (*)'
seven = Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
eight = Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
nine = Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
multiply = Button(btns_frame, text = "*", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("*")).grid(row = 1, column = 3, padx = 1, pady = 1)


# The third row will comprise of the buttons '4', '5', '6' and 'Subtract (-)'
four = Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
five = Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
six = Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
minus = Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("-")).grid(row = 2, column = 3, padx = 1, pady = 1)


# The fourth row will comprise of the buttons '1', '2', '3' and 'Addition (+)'
one = Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
two = Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
three = Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
plus = Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("+")).grid(row = 3, column = 3, padx = 1, pady = 1)


# Finally, the fifth row will comprise of the buttons '0', 'Decimal (.)', and 'Equal To (=)'
zero = Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
point = Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
equals = Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_equal()).grid(row = 4, column = 3, padx = 1, pady = 1)


window.mainloop()

Sonuç

Bu eğitimi tamamladığınız için tebrikler!

Bu eğitimden edindiğiniz bilgilere dayanarak, basit GUI uygulamaları yapmaya hazırsınız. Bir GUI'deki nesnelerle stil verme ve etkileşim için daha fazla yöntem öğrenmeniz gerekecek.

Faydalı bir egzersiz olarak, hesap makinesi oluşturma gibi uygulamalar geliştirmeyi denemek özgüveninizi artıracak ve Tkinter ile nelerin mümkün olduğuna dair çok daha bütüncül bir fikir verecektir.

Hâlâ kapsanacak çok şey var ve Tkinter'da Sınıflar kavramını keşfetmek isteyebilirsiniz; bunun için şu belgelere başvurabilirsiniz.

Lütfen bu eğitimle ilgili tüm sorularınızı aşağıdaki yorum bölümünde sormaktan çekinmeyin.