{"id":107,"date":"2020-11-03T09:30:03","date_gmt":"2020-11-03T09:30:03","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=107"},"modified":"2021-06-10T07:26:10","modified_gmt":"2021-06-10T07:26:10","slug":"pysimplegui-sissejuhatus","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/pysimplegui-sissejuhatus\/","title":{"raw":"PySimpleGUI ja esimene n\u00e4ide","rendered":"PySimpleGUI ja esimene n\u00e4ide"},"content":{"raw":"

Sissejuhatus<\/h2>\r\nPythoni k\u00e4surealt andmete k\u00fcsimine ja sisestamine on k\u00fcll tore tegevus, kuid v\u00f5ib programmeerimiskauge inimese natukene \u00e4ra ehmatada. Selleks, et programm oleks arvutis laiemale publikule kasutatav, oleks hea luua programmile mugavamalt kasutatav graafiline kasutajaliides. \u00dcheks kasutajaliidese loomise v\u00f5imaluseks Pythonis on PySimpleGUI. PySimpleGUI paljudest v\u00f5imalustest vaatleme selles \u00f5pikus vaid v\u00e4ikest osa. P\u00f5hjalikumat teavet v\u00f5ib leida ka v\u00e4lismaistest materjalidest nagu n\u00e4iteks lehek\u00fcljelt https:\/\/pysimplegui.readthedocs.io\/<\/a>, millel p\u00f5hineb suurel osal ka k\u00e4esolev \u00f5ppematerjal.\r\n\r\nPySimpleGUI on Pythoni graafiline kasutajaliidese moodul, mis v\u00f5imaldab kasutajal mugavalt luua Pyphoni graafilise kasutajaliidesega programme. Lisaks PySimpleGUI moodulile on olemas veel mitmeid teisi olemuselt sarnaseid graafikamooduleid nagu EasyGUI, Tkinter, PyGame jne. Neist Tkinterit vaatame ka siin \u00f5pikus.\r\n\r\nPySimpleGUI kasutamiseks tuleb paigaldada moodul nimega pysimplegui (Thonnys tuleb valida men\u00fc\u00fcs Tools \u2192 Manage Packages\u2026 \u2192 otsida pysimplegui ja kl\u00f5psata \u201cinstall\u201d) ja programmi alguses vastav moodul programmi importida.\r\n

Esimene graafikaliidese n\u00e4ide<\/h2>\r\nAlustuseks loome programmi, mis loob ja kuvab ekraanile graafikaakna ning kus kasutaja sisestatud tervitust ka kuvatakse selles samas aknas:\r\n\r\n\"\"\r\n\r\nEnne, kui hakkame koodi osade kaupa vaatama, uurime, millest tuleks \u00fcldse sellise graafikaakna loomisel alustada.\r\n\r\nEsmalt tuleks m\u00f5elda, millise kujundusega akent soovime teha. PySimpleGUI-s k\u00e4ib elementide paigutamine aknasse ridade kaupa kahem\u00f5\u00f5tmelise j\u00e4rjendi kaudu, kus iga rea elementidest luuakse alamj\u00e4rjendid, mis lisatakse omakorda \u00fchte suurde j\u00e4rjendisse. N\u00e4iteprogramm on n\u00e4iteks tehtud j\u00e4rgmise joonise p\u00f5hjal:\r\n\r\n\"\"\r\n\r\nN\u00e4eme, et elemendid on aknasse paigutatud nelja ritta ning planeeritud elemendid on j\u00e4rgmised:\r\n
    \r\n \t
  1. real on tekstisilt.<\/li>\r\n \t
  2. real on tekstisisestuskast, kuhu kasutaja saab midagi sisestada.<\/li>\r\n \t
  3. real on kaks nuppu - \u201cTervita!\u201d ning \u201cV\u00e4lju\u201d.<\/li>\r\n \t
  4. real on tekstisilt, kuhu ilmub kasutaja poolt sisestatud tekstiga tervitus, vajutades nuppu \u201cTervita!\u201d.<\/li>\r\n<\/ol>\r\nN\u00fc\u00fcd, kui teame, kuidas graafikaakna paigutust planeerida, uurime samm-sammult, kuidas selline paigutus ellu viidi.\r\n

    Graafikaakna loomise selgitus ridade kaupa<\/h2>\r\nProovi j\u00e4rgnevat ise kaasa teha ja vaata, kas saad valmis samasguse graafikaakna nagu n\u00e4ites!\r\n\r\nAlustuseks peame importima k\u00f5ik mooduli PySimpleGUI klassid ja funktsioonid.\r\n\r\nimport PySimpleGUI as sg<\/code>\r\n\r\nSeame aknale ka v\u00e4rviteema. Erinevaid teemasid v\u00f5id leida siit.<\/a> Katseta n\u00e4idisprogrammis, milline teema tundub k\u00f5ige paremini sobivat!\r\n\r\nsg.theme('Dark Blue 3')<\/code>\r\n\r\nSeej\u00e4rel paneme paika elemendid, mida aknasse planeerinud oleme. Loome muutuja paigutus<\/code>, milleks on kahem\u00f5\u00f5tmeline j\u00e4rjend. Tuletame meelde, et n\u00e4idisprogrammi aknas on neli rida, seega j\u00e4rjendi sisse peame lisama neli alamj\u00e4rjendit, millest iga\u00fcks t\u00e4histab \u00fchte rida.\r\n
    paigutus = [[...], #1.rida\r\n      [...], #2.rida\r\n      [...], #3.rida\r\n      [...]] #4.rida<\/pre>\r\nEsimeses reas<\/span> on ainult tekstisilt. Seega tuleb ka esimesse alamj\u00e4rjendisse kirjutada ainult sg.Text()<\/strong><\/em>. Sulgudesse sisestame teksti, mida aknas kuvada. Tekst on vaikimisi valget v\u00e4rvi, aga seda saame ka n\u00e4iteks punaseks muuta, kasutades text_color=\u2019red\u2019. <\/em><\/strong>Samuti v\u00f5ib ingliskeelsete v\u00e4rvinimede asemel kasutada ka HEX v\u00e4rvimudelit: text_color=\u2019#ff0000\u2019<\/strong><\/em>. Igasugu erinevaid v\u00e4rve ja nende HEX-koodi saab v\u00f5tta n\u00e4iteks siit<\/a>..\r\n\r\nTeksti stiili ja suurust saab samuti muuta: font=(\u2018fondi nimi\u2019, teksti suurus).<\/strong><\/em>\r\n
    paigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [...],\r\n          [...],\r\n          [...]]<\/pre>\r\nTeises reas<\/span> on aga tekstisisestusv\u00e4li, kuhu kasutaja saab midagi kirjutada - kasutame sg.Input()<\/strong><\/em>. Loome sisestusv\u00e4ljale ka v\u00f5tme \u2018sisestatud_tekst\u2019<\/em>, et hiljem kasutaja sisestatud teksti ka ekraanil kuvada. Atribuut size=(40,1)<\/strong><\/em> m\u00e4\u00e4rab \u00e4ra sisestusv\u00e4lja (v\u00f5i \u00fcksk\u00f5ik, mis teise elemendi) suuruse. Hetkel on selle laiuseks 40 \u00fchikut ja k\u00f5rguseks 1 \u00fchik.\r\n
    paigutus=[[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [sg.Input(key='sisestatud_tekst', size=(40,1))],\r\n          [...],\r\n          [...]]<\/pre>\r\nAkna kolmandas reas<\/span> on kaks nuppu - sg.Submit()<\/strong><\/em>, millele vajutades kuvatakse aknas kasutaja sisestatud tekst, ja sg.Cancel()<\/strong><\/em>, millele vajutades saame akna kinni panna. Sulgude sisse kirjutame teksti, mis me tahame nuppude peal n\u00e4idata. Eraldame need kaks nuppu \u00fcksteisest komaga.\r\n
    paigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [sg.Input(key='sisestatud_tekst\u2019, size=(20,1))],\r\n          [sg.Submit('Tervita!'), sg.Cancel('V\u00e4lju')],\r\n          [...)]]<\/pre>\r\nJ\u00e4\u00e4nud on paika panna veel akna neljas rida<\/span>. Seal on tekstisilt ning kui nupule \u201cTervita!\u201d on vajutatud, siis asendatakse see tekst kasutaja poolt sisestatud tervitusega. Seega m\u00e4\u00e4rame sildile ka v\u00f5tme tekstisilt<\/em>, et seda teksti oleks hiljem lihtne asendada.\r\n
    paigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [sg.Input(key='sisestatud_tekst', size=(40,1))],\r\n          [sg.Submit('Tervita!'), sg.Cancel('V\u00e4lju')],\r\n          [sg.Text('Siia ilmub sinu tervitus!', key='tekstisilt')]]\r\n<\/pre>\r\n \r\n\r\nN\u00fc\u00fcd, kui akna p\u00f5hielemendid on loodud, tuleb luua aken ise koos pealkirja ja meie m\u00e4\u00e4ratud paigutusega. Sulgude sisse (ehk argumentideks) paneme akna pealkirja ja muutuja paigutus<\/code>, mille just l\u00f5ime.\r\n\r\naken = sg.Window('Tervitusprogramm', paigutus, size=(400,200))<\/code>\r\n\r\nSeej\u00e4rel tuleks m\u00f5elda, mis n\u00fc\u00fcd juhtub, kui vajutatakse \u00fchele v\u00f5i teisele nupule. Kuna meie n\u00e4iteprogrammis toimuvad muutused nii, et akent vahepeal kinni ei panda, loome ts\u00fckli. N\u00fc\u00fcd on tagatud see, et seni, kuni kasutaja ise akent ei sulge, kuvatakse graafikaakent ekraanil.\r\n\r\nSisenenud ts\u00fcklisse, salvestame esmalt muutujatesse syndmus<\/code> ning v22rtused<\/code> info, mille saame nupule vajutades v\u00f5i kasutaja k\u00e4est, kasutades meetodit aken.read()<\/strong><\/em>. V\u00e4ljastame need ka kohe ekraanile, et oleks lihtsam j\u00e4lgida.\r\n
    while True:  \r\n    syndmus, v22rtused = aken.read()\r\n    print(syndmus, v22rtused)\r\n      ...\r\naken.close()\r\n<\/pre>\r\nMis on aga syndmus<\/code>? \u00dcldiselt v\u00f5ib s\u00fcndmuseks ehk event-iks olla n\u00e4iteks kas hiirekl\u00f5ps nupul v\u00f5i akna kinnipanek vajutades nurgas asuvat X-i. N\u00e4iteks, kui vajutatakse \u2018V\u00e4lju\u2019 nuppu, saabki muutuja syndmus<\/code>\u00a0enda v\u00e4\u00e4rtuseks \u2018V\u00e4lju\u2019 (ehk siis teksti, mis on nupul). Missugune s\u00fcndmus toimus, saab kontrollida tingimuslausega. R\u00e4\u00e4gime sellest natukene allpool.\r\n\r\nMis on v22rtused<\/code>? Iga sisend, mille kasutaja aknasse sisestab, salvestatakse s\u00f5nastikku v\u00f5i j\u00e4rjendisse, millele panimegi nimeks v22rtused<\/em>. Meie n\u00e4iteprogrammis on \u00fcks tekstisisestusv\u00e4li, mille v\u00f5tmeks m\u00e4\u00e4rasime \u2018sisestatud_tekst\u2019<\/em>. Seega luuakse s\u00f5nastik, kus selle v\u00f5tme v\u00e4\u00e4rtuseks on kasutaja sisestatud tervitus. Nii et\u00a0 kui meie tervituseks on n\u00e4iteks \u2018Tere-tere!\u2019, n\u00e4eb s\u00f5nastik v\u00e4lja selline:\r\n\r\nv22rtused = {'sisestatud_tekst': 'Tere-tere!'}<\/em>\r\n\r\nKui programmis oleks rohkem tegevusi (n\u00e4iteks lisaks tervitusele k\u00fcsitakse ka tervitatava nime), siis oleks s\u00f5nastikus v22rtused<\/code> rohkem v\u00f5ti:v\u00e4\u00e4rtus paare.\r\n\r\nKuid kui me aga v\u00f5tit sisendile ei m\u00e4\u00e4ra, tehakse seda meie eest - luuakse j\u00e4rjend sisenditega. Meie n\u00e4ites saaksime kasutaja sisestatud teksti k\u00e4tte ka nii, kui kasutaksime:\r\n\r\ntervitus = v22rtused[0]<\/code>\r\n\r\nEt kontrollida, milline s\u00fcndmus on just selles programmis ja mida sisestatud v\u00e4\u00e4rtusega teha, kasutame while<\/em>-ts\u00fcklis tingimuslauseid. Kui aken pandi ristist kinni v\u00f5i vajutati \u2018V\u00e4lju\u2019 nuppu, l\u00f5petab ts\u00fckkel oma t\u00f6\u00f6. Graafikaaken pandi ristist kinni, kui s\u00fcndmuseks on sg.WIN_CLOSED<\/em>.\r\n
    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n    break<\/pre>\r\nN\u00fc\u00fcd vaatleme aga juhtu, kui kasutaja sisestas oma tervituse ja vajutas \u2018Tervita!\u2019 nuppu.\u00a0 Esmalt salvestame tervituse muutujasse tervitus<\/code> ning selle aknas kuvamiseks asendame tekstisildil oleva teksti tervitusega - kasutame .update()<\/strong><\/em>. Sulgude sisse saamegi kirjutada tervituslause, mis aknas kuvatakse - .update(\u201cTere, \u201c + tervitus + \u201c!\u201d)<\/em>.\r\n\r\nTeine update<\/em>-lause on vajalik, et p\u00e4rast \u2018Tervita!\u2019 nupule vajutamist tekstikast t\u00fchjendada ja et kasutaja saaks tahtmise korral uue tervituse sinna sisestada.\r\n
    if syndmus == 'Tervita!':\r\n        tervitus = v22rtused['sisestatud_tekst']\r\n        aken['tekstisilt'].update(\"Tere, \" + tervitus + \"!\")\r\n        aken['sisestatud_tekst'].update('')<\/pre>\r\nJa ongi valmis!\r\n\r\nTervikprogramm\u00a0<\/strong>n\u00e4eb seega v\u00e4lja selline:\r\n
    #PySimpleGUI klasside ja funktsioonide importimine\r\nimport PySimpleGUI as sg\r\n\r\n#v\u00e4rviteema\r\nsg.theme('Dark Blue 3')  \r\n\r\n#akna paigutus\r\npaigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=(\"Helvetica\", 12))],\r\n          [sg.Input(key='sisestatud_tekst', size=(40,1))],\r\n          [sg.Submit('Tervita!'), sg.Cancel('V\u00e4lju')],\r\n          [sg.Text('Siia ilmub sinu tervitus!', key='tekstisilt')]]\r\n\r\n#akna loomine\r\naken = sg.Window('Tervitusprogramm', paigutus, size=(400,200))\r\n\r\n#s\u00fcndmuste ts\u00fckkel\r\nwhile True:  \r\n    syndmus, v22rtused = aken.read()\r\n    \r\n    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n            break\r\n    if syndmus == 'Tervita!':\r\n        #muuda elemendil 'tekstisilt' olev tekst hoopis elemendi 'sisestatud_tekst' tekstiks\r\n        tervitus = v22rtused['sisestatud_tekst']\r\n        aken['tekstisilt'].update(\"Tere, \" + tervitus + \"!\")\r\n        aken['sisestatud_tekst'].update('')\r\n\r\naken.close()<\/pre>\r\nN\u00fc\u00fcd oskad planeerida graafikaakna kujundust, kuvada aknas tekste, sisestuskaste ning nuppe. Samuti tead, kuidas k\u00e4tte saada kasutaja poolt sisestatud teksti ning kuidas programm tegutseb vastavalt sellele, millist nuppu vajutati.","rendered":"
    Sissejuhatus<\/h2>\n
    Pythoni k\u00e4surealt andmete k\u00fcsimine ja sisestamine on k\u00fcll tore tegevus, kuid v\u00f5ib programmeerimiskauge inimese natukene \u00e4ra ehmatada. Selleks, et programm oleks arvutis laiemale publikule kasutatav, oleks hea luua programmile mugavamalt kasutatav graafiline kasutajaliides. \u00dcheks kasutajaliidese loomise v\u00f5imaluseks Pythonis on PySimpleGUI. PySimpleGUI paljudest v\u00f5imalustest vaatleme selles \u00f5pikus vaid v\u00e4ikest osa. P\u00f5hjalikumat teavet v\u00f5ib leida ka v\u00e4lismaistest materjalidest nagu n\u00e4iteks lehek\u00fcljelt https:\/\/pysimplegui.readthedocs.io\/<\/a>, millel p\u00f5hineb suurel osal ka k\u00e4esolev \u00f5ppematerjal.<\/p>\n
    PySimpleGUI on Pythoni graafiline kasutajaliidese moodul, mis v\u00f5imaldab kasutajal mugavalt luua Pyphoni graafilise kasutajaliidesega programme. Lisaks PySimpleGUI moodulile on olemas veel mitmeid teisi olemuselt sarnaseid graafikamooduleid nagu EasyGUI, Tkinter, PyGame jne. Neist Tkinterit vaatame ka siin \u00f5pikus.<\/p>\n
    PySimpleGUI kasutamiseks tuleb paigaldada moodul nimega pysimplegui (Thonnys tuleb valida men\u00fc\u00fcs Tools \u2192 Manage Packages\u2026 \u2192 otsida pysimplegui ja kl\u00f5psata \u201cinstall\u201d) ja programmi alguses vastav moodul programmi importida.<\/p>\n
    Esimene graafikaliidese n\u00e4ide<\/h2>\n
    Alustuseks loome programmi, mis loob ja kuvab ekraanile graafikaakna ning kus kasutaja sisestatud tervitust ka kuvatakse selles samas aknas:<\/p>\n
    \"\"<\/p>\n
    Enne, kui hakkame koodi osade kaupa vaatama, uurime, millest tuleks \u00fcldse sellise graafikaakna loomisel alustada.<\/p>\n
    Esmalt tuleks m\u00f5elda, millise kujundusega akent soovime teha. PySimpleGUI-s k\u00e4ib elementide paigutamine aknasse ridade kaupa kahem\u00f5\u00f5tmelise j\u00e4rjendi kaudu, kus iga rea elementidest luuakse alamj\u00e4rjendid, mis lisatakse omakorda \u00fchte suurde j\u00e4rjendisse. N\u00e4iteprogramm on n\u00e4iteks tehtud j\u00e4rgmise joonise p\u00f5hjal:<\/p>\n
    \"\"<\/p>\n
    N\u00e4eme, et elemendid on aknasse paigutatud nelja ritta ning planeeritud elemendid on j\u00e4rgmised:<\/p>\n
      \n
    1. real on tekstisilt.<\/li>\n
    2. real on tekstisisestuskast, kuhu kasutaja saab midagi sisestada.<\/li>\n
    3. real on kaks nuppu – \u201cTervita!\u201d ning \u201cV\u00e4lju\u201d.<\/li>\n
    4. real on tekstisilt, kuhu ilmub kasutaja poolt sisestatud tekstiga tervitus, vajutades nuppu \u201cTervita!\u201d.<\/li>\n<\/ol>\n
      N\u00fc\u00fcd, kui teame, kuidas graafikaakna paigutust planeerida, uurime samm-sammult, kuidas selline paigutus ellu viidi.<\/p>\n
      Graafikaakna loomise selgitus ridade kaupa<\/h2>\n
      Proovi j\u00e4rgnevat ise kaasa teha ja vaata, kas saad valmis samasguse graafikaakna nagu n\u00e4ites!<\/p>\n
      Alustuseks peame importima k\u00f5ik mooduli PySimpleGUI klassid ja funktsioonid.<\/p>\n
      import PySimpleGUI as sg<\/code><\/p>\n
      Seame aknale ka v\u00e4rviteema. Erinevaid teemasid v\u00f5id leida siit.<\/a> Katseta n\u00e4idisprogrammis, milline teema tundub k\u00f5ige paremini sobivat!<\/p>\n
      sg.theme('Dark Blue 3')<\/code><\/p>\n
      Seej\u00e4rel paneme paika elemendid, mida aknasse planeerinud oleme. Loome muutuja paigutus<\/code>, milleks on kahem\u00f5\u00f5tmeline j\u00e4rjend. Tuletame meelde, et n\u00e4idisprogrammi aknas on neli rida, seega j\u00e4rjendi sisse peame lisama neli alamj\u00e4rjendit, millest iga\u00fcks t\u00e4histab \u00fchte rida.<\/p>\n
      paigutus = [[...], #1.rida\r\n      [...], #2.rida\r\n      [...], #3.rida\r\n      [...]] #4.rida<\/pre>\n
      Esimeses reas<\/span> on ainult tekstisilt. Seega tuleb ka esimesse alamj\u00e4rjendisse kirjutada ainult sg.Text()<\/strong><\/em>. Sulgudesse sisestame teksti, mida aknas kuvada. Tekst on vaikimisi valget v\u00e4rvi, aga seda saame ka n\u00e4iteks punaseks muuta, kasutades text_color=\u2019red\u2019. <\/em><\/strong>Samuti v\u00f5ib ingliskeelsete v\u00e4rvinimede asemel kasutada ka HEX v\u00e4rvimudelit: text_color=\u2019#ff0000\u2019<\/strong><\/em>. Igasugu erinevaid v\u00e4rve ja nende HEX-koodi saab v\u00f5tta n\u00e4iteks siit<\/a>..<\/p>\n
      Teksti stiili ja suurust saab samuti muuta: font=(\u2018fondi nimi\u2019, teksti suurus).<\/strong><\/em><\/p>\n
      paigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [...],\r\n          [...],\r\n          [...]]<\/pre>\n
      Teises reas<\/span> on aga tekstisisestusv\u00e4li, kuhu kasutaja saab midagi kirjutada – kasutame sg.Input()<\/strong><\/em>. Loome sisestusv\u00e4ljale ka v\u00f5tme \u2018sisestatud_tekst\u2019<\/em>, et hiljem kasutaja sisestatud teksti ka ekraanil kuvada. Atribuut size=(40,1)<\/strong><\/em> m\u00e4\u00e4rab \u00e4ra sisestusv\u00e4lja (v\u00f5i \u00fcksk\u00f5ik, mis teise elemendi) suuruse. Hetkel on selle laiuseks 40 \u00fchikut ja k\u00f5rguseks 1 \u00fchik.<\/p>\n
      paigutus=[[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [sg.Input(key='sisestatud_tekst', size=(40,1))],\r\n          [...],\r\n          [...]]<\/pre>\n
      Akna kolmandas reas<\/span> on kaks nuppu – sg.Submit()<\/strong><\/em>, millele vajutades kuvatakse aknas kasutaja sisestatud tekst, ja sg.Cancel()<\/strong><\/em>, millele vajutades saame akna kinni panna. Sulgude sisse kirjutame teksti, mis me tahame nuppude peal n\u00e4idata. Eraldame need kaks nuppu \u00fcksteisest komaga.<\/p>\n
      paigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [sg.Input(key='sisestatud_tekst\u2019, size=(20,1))],\r\n          [sg.Submit('Tervita!'), sg.Cancel('V\u00e4lju')],\r\n          [...)]]<\/pre>\n
      J\u00e4\u00e4nud on paika panna veel akna neljas rida<\/span>. Seal on tekstisilt ning kui nupule \u201cTervita!\u201d on vajutatud, siis asendatakse see tekst kasutaja poolt sisestatud tervitusega. Seega m\u00e4\u00e4rame sildile ka v\u00f5tme tekstisilt<\/em>, et seda teksti oleks hiljem lihtne asendada.<\/p>\n
      paigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=('Helvetica', 12))],\r\n          [sg.Input(key='sisestatud_tekst', size=(40,1))],\r\n          [sg.Submit('Tervita!'), sg.Cancel('V\u00e4lju')],\r\n          [sg.Text('Siia ilmub sinu tervitus!', key='tekstisilt')]]\r\n<\/pre>\n
       <\/p>\n
      N\u00fc\u00fcd, kui akna p\u00f5hielemendid on loodud, tuleb luua aken ise koos pealkirja ja meie m\u00e4\u00e4ratud paigutusega. Sulgude sisse (ehk argumentideks) paneme akna pealkirja ja muutuja paigutus<\/code>, mille just l\u00f5ime.<\/p>\n
      aken = sg.Window('Tervitusprogramm', paigutus, size=(400,200))<\/code><\/p>\n
      Seej\u00e4rel tuleks m\u00f5elda, mis n\u00fc\u00fcd juhtub, kui vajutatakse \u00fchele v\u00f5i teisele nupule. Kuna meie n\u00e4iteprogrammis toimuvad muutused nii, et akent vahepeal kinni ei panda, loome ts\u00fckli. N\u00fc\u00fcd on tagatud see, et seni, kuni kasutaja ise akent ei sulge, kuvatakse graafikaakent ekraanil.<\/p>\n
      Sisenenud ts\u00fcklisse, salvestame esmalt muutujatesse syndmus<\/code> ning v22rtused<\/code> info, mille saame nupule vajutades v\u00f5i kasutaja k\u00e4est, kasutades meetodit aken.read()<\/strong><\/em>. V\u00e4ljastame need ka kohe ekraanile, et oleks lihtsam j\u00e4lgida.<\/p>\n
      while True:  \r\n    syndmus, v22rtused = aken.read()\r\n    print(syndmus, v22rtused)\r\n      ...\r\naken.close()\r\n<\/pre>\n
      Mis on aga syndmus<\/code>? \u00dcldiselt v\u00f5ib s\u00fcndmuseks ehk event-iks olla n\u00e4iteks kas hiirekl\u00f5ps nupul v\u00f5i akna kinnipanek vajutades nurgas asuvat X-i. N\u00e4iteks, kui vajutatakse \u2018V\u00e4lju\u2019 nuppu, saabki muutuja syndmus<\/code>\u00a0enda v\u00e4\u00e4rtuseks \u2018V\u00e4lju\u2019 (ehk siis teksti, mis on nupul). Missugune s\u00fcndmus toimus, saab kontrollida tingimuslausega. R\u00e4\u00e4gime sellest natukene allpool.<\/p>\n
      Mis on v22rtused<\/code>? Iga sisend, mille kasutaja aknasse sisestab, salvestatakse s\u00f5nastikku v\u00f5i j\u00e4rjendisse, millele panimegi nimeks v22rtused<\/em>. Meie n\u00e4iteprogrammis on \u00fcks tekstisisestusv\u00e4li, mille v\u00f5tmeks m\u00e4\u00e4rasime \u2018sisestatud_tekst\u2019<\/em>. Seega luuakse s\u00f5nastik, kus selle v\u00f5tme v\u00e4\u00e4rtuseks on kasutaja sisestatud tervitus. Nii et\u00a0 kui meie tervituseks on n\u00e4iteks \u2018Tere-tere!\u2019, n\u00e4eb s\u00f5nastik v\u00e4lja selline:<\/p>\n
      v22rtused = {‘sisestatud_tekst’: ‘Tere-tere!’}<\/em><\/p>\n
      Kui programmis oleks rohkem tegevusi (n\u00e4iteks lisaks tervitusele k\u00fcsitakse ka tervitatava nime), siis oleks s\u00f5nastikus v22rtused<\/code> rohkem v\u00f5ti:v\u00e4\u00e4rtus paare.<\/p>\n
      Kuid kui me aga v\u00f5tit sisendile ei m\u00e4\u00e4ra, tehakse seda meie eest – luuakse j\u00e4rjend sisenditega. Meie n\u00e4ites saaksime kasutaja sisestatud teksti k\u00e4tte ka nii, kui kasutaksime:<\/p>\n
      tervitus = v22rtused[0]<\/code><\/p>\n
      Et kontrollida, milline s\u00fcndmus on just selles programmis ja mida sisestatud v\u00e4\u00e4rtusega teha, kasutame while<\/em>-ts\u00fcklis tingimuslauseid. Kui aken pandi ristist kinni v\u00f5i vajutati \u2018V\u00e4lju\u2019 nuppu, l\u00f5petab ts\u00fckkel oma t\u00f6\u00f6. Graafikaaken pandi ristist kinni, kui s\u00fcndmuseks on sg.WIN_CLOSED<\/em>.<\/p>\n
      if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n    break<\/pre>\n
      N\u00fc\u00fcd vaatleme aga juhtu, kui kasutaja sisestas oma tervituse ja vajutas \u2018Tervita!\u2019 nuppu.\u00a0 Esmalt salvestame tervituse muutujasse tervitus<\/code> ning selle aknas kuvamiseks asendame tekstisildil oleva teksti tervitusega – kasutame .update()<\/strong><\/em>. Sulgude sisse saamegi kirjutada tervituslause, mis aknas kuvatakse – .update(\u201cTere, \u201c + tervitus + \u201c!\u201d)<\/em>.<\/p>\n
      Teine update<\/em>-lause on vajalik, et p\u00e4rast \u2018Tervita!\u2019 nupule vajutamist tekstikast t\u00fchjendada ja et kasutaja saaks tahtmise korral uue tervituse sinna sisestada.<\/p>\n
      if syndmus == 'Tervita!':\r\n        tervitus = v22rtused['sisestatud_tekst']\r\n        aken['tekstisilt'].update(\"Tere, \" + tervitus + \"!\")\r\n        aken['sisestatud_tekst'].update('')<\/pre>\n
      Ja ongi valmis!<\/p>\n
      Tervikprogramm\u00a0<\/strong>n\u00e4eb seega v\u00e4lja selline:<\/p>\n
      #PySimpleGUI klasside ja funktsioonide importimine\r\nimport PySimpleGUI as sg\r\n\r\n#v\u00e4rviteema\r\nsg.theme('Dark Blue 3')  \r\n\r\n#akna paigutus\r\npaigutus = [[sg.Text('Sisesta oma tervitus: ', text_color='white', font=(\"Helvetica\", 12))],\r\n          [sg.Input(key='sisestatud_tekst', size=(40,1))],\r\n          [sg.Submit('Tervita!'), sg.Cancel('V\u00e4lju')],\r\n          [sg.Text('Siia ilmub sinu tervitus!', key='tekstisilt')]]\r\n\r\n#akna loomine\r\naken = sg.Window('Tervitusprogramm', paigutus, size=(400,200))\r\n\r\n#s\u00fcndmuste ts\u00fckkel\r\nwhile True:  \r\n    syndmus, v22rtused = aken.read()\r\n    \r\n    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n            break\r\n    if syndmus == 'Tervita!':\r\n        #muuda elemendil 'tekstisilt' olev tekst hoopis elemendi 'sisestatud_tekst' tekstiks\r\n        tervitus = v22rtused['sisestatud_tekst']\r\n        aken['tekstisilt'].update(\"Tere, \" + tervitus + \"!\")\r\n        aken['sisestatud_tekst'].update('')\r\n\r\naken.close()<\/pre>\n
      N\u00fc\u00fcd oskad planeerida graafikaakna kujundust, kuvada aknas tekste, sisestuskaste ning nuppe. Samuti tead, kuidas k\u00e4tte saada kasutaja poolt sisestatud teksti ning kuidas programm tegutseb vastavalt sellele, millist nuppu vajutati.<\/p>\n","protected":false},"author":17,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-107","chapter","type-chapter","status-publish","hentry"],"part":102,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/107","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":19,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/107\/revisions"}],"predecessor-version":[{"id":776,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/107\/revisions\/776"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/102"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/107\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=107"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=107"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}