{"id":117,"date":"2020-11-03T09:33:08","date_gmt":"2020-11-03T09:33:08","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=117"},"modified":"2021-05-07T12:01:21","modified_gmt":"2021-05-07T12:01:21","slug":"tkinter-sissejuhatus","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/tkinter-sissejuhatus\/","title":{"raw":"Tkinter ja esimene n\u00e4ide","rendered":"Tkinter ja esimene n\u00e4ide"},"content":{"raw":"

Tk ja Tkinter<\/h1>\r\nVarem oleme lihtsat graafikat loonud kilpkonnaga (moodul turtle) ja n\u00fc\u00fcd ka PySimpleGUI mooduliga. Selles peat\u00fckis kasutame moodulit Tkinter ja selle alammoodulit tkinter.ttk, et luua graafilise kasutajaliidesega programme.\r\n\r\nMoodul tkinter kuulub Pythoni standardsete moodulite hulka ning t\u00f6\u00f6tab erinevatel operatsioonis\u00fcsteemidel. Pythoni moodul p\u00f5hineb teegil Tk, mida kasutatakse ka teistes programmeerimiskeeltes.\r\n\r\nTkinteri paljudest v\u00f5imalustest vaatleme selles \u00f5pikus vaid v\u00e4ikest osa. P\u00f5hjalikumat teavet v\u00f5ib leida erinevatest ingliskeelsetest materjalidest nagu n\u00e4iteks lehek\u00fcljelt http:\/\/www.tkdocs.com\/<\/a>.\r\n

Esimene kasutajaliidese n\u00e4ide<\/h1>\r\nKoostame programmi, mis loob ja kuvab juurakna ja sellele tekstisisestuskasti, nupu \u201cTervita!\u201d ja tekstisildi tekstiga \u201cSiia ilmub tervitus\u201d. Tekstikasti nime sisestamisel ja nupu \u201cTervita!\u201d vajutamisel kuvatakse tekstisildil tervitus.\r\n\r\nVaatame n\u00fc\u00fcd tervituse programmi koostamist osade kaupa.\r\n\r\n1) Alustame sellest, et impordime k\u00f5ik mooduli tkinter ning selle alammooduli tkinter.ttk klassid ja funktsioonid. Arvesta, et mooduli nimes on tkinter v\u00e4ikese algust\u00e4hega ja failinimi ei tohiks olla tkinter.py!\r\n
from tkinter import *\r\nfrom tkinter import ttk<\/pre>\r\n2) Loome tervituse funktsiooni, mis k\u00e4ivitatakse nupuvajutusel. Funktsioonis v\u00f5etakse tekstikastist kasutaja poolt sisestatud tekst, koostatakse sellest tervituse s\u00f5ne ja kuvatakse tervitust tekstisildil.\r\n
def tervita():\r\ntervitus = 'Tere, ' + nimi.get() + '!'\r\ntekstisilt.config(text = tervitus)<\/pre>\r\n3) Seej\u00e4rel loome juurakna pealkirjaga \u201cTervitaja\u201d, laiusega 300 ja k\u00f5rgusega 115 pikslit, kuhu saame hiljem vidinaid lisama hakata:\r\n
raam = Tk()\r\nraam.title(\"Tervitaja\")\r\nraam.geometry(\"300x115\")<\/pre>\r\n4) Lisame juuraknasse tekstisisestuskasti nimi, kuhu kasutaja saab tr\u00fckkida oma nime tervitamiseks. Paigutame selle nupu juuraknasse k\u00e4suga place(), kus m\u00e4\u00e4ratakse x ja y koordinaat ning tekstisisestuskasti laius:\r\n
# loome tekstikasti\r\nnimi = ttk.Entry(raam)\r\nnimi.place(x=70, y=5, width=150)<\/pre>\r\n5) Lisame juuraknasse nupu kasutades Tkinteri alammoodulit ttk ja paneme nupu tekstiks \u201cTervita!\u201d. Selleks, et nupuvajutusel k\u00e4ivitataks funktsioon tervita, tuleb see lisada juurde parameetri command v\u00e4\u00e4rtusena. Paigutame selle nupu juurakna ruudustikku k\u00e4suga place():\r\n
nupp = ttk.Button(raam, text=\"Tervita!\", command=tervita)\r\nnupp.place(x=70, y=40, width=150)<\/pre>\r\n6) Viimase komponendina lisame juuraknasse tekstisildi nimega tekstisilt, kus saaks tervitust kuvada.\r\n
tekstisilt = ttk.Label(raam, text=\"Siia ilmub tervitus\")\r\ntekstisilt.place(x=70, y=85)<\/pre>\r\n7) P\u00e4rast vidinate lisamist tuleb siseneda Tkinteri p\u00f5hits\u00fcklisse \u2014 vastasel juhul ei toimu ekraanil midagi. Olles selle ts\u00fckli sees, paigutab programm raamis olevad elemendid ning j\u00e4lgib kasutaja sisendit. Programm t\u00f6\u00f6tab ts\u00fcklis kuni p\u00f5hiraami sulgemiseni.\r\n
raam.mainloop()<\/pre>\r\nTerviklik n\u00e4idisprogramm<\/strong> n\u00e4eb kokkuv\u00f5ttes v\u00e4lja selline:\r\n
from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\n\r\n# see funktsioon k\u00e4ivitatakse nupule kl\u00f5psamisel\r\ndef tervita():\r\n\u00a0\u00a0\u00a0 tervitus = 'Tere, ' + nimi.get() + '!'\r\n\u00a0\u00a0\u00a0 tekstisilt.config(text = tervitus)\r\n\r\n\r\n# loome akna\r\nraam = Tk()\r\nraam.title(\"Tervitaja\")\r\nraam.geometry(\"300x115\")\r\n\r\n# loome tekstikasti\r\nnimi = ttk.Entry(raam)\r\nnimi.place(x=70, y=5, width=150)\r\n\r\n# loome nupu\r\nnupp = ttk.Button(raam, text=\"Tervita!\", command=tervita)\r\nnupp.place(x=70, y=40, width=150)\r\n\r\n# loome tervituse n\u00e4itamiseks tekstisildi\r\ntekstisilt = ttk.Label(raam, text=\"Siia ilmub tervitus\")\r\ntekstisilt.place(x=70, y=85)\r\n\r\n# ilmutame akna ekraanile\r\nraam.mainloop()<\/pre>\r\nProovi, kas t\u00f6\u00f6tab!<\/strong>\r\n\r\nTulemus peaks olema sellesarnane (pilt v\u00f5ib erineda s\u00f5ltuvalt s\u00fcsteemiseadetest, aga funktsionaalsus peaks olema sama):\r\n\r\n\"\"\r\n
Akna sulgemine ja komponentide peitmine<\/h1>\r\nSageli on soov n\u00e4iteks kasutajaliidesesse sisestada erinevad andmed ja nupuvajutusel kasutajaliidest muuta. N\u00e4iteks v\u00f5iks siis kuvada teistsuguse kasutajaliidese v\u00f5i peita-n\u00e4idata erinevaid kasutajaliidese komponente.\r\n\r\nSelleks, et nupuvajutusel kasutajaliides sulguks ja avaneks uus kasutajaliides<\/strong>, tuleks nupuvajutusel olemasolev raam sulgeda (funktsioon nupp1_vajutamine) ning l\u00f5petada ts\u00fckkel raam.mainloop() ja luua uus raam2, mis tuleb omakorda panna ts\u00fcklisse nupuvajutust kuulama k\u00e4suga mainloop():\r\n
from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\n\r\ndef nupp1_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 1!\")\r\n\u00a0\u00a0\u00a0 raam.destroy()\r\n\u00a0 \u00a0 \r\n\r\ndef nupp2_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 2!\")\r\n\r\nraam = Tk()\r\nnupp1 = ttk.Button(raam, text=\"Vajuta mind!\", command = nupp1_vajutamine)\r\nnupp1.place(x=60, y=60, width=110)\r\n\r\nraam.mainloop()\r\n\r\nraam2 = Tk()\r\nnupp2 = ttk.Button(raam2, text=\"Vajuta mind ka!\", command = nupp2_vajutamine)\r\nnupp2.place(x=60, y=60, width=110)\r\n\r\nraam2.mainloop()<\/pre>\r\nSageli ei taha tervet kasutajaliidest sulgeda, vaid piisab m\u00f5ne elemendi n\u00e4htavaks tegemisest v\u00f5i peitmisest<\/strong>. Selleks tulevad appi k\u00e4sklused place() ja place_forget(), mida saab v\u00e4lja kutsuda nupuvajutusel:\r\n
from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\n\r\ndef nupp1_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 1!\")\r\n\u00a0\u00a0\u00a0 nupp1.place_forget()\r\n\u00a0\u00a0\u00a0 nupp2.place(x=60, y=100, width=110)\r\n\r\ndef nupp2_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 2!\")\r\n\u00a0\u00a0\u00a0 nupp2.place_forget()\r\n\r\nraam = Tk()\r\nnupp1 = ttk.Button(raam, text=\"Vajuta mind!\", command = nupp1_vajutamine)\r\nnupp1.place(x=60, y=60, width=110)\r\nnupp2 = ttk.Button(raam, text=\"Vajuta mind ka!\", command = nupp2_vajutamine)\r\n\r\nraam.mainloop()<\/pre>\r\n ","rendered":"
Tk ja Tkinter<\/h1>\n
Varem oleme lihtsat graafikat loonud kilpkonnaga (moodul turtle) ja n\u00fc\u00fcd ka PySimpleGUI mooduliga. Selles peat\u00fckis kasutame moodulit Tkinter ja selle alammoodulit tkinter.ttk, et luua graafilise kasutajaliidesega programme.<\/p>\n
Moodul tkinter kuulub Pythoni standardsete moodulite hulka ning t\u00f6\u00f6tab erinevatel operatsioonis\u00fcsteemidel. Pythoni moodul p\u00f5hineb teegil Tk, mida kasutatakse ka teistes programmeerimiskeeltes.<\/p>\n
Tkinteri paljudest v\u00f5imalustest vaatleme selles \u00f5pikus vaid v\u00e4ikest osa. P\u00f5hjalikumat teavet v\u00f5ib leida erinevatest ingliskeelsetest materjalidest nagu n\u00e4iteks lehek\u00fcljelt http:\/\/www.tkdocs.com\/<\/a>.<\/p>\n
Esimene kasutajaliidese n\u00e4ide<\/h1>\n
Koostame programmi, mis loob ja kuvab juurakna ja sellele tekstisisestuskasti, nupu \u201cTervita!\u201d ja tekstisildi tekstiga \u201cSiia ilmub tervitus\u201d. Tekstikasti nime sisestamisel ja nupu \u201cTervita!\u201d vajutamisel kuvatakse tekstisildil tervitus.<\/p>\n
Vaatame n\u00fc\u00fcd tervituse programmi koostamist osade kaupa.<\/p>\n
1) Alustame sellest, et impordime k\u00f5ik mooduli tkinter ning selle alammooduli tkinter.ttk klassid ja funktsioonid. Arvesta, et mooduli nimes on tkinter v\u00e4ikese algust\u00e4hega ja failinimi ei tohiks olla tkinter.py!<\/p>\n
from tkinter import *\r\nfrom tkinter import ttk<\/pre>\n
2) Loome tervituse funktsiooni, mis k\u00e4ivitatakse nupuvajutusel. Funktsioonis v\u00f5etakse tekstikastist kasutaja poolt sisestatud tekst, koostatakse sellest tervituse s\u00f5ne ja kuvatakse tervitust tekstisildil.<\/p>\n
def tervita():\r\ntervitus = 'Tere, ' + nimi.get() + '!'\r\ntekstisilt.config(text = tervitus)<\/pre>\n
3) Seej\u00e4rel loome juurakna pealkirjaga \u201cTervitaja\u201d, laiusega 300 ja k\u00f5rgusega 115 pikslit, kuhu saame hiljem vidinaid lisama hakata:<\/p>\n
raam = Tk()\r\nraam.title(\"Tervitaja\")\r\nraam.geometry(\"300x115\")<\/pre>\n
4) Lisame juuraknasse tekstisisestuskasti nimi, kuhu kasutaja saab tr\u00fckkida oma nime tervitamiseks. Paigutame selle nupu juuraknasse k\u00e4suga place(), kus m\u00e4\u00e4ratakse x ja y koordinaat ning tekstisisestuskasti laius:<\/p>\n
# loome tekstikasti\r\nnimi = ttk.Entry(raam)\r\nnimi.place(x=70, y=5, width=150)<\/pre>\n
5) Lisame juuraknasse nupu kasutades Tkinteri alammoodulit ttk ja paneme nupu tekstiks \u201cTervita!\u201d. Selleks, et nupuvajutusel k\u00e4ivitataks funktsioon tervita, tuleb see lisada juurde parameetri command v\u00e4\u00e4rtusena. Paigutame selle nupu juurakna ruudustikku k\u00e4suga place():<\/p>\n
nupp = ttk.Button(raam, text=\"Tervita!\", command=tervita)\r\nnupp.place(x=70, y=40, width=150)<\/pre>\n
6) Viimase komponendina lisame juuraknasse tekstisildi nimega tekstisilt, kus saaks tervitust kuvada.<\/p>\n
tekstisilt = ttk.Label(raam, text=\"Siia ilmub tervitus\")\r\ntekstisilt.place(x=70, y=85)<\/pre>\n
7) P\u00e4rast vidinate lisamist tuleb siseneda Tkinteri p\u00f5hits\u00fcklisse \u2014 vastasel juhul ei toimu ekraanil midagi. Olles selle ts\u00fckli sees, paigutab programm raamis olevad elemendid ning j\u00e4lgib kasutaja sisendit. Programm t\u00f6\u00f6tab ts\u00fcklis kuni p\u00f5hiraami sulgemiseni.<\/p>\n
raam.mainloop()<\/pre>\n
Terviklik n\u00e4idisprogramm<\/strong> n\u00e4eb kokkuv\u00f5ttes v\u00e4lja selline:<\/p>\n
from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\n\r\n# see funktsioon k\u00e4ivitatakse nupule kl\u00f5psamisel\r\ndef tervita():\r\n\u00a0\u00a0\u00a0 tervitus = 'Tere, ' + nimi.get() + '!'\r\n\u00a0\u00a0\u00a0 tekstisilt.config(text = tervitus)\r\n\r\n\r\n# loome akna\r\nraam = Tk()\r\nraam.title(\"Tervitaja\")\r\nraam.geometry(\"300x115\")\r\n\r\n# loome tekstikasti\r\nnimi = ttk.Entry(raam)\r\nnimi.place(x=70, y=5, width=150)\r\n\r\n# loome nupu\r\nnupp = ttk.Button(raam, text=\"Tervita!\", command=tervita)\r\nnupp.place(x=70, y=40, width=150)\r\n\r\n# loome tervituse n\u00e4itamiseks tekstisildi\r\ntekstisilt = ttk.Label(raam, text=\"Siia ilmub tervitus\")\r\ntekstisilt.place(x=70, y=85)\r\n\r\n# ilmutame akna ekraanile\r\nraam.mainloop()<\/pre>\n
Proovi, kas t\u00f6\u00f6tab!<\/strong><\/p>\n
Tulemus peaks olema sellesarnane (pilt v\u00f5ib erineda s\u00f5ltuvalt s\u00fcsteemiseadetest, aga funktsionaalsus peaks olema sama):<\/p>\n
\"\"<\/p>\n
Akna sulgemine ja komponentide peitmine<\/h1>\n
Sageli on soov n\u00e4iteks kasutajaliidesesse sisestada erinevad andmed ja nupuvajutusel kasutajaliidest muuta. N\u00e4iteks v\u00f5iks siis kuvada teistsuguse kasutajaliidese v\u00f5i peita-n\u00e4idata erinevaid kasutajaliidese komponente.<\/p>\n
Selleks, et nupuvajutusel kasutajaliides sulguks ja avaneks uus kasutajaliides<\/strong>, tuleks nupuvajutusel olemasolev raam sulgeda (funktsioon nupp1_vajutamine) ning l\u00f5petada ts\u00fckkel raam.mainloop() ja luua uus raam2, mis tuleb omakorda panna ts\u00fcklisse nupuvajutust kuulama k\u00e4suga mainloop():<\/p>\n
from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\n\r\ndef nupp1_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 1!\")\r\n\u00a0\u00a0\u00a0 raam.destroy()\r\n\u00a0 \u00a0 \r\n\r\ndef nupp2_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 2!\")\r\n\r\nraam = Tk()\r\nnupp1 = ttk.Button(raam, text=\"Vajuta mind!\", command = nupp1_vajutamine)\r\nnupp1.place(x=60, y=60, width=110)\r\n\r\nraam.mainloop()\r\n\r\nraam2 = Tk()\r\nnupp2 = ttk.Button(raam2, text=\"Vajuta mind ka!\", command = nupp2_vajutamine)\r\nnupp2.place(x=60, y=60, width=110)\r\n\r\nraam2.mainloop()<\/pre>\n
Sageli ei taha tervet kasutajaliidest sulgeda, vaid piisab m\u00f5ne elemendi n\u00e4htavaks tegemisest v\u00f5i peitmisest<\/strong>. Selleks tulevad appi k\u00e4sklused place() ja place_forget(), mida saab v\u00e4lja kutsuda nupuvajutusel:<\/p>\n
from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\n\r\ndef nupp1_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 1!\")\r\n\u00a0\u00a0\u00a0 nupp1.place_forget()\r\n\u00a0\u00a0\u00a0 nupp2.place(x=60, y=100, width=110)\r\n\r\ndef nupp2_vajutamine():\r\n\u00a0\u00a0\u00a0 print(\"Vajutasid nuppu 2!\")\r\n\u00a0\u00a0\u00a0 nupp2.place_forget()\r\n\r\nraam = Tk()\r\nnupp1 = ttk.Button(raam, text=\"Vajuta mind!\", command = nupp1_vajutamine)\r\nnupp1.place(x=60, y=60, width=110)\r\nnupp2 = ttk.Button(raam, text=\"Vajuta mind ka!\", command = nupp2_vajutamine)\r\n\r\nraam.mainloop()<\/pre>\n
 <\/p>\n","protected":false},"author":17,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-117","chapter","type-chapter","status-publish","hentry"],"part":451,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/users\/17"}],"version-history":[{"count":18,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/117\/revisions"}],"predecessor-version":[{"id":774,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/117\/revisions\/774"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/451"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/117\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=117"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=117"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}