22 Kasutajaliides Tkinteriga

Selles peatükis kasutame Tkinterit, et luua graafilise kasutajaliidesega programme. Vaatleme levinumaid kasutajaliidese komponente (sildid, nupud, tekstikastid, pildid) ning nende paigutamist.

Kasutajaliidese komponendid

Alustame lihtsa näiteprogrammiga. Seda programmi käivitades peaksid saama ühe väikese akna, milles on tekstikast nime sisestamiseks ning nupp, mida vajutades saad nimelise tervituse.

Näiteprogramm. Tervitusaken

# impordi tk vidinad ja konstandid
from tkinter import *            # tkinteri põhivahendid
from tkinter import ttk          # platvormi ühise stiili saamiseks
from tkinter import messagebox
 
# see funktsioon käivitatakse nupule klõpsamisel
def tervita():
    tervitus = 'Tere, ' + nimi.get()
    messagebox.showinfo(message=tervitus)
 
 
# loome akna
raam = Tk()
raam.title("Tervitaja")
raam.geometry("300x100")
 
# loome tekstikasti jaoks sildi
silt = ttk.Label(raam, text="Nimi")
silt.place(x=5, y=5)
 
# loome tekstikasti
nimi = ttk.Entry(raam)
nimi.place(x=70, y=5, width=150)
 
# loome nupu
nupp = ttk.Button(raam, text="Tervita!", command=tervita)
nupp.place(x=70, y=40, width=150)
 
# ilmutame akna ekraanile
raam.mainloop()

Funktsioon tervita on mõeldud käivitamiseks, kui klõpsatakse nupule. Funktsiooni kehas küsitakse allpool defineeritud tekstikasti (nimi) sisu käsuga nimi.get(), moodustatakse selle põhjal tervitusega sõne ning näidatakse seda kasutajale väikses lisaaknas. (Selles funktsioonis oleme kasutanud globaalset muutujat – nimi pole ei funktsiooni argument ega lokaalne muutuja, vaid funktsioonist väljaspool defineeritud muutuja.)

Programmis kasutatakse kolme kasutajaliidese komponenti ehk vidinat (widget).

Funktsioon ttk.Label loob ühe sildi (vidina teksti näitamiseks). Funktsiooni esimese argumendiga näitame, et me soovime seda silti kasutada eespool loodud aknas. Kasutades nimelist argumenti text, anname sellele sildile soovitud teksti. Käsk silt.place(...) paigutab loodud sildi soovitud koordinaatidele (ühikuteks on pikslid, punkt (0,0) paikneb akna sisuosa ülemises vasakus nurgas ning koordinaadid kasvavad paremale/alla liikudes).

Järgmises plokis lõime ja seadsime paika tekstisisestuskasti (ttk.Entry). Selle paigutamisel näitame ära ka soovitud laiuse.

Nupu (ttk.Button) loomisel määrame argumendiga command, mida tuleb teha nupule klõpsamise korral. Paneme tähele, et argumendi väärtuseks on ainult funktsiooni nimi, mitte funktsiooni väljakutse (see oleks olnud koos tühjade sulgudega). Põhjus on selles, et me ei taha seda funktsiooni käivitada mitte nupu loomise ajal, vaid siis, kui nupule klõpsatakse.

Lisaks on programmis read, mis olid juba eelmise osa näidetes ja on üldjuhul olemas igas tkinteri programmis. Programmi sisuline olemus sõltub sellest, milliseid vidinaid aknasse paigutatakse ning kuidas kasutaja tegevustele reageeritakse. Võimalike vidinate valimiseks võid uurida lehekülge aadressil http://www.tkdocs.com/tutorial/widgets.html.

Vidinate paigutamine

Eelmist näiteprogrammi käivitades ei pruugi sa olla rahul vidinate paigutusega. Paigutust saab muuta etteantud koordinaate ja mõõtmeid korrigeerides. Paraku on selline pikselhaaval timmimine tänamatu töö, kuna mõnes teises operatsioonisüsteemis (või teistsuguste seadetega arvutis) ei pruugi paigutus samasugune välja näha.

Vidinate paigutust on võimalik muuta üldisemalt kui pikslite tasemel, lubades Tkinteril valida vastavalt olukorrale kõige parema konkreetse paigutuse. Järgnevas programmis on vidinate paigutamiseks kasutatud meetodi place asemel meetodit grid, mis jagab kasutajaliidese mõtteliselt ruudustikuks ning paigutab iga vidina soovitud lahtrisse vastavalt argumentidele column ja row.

Näiteprogramm. Vidinate paigutamine

from tkinter import *
from tkinter import ttk
from tkinter import messagebox
 
def tervita():
    tervitus = 'Tere, ' + nimi.get()
    messagebox.showinfo(message=tervitus)
 
 
raam = Tk()
raam.title("Tervitaja")
# raam.geometry("300x100")   # akna algne suurus määratakse vastavalt sisule
 
 
# paigutame sildi ruudustiku ülemisse vasakusse lahtrisse (column ja row)
# soovime, et sildi ümber jääks igas suunas 5 pikslit vaba ruumi (padx ja pady)
# soovime, et silt "kleepuks" oma lahtris ülemisse vasakusse nurka (sticky)
# N - north, W - west
silt = ttk.Label(raam, text="Nimi")
silt.grid(column=0, row=0, padx=5, pady=5, sticky=(N, W))
 
# tekstikasti puhul soovime, et ta kleepuks nii ida- kui lääneserva külge
# st ta peab venima vastavalt akna suurusele
nimi = ttk.Entry(raam)
nimi.grid(column=1, row=0, padx=5, pady=5, sticky=(N, W, E))
 
# soovime, et nupp veniks nii laiuses kui ka kõrguses
nupp = ttk.Button(raam, text="Tervita!", command=tervita)
nupp.grid(column=1, row=1, padx=5, pady=5, sticky=(N, S, W, E))
 
# soovime, et akna suuruse muutmisel muudetakse veeru 1 ja rea 1 mõõtmeid
# (st. veerg 0 ja rida 0 jäävad sama laiaks/kõrgeks)
raam.columnconfigure(1, weight=1)
raam.rowconfigure(1, weight=1)
 
# kuvame akna ekraanile
raam.mainloop()

Lisaks meetoditele place ja grid võib kohata veel paigutusmeetodit pack, mida kasutasime tahvli puhul eelmises osas. Rohkem infot saab siit: http://www.tkdocs.com/tutorial/concepts.html#geometry.

Pildid tahvlile

Pildifaile kasutades on võimalik tahvlile lisada pilte. Lubatud on .gif, .pgm ja .ppm formaadis pildifailid. Järgmise näite kasutamiseks salvesta programmiga samasse kausta järgmised failid: kuusk.gif, lill.gif.

Näiteprogramm. Pildid tahvlil

from tkinter import *
 
raam = Tk()
raam.title("Tahvel")
tahvel = Canvas(raam, width=400, height=400, background="white")
tahvel.grid()
 
# pildi kuvamisel on vaja kõigepealt laadida pilt ja panna see siis tahvlile
kuusk = PhotoImage(file="kuusk.gif")
img = tahvel.create_image(250, 80, image=kuusk)
 
# activeimage määrab pildi, mida näidatakse, kui hiirekursor on pildi kohal
# anchor näitab, mille järgi pilt paigutatakse (antud juhul ülemise-vasaku nurga järgi)
lill = PhotoImage(file="lill.gif")
img = tahvel.create_image(50, 200, image=lill, activeimage=lill, anchor=NW)
 
raam.mainloop()

Fonolukk

Vaatame nüüd programmi, mis loob ekraanile fonoluku klahvistiku. Loe lähtekoodi ja mõtle, kuidas lõpptulemuseni jõutakse.

Näiteprogramm. Fonolukk

#Impordime kõik vajalikud teegid
from tkinter import *
from tkinter import ttk
 
#Loome raami ja paneme raamile pealkirja
raam = Tk()
raam.title("Fonolukk")
 
#Fonoluku ekraani osa
kood = ttk.Entry(raam).grid(row = 0, column = 0, columnspan = 3, rowspan = 1, sticky = (N, W, E), padx=5, pady=5)
 
#Lisame fonolukule numbrid
rida = 1
veerg = 0
arv_nupul = 1
while arv_nupul < 10:
    #Lisame nupu
    ttk.Button(raam, text = str(arv_nupul)).grid(row = rida, column = veerg, padx = 5, pady = 5)
    #Kui arv_nupul jagub 3-ga, siis paneme järgmise arvu uude ritta ja nullime veeru väärtuse
    if arv_nupul % 3 == 0:
        rida += 1
        veerg = 0
    #Kui arv_nupul ei jagu 3-ga, siis suurendame veeru väärtust.
    else:
        veerg += 1
 
    #Suurendame arvu väärtust
    arv_nupul += 1
 
#Lisame ka teised fonolukul esinevad sümbolid
ttk.Button(raam, text = "*").grid(row = 4, column = 0, padx = 5, pady = 5)
ttk.Button(raam, text = "0").grid(row = 4, column = 1, padx = 5, pady = 5)
ttk.Button(raam, text = "#").grid(row = 4, column = 2, padx = 5, pady = 5)
 
#Kuvame ekraanile
raam.mainloop()

Palun kommenteeri seda materjali Google’i küsimustikus.